Meta Tag Generator

What it does

The meta tag generator writes the tags that go inside the <head> of an HTML page: the <title>, meta description, keywords and author, a robots directive, the canonical link, a theme color, the viewport and charset declarations, the full set of Open Graph tags (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) and X / Twitter card tags.

As you type, it shows how the page could look as a search result and as a social card, and it checks the details that commonly go wrong: a title longer than about 60 characters, a description that is missing, too short or longer than about 160 characters, a relative canonical URL, a share image without an absolute URL, or a malformed locale or color. Everything happens in your browser, and the preview deliberately does not load your image, so the page makes no network requests.

How to use

1. Fill in the page details. Title and description are the essentials; the counters show their length against the usual display limits. Click Sample to see a complete example.
2. Enter the canonical URL of the page and a share image. A relative image path such as /images/cover.jpg is resolved against the canonical URL.
3. In the options, pick the Open Graph type (website for most pages, article for blog posts), the card size, whether search engines may index the page and follow its links, and which groups of tags to include.
4. Read the warnings under the HTML, check the previews, then copy the HTML into your page template.

Options are stored in the page address and the form is kept in your browser, so you can come back to it or share a link with the same settings.

Example

The sample page produces tags like these (shortened):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

Values are HTML-escaped, so quotes and ampersands in a title cannot break the markup, and the locale en-US is normalized to the en_US form Open Graph expects.

Tips

• Write a unique title and description for every page; duplicates across a site make results harder to tell apart.
• Put the most important words first in the title, since long titles are cut at the end.
• The canonical URL should be the exact address you want indexed, including the protocol and your preferred www or non-www host.
• Setting robots to noindex keeps a page out of search results, but only if crawlers can still fetch it: do not also block it in robots.txt.