SERP and Social Preview

What this tool does

It renders four previews from the tags you paste: a desktop Google result, a mobile Google result, a LinkedIn card and an X card. Each one truncates the way the real surface does at that width, so you can see where the cut lands instead of counting characters and hoping.

It also measures your title in pixels. That matters because Google cuts titles by pixel width, not character count. A 55-character title made of wide letters gets cut where a 62-character title of narrow ones survives, which is why character counters disagree with what you see in the results.

How to use it

1. Paste the page URL, site name, title tag and meta description. The previews update as you type. Site name sits with the core fields rather than under Open Graph because Google names og:site_name as one of its signals for the site name on a result, so it shows on both surfaces. Treat it as a suggestion: WebSite structured data outranks it, and Google picks the final wording itself.
2. Leave the Open Graph fields empty first. That shows you what a page with no social tags looks like in a feed, which is what most pages actually ship as.
3. Fill og:title, og:description and og:image to see the difference. A card with an image takes several times the feed space of a bare text card.
4. Read the warnings panel. It flags the title overflow, a missing or non-absolute og:image, and descriptions short enough that Google is likely to write its own instead.

Two things a preview cannot tell you. Google rewrites meta descriptions more often than it uses them, so treat the description as a request rather than a setting. And both LinkedIn and X cache the first version of a card they fetch, so fixing a tag does not fix a link someone already shared — you have to ask the platform to re-scrape the URL.

How it works

Everything runs in your browser. The title measurement uses the canvas text API at 20px Arial, which is what a desktop result renders at, and compares it against roughly 580 pixels of available width. That figure is an observed limit, not one Google publishes, so the preview treats it as a guide rather than a rule.

The previews themselves do not apply a character limit at all. Each sits in a container the width of the real surface and lets the browser truncate, which is the same mechanism that cuts the live result.

Titles and descriptions are one part of Technical SEO Foundations, and the page they describe still has to load fast enough to earn the click that snippet wins.