Meta tag generator (SEO and Open Graph)

Which meta tags does a page need?

Every ordinary HTML page needs exactly one <title> element in its head; the HTML Standard requires it. After that come a meta description, which Google sometimes uses for the snippet, a rel="canonical" link naming the page's preferred URL, and Open Graph tags for link previews. Open Graph lists four required properties: og:title, og:type, og:image and og:url.

This generator measures the title in pixels with the Arial 20 px width table our own SEO audit uses, exactly as you type it, with nothing appended. If your template adds a brand such as " | Example Store" after every title, type it in so the measurement is the real one. The budgets, a title of at most 600 px and a description of 120 to 160 characters, are our house rules: Google sets no length limit for either and truncates both as needed to fit the device width.

Google asks for absolute URLs in rel="canonical": it supports relative paths but says they can cause problems in the long run, and the link only counts inside <head>. Google also prefers HTTPS pages over HTTP ones as canonical. A normal page needs no robots tag: Google says the default values are index, follow and don't need to be specified, so our framework leaves the tag out and adds noindex only to keep a page out of results.

Open Graph says a page with og:image should also give og:image:alt, a description of what is in the image. Meta recommends images of at least 1200 × 630 px for the best display on high-resolution devices, a ratio close to 1.91:1 so the whole image shows, and files no larger than 8 MB. The twitter:* tags repeat the same title, description and image; X's card documentation could not be retrieved when we checked, so this page makes no claim about how X reads them.

Every value is escaped before it is written: & becomes &amp;, < becomes &lt;, > becomes &gt; and, inside attribute values, " becomes &quot;. A double-quoted attribute can't contain a literal quotation mark, and browsers turn the entities back into the original characters.

<title>…</title>                          ← escaped text
<meta name="description" content="…" />
<link rel="canonical" href="https://…" />
<meta property="og:…" content="…" />       ← Open Graph uses property=
<meta name="twitter:…" content="…" />

escaping: & → &amp;   < → &lt;   > → &gt;   " → &quot;