LLM Best Practices

HTML: Head Tags

4 min read

View markdown source

Overview

The <head> is the document’s contract with browsers, crawlers, and link previewers. Missing or mis-ordered tags cause search ranking loss, broken social cards, layout shift on mobile, and unstyled tabs. This page lists the required elements in the order they should appear, with the rationale for each.

Place charset and viewport before anything else

<meta charset="utf-8"> must appear within the first 1024 bytes. The browser needs the encoding declaration before it can parse the rest of the document. If it comes late, the browser may have already guessed wrong and rendered garbage.

<meta name="viewport" content="width=device-width, initial-scale=1"> must follow immediately. It tells mobile browsers to render at the device’s physical width rather than a 980 px desktop viewport. Without it, text is tiny, tap targets miss, and Lighthouse CLS checks fail.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- remaining tags below -->
</head>

Title is the most important on-page SEO signal

Write a unique <title> for every page. The format “Specific Page Name - Site Name” works for most sites. Keep it under 60 characters so search results do not truncate it. The title appears in the browser tab, bookmark names, and search result headlines.

Avoid keyword stuffing. One accurate noun phrase outperforms three stacked modifiers.

Description sets the search result snippet

The meta description does not affect ranking directly, but it controls the text Google shows under your title when Google does not find a better excerpt. Write one sentence, 140 to 160 characters, that lets a reader decide whether to click.

<title>HTML Head Tags - LLM Best Practices</title>
<meta name="description" content="Required head tags in the right order: charset, viewport, title, description, canonical, OG, Twitter, theme-color, and favicon." />

Canonical prevents duplicate-content penalties

Set <link rel="canonical" href="https://example.com/this-page"> on every page. It tells search engines which URL is the authoritative version when the same content is reachable from multiple paths (HTTP vs HTTPS, trailing slash vs not, pagination, UTM parameters). See html-links-rel for the full rel reference.

Open Graph and Twitter Card tags control social previews

Add OG tags on any page that might be shared. They control the card displayed when a URL is pasted into Slack, X, LinkedIn, iMessage, or any Open Graph consumer.

<meta property="og:type" content="article" />
<meta property="og:title" content="HTML Head Tags" />
<meta property="og:description" content="Required head tags in order." />
<meta property="og:url" content="https://example.com/frontend/html-head-tags" />
<meta property="og:image" content="https://example.com/og/html-head-tags.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="HTML Head Tags" />
<meta name="twitter:description" content="Required head tags in order." />
<meta name="twitter:image" content="https://example.com/og/html-head-tags.png" />

og:image should be at least 1200x630 px. X reads og: tags as fallbacks when Twitter Card tags are absent, so you can omit Twitter-only duplicates for title and description if they match the OG values exactly.

theme-color tints the browser chrome on mobile

<meta name="theme-color" content="#0f172a" />

Chrome on Android and Safari on iOS 15 and later use this value to tint the browser toolbar to match the page. One tag, small brand lift. Pair it with a separate media attribute to support light and dark.

Favicon covers all surfaces with three tags

One <link> for SVG (modern browsers), one PNG fallback, and one Apple Touch Icon cover every real case:

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon.png" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />

The SVG icon is the right long-term solution; it scales cleanly and supports prefers-color-scheme via CSS inside the SVG.

Common omissions

  • Missing canonical on paginated pages, causing every page in a series to compete with page 1.
  • Missing og:image, leaving a blank card on Slack and iMessage.
  • <title> on the home page set to “Home” instead of the site name.
  • Duplicate <meta name="description"> tags (CMS defaults plus hand-written).
  • charset declared after a render-blocking stylesheet.

For structured data (<script type="application/ld+json">), see structured-data. For performance-related head tags (preload, preconnect, dns-prefetch), see html-links-rel. Framework-specific head management for Next.js is in nextjs-metadata-api.

Graph View

Backlinks