Learning HTML - Data and Document Metadata
This episode breaks down metadata: meta charset and viewport, descriptions for SEO, Open Graph and Twitter Card for sharing, theme-color, and favicons that make up a complete head.
#Introduction
The head element is the least-visible part of a document, yet it has the most influence on how a page is found and shared. Episode 16 covers data and document metadata: meta for charset and viewport, descriptions for search results, Open Graph and Twitter Card for sharing on social media, and favicons.
Correctly written metadata determines how a page appears in search results, in link previews when shared, and in the browser tab. It's small work with a big impact — and often forgotten by beginner developers.
#Basic Meta Tags
#charset and viewport
Two required meta tags you've known since episode 2:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">charset="UTF-8" sets the character encoding so all letters and symbols are read correctly. viewport makes the page adapt to the device width — without it, a page on a phone appears shrunken.
#Description for Search Results
meta name="description" holds the summary that search engines often display below the title in search results:
<meta name="description" content="Panduan lengkap belajar HTML dari dasar hingga siap produksi.">Write a description of 150 to 160 characters, mention the benefit, and make it click-worthy. Without a description, search engines grab arbitrary text from the page.
#Open Graph and Twitter Card
#Preview When Shared
When a link is shared on social media, the preview — title, image, description — is taken from Open Graph (og:) and Twitter Card (twitter:) metadata:
<meta property="og:title" content="Belajar HTML">
<meta property="og:description" content="Panduan lengkap belajar HTML dari dasar.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://contoh.id/belajar-html">
<meta property="og:image" content="https://contoh.id/poster.png">
<meta name="twitter:card" content="summary_large_image">The property attribute (not name) is used for Open Graph. og:image should be at least 1200 pixels wide so the preview looks sharp.
#Verifying Metadata
Check any page's metadata from the terminal:
curl -s https://contoh.id/belajar-htmlThe command curl -s https://contoh.id/belajar-html displays the whole document including the head block — a quick way to see what meta tags a page sends.
#theme-color and Favicon
#Tab Color on Mobile Devices
meta name="theme-color" sets the browser bar color on some mobile devices:
<meta name="theme-color" content="#2563eb">Pick a color aligned with the page's design. The media attribute can provide different colors for light and dark modes.
#Favicon in the Browser Tab
A favicon is the small icon shown in the tab. Connect it with link rel="icon":
<link rel="icon" href="favicon.ico" sizes="32x32">Also use a modern format: link rel="icon" with an .svg or png file sized 32 pixels. This icon is also used when the page is saved as a shortcut.
#Exercise: A Complete Head
Assemble a complete head for a shareable page:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resep Rendang Sederhana</title>
<meta name="description" content="Resep rendang sederhana yang mudah diikuti di rumah dengan bumbu yang mudah didapat.">
<meta property="og:title" content="Resep Rendang Sederhana">
<meta property="og:description" content="Resep rendang yang bisa dicoba pemula.">
<meta property="og:type" content="article">
<meta property="og:image" content="https://contoh.id/rendang.png">
<meta name="theme-color" content="#7c2d12">
<link rel="icon" href="favicon.ico" sizes="32x32">
</head>
<body>
<h1>Resep Rendang Sederhana</h1>
<p>Ikuti langkah berikut untuk rendang yang empuk.</p>
</body>
</html>Once the page is ready, test its share preview in an Open Graph validator or simply share the link. Also inspect another production page with curl -sI https://contoh.id to compare the headers and metadata they send.
#Common Mistakes and Solutions
#Description Too Long
Search engines truncate long descriptions. Keep it concise, 150 to 160 characters, with keywords near the start.
#og:image Too Small
A preview with a small image looks broken on social media. Use an image at least 1200 pixels wide.
#Closing
Episode 16 completes your document head: meta charset and viewport, description for search results, Open Graph and Twitter Card for sharing, theme-color, and the favicon.
Key takeaways:
charsetandviewportare required on every page.- A concise description increases clicks from search results.
- Open Graph and Twitter Card control link previews when shared.
theme-coloradjusts the browser bar color on mobile.- The favicon is connected via
link rel="icon".
In the next episode, episode 17, we'll cover advanced forms and browser validation — built-in validation attributes like required and pattern, modern input types, and the Constraint Validation API via JavaScript.