Meta tag + SERP previewer

Why title tag and meta description length matters

Your title tag and meta description are the storefront of every search result. Google renders them in a fixed-width column and cuts off anything that overflows — replacing your carefully chosen ending with an ellipsis. A truncated title can lose the keyword or call-to-action that would have earned the click.

Length is measured in pixels, not characters, because letters are not all the same width. A title of 60 narrow characters can fit where 52 wide ones won't. This previewer renders your text on an HTML canvas in the same Arial sizing Google's SERP uses, so the fit warning reflects what searchers will actually see.

How to write a title tag that earns clicks

Treat the title as ad copy with a length budget. The goal is a listing that is both relevant to the query and more compelling than the nine results around it.

• Front-load the primary keyword so it survives truncation and matches the query.
• Keep the desktop title under roughly 580px — watch the live pixel meter, not a character count.
• Add one concrete hook: a number, a year, a specific outcome.
• Write a unique meta description for every page; never let two pages share one.
• Make the description deliver on the title's promise so the click does not bounce.

How this SERP preview tool works

Everything runs in your browser. As you type, the tool measures your title and description with the Canvas measureText API — the same technique a rendering engine uses to lay out text — and compares the result against Google's desktop and mobile truncation thresholds.

Because there is no server round-trip, the preview updates instantly and your draft titles never leave your machine. The bonus Open Graph card shows how the same page will look when shared on social platforms, so you can tune one set of tags for both search and social.