The document head: metadata, favicons and social cards

Encoding, viewport, titles, canonical URLs, icons, Open Graph cards and structured data — the machine-facing half of every page.

Metadata the browser always needs

Nothing inside <head> paints on the page, yet almost all of it changes how the page is indexed, shared and displayed. The browser reads it before any content exists, so mistakes here stay invisible until something downstream breaks.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Debugging CSS with DevTools — CodeLore</title>
  <meta name="description" content="A repeatable method for finding broken layout in the browser, from computed styles to overflow hunting.">
  <link rel="canonical" href="https://example.com/learn/css-debugging/">
  <meta name="robots" content="index, follow">
</head>

Tag	What it does	Rule of thumb
`<meta charset>`	Declares the character encoding	First element in head; use `utf-8`
`<meta name="viewport">`	Sets the layout width on mobile	Required before any responsive CSS behaves
`<title>`	Tab label and search result headline	Unique per page; front-load the topic
`<meta name="description">`	Suggested search snippet	Roughly 150 characters, written for humans
`<link rel="canonical">`	Preferred URL when duplicates exist	Absolute URL, exactly one per page
`<meta name="robots">`	Index and follow instructions	Omit unless you need to opt out

💡

The title is the one head element users actually read — in the tab, in history, in search results. Duplicated titles across a site are the most common metadata mistake, and the easiest to fix with a template.

Favicons and app icons

A favicon is the tiny image in the browser tab, but the same family of icons is used for bookmarks, home-screen shortcuts and OS task switchers. One SVG plus one large PNG covers almost every modern case.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">

An SVG favicon scales cleanly and can respond to prefers-color-scheme from inside the file.
The 180x180 PNG is what iOS uses when someone adds the site to their home screen.
Root-relative paths avoid surprises when pages live at different depths, but keep filenames stable — browsers cache icons aggressively.
theme-color tints the browser chrome on mobile; add media="(prefers-color-scheme: dark)" for a second value.

When a link is pasted into a chat app or social network, a crawler fetches the page and reads Open Graph tags to build the preview. Without them the service guesses, and it usually picks the wrong image and a stray heading.

<meta property="og:type" content="article">
<meta property="og:title" content="Debugging CSS with DevTools">
<meta property="og:description" content="Find broken layout in minutes instead of guessing.">
<meta property="og:image" content="https://example.com/img/css-debug-cover.png">
<meta property="og:url" content="https://example.com/learn/css-debugging/">
<meta name="twitter:card" content="summary_large_image">

og:image must be an absolute URL: a crawler has no page context with which to resolve a relative path. Aim for 1200x630 and keep the file small.

Structured data goes one step further and describes the page in a machine-readable vocabulary, which search engines use for rich results such as course listings and breadcrumbs. The format is JSON inside a script element of type application/ld+json.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "CSS debugging essentials",
  "description": "A repeatable method for finding broken layout.",
  "provider": { "@type": "Organization", "name": "CodeLore" }
}
</script>

FAQ

Do meta keywords still matter?

No. Search engines stopped using them long ago, and their presence is sometimes read as a low-quality signal. Put the effort into the title and description instead.

Why does the link preview still show an old image?

Crawlers cache previews for days. Check that og:image is absolute, then re-scrape the URL with the platform's own debugger, or simply wait for the cache to expire.

HTML validation, templating and frameworks Accessibility foundations in markup

Last refreshed 2026-09-18.

The document head: metadata, favicons and social cards

Metadata the browser always needs

Favicons and app icons

Social cards and structured data

FAQ

Related