Desktop preview
Approx. 600 px title, 990 px descriptionexample.com
Your title appears here
Your meta description will appear here, wrapped at the desktop budget.
SERP Snippet Preview Tool
Type a page title, meta description and URL, see how Google renders the listing on desktop and mobile side by side. Truncation is measured in pixels, the same way Google does it, not in characters. Runs entirely in your browser.
Explain like I'm 5 (what even is this calculator?)
Search results have a fixed amount of room for the title and a fixed amount of room for the description. Wide letters take more room than narrow ones, so a 60-character title made of capital W's overflows long before a 60-character title made of lowercase i's. This page renders your text in a copy of Google's font, measures the actual width, and warns you when something will get cut off with a "...".
Your snippet
Browser-only. Your draft titles, descriptions and URLs never leave the page. Useful for client work, staging copy, or anything you would rather not paste into a form on someone else's server.
Mobile preview
Approx. 580 px title, 1200 px description over 3 linesexample.com
Your title appears here
Your meta description will appear here, wrapped at the mobile budget.
Prove it
Truncation is calculated by rendered pixel width, not character count. The page measures every string you type with a hidden HTML5 canvas, calling CanvasRenderingContext2D.measureText() in the same font family and size Google's SERP approximates with: Arial 20 px bold for titles, Arial 14 px for descriptions. The figures shown in the meters are the result of that measurement, against the desktop and mobile budgets reported by community testing of Google's current layout.
Why pixel width and not characters? "WW" is roughly four times the width of "ii" in Arial. A 55-character title can fit comfortably or overflow badly depending on which letters you use. Character-count tools warn at the wrong moment for both kinds of string.
The exact figures used:
- Desktop title budget: 600 px (Arial 20 px bold approximation of Google's title font).
- Mobile title budget: 580 px (Arial 20 px bold; mobile wraps differently).
- Desktop description: 990 px across 2 lines (Arial 14 px), about 155 to 160 characters in practice.
- Mobile description: 1200 px across 3 lines (Arial 14 px), about 120 characters per line.
Live measurement of the current title for transparency: 0 px against a budget of 600 px (desktop). What you see in the SERP itself can vary by a small amount because Google sometimes uses Roboto or its own Google Sans rather than Arial, because device DPI and operating system font rendering vary, and because Google A/B tests its layout. Treat the warning as a tight estimate that matches reality far better than character counting, not as a regulator-grade ruler.
Useful? Save this calculator: press Ctrl + D to bookmark it.
Why pixel width is the only honest answer
For years the standard advice on SERP snippets has been to keep titles under 60 characters and descriptions under 160. The trouble is that the SERP does not count characters. It measures rendered width and cuts when the line overflows the available space. A title made of narrow letters can run to 70 characters without truncation; a title made of wide letters can be cut off at 50. Tools that warn purely on character count tell users their fine title is too long and their too-long title is fine. They are coin-flipping.
Pixel-width measurement is straightforward to implement in the browser. A 2D canvas can return the rendered width of any string in any font using measureText(). Render the user's text into a hidden context using a font close to Google's actual SERP font, compare against the budgets Google's current layout uses, and the result reflects what the user will see. No upload, no API call, no library needed.
What the budgets actually represent
The desktop title rendering box on Google currently allows around 600 pixels of width before truncation. That is using a font close to Arial 20 px bold (Google sometimes uses Roboto or its own Google Sans, and sub-pixel rendering varies, so an exact figure does not exist). Mobile is slightly tighter at around 580 pixels because the SERP card width is narrower on phones. Descriptions get more room: about 990 pixels of width across two lines on desktop, and about 1200 pixels across three lines on mobile, in Arial 14 px. These budgets shift as Google redesigns the SERP, but the orders of magnitude have been stable for several years.
Common ways copy gets clipped that no character counter catches
Brand suffixes are the classic. A title like "How to wire a kitchen ring main safely | Big Brand Trades Limited" reads well and sits at 64 characters, so a character counter calls it borderline. In Arial 20 px bold the brand suffix runs into the cutoff and the user sees "How to wire a kitchen ring main safely | Big Bra...". The fix is to put the differentiating phrase first and either shorten the brand or drop it. The pixel preview makes that obvious in seconds.
Capitalised place names and product codes are another. "EXTREME COUNCILLOR ROUNDABOUT REVIEWS" weighs almost twice as much in pixels as a sentence-cased version. Numbers and digits are narrower than letters in most proportional fonts. Special characters like the pipe, ampersand and bullet sit somewhere in the middle. The pixel meter handles all of these without thinking about it.
How to use the tool to write better titles
Start with the keyword phrase the page is targeting and put it at the front of the title. Watch the desktop meter. If the meter is green, add a benefit phrase. If still green, add the brand suffix. If the meter goes red, trim from the brand end first, then from the benefit phrase, never from the keyword. Repeat for the mobile meter, which is slightly tighter. The aim is a title that fits both, with the keyword unambiguously in view.
Descriptions get more room and they are also more often rewritten by Google, so the perfectionism of the title is wasted here. Aim to fill most of the desktop two-line budget with a clear pitch: what the page covers, the angle that makes it different, and a soft call to action. Avoid stuffing repeats of the keyword. Modern Google ignores them and they cost you words you could spend on substance.
When the preview will mislead you
Two situations matter. The first is when Google rewrites the description, which happens for the majority of long-tail queries. The version you wrote shows on direct, short, brand-led queries; on a mid-tail query Google may pick a passage from the page body. A snippet preview cannot show that, by design. The second is rich results: review stars, FAQ accordions, sitelinks, dates and badges all consume vertical space that pushes neighbouring content around. The preview shows the bare snippet without those add-ons. Use Search Console to check live appearance for a high-traffic query before assuming the desktop preview is what users see.
Related calculators
The snippet is the click. These shape, count and forecast it.
Frequently asked questions
Why measure in pixels instead of characters?
Google truncates titles and descriptions by rendered width, not by character count. A title of twelve narrow letters and a title of twelve wide letters are the same character count but very different widths on screen. Tools that warn at 60 characters are wrong for half the strings you give them. This page measures the actual pixel width using the same kind of font Google approximates with, so the warning matches what users will see.
How accurate are the pixel numbers?
Close, but not perfect. The desktop title budget of around 600 pixels and the mobile title budget of around 580 pixels are well-documented community measurements of Google's current SERP layout, taken in Arial 20 pixels (Google sometimes uses Roboto or Google Sans, but Arial is a sound proxy for width). Real rendering varies with device DPI, the user's installed fonts, browser font rendering, and Google's own A/B tests of the layout. Treat the result as a tight estimate, not a ruler.
Why does my title fit on mobile but not desktop?
Mobile and desktop SERPs have different display widths and slightly different fonts. Desktop is the tighter constraint for titles in most cases. Both previews are shown side by side so you can see whether a title that fits one will be cut off on the other. If they disagree, the right answer depends on where most of your traffic is, which Search Console will tell you.
Does Google actually show my meta description?
Sometimes. Google rewrites the description for around 60 to 70 percent of queries based on the page content and the user's intent. The description you write is the version that shows on direct queries and brand searches, and it is what shows when Google decides your text answers the query well. The exercise of writing a description that fits the budget and reads as a useful pitch is still worthwhile because that is what users see when it matters most.
Can I paste in special characters like emoji or em-dashes?
Yes, the tool handles them. Emoji, em-dashes, accented characters and non-ASCII punctuation all measure correctly. Google's renderer does strip or substitute some characters in real listings (for example, certain emoji are stripped from titles depending on the query), so a title that fits here may still be tweaked in the wild.