SERP Snippet Preview
See how a title and meta description are likely to appear in Google on desktop and mobile, measured in pixels rather than characters.
Enable JavaScript to preview your own snippet; the examples below use the defaults.
Google measures pixels, not characters, so capitals and wide letters cost more.
Google shows a breadcrumb built from the path, not the raw URL.
Desktop 580px title budget
·
Mobile 500px title budget
·
See roughly how a title and meta description will appear in Google, on desktop and on mobile, measured the way Google measures: in pixels.
How to use
- Paste the real title and description, not a summary of them. The point is to see where they get cut.
- Watch the desktop and mobile previews together. Mobile has a tighter title budget and a longer description one, so a title that fits on a laptop can be cut on a phone.
- Put the useful part first. Whatever is beyond the cut still counts for relevance, but nobody reads it.
- Check the breadcrumb. Google builds it from the URL path, so a long slug full of stop words shows up here as clutter.
- Treat the result as an estimate. Google rewrites titles and descriptions often, and no preview tool can predict that.
Example
The same title, both layouts:
Desktop (580px): How to migrate a WordPress site without downtime, step by …
Mobile (500px): How to migrate a WordPress site without …Nothing changed but the budget. This is why character counts mislead: “WWW” and “iii” are the same three characters and nowhere near the same width.
Pitfalls
- Character counts are a poor proxy. Capitals,
W,Mand@are wide;i,land punctuation are narrow. Two 60 character titles can differ by 80 pixels. - Google rewrites the displayed title for a majority of results, pulling from the
h1or the link text. Your tag is a strong suggestion, not a guarantee. - The description is rewritten even more often, usually to a passage matching the query. It is worth writing well anyway: that is what is shown when nothing better matches.
- Pixel budgets are not published and move. The figures here match what Google has used consistently, but they are observed, not documented.
- The preview ignores what a real result may add: sitelinks, dates, ratings, favicons and an ad label all change the space.
- A date prefix in the description eats budget on mobile, where the layout is narrowest.
- The breadcrumb comes from the URL structure, so a flat site shows just the host and a deep one shows several levels.
- Emoji usually do not survive into the title, and when they do they are wider than they look here.
Compatibility
The measurement approximates Arial at the sizes Google renders at: 20px desktop titles, 18px mobile, 14px descriptions. It is deliberately conservative near the limit. The tool runs entirely in your browser: nothing you type is sent anywhere, which matters when the page you are working on is not live yet.
Frequently asked questions
How long should a title be?
Why does Google show a different title from mine?
h1. A clear, non-keyword-stuffed title is rewritten less.