SERP Snippet & Pixel Width Previewer

Character counts lie. Google truncates by pixel width, not characters. A title with wide letters (W, M) cuts off at 45 chars while narrow letters (i, l) fit 70. This tool measures exact pixels using Google's SERP fonts so you see precisely where the ellipsis lands.

Technical SEO & Metadata Local processing Your content is measured in your browser. Nothing is sent anywhere.

Tool interface

Title budget: 600px · Desc: 920px

Live SERP Preview

🌐
example.com
https://example.com
Your Title Here
Your meta description will appear here with keyword highlighting.
0
Title Characters
0px
Title Pixels
0
Desc Characters
0px
Desc Pixels
Title pixel budget: 600px

Introduction

Google doesn't count characters — it measures rendered pixels. The title tag font on desktop is approximately 20px Arial with a max width of ~600px before truncation. On mobile it's ~550px. Meta descriptions allow 2 lines on desktop (~920px total) and 3 lines on mobile (~1020px total). This tool replicates those exact measurements using the Canvas API so you can see the true truncation point before publishing.

How It Works

  • The Canvas 2D measureText() API calculates exact rendered width using Arial (Google's SERP font).
  • Characters are measured incrementally until the pixel budget is exceeded, then an ellipsis (…) is injected.
  • Keyword matches are rendered in bold and re-measured, since bold glyphs are wider.
  • Desktop and mobile modes apply different pixel budgets and line limits.

Privacy

All pixel measurement happens locally via the Canvas API. Your title, description, and URL never leave your browser. No API calls, no tracking, no account needed.

Limitations

  • Pixel budgets are approximations based on Google's current SERP design and may shift with Google UI updates.
  • Real SERP rendering may vary ±5px based on user's OS font rendering.
  • Bolding simulation applies to exact keyword matches only; Google's actual bolding logic may differ.

FAQ

Why is my 60-character title getting truncated?

Because your title contains wide characters (W, M, uppercase letters). Pixel width, not character count, determines truncation. Use this tool to find the exact cut point.

Does bolding keywords really affect truncation?

Yes. Bold Arial glyphs are approximately 5-8% wider than regular weight. If your keyword appears in the title, the bold rendering can push the visible text past the pixel budget earlier.

Is my content uploaded anywhere?

No. Everything is measured locally using your browser's Canvas API. Nothing is transmitted.

Related Tools

Version and changelog

  • Version: 1.0.0
  • Last updated: August 12, 2026
  • Changelog: Initial production release.