SERP Preview

What it does

The SERP Preview renders a title, URL, and meta description as Google’s desktop and mobile result cards, with pixel-accurate truncation. It uses canvas measurement to calculate exactly where Google will cut your text — not a rough character-count guess, but the actual pixel width Google’s font and rendering use. If your title is 58 characters of mostly is or ls, it fits; if it’s 50 characters of Ws and Ms, it might not.

Common situations

You have just written a title and you need to know whether it fits Google’s display window before publishing. The character-count plugins everyone uses are approximations — they treat all characters as equal, but Google’s display is pixel-based and the variance between narrow and wide letters is significant.

A page is appearing in search with a Google-rewritten title rather than the one you set. Test the title in the preview: if it visibly truncates on either desktop or mobile, that is one of the reasons Google may have decided to rewrite. Tighten the title until it fits cleanly and Google has less reason to override.

You are auditing a competitor’s SERP appearance and want to know whether their title was deliberately constructed to fit Google’s window or just happens to. Drop their title in the preview — if it’s hitting the truncation edge precisely, they’re optimising explicitly. If it’s well under, they’re not — which means a longer title is acceptable in that SERP if you have something more meaningful to say.

You are writing meta descriptions for a launch and want to verify each one renders as intended on mobile. Mobile descriptions are tighter than desktop — about 600 pixels vs 920 — and many descriptions that look fine on desktop truncate awkwardly on mobile. The preview shows both at once.

You are debugging a site whose SERP snippets are getting Google-rewritten with content lifted from random parts of the page. The rewriting usually starts when supplied descriptions are missing, too short (under 70 characters often gets expanded), too long (over 160 truncates and looks cut off), or off-topic. Test against the preview, write descriptions in the 150–160 range that match real page intent, and the rewriting frequency drops.

What you need to know

Google’s SERP display has been pixel-based for years, not character-based. The desktop title window is roughly 600 pixels wide; the description is roughly 920 pixels across two lines. On mobile, the title is around 380 pixels and the description gets a little less per line over a flexible number of lines depending on screen size. The preview measures against these targets using canvas.measureText with the actual fonts Google uses (Arial-equivalent sans-serif), which is the only way to get accurate truncation predictions.

The rendering rules:

Title appears in blue (or purple if visited), with the page’s URL breadcrumb above it in muted text and the description below in a slightly smaller dark-grey font. If the title exceeds the pixel limit, Google truncates at the nearest word boundary and replaces the cut text with an ellipsis. Below ~30 characters, Google often expands the title with the brand or a sub-heading from the page; above ~60 characters worth of pixels, it truncates.

URL appears as a breadcrumb path — example.com › blog › post-name — not the full URL. Google rewrites the URL display itself for readability; the preview matches this convention.

Description is the meta description if Google decides it is on-topic and well-formed, otherwise text from the page itself. The 150–160 character range is the desktop sweet spot. Below 70 characters, Google usually augments with on-page content. Above 160, it truncates with an ellipsis at a word boundary.

What the preview does not show: Google’s ever-changing SERP enrichments — site links, FAQ rich snippets, breadcrumb stars, image thumbnails, video timestamps. Those are eligibility-based and triggered by structured data and page quality signals; the preview shows the basic snippet which is what every result starts as.

Frequently asked questions

Why is the preview measuring in pixels instead of characters?

Because Google does. Different characters have different pixel widths in the font Google renders — narrow is are very different from wide Ws. A 60-character title made of narrow letters can be shorter in pixels than a 50-character title made of wide ones. Pixel measurement is the only way to predict truncation accurately.

What’s the desktop title pixel limit?

Approximately 600 pixels. Google has not published an official number, and the actual cutoff has drifted over time as their rendering changes, but 600 is the working approximation that matches observed behaviour. The preview uses 600 as the desktop title threshold.

What’s the mobile pixel limit?

Approximately 380 pixels for the title. Mobile is significantly tighter than desktop because the device width is smaller — many titles that fit desktop at 590 pixels truncate on mobile at 380. Always check both views.

Does the preview show rich results?

No, only the basic snippet — title, URL breadcrumb, description. Rich results (FAQ snippets, image thumbnails, breadcrumb stars, sitelinks) are eligibility-based and triggered by structured data. To check rich-result eligibility, use Google’s Rich Results Test alongside this preview.

Will my page actually look like the preview shows?

The preview matches Google’s basic rendering rules but Google rewrites titles and descriptions in around 60% of results. The preview shows what your supplied title and description will look like if Google uses them. If Google judges them off-topic, too short, or otherwise unsuitable, it will substitute its own content.

What font does Google use?

Google uses its own font (now Google Sans, previously Roboto) for SERP rendering, but the metrics are very close to Arial in width. The preview uses Arial-equivalent measurements which produce truncation predictions accurate to within a couple of pixels in real Google rendering.

Does the preview account for emojis?

Partially. Emojis in titles are rendered by Google but the pixel width of emojis varies by platform (a smiley on iOS is wider than a smiley on Android). The preview’s emoji measurements are approximate. Avoid emojis in titles unless you have tested specifically — they can also push truncation forward unexpectedly.

How accurate is the description preview?

Within a few pixels of real Google rendering on desktop. Mobile is harder to predict precisely because Google’s mobile description handling has a flexible number of lines depending on screen size, snippet enrichments, and content topic. Treat mobile preview as approximate; treat desktop as accurate.

Common problems

Problem: Title fits the preview but Google still truncates it.

Google rewrites titles before truncating in some cases — a title that should fit gets rewritten to a longer version or a different phrasing, then truncated. The fix is usually that Google does not trust your title to represent the page; rewriting at the source (clearer match between title and content) reduces the rewriting rate.

Problem: Description looks fine in the preview but Google shows different text in the SERP.

Google ignores your meta description in roughly 60% of results, replacing it with content lifted from the page. The most common cause is that the description doesn’t match what Google has determined the page is about — usually because the description is too generic, off-topic, or older than the page content has become.

Problem: Mobile preview shows the title truncating but the desktop one doesn’t.

This is correct behaviour. Mobile has a tighter title window than desktop. If most of your traffic is mobile, optimise titles to fit the mobile window (~380px); if most is desktop, the wider 600px window applies. Most sites should optimise for mobile by default.

Problem: Title cut differently in real Google search than in the preview.

The preview is accurate to within a few pixels but Google’s exact cutoff drifts and varies by query, browser, and SERP layout. If a title is right at the edge, treat it as “might truncate” rather than “definitely fits”.

Problem: Description shows in the preview but doesn’t appear in actual Google search.

Several causes: Google has overridden it (most common), the page has multiple description tags and Google is using a different one, or the page is being canonicalised to a different URL whose description is used instead. View source on the live page to confirm which description Google is reading.

Tips

• Test both desktop and mobile. Mobile is tighter and most traffic is mobile-first.
• The 50–60 character range is the working title length. Below 30 looks short; above 60 risks truncation.
• The 150–160 character range is the working description length. Below 70 gets augmented; above 160 truncates.
• The first 30–40 characters of any title are the most important — they are visible in mobile previews even when the rest truncates. Front-load the keyword and value.
• When Google is rewriting your title, the fix is usually to make your title and page content more aligned — Google rewrites less when it trusts the supplied title.

Related tools in this suite

The natural pairing is the Meta Tag Generator — write the title and description there, paste them into the preview to verify rendering. The Page SEO Audit shows the title and description currently being served, useful when you want to know what is in production rather than what is in your editor.

What this looks like at scale

For a single page, hand-checking each title and description in the preview is fine. For a content site with thousands of pages, the right shape is enforcement at template level: titles auto-generated within length bounds, descriptions required as a publishable field, with truncation warnings raised at publish time. The WP Beacon Plugin audits title and description lengths across every page on every visit and flags overrun cases automatically.

Take it further

If you have inherited a content set with widespread title and description issues, a one-off audit pass with WP Beacon plus a templated fix is the typical scope. Start a conversation about what auditing and remediating it would look like.