Google SERP Snippet Preview

See how your title and meta description may look in Google results. Measures pixel width with the canvas API and truncates like Google at about 600 px.

Page title 0 / 600 px · 81 characters

Page URL

Meta description 0 / 920 px · 155 characters

https://example.com › blog › cold-brew-coffee

How to Make Cold Brew Coffee at Home: A Complete Step-by-Step Guide for Beginners

Learn how to make smooth, low-acid cold brew coffee at home with just two ingredients. Our guide covers ratios, steeping times, equipment and storage tips.

Google truncates by pixel width, not character count. Widths are measured in your browser with the canvas API using Arial (20 px title, 14 px description), close to Google’s desktop results. Google may also rewrite the title or pick a different snippet.

What is SERP Preview?

The SERP preview renders a Google-style search result from your page title, URL and meta description. Instead of counting characters, it measures the real pixel width of the text and cuts it off with " ..." where Google's desktop results would, so you can see whether important words remain visible.

How to use SERP Preview

Enter the page title; the pixel width and character count are shown next to the label.
Enter the page URL to see the breadcrumb-style display URL.
Enter the meta description.
Check the preview and the warnings about truncated title or description.

Example

Input

How to Make Cold Brew Coffee at Home: A Complete Step-by-Step Guide for Beginners (81 characters)

Output

The title measures about 780 px, wider than 600 px, so it is shown cut off with " ..." after the last whole word that fits.

When to use SERP Preview

Use it when writing titles and descriptions to keep the key message within the visible part. Google often rewrites titles and chooses its own snippet text, and mobile results use different widths, so treat the preview as a guide rather than a guarantee.

How SERP Preview works

Text width is measured in your browser with CanvasRenderingContext2D.measureText() using Arial – 20 px for the title and 14 px for the description, matching Google's desktop typography. If the title exceeds 600 px (description: 920 px, about two lines), the longest prefix that fits together with " ..." is found by binary search and cut back to a word boundary when one is close. The URL is shown as host › path segments.

Common Use Cases

Shorten a product title until the brand name is no longer cut off.
Check that wide characters (W, M, capital letters) do not push the title past the limit.
Preview meta descriptions for a set of landing pages.
Show a client how their result will roughly look.

FAQs

Why pixels instead of characters?

Google truncates by width. 60 narrow characters (i, l) fit easily, while 50 wide ones (W, M) may not.

Will Google always show my title?

No. Google may rewrite titles that are too long, stuffed with keywords or don't match the page, and often picks description text from the page content.