Meta essentials

Set these on every page:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title — Brand</title>
<meta name="description" content="1–2 sentences, ~50–160 chars.">
<link rel="canonical" href="https://example.com/path">
Tip: Keep <title> under ~60–65 characters and make the first 40 punchy; search results may truncate.

Open Graph (Facebook/LinkedIn)

Ensures rich previews when your link is shared.

<meta property="og:type" content="article">
<meta property="og:title" content="Post Title — Brand">
<meta property="og:description" content="Compelling one‑liner for social previews.">
<meta property="og:url" content="https://example.com/post">
<meta property="og:image" content="https://example.com/og/slug-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Accessible description of the image">

For home pages or hubs, use og:type website. For product pages, include product info if your platform supports it.

Twitter Cards

summary_large_image is the go‑to for blog posts and landing pages.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Post Title — Brand">
<meta name="twitter:description" content="Same as or shorter than OG description.">
<meta name="twitter:image" content="https://example.com/og/slug-1200x630.jpg">
<meta name="twitter:image:alt" content="Accessible description">
<meta name="twitter:site" content="@brand"> <!-- optional -->

Indexing & robots

Control crawling and snippets.

<meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large">
<!-- For pages you DON'T want indexed: -->
<meta name="robots" content="noindex,follow">
Common mistake: Leaving noindex on production after staging. Add a CI check!

Favicons, PWA & theme color

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0b0e11">

SVG favicons look sharp on all DPIs; include a PNG fallback and an Apple touch icon.

Canonical, hreflang & friends

<link rel="canonical" href="https://example.com/path">
<!-- Language/region variants: -->
<link rel="alternate" href="https://example.com/path" hreflang="x-default">
<link rel="alternate" href="https://example.com/en-gb/path" hreflang="en-GB">
<link rel="alternate" href="https://example.com/en-us/path" hreflang="en-US">

Make sure every language version references all others (a complete hreflang cluster) and that each has a self‑canonical.

Social image guidance

  • Use 1200×630 (1.91:1) for OG/Twitter large; keep under ~5MB (JPEG/PNG).
  • Put the subject left/centre so cropped previews stay readable on mobile.
  • Set og:image:alt / twitter:image:alt for accessibility.
  • Host on HTTPS and avoid querystring signatures that expire quickly.

Copy‑paste templates

Minimal blog post head

<title>Post Title — Brand</title>
<meta name="description" content="50–160 characters.">
<link rel="canonical" href="https://example.com/post">
<meta property="og:type" content="article">
<meta property="og:title" content="Post Title — Brand">
<meta property="og:description" content="One‑liner.">
<meta property="og:url" content="https://example.com/post">
<meta property="og:image" content="https://example.com/og/slug-1200x630.jpg">
<meta name="twitter:card" content="summary_large_image">

Deluxe (OG + Twitter + JSON‑LD Article)

<title>Post Title — Brand</title>
<meta name="description" content="Short, compelling summary.">
<link rel="canonical" href="https://example.com/post">
<meta property="og:type" content="article">
<meta property="og:title" content="Post Title — Brand">
<meta property="og:description" content="Social preview blurb.">
<meta property="og:url" content="https://example.com/post">
<meta property="og:image" content="https://example.com/og/slug-1200x630.jpg">
<meta property="og:image:alt" content="Accessible description">
<meta property="og:site_name" content="Brand">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@brand">
<script type="application/ld+json">{
  "@context":"https://schema.org",
  "@type":"Article",
  "headline":"Post Title — Brand",
  "datePublished":"2025-10-20",
  "dateModified":"2025-10-20",
  "author":{"@type":"Person","name":"Author Name"},
  "image":["https://example.com/og/slug-1200x630.jpg"],
  "mainEntityOfPage":{"@type":"WebPage","@id":"https://example.com/post"}
}</script>

Home page / landing (og:type website)

<meta property="og:type" content="website">
<meta property="og:title" content="Brand — What you do">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/og/home-1200x630.jpg">

Pre‑publish checklist

  • Unique title and description on every page.
  • Correct canonical URL (no staging domains).
  • Public pages: robots allows indexing; private pages: noindex.
  • OG/Twitter image is accessible, HTTPS, correct dimensions, and has :alt text.
  • Test previews: Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector.