SERP Snippet Preview
Preview how your title tag and meta description look in Google results, measured in pixels like Google truncates them, with desktop and mobile views and warnings.
The interactive tool loads here when JavaScript runs.
About this toolWhat is the SERP Snippet Preview?
Type a page title, meta description and URL to see a mock Google result as you write. Two meters show how wide each line is in pixels against the space Google gives it on desktop, and the preview cuts the text with an ellipsis where Google is likely to cut it, at a word boundary.
Pixel width matters more than character count. A title full of capitals, Ws and Ms is far wider than one of lowercase is and ls, so a 55-character title can be cut while a 65-character one fits. The tool measures with the real font metrics of Arial, the font Google uses for result titles and descriptions, at 20 px for titles and 14 px for descriptions.
A mobile tab shows the same snippet in a narrow card, and warnings flag titles that are too long, too short or shouting, and descriptions short enough that Google tends to ignore them. Copy the finished title and meta tags as HTML.
- Pixel width meters for title and description
- Arial metrics at 20 px and 14 px, measured with canvas
- Word-boundary truncation with an ellipsis
- Desktop and mobile previews with breadcrumb URL
- Warnings for long, short and all-caps snippets
- Copy the HTML title and meta description tags
How to use the SERP Snippet Preview
- Type or paste the title tag. Watch the title meter; red means it is likely to be cut.
- Write the meta description. Aim to fill most of the meter and put the key message in the first line.
- Enter the page URL and your site name to see the breadcrumb line.
- Switch between Desktop and Mobile to check both layouts.
- Read the warnings, then copy the HTML title and meta description tags.
Worked examples
Same length, different width
Input
Title A: 60 characters of ordinary lowercase text; Title B: 60 capital letters
Output
A measures about 545 px and fits; B needs about 800 px and is cut
Average lowercase letters in Arial are around 0.5 em wide while capitals are about 0.67 em, and W is 0.94 em.
Front-loading a long title
Input
Pomodoro Timer: 25/5 Focus Timer With Tasks and Long Breaks
Output
Fits on desktop at about 577 px
The main query comes first, so even if a later redesign cuts the end, the important words survive.
Short description
Input
Description of 40 characters
Output
Warning: Google often replaces short descriptions
A description that does not describe the page in a sentence or two gives Google little reason to use it.
Background and insight
Google calls the clickable headline of a result its title link. Its documentation says there is no limit on how long a title element can be, but title links are truncated to fit the device width. On desktop that space is about 600 px of 20 px Arial; the commonly used figure for descriptions is about 920 px of 14 px Arial, spread over two lines. Google does not publish these numbers. They are measurements of the current layout that change when results are restyled, so treat the meters as a guide and aim to put the important words first.
Google may also rewrite titles and descriptions. Since an update in August 2021 it more often builds title links from the page's main heading, other headings or anchor text when the title element is missing, stuffed with keywords, too long, or the same on many pages. Meta descriptions are used when they describe the page better than text Google could extract; otherwise the snippet comes from the page body, especially for queries the description does not cover.
The measuring uses canvas text metrics in your browser with Arial (or a metric-compatible font such as Liberation Sans) and falls back to the published Helvetica/Arial advance widths when canvas is not available. The truncation removes the last partial word and adds an ellipsis, the way current results look. Because Google may change fonts, sizes or column widths at any time, the safest titles are clear and front-loaded rather than tuned to the last pixel.
Common use cases
Writing titles for new pages
Draft and trim titles before publishing so they show in full.
Rewriting underperforming snippets
Test new wording for pages with low click-through in Search Console.
Client and stakeholder reviews
Show what a result will look like instead of sending a spreadsheet of characters.
Template checks
Check that a CMS title pattern with the site name appended still fits.
Tips and limitations
- Put the words people search for at the start of the title and keep the brand name short or at the end.
- Every page needs its own title and description. Duplicates across a site are a common reason for Google to rewrite them.
- Do not chase the last pixel. Leave a little room so small layout changes do not cut your title.
- A description is a summary, not a keyword list. Describe what the page offers and why someone should click.
- Pixel limits here are approximations of Google's current layout; Bing and other engines use different widths.
Frequently asked questions
How many pixels wide can a title be before Google truncates it?
Google truncates by width, not characters. On desktop about 600 px of 20 px Arial is visible, which is usually 55 to 60 characters of ordinary mixed-case text. Wide letters and capitals use the space faster.
How many pixels of meta description does Google show on desktop?
Google sets no fixed limit and cuts snippets to fit the device. About 920 px on desktop, roughly 140 to 150 characters of ordinary text, is a common target. Put the key point first in case it is shortened.
Why is my title different in Google from my title tag?
Google may rewrite title links when the title is missing, too long, stuffed with keywords or repeated across pages. It then uses headings or other text from the page.
Why measure in pixels instead of characters?
Because letters have different widths. i is about a quarter as wide as W, so two titles with the same character count can differ by hundreds of pixels.
Is the mobile preview exact?
No. Phones vary in width and font, so the mobile tab is an approximation that wraps the title to two lines and the description to about three.
Does this tool fetch my live page?
No. It previews what you type and runs entirely in your browser. Use a meta tag checker to read the tags from a live URL.
Is there an in-depth guide to the SERP Snippet Preview?
Yes. “Title Tag and Meta Description Length: Pixels, Not Characters” covers the background, how it works, common pitfalls and worked examples. Read the full guide.
People also search for
- title tag length in pixels google
- meta description length 2026
- why is my title cut off in google
- google serp snippet preview mobile
- how many characters before google truncates title
- does google rewrite title tags
- meta description too short warning
- preview google search result before publishing
Related Tools You May Like
Free, in-browser tools that pair well with this one.