SERP Snippet Preview
100% private — runs on your device, never uploaded. Works offline once loaded.
See exactly how your page will look in Google's search results before you publish, with live pixel-width warnings for titles and meta descriptions. Everything is calculated in your browser.
What a SERP snippet is
A SERP snippet is the block Google shows for your page in its search results: a clickable title, a greyed-out URL or breadcrumb path, and a short description. It is the first impression searchers have of your page, and it directly affects your click-through rate. A compelling, correctly-sized snippet can win clicks even from lower positions, while a truncated or vague one wastes a hard-earned ranking.
This tool renders your title, description and URL the way Google's desktop and mobile results pages do, so you can spot problems — truncation, weak wording, a messy URL — before they cost you traffic.
Why pixel width matters more than character count
Most 'meta description length' advice quotes a character limit, but Google actually truncates snippets by how wide they render, not how many characters they contain. Fonts are proportional: a capital 'W' is several times wider than a lowercase 'i'. Two titles of identical character length can render at very different pixel widths, so one fits and the other gets an ellipsis.
This preview measures the real rendered width of your text using the same font sizes Google uses (about 20px for desktop titles and 14px for descriptions) via an off-screen canvas. It then compares that against Google's approximate cut-off points and warns you the moment you go over.
- Title: aim for under ~600px / ~60 characters.
- Description: aim for under ~920px / ~160 characters.
- Front-load the important words — truncation always removes the end.
How to write a snippet that earns clicks
Treat the title as a promise and the description as the pitch. Put your primary keyword near the front of the title so it survives truncation and matches the searcher's query (Google bolds matching terms). Make the description a concise, benefit-led sentence or two that answers the query and includes a subtle call to action.
Avoid keyword stuffing and duplicate boilerplate across pages — Google often rewrites descriptions it finds unhelpful, and duplicate snippets can hurt. Write each one for a human deciding whether to click.
Caveats and limitations
Google does not always use your supplied title and description. It may rewrite the title from on-page headings, pull description text from the body that better matches the query, or add rich elements like ratings, dates, sitelinks and FAQ snippets that change the layout. Different devices, query lengths and SERP features also shift the exact truncation point.
Use this preview as a design guide for your intended snippet, not a pixel-perfect guarantee. The pixel widths are close approximations of Google's rendering, which is enough to keep you safely inside the truncation limits.
Frequently asked questions
Is my title and description data sent anywhere?
No. The preview and all width measurements run entirely in your browser using JavaScript. Nothing you type is uploaded or stored.
What's the ideal meta description length?
Around 150–160 characters, or under roughly 920 pixels. Long enough to describe the page and include your keyword, short enough that Google doesn't trim it mid-sentence.
Why is my title being cut off even though it's under 60 characters?
Because Google truncates by pixel width, not character count. A title with many wide letters can exceed the ~600px limit well before 60 characters. Watch the pixel counter, not just the character counter.
Should every page have a unique title and description?
Yes. Duplicate titles and descriptions confuse both users and search engines. Each page should have a snippet written for its specific content and target query.
Does the mobile preview differ from desktop?
Yes. Mobile results use a narrower container but allow a slightly longer title line before wrapping. This tool shows both so you can check your snippet on each layout.
Do meta descriptions affect rankings?
Not directly — they are not a ranking factor. But a well-written description improves click-through rate, and higher engagement can indirectly support your visibility.
Advertisement