SERP Snippet Preview
See exactly how your page appears in Google search results before you publish. Enter your title tag, URL, and meta description to get a live pixel-accurate SERP mockup with truncation warnings for both desktop and mobile.
Enter your snippet fields
Used to generate the breadcrumb path shown in green.
Quick tips
• Put your primary keyword near the start of the title — it may be shown in bold when it matches the query.
• Keep titles under 600px (≈60 chars) on desktop, descriptions under 920px (≈150–155 chars).
• Google may rewrite titles that are too short, keyword-stuffed, or mismatched with your H1.
• Descriptions are not a direct ranking factor — but they directly affect click-through rate.
Desktop Preview — Google Search
example.com
Page Title
Meta description will appear here.
Pixel width summary
Measured using canvas-based font rendering at 20px bold Arial (title) / 14px Arial (description). Actual Google rendering may vary slightly by OS font hinting.
Want the Full SEO Template System?
The Complete SEO Toolkit — 11 schema templates, a technical SEO playbook, and a priority-scored audit workbook. One-time download.
Support Our Free Tools
If you find this calculator helpful, please consider supporting our work. Your contribution helps us build and maintain these free tools for everyone.
Buy me a coffeeComplete Your On-Page SEO
A well-crafted SERP snippet works best when your full on-page setup supports it.
Meta Tag Generator
Generate your full <head> meta tags — title, description, Open Graph, and Twitter Card — in one go.
🔍Keyword Research Tool
Find the right primary keyword to put at the front of your title tag and meta description.
📊Keyword Density Checker
Confirm your target keyword appears naturally on the page your snippet is representing.
About This Tool
Most SERP preview tools use character count as a proxy for truncation — but Google doesn't. It truncates based on the rendered pixel width of the text at its specific font size and weight. This tool measures pixel width directly using an offscreen HTML canvas, the same technique browsers use to render text — giving you accurate truncation prediction rather than an approximation.
Desktop vs. Mobile Pixel Limits
| Field | Desktop limit | Mobile limit | Approx. character guide |
|---|---|---|---|
| Title tag | 600px | 900px | ≈ 50–60 chars (desktop) |
| Meta description | 920px | 1200px | ≈ 150–160 chars (desktop) |
How to Write a Strong Title Tag
- Lead with the primary keyword — Google may bold it when it matches the query, increasing visual prominence.
- Stay under 600px — use this tool to verify, then adjust until the bar is green.
- Match your H1 — large discrepancies between title tag and H1 increase the likelihood of Google rewriting your title in the SERP.
- Include your brand — "Page Title | Brand Name" is a common safe format that works across all categories.
- Avoid keyword stuffing — "Shoes | Best Shoes | Buy Shoes | Cheap Shoes" will be rewritten.
How to Write a Strong Meta Description
- 120–155 characters is the safest desktop range — use the pixel bar to confirm.
- Include the primary keyword — Google bolds matching words in the description snippet, improving click-through rate.
- Write for the reader — the description is a sales pitch for the click, not a keyword container.
- Use active language — "Learn how to…", "Find the best…", "Download free…" outperform passive descriptions.
- Avoid duplicate descriptions — every page should have a unique meta description.
Frequently Asked Questions
Explore All Tools
134 free tools — no signup required
All 134 tools are free · No signup · No ads