Meta Tag Generator

The <head> of a page carries three overlapping sets of metadata — the basic tags search engines read, Open Graph for social sharing, and Twitter Cards — and they duplicate most of the same information in three slightly different spellings. The generator above fills all three from one set of fields.

How it works

Fill in the fields you have; every one is optional, and empty fields are omitted rather than emitted blank. The output is a ready-to-paste block grouped into four sections:

Basic — <title>, <meta name="description">, a robots directive built from the index/follow toggles, and <link rel="canonical"> from the page URL.

Open Graph — og:type (always website), plus og:title, og:description, og:url, og:site_name and og:image for whichever fields you filled.

Twitter — twitter:card, which is set to summary_large_image automatically when you supply an image and summary when you do not, plus twitter:site, twitter:title, twitter:description and twitter:image. A handle entered without a leading @ gets one added.

Misc — theme-color, which tints the browser chrome on mobile.

All attribute values are HTML-escaped, so an ampersand or a quotation mark in your title produces valid markup rather than a broken tag. Nothing is sent anywhere; the generation happens entirely in your browser.

Getting the content right

Title: roughly 50–60 characters. Search results truncate beyond that, and the truncation happens at pixel width rather than a character count, so a title in capitals is cut shorter. Put the distinguishing words first, the site name last.

Description: roughly 150–160 characters. It is not a ranking factor, but it is the sales copy in the result — write it for a human deciding whether to click. Google frequently ignores it and generates its own snippet from the page; that is normal and not a defect.

Canonical URL: absolute, and self-referencing. A page should declare itself canonical unless it genuinely is a duplicate of another URL. Relative canonicals are legal but a reliable source of mistakes; use the full https:// form.

Image: absolute URL, and big enough. Open Graph images should be at least 1200×630 for the large-card treatment. A relative path will not resolve when a remote crawler fetches the page, and an image behind authentication will not render at all.

Robots: noindex is a strong instruction. The toggles emit index, follow or noindex, nofollow. Setting noindex on a page that is already ranking removes it, and the tag must remain crawlable for the instruction to be seen — blocking the page in robots.txt at the same time prevents the crawler from ever reading the noindex.

Where to put it

These tags belong in the <head> of the rendered HTML, before any content. If your pages are generated by a framework, use the framework's metadata API rather than pasting raw tags into a template: the tags then travel with the route, get the right values per page, and cannot drift out of sync with the content. This tool is most useful for a static page, a landing page outside your app, or for checking that the block your framework produces contains everything it should.

The structural rules for the document head — what may appear there, and why <title> is required — are covered in HTML5 essentials. If the page is served by a server-rendered view layer, Spring MVC shows where the template that owns the head sits in the request path.

Related tools

To see how the result will actually look when the link is shared, paste the generated block into the Open Graph preview, which parses the tags back out and renders a card mock-up. To tidy the surrounding markup, use the HTML formatter.