Meta tag generator

What is a meta tag generator?

It takes the handful of things a search result and a social share card need — a title, a description, a URL, an image — and writes the tags that carry them: the title element, the meta description, the Open Graph properties Facebook and LinkedIn read, and the Twitter card names. Copy the block into the head of your page and you are done.

This one also previews the result and measures it. Everything runs in your browser; nothing is uploaded and there is no account.

The measurement is the part worth explaining, because almost every other tool of this kind measures the wrong thing.

How to use the meta tag generator

1. Fill in the fields. Title, description, URL, site name and share image. Pick the content type and the Twitter card style. Empty fields are simply left out — a tag with an empty value is worse than no tag.
2. Drag the preview width. The preview redraws and the panel tells you whether your title fits or gets cut at that width. There is no single correct setting, which is exactly the point.
3. Copy the tags. The block is generated with every value escaped for an HTML attribute, so an ampersand in your title or a quotation mark in your description cannot break the markup.

The 60-character rule is measuring the wrong quantity

The advice is everywhere: keep your title under 60 characters and your description under 155. It is worth asking where those numbers come from, because Google's own documentation says something different. On the page describing how title links are generated, Google writes that the title link is truncated in search results as needed, “typically to fit the device width”. Device width. Not a character count, and not one fixed pixel budget either — a phone and a wide monitor cut in different places, so no single number can be right for both.

The same page is worth reading for a second reason. It lists the sources Google draws a title link from: the title element, the main visual title, heading elements, the og:title tag, other large and prominent text, and even anchor text in links pointing at the page from other sites. Your title element is one input among several. Tuning it to a character count treats it as a guaranteed output, and it is not one.

So what is a character count worth as a proxy for width? We measured. Sixty characters of Arial at 20 pixels is 267 pixels if they are all lowercase l, and 1,133 pixels if they are all capital W — a factor of 4.2. That is not an approximation with some error attached; it is a different quantity that happens to correlate.

On real text the correlation is better but still loose. Across 1,193 real page titles in five languages — this site's own, measured out of the built HTML — the number of characters that fits inside a fixed budget ranged from 47 to 72. The “60 characters” rule is right on average and wrong by up to a fifth for any particular title. And the disagreement between the two rules depends entirely on which pixel budget you assume: they disagree on 16.7% of those titles at 512 pixels, 5.0% at 580 and 7.2% at 600. The most interesting number there is the middle one. The character rule looks best near 580 pixels because that is where sixty characters of average prose happens to land — which makes it a coincidence calibrated to one guess about a budget nobody publishes, rather than a rule.

This tool therefore does not tell you a limit. It measures your title with your own browser's text engine, shows the width in pixels, and lets you move the preview width yourself to see where your title falls. If you want a target, aim to have the meaning survive the cut rather than to hit a number.

Honest limitations

The preview is an approximation of a search result, not a simulation of one. Google's layout changes, results carry sitelinks, dates, breadcrumbs and badges that shift the space available, and mobile and desktop differ. Treat the width slider as a way to see how much slack your title has, not as a prediction.

Nobody outside Google knows the budget, and the sources that quote one disagree with each other by more than 17% — 512, 580 and 600 pixels are all in circulation, as are 18px and 20px for the font size. This page picks Arial at 20 pixels for the title because that is the most commonly reported combination, and says plainly that it is a report rather than a specification.

Measuring is done with the browser's canvas rather than a bundled table of character widths, and that choice matters more than it sounds. A table cannot apply kerning, and for a cursive script it is not merely imprecise but wrong: Arabic letters join and change shape depending on their neighbours, so a rendered run is narrower than the sum of its isolated letters. Our own measurement script has exactly that flaw, which is why its Arabic figures overstate the width — and why the tool you are using does not work that way.

The character count here counts what you would call characters, using grapheme segmentation. That is not what most counters do. A rocket emoji is one character but two units to JavaScript's String.length; a family emoji made of four people joined by zero-width joiners is one character and eleven units; an accented letter written as a base plus a combining mark is one character and two units. If your title contains any of those, a counter built the usual way is reporting a number that counts nothing a reader can see, and this tool shows you both.

Finally, the tags are generated but not validated against a live crawler. Whether your share image is reachable, the right aspect ratio, or blocked by a robots rule is something only a fetch can tell you, and fetching your URL would mean a server — which this site does not use for anything but a text model.

Why is it free?

Writing a dozen lines of markup and measuring some text is work your own machine does in a millisecond. There is no upload, no account, and nothing to watermark.

If you want to check the HTML you paste it into rather than generate it, the HTML entity encoder and the HTML formatter on this site handle that side, also without uploading anything.