Skip to content
GreenSnippets

Essential head tags for SEO and sharing

The meta, canonical, Open Graph and icon tags every public page should have.

HTML
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title – Site name</title>
  <meta name="description" content="One or two sentences describing the page.">
  <link rel="canonical" href="https://example.com/page">

  <meta property="og:type" content="website">
  <meta property="og:title" content="Page title">
  <meta property="og:description" content="One or two sentences describing the page.">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:image" content="https://example.com/og-image.png">
  <meta name="twitter:card" content="summary_large_image">

  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
</head>
<body></body>
</html>

Example / expected output

Output
<!-- Verify previews with the sharing debugger of each platform. -->

How it works

The viewport tag makes pages responsive, the canonical link prevents duplicate-content issues, and Open Graph tags control link previews on social networks and chat apps. Keep titles under about 60 characters and descriptions under about 160. Use absolute URLs for og:url and og:image.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets

  • Python Tested

    Slugify a string

    Turn text into a lowercase, hyphenated, ASCII-only slug using only the standard library.

  • JavaScript Tested

    Slugify a string for URLs

    Convert any title into a lowercase, hyphenated, accent-free slug that is safe to use in a URL.