Document Metadata

Shipped pages need a unique title, a short description, social preview tags, a favicon, and a canonical URL — not only visible landmarks.

Minimum <head> checklist

  1. Unique <title> that names the page and brand.
  2. <meta name="description"> — one or two sentences for search snippets.
  3. <link rel="canonical"> — the preferred URL when duplicates or query variants exist.
  4. <link rel="icon"> — SVG or PNG favicon so tabs are identifiable.
  5. Open Graph (og:title, og:description, og:image, og:url, og:type) and a Twitter/X card for link previews.

View this page’s source to see a complete worked example. URLs here use example.com placeholders.

Consistent help

When a site offers help (docs link, contact, chat), keep that mechanism in the same relative order across pages (WCAG 2.2 SC 3.2.6). This footer help link is the pattern.

Important markup

<title>Harbor Notes — Document Metadata</title>
<meta name="description" content="…">
<link rel="canonical" href="https://example.com/harbor-notes/">
<link rel="icon" href="/favicon.svg">
<meta property="og:title" content="Harbor Notes">
<meta property="og:description" content="…">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:url" content="https://example.com/harbor-notes/">
<meta property="og:type" content="website">