Meta tag generator

Writing these by hand is where inconsistencies creep in: an og:title that drifted from the page title, a twitter:card set to summary while a large image is supplied, a canonical missing entirely. Generating them together keeps them in step.

Two of the fields are worth a note. The canonical must be an absolute URL and should be self-referential on a normal page, and omitting it entirely is safer than getting it wrong, since one pointing at the wrong page removes yours from the index. And a robots directive of index, follow is already the default behaviour, so writing it out achieves nothing; the tag is only worth including when you want noindex or nofollow.

Open Graph, and the one twitter: tag that matters

On the social side, X falls back to Open Graph for title, description and image, so duplicating those in twitter: tags is maintenance you can avoid and another place for two copies to drift apart. The exception is twitter:card itself: without it the default is the small summary card, which is far less prominent in a timeline than the large-image one. That is why it is emitted here automatically and set from whether an image is present, since summary_large_image with no image produces a broken card.

The combined block deliberately stops at twitter:site, because everything past it is card-specific: twitter:creator names the author’s account rather than the site’s, twitter:image:alt is the card’s alt text, and the card type is worth setting by hand when the automatic choice is not what you want. Those live in the X card block behind the switcher, which is the whole set of twitter: tags and nothing else — use it when you want that byline or that alt text, and the combined block otherwise. One tag genuinely is not generated anywhere here: og:image:alt, the Open Graph counterpart of the card’s alt text and a structured property of og:image. Write that one next to the image tag yourself. Card validation moved behind a login some years ago, so the practical test for any of it is posting the link from a private account and looking at it.

Language versions are a block of their own

They are the second thing this page builds, and the reason they are a separate block rather than more fields on the first one is the rule that breaks most setups. rel="alternate" hreflang tags have to be reciprocal: every page in the set lists every other page and itself, and the block is identical everywhere, or search engines discard the whole cluster and not just the one broken link. So it is a property of the set, not of a page — you list every version once, including the one you are on, and paste the identical lines into all of them. That is what the self-reference amounts to, and it is why there is nothing to adjust per page. The codes are ISO 639-1 for language then ISO 3166-1 alpha-2 for region, in that order, so en-GB and never en-uk, since the United Kingdom code is gb; a region on its own is never valid. x-default covers visitors whose language matches none of the versions. None of it replaces the canonical: each language version still needs one pointing at itself and not at another language, which is the first block on this page and not this one.