Skip to the tool
OnPageKit

SERP Snippet Preview

See the Google result before you publish it, measured in pixels.

what the <title> tag says
meta name=description
the canonical address

Widths are estimated from the advance widths of Arial at 20px and 14px, which is the closest a page can get without a rendering engine. Treat a result within a few per cent of the limit as a coin toss.

Title px
0
Title used
0%
Desc px
0
Desc used
0%

Desktop result

example.com › path

Your title goes here

Your description goes here, cut where Google would cut it.

Title0px of 600px · 0 characters
Description0px of 920px · 0 characters

Phone result

example.com › path

Your title goes here

Your description goes here, cut where Google would cut it.

Title0px of 920px · 0 characters
Description0px of 1080px · 0 characters
  • No title. Without one the SERP falls back to whatever heading or anchor text Google can find on the page, and you have handed over the only line a searcher reads before deciding.
  • No meta description. Google will assemble one from the body copy around the query, which is often fine and never yours to control.
  • No address given, so there is no breadcrumb to preview. Google stopped printing the raw URL in 2020 and shows the domain plus the path segments instead.

Everything runs in your browser. Nothing you type is sent to a server.

Found a bug in this tool? Report it.

Share this tool

What this SERP snippet preview does

Paste a title, a meta description and the page address, and this SERP snippet preview draws the Google result twice: once at desktop width and once as a phone shows it. Each field is measured in pixels against the budget that device really has, the address becomes the breadcrumb trail Google prints in place of a URL, and the text is cut at the word where it would actually stop.

Pixels are the unit, characters are the folklore

Search results are text laid out in a proportional typeface. Google draws the blue link at around 20px and the grey description at around 14px, and every glyph in those lines has its own advance width. A capital W occupies 944 units of a 1000-unit em; a lowercase l occupies 222. So a title of sixty capitals is a completely different object from a title of sixty lowercase letters, and the famous sixty-character limit describes only the middle of that range.

The practical budgets are about 600px for the desktop title and about 920px for the two-line desktop description. A phone is narrower, which makes people assume it is stricter — it is not. Mobile results wrap over more lines, so the total text that survives is larger, not smaller. If a line has to be sacrificed somewhere, sacrifice it on the phone and write to the desktop number.

This tool estimates width from published Arial advance widths rather than from a hidden canvas element, so the numbers are identical in the test suite and in your browser. What it cannot model is kerning between specific letter pairs, the substitute font a device picks for an emoji or a non-Latin script, and the fact that Google does not use Arial everywhere. Near the limit, treat the verdict as a probability rather than a fact.

Your title is a strong suggestion

Since 2021, Google replaces the title it displays whenever the tag looks unsuited to the query. It prefers your tag most of the time, and the exceptions are predictable: repeated keywords, a template that produces the same line on a thousand pages, shouting in capitals, or a tag shorter and vaguer than the H1 sitting under it. The replacement is drawn from the H1, from anchor text, or from the site name glued to the heading.

Descriptions are rewritten far more often than titles, and that is not a failure. Google assembles a passage around the words someone typed, which frequently serves the searcher better than a sentence written months earlier. Write the description for the query you most want, accept that long-tail visitors will see something else, and never leave it empty in the hope of getting lucky.

Dates, breadcrumbs and the rest of the line

Two more elements share the space. The breadcrumb replaced the raw URL in 2020: Google shows the domain without www. followed by path segments, which is why a long, readable slug now reads as part of the result rather than as noise. And a date prefix appears on anything Google treats as time sensitive, silently taking around 95px off the description before your first word is drawn.

Once the wording holds up here, the meta tag generator writes the tags, the meta tag analyzer confirms what a page already ships, and the SEO word counter covers the body copy the snippet is promising.

Frequently asked questions

Why measure a title in pixels rather than counting characters?

Because the browser draws glyphs, not characters. In Arial at 20px the letter W is more than four times the width of the letter l, so 'Willow Wallpaper Warehouse' and 'Illinois Tile Institute' differ by roughly 90px despite ending up within a letter of each other. A 60-character rule of thumb is really a rule about average English word shapes, and it fails precisely on the titles people worry about: brand names in capitals, prices, dimensions and anything with a lot of narrow letters.

Will Google display exactly what this preview shows?

No, and nothing outside Google can promise that. Two things stand in the way. The measurement here is an estimate built from Arial advance widths, so it ignores kerning pairs and any font substitution your visitor's device performs. And the result itself is generated per query: Google may substitute a different title, rewrite the description from body copy, add a date, a rating, sitelinks or a favicon that shifts the layout. Treat anything within about five per cent of the limit as a coin toss.

Why does Google rewrite my title?

Google has swapped titles since 2021 whenever the tag looks unhelpful for the query it just matched. The recurring triggers are a title stuffed with repeated keywords, a title that is nothing but a boilerplate template, a title in full capitals, and a title so short it says less than the H1 on the same page. When it swaps, the replacement usually comes from the H1, from anchor text pointing at the page, or from the site name plus the H1. Writing a title that reads like a sentence a person would say out loud is most of the defence.

Where does the date in front of the description come from?

Google adds it by itself when it decides the page is time sensitive, drawing on the date in the URL, in the visible byline, in structured data and in the last substantial change to the content. There is no meta tag that forces it on or off. What you can control is the cost: the prefix and its dash take about 95px out of a 920px desktop budget, which is roughly a dozen characters of description gone. Switch the date on in this tool if your pages usually get one, and write to the smaller number.

Does the preview change anything on my site?

Nothing at all. This page renders a mock-up in your browser from what you type; it writes no tags, contacts no server and stores no draft. When you have settled on wording, the meta tag generator turns it into the actual markup to paste into the head of the page.

Related tools

Updated