Meta Tag Preview

Check whether your title and description survive truncation before the page ships.

Runs on your deviceWeb & SEOWorkingNo account needed

What this tool does

Meta Tag Preview measures a title tag and meta description the way a results page cuts them: by width, not by character count. Every character is scored against Arial advance widths — 20 px for the title, 14 px for the snippet — totalled, and compared with the space a result actually gets. When the text overruns, the cut drops back to the last word boundary and an ellipsis is appended — unless the part-word already inside the budget runs to about fifteen characters, in which case the cut stays inside the word rather than throwing that much width away.

Three input forms are accepted. Type the title, description and address on three plain lines; label them Title:, Description: and URL:; or paste the page's own HTML, in which case the tag, the meta description and the rel=canonical link are read out of it, falling back to og:title, og:description and og:url, and then to the twitter: equivalents, when the standard tags are missing. A robots meta declaring noindex is called out, because a page that will not appear in results has no snippet to improve. The optional brand suffix is appended before measuring — and skipped when the title already contains it — so you see what the suffix costs rather than forgetting it is there.

The limit worth knowing first is that nothing here fetches anything. A lone line beginning http:// or https:// is filed as the address, so the title and description come back empty; strip the scheme and that same text is measured as if you had meant it for a title, since nothing can be looked up to tell the two apart. You supply the markup, and the parsing and measurement then happen in this browser tab, with no page content sent anywhere. What comes back is a model of a search result, not a screenshot of one: Google renders in its own font stack, rewrites a substantial share of titles from the page's headings or the links pointing at it, and decorates real results with favicons, dates, sitelinks and review stars that this card does not draw. Use the pixel figures as a budget to write inside, not as a promise about a particular result.

How to use it

  1. Paste the title and description. Three plain lines work, or label them Title:, Description: and URL:, or paste the page's HTML head and the tags are pulled out of it.
  2. Choose desktop or mobile. Desktop allows roughly 580 px of title and 920 px of snippet. Mobile titles wrap to two lines, so the budgets rise to 920 px and 1300 px.
  3. Add a brand suffix if the site uses one. It is joined to the title with a pipe before anything is measured, and skipped when the title already carries the brand, so the count matches what ships.
  4. Read the measurements, then take the tags. A table gives characters, pixels, the limit and whether each element fits, followed by what to fix and, unless you switch it off, the tags ready to paste into the head.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Writing a title that is not cut in half

Draft it here first and watch where the ellipsis lands, so the distinguishing words sit before the cut rather than after it.

Auditing a page that is already live

View source, copy the head, paste it in — title, description, canonical and robots are read from the same markup the crawler sees.

Deciding whether the brand belongs in the title

Measure the title with and without the suffix. On a long product name the brand often costs more width than the recognition is worth.

Checking a template before launch

Paste the longest title a category or product page will generate and confirm that the worst case still fits the desktop budget.

Questions

Can I give it a URL instead of the text?
No. Nothing here retrieves pages. A single line that starts http:// or https:// is taken as the address and leaves the title and description blank, while the same line without the scheme is treated as a title and measured as one. Open the page, copy its HTML head, and paste that.
Why measure pixels rather than characters?
Because results are cut at a width. Sixty characters of i, l and t occupy less than half the width of sixty capitals, so a flat 60-character rule passes titles that still truncate and rejects ones that would have fitted.
Will Google display exactly this?
No, and no preview can. Titles are frequently rewritten from the page's own headings or from anchor text elsewhere, the real font stack is not Arial everywhere, and favicons, dates, sitelinks and rich results are omitted here. The width budget is the part that transfers.
Is my page content uploaded?
No. Parsing and measurement both happen in this browser tab, so an unpublished title or a staging page's markup does not leave your machine.
How are emoji and CJK characters counted?
Arial carries no advance width for them, so they are estimated. Chinese, Japanese and Korean characters, and emoji from U+1F000 upward, are charged a full em; the arrows, dingbats and check marks below that range are charged 0.8 em; and a variation selector or zero-width joiner trailing an emoji is counted as an ordinary character on top, which makes multi-part sequences such as a flag or a family read wider than they render. Treat those rows as rough.
Where does the grey line above the title come from?
It is built from the URL you supply: the hostname with www stripped, then up to three path segments joined by the arrow separator. Give no URL and it falls back to the placeholder example.com. Search engines often replace that line with a breadcrumb taken from structured data, so read it as a stand-in.
What about the Facebook or LinkedIn card?
Those use different tags at different sizes. Open Graph Preview and Social Card Preview deal with link unfurls; this tool is only the search result.

Related tools