Head metadata and SEO

Missing head tags are why sites look tiny on phones, show ugly link previews or rank poorly.

Beyond charset and title, a few head tags belong on every page.

<meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to use the device width. Without it, phones render the page at about 980px wide and shrink it, so text is unreadable and media queries don't fire as expected.
<meta name="description" content="..."> is the snippet search engines often show under your title. Write one sentence per page.
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> sets the tab icon; add <link rel="apple-touch-icon"> for home screens.
<link rel="canonical" href="https://example.com/page"> names the preferred URL when the same content is reachable at several URLs.
<link rel="stylesheet" href="/styles.css"> loads CSS. Stylesheets in the head block rendering, which is what you want for the main CSS.

Open Graph tags (og:title, og:description, og:image, og:url) control the preview card when someone shares the link in chat apps and social networks; twitter:card refines it on X.

<meta name="robots" content="noindex"> keeps a page out of search results. <meta name="theme-color"> tints browser UI on mobile. Note that <meta name="keywords"> has been ignored by major search engines for years, so don't bother.

Example

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pricing · Acme</title>
  <meta name="description" content="Simple pricing for teams of any size. Start free.">
  <link rel="canonical" href="https://acme.example/pricing">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="/css/site.css">

  <!-- link previews in chat apps and social networks -->
  <meta property="og:title" content="Acme pricing">
  <meta property="og:description" content="Start free, upgrade when you grow.">
  <meta property="og:image" content="https://acme.example/og/pricing.png">
  <meta property="og:url" content="https://acme.example/pricing">
  <meta name="theme-color" content="#0f172a">
</head>

Remember

The viewport meta is mandatory for mobile-friendly pages
Write a unique title and description per page
canonical picks one URL for duplicate content
Open Graph tags control link previews

Watch out for

Forgetting the viewport meta and then fighting media queries that never seem to apply on phones.

Check yourself

A page looks zoomed-out and tiny on phones although it has media queries. What's the most likely cause?

Official docs: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta

Example

Remember

Watch out for

Check yourself

Builds on

Unlocks