🖥️ SERP & snippet preview

SERP Snippet Preview

Type your page title, meta description and URL to see a live, pixel-accurate preview of your Google result snippet on desktop and mobile, with truncation warnings before they cost you clicks.

0 chars · 0px
0 chars · 0px
e
example.com
https://example.com

How to use the SERP preview

Four quick steps to a snippet that shows in full and earns the click.

1

Enter your page title

Type the title tag you plan to use. The character and pixel counters update live so you can see how close you are to Google's ~600px desktop limit.

2

Add your URL and meta description

Paste the page URL and write the meta description. The preview renders the breadcrumb, blue title and grey snippet exactly like a real result.

3

Switch between desktop and mobile

Toggle the Desktop and Mobile tabs to check both layouts, since mobile uses a narrower column and wraps titles onto more lines.

4

Fix the truncation warnings

Edit until the warning chips turn green. Trim anything flagged as too wide so Google shows your full title and description instead of an ellipsis.

SERP snippet questions

Google truncates desktop title links at roughly 600 pixels, not a fixed character count, because wide characters like W and M take more space than narrow ones like i and l. This tool measures the real rendered pixel width so you can see exactly where your title will be cut off.
Google typically displays around 920 pixels of meta description on desktop (about 155 to 160 characters) and less on mobile. Anything longer is truncated with an ellipsis. The preview shows both desktop and mobile truncation live as you type.
Mobile results use a narrower column and a different font size, so titles wrap onto more lines and descriptions are cut shorter. This tool renders both layouts side by side so you can optimise for each.
No. The preview runs entirely in your browser using the Canvas text-measurement API. Nothing you type is uploaded, logged or stored, so you can safely test unpublished pages and internal URLs.

For developers

This SERP preview runs 100% client-side — the pixel measurement happens in your browser, so nothing you type is ever uploaded.

✓ Private by design — no server round-trip

Truncation is measured the same way the browser draws text — with the Canvas measureText API. Here is the core idea you can drop into your own build pipeline:

// Measure rendered pixel width like Google does
const ctx = document.createElement('canvas').getContext('2d');
function titleWidth(text, font = '20px arial') {
  ctx.font = font;
  return ctx.measureText(text).width; // > 600 => truncated on desktop
}
console.log(titleWidth('Your page title here'));

Need this at scale — batch-checking thousands of titles from your CMS or CI? A hosted REST API for our SEO tools is available on paid plans. See plans →