Metadata

Learn how to configure a page's <head> metadata — character encoding, viewport, description, author, robots directives, theme color, social sharing metadata, and favicons — so the page behaves correctly and presents well everywhere it's shared.

Nothing inside <head> is visible on the rendered page, yet it quietly controls how your page is interpreted, indexed, and displayed — from which characters render correctly, to how the page looks when someone pastes your link into Slack. This lesson walks through the metadata every production page should have.

Character encoding: the very first tag

<meta charset="UTF-8"> should be the first element inside <head>, before anything else — including <title>. It tells the browser how to interpret the bytes of the HTML file into characters. UTF-8 supports virtually every character and emoji in every language, which is why it's the near-universal standard today.

Without a correct charset declaration (or with it placed too late, after the browser has already started reading other content), you risk 'mojibake' — garbled text where accented letters, curly quotes, or non-Latin scripts render as broken symbols like ’ instead of ’.

The viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0"> tells mobile browsers to render the page at the device's actual width instead of a default desktop-width canvas (often 980px) that gets shrunk to fit. Without it, your responsive CSS media queries won't work correctly — the phone will render a tiny, zoomed-out desktop layout.

width=device-width matches the CSS pixel width to the device; initial-scale=1.0 sets the starting zoom level so nothing is pre-zoomed in or out.

Description, author, and robots

<meta name="description" content="..."> is a one- to two-sentence summary of the page. Search engines frequently display it directly as the snippet text under your page's link in search results, so it should be a concise, accurate, human-written summary — not keyword stuffing.

<meta name="author" content="..."> credits the page or content's author. It's informational metadata, mostly used by CMSs and some tools, with no direct SEO ranking effect.

<meta name="robots" content="..."> gives crawler directives. Common values include index,follow (default: index this page, follow its links), noindex (don't show this page in search results), and nofollow (don't pass link credit through this page's links). It's commonly used to keep staging environments or duplicate pages out of search results.

Theme color and social sharing metadata

<meta name="theme-color" content="#1e3a8a"> suggests a color that mobile browsers can use to tint UI chrome around your page — the browser's address bar or a PWA's title bar — for a more native, branded feel.

When a link is shared on social platforms or messaging apps, those platforms build a preview card by reading special metadata: Open Graph tags (og:title, og:description, og:image, prefixed 'og:') originally from Facebook but now a broad standard, and Twitter Card tags (twitter:card, twitter:title, twitter:image) for X/Twitter. Without these tags, a shared link often falls back to a generic or missing preview image.

Favicons

The small icon shown in a browser tab, bookmark list, or mobile home screen shortcut is called a favicon, and it's declared with <link rel="icon" href="...">, not a <meta> tag. Modern sites often include several sizes/formats for different contexts (browser tab, iOS home screen icon, Android).

A well-configured <head>

charset must be declared first, within the first 1024 bytes of the document. title is technically required and should still appear even alongside a description.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SampleApp — Learn to Build</title>
  <meta name="description" content="Learn programming and engineering fundamentals with hands-on lessons and practice tools.">
  <meta name="author" content="SampleApp Team">
  <meta name="robots" content="index, follow">
  <meta name="theme-color" content="#0f172a">
  <link rel="icon" href="/favicon.ico">
</head>

Code Examples

Open Graph tags use the property attribute (not name); Twitter Card tags use name. Providing both means the shared link renders a rich preview card on Facebook, LinkedIn, Slack, Discord, and X/Twitter alike.

Common mistake: A common error is using name instead of property for og: tags — some parsers tolerate it, but the spec-correct attribute for Open Graph is property.

Placed on a staging site, an internal admin page, or a duplicate print-friendly version of a page, this tells well-behaved crawlers not to index the page or follow its links — though it's a request, not a security measure; sensitive pages still need real access control.

<meta property="og:title" content="Learn HTML From Scratch — SampleApp">
<meta property="og:description" content="A complete, hands-on course covering HTML from basics to advanced topics.">
<meta property="og:image" content="https://example.com/og/html-course.png">
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Learn HTML From Scratch — SampleApp">
<meta name="twitter:image" content="https://example.com/og/html-course.png">

<meta name="robots" content="noindex, nofollow">

Important Rules

<meta charset="UTF-8"> must be the very first tag inside <head>.

Always include the viewport meta tag for any page that should render correctly on mobile.

Keep the meta description to roughly 150-160 characters — search engines truncate longer text.

Favicons are declared with <link rel="icon">, not a meta tag.

robots directives are advisory to well-behaved crawlers, not an access-control mechanism — never rely on noindex alone to keep something private.

In practice

Paste any well-built site's URL into Slack, iMessage, or X and you'll see a title, description, and image appear automatically — that card is rendered entirely from Open Graph and Twitter Card metadata sitting invisibly in <head>. Marketing teams treat og:image as seriously as the page's actual hero image, because a missing or generic preview measurably hurts click-through rates when links are shared.

<title>My Page</title> <meta charset="UTF-8"> <meta charset="UTF-8"> <title>My Page</title> charset must come first so the browser knows how to decode every subsequent byte in the document, including the title text itself.

<meta content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

Without the name="viewport" attribute, the browser has no idea what this meta tag is meant to configure, and it's silently ignored.

[Multiple Choice] A marketing team reports that when their page's link is pasted into a Slack channel, no preview image appears — even though the page displays a large hero image visually and has a valid <meta name="description">. What is the most likely cause? A. Slack only generates previews for pages that use <meta name="robots" content="index, follow">. B. The page is missing an og:image Open Graph meta tag, which social/chat platforms read specifically to build preview cards — a regular meta description and visible hero image aren't used for this. C. The viewport meta tag is missing, which prevents any preview generation. D. The favicon link is missing, which Slack requires before it will render any preview at all.

B. The page is missing an og:image Open Graph meta tag, which social/chat platforms read specifically to build preview cards — a regular meta description and visible hero image aren't used for this. — Chat and social platforms build link previews from Open Graph tags like og:image and og:title, not from the page's regular meta description or its visually rendered hero image. Without og:image specifically, most platforms show no image or a generic placeholder.

Add a complete metadata block to a blank HTML page for a fictional recipe site: charset, viewport, a 150-character description, an author tag, a theme-color, and Open Graph title/description/image tags.

Combine the 'well-configured <head>' syntax block with the Open Graph example above, swapping in recipe-site content.

Write the human-facing description first, then reuse similar wording for og:description so the two stay consistent.