SERP Snippet Preview
See your Google result on desktop and mobile, cut in pixels. Runs in your browser.
About this serp snippet preview
This SERP snippet preview shows how your title and meta description will look in a Google result on desktop and mobile, and tells you exactly where each one gets cut. It measures text in pixels with your browser's own font engine, so it works for anyone writing titles: SEOs, editors, shop owners and developers.
Type a title and description and the preview updates as you go. Add the search query and matching words turn bold, the way Google highlights them. Got a whole crawl export? Bulk mode measures thousands of rows at once.
Everything runs on your device. Nothing is fetched or uploaded, so you can test titles for pages that aren't live yet. When you're happy with the result, the meta tag generator writes the rest of your head tags.
Features
Pixel widths, not character counts
Each word is measured with canvas text metrics in Arial, the font Google uses for results. A title of 55 capital letters can be cut while a 70-character title in lowercase still fits, and the meters show that.
Desktop and mobile side by side
Pick Desktop, Mobile or Both. Desktop titles get one line of about 600 px. Mobile titles wrap over two lines in a narrow column, and the cut lands on the second line. A small table shows the pixels used on each device.
Bold query words measured in bold
Enter what people search and those words turn bold in the preview. Bold text is wider, so a title that fits in plain text can tip over the limit once Google highlights it. This tool measures the bold version.
Date, breadcrumb, stars and price
Show a date before the snippet, replace the URL line with your own breadcrumb trail, and add a rating, review count or price. The date counts against the description's width, just like in a real result.
Bulk check from a spreadsheet
Paste two columns (title and description) straight from a sheet or a crawler export. You get the pixel width and a cut or fits verdict for desktop and mobile on every row, and a CSV to download.
Limits you can change
Google doesn't publish its cut-off widths, and layouts shift. Font size, width and line count for each of the four boxes are editable, with a reset to the defaults most testers observe.
How to use the serp snippet preview
- 1Type your title, meta description and page URL.
- 2Add the search query, a date or a rating and switch between desktop and mobile.
- 3Fix anything marked as cut, then copy the tags or check a whole list in Bulk mode.
When to use it
Writing a headline that survives
Draft three title versions and watch the meter. Keep the one that puts your main keyword in the first 40 percent of the width, so even a cut leaves the important part visible.
Auditing titles after a site crawl
Export page titles and meta descriptions from your crawler, paste them into bulk mode and sort the CSV by width. You'll see the 30 pages that need work in a minute.
Planning a product listing with stars
Add the rating and price to see the full product result. Then mark up the page with the schema markup generator so Google can actually show those stars.
How long can a Google title be?
On desktop, Google shows about 600 pixels of title at 20 px Arial. That's around 50 to 60 characters of mixed text, but the real count swings a lot. "Wild swimming spots in Wales" is narrow. "WHOLESALE MMA GLOVES" is wide. In Arial a capital W is about four times as wide as a lowercase i, which is why character counters get it wrong.
When a title is too wide, Google cuts it at a word boundary and adds an ellipsis. Put the words people search for near the start and your brand at the end. If something has to go, it should be the brand.
Google also rewrites titles it thinks don't describe the page well: very short ones, ones stuffed with keywords, or ones that repeat the same boilerplate across the site. The preview shows what your own tag produces. It can't promise Google will use it.
How long should a meta description be?
Desktop results show roughly 920 pixels of description at 14 px, which works out to about 150 to 160 characters. Mobile is tighter, near 680 pixels, so around 120 characters are safe on every device. A date in front of the snippet uses about 90 of those pixels.
The description isn't a ranking factor, but it is your pitch. Lead with the benefit and include the query term naturally, because a bolded match catches the eye. If you leave the description empty, Google picks a passage from the page, which can be a cookie banner or a navigation label.
How the pixel measuring works
The tool splits your text into words and measures each one with the browser's canvas measureText, in regular or bold Arial at the size set for that box. It then lays the words out line by line. When the text needs more lines than the box allows, it keeps as many whole words as fit, adds " ..." and drops a trailing separator such as | or a hyphen first.
The default boxes are estimates from observed results, not numbers Google publishes:
- Desktop title: 20 px Arial, 600 px, 1 line
- Desktop description: 14 px Arial, 920 px in total
- Mobile title: 18 px Arial, 330 px column, 2 lines
- Mobile description: 14 px Arial, 680 px in total
Why does my live result look different?
There are three usual reasons. Google may have rewritten the title or picked a different snippet to match the search. Your page may show rich features, such as sitelinks or FAQs from another source. Or the font differs: on a Linux machine without Arial, the browser measures with a substitute and widths move by a few percent.
If Google keeps replacing your title, look for a mismatch between the title and the page's main heading, and for site-wide text like "Home | Brand | Brand" that repeats on every page.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Measures | Pixels, per word, bold included | Characters, or pixels for the title only |
| Devices | Desktop and mobile together | Desktop only, or one at a time |
| Bulk checking | Thousands of rows, CSV out | One snippet at a time |
| Limits | Editable, with stated defaults | Fixed and unexplained |
| Date and rating | Included in the width | Decoration only, or missing |
| Privacy | Runs in your browser | Often sends your text to a server |
Tips
- Aim for about 90 percent of the width. A little slack covers bolded query words and font differences.
- Front-load the keyword. On mobile, the first line of the title is what people read first.
- Use a pipe or a hyphen before the brand, not both. Separators eat pixels too.
- Write one description per page. Duplicate descriptions are a common reason Google writes its own.
- Check your copy length with the word and character counter first if you write in a document, then fine-tune here in pixels.
- After the snippet, make sure the page itself delivers on it. The keyword density checker shows whether the body actually covers the topic.
Questions
How many characters does Google show in a title?
Usually 50 to 60 characters on desktop, because the real limit is about 600 pixels, not a character count. Narrow letters fit more, capitals and W's fit fewer. Measure in pixels to be sure.
What is the pixel limit for a meta description?
About 920 pixels on desktop and around 680 pixels on mobile, at 14 px Arial. That's roughly 150 to 160 characters on desktop. Google doesn't publish these numbers, so the tool lets you change them.
Why does Google cut my title even though it's under 60 characters?
Because it's too wide in pixels. Capital letters, W, M and bolded query words take more room. A 55-character title in capitals can pass 600 pixels. The meter shows the real width.
Does Google always use my title tag?
No. Google rewrites a share of titles to better match the page or the search, often adding the site name or using the main heading. A clear, specific title that matches your H1 is rewritten less often.
Is the mobile limit different from desktop?
Yes. Mobile titles wrap onto two lines in a narrow column, so they often show more words than desktop, while mobile descriptions show fewer. Use Both to check the two layouts at once.
Can I check many titles at once?
Yes. Switch to Bulk check and paste a title column and a description column from a spreadsheet or crawler export. You get pixel widths and cut or fits for each row, and a CSV download.
How do I get star ratings in my search result?
Add valid review or product structured data to the page. The stars in this preview are only a mock-up. Google shows them when the markup is correct and the ratings come from real users.
Is my text sent anywhere?
No. All measuring happens in your browser with the canvas API. The tool makes no network requests, so drafts for unpublished pages stay on your device.