Meta Tag Generator

What tags are written

A page needs a title, a description, a canonical URL, Open Graph tags and an X card. This page writes those tags and counts the title and the description.

How to use it

1. Fill Title and Description. The count sits beside each field and updates as you type.
2. Canonical URL, Image URL, Image alt, Site name, og:type, og:locale, X card and X site are optional. og:type starts as website. X card starts as summary_large_image.
3. Convert refreshes the tags. Show Example sets the title to Ada Lovelace notes, the description to Short notes on the analytical engine, with a portrait and a canonical page, the canonical URL and og image to https://example.com/ada and https://example.com/ada.jpg, the alt to Portrait of Ada, the site to Example, og:type to article, og:locale to en_US, the card to summary_large_image and the X site to @example.
4. That result includes a title element, name="description", rel="canonical", og:title, og:description, og:url, og:image, og:image:alt, og:site_name, og:type content="article", og:locale content="en_US", twitter:card content="summary_large_image", twitter:title, twitter:description, twitter:image and twitter:site content="@example".
5. Clear All empties the fields, sets og:type back to website and the card back to summary_large_image. Copy Result copies the tags.

Counts and empty fields

The title count and the description count are always shown. Past 60 characters the title line warns. Past 160 characters the description line warns. The tags are still written.

An empty optional field is left out. Quotes in the text are escaped. og:type is website or article. The X card value is summary or summary_large_image.

Where people use it

• Drafting the head tags for an article.
• Seeing that a title has passed 60 characters before publishing.
• Switching the card between summary and summary_large_image.

Questions