SERP preview. Mobile + desktop.
Paste title, URL, and meta description. See the Google search snippet rendered live in mobile and desktop layouts, with pixel-width truncation marked. Adjust until it fits.
Live SERP rendering. Type your title, URL, and meta description on the left; the right panel renders the Google snippet in mobile and desktop layouts with pixel-width truncation marked. Pure browser code — no fetch, no log.
Sources used by this tool
- Title pixel-width measurement uses the browser's HTML5 Canvas API (Arial 20px desktop / 22px mobile, the fonts Google's SERP currently renders).
- Truncation thresholds: 580 pixels desktop title (Google's published cut-off as observed in the Search Console preview tool), 920 pixels mobile description, ~990 pixels desktop description.
- Google Search Central: title link guidance · snippet guidance
All rendering happens in your browser's canvas. No fetch is performed; no data is sent anywhere.
Three reasons to render before publishing.
Truncation costs CTR. A title that truncates mid-word reads as broken to skim-reading users. The drop in click-through rate from a poorly-truncated title vs a well-fitting one is typically 15-30% on the same query, even before considering ranking effects. Pixel width is the actual constraint; character count is a rough proxy.
Mobile-first ranking uses the mobile snippet. Google's index is mobile-first; the mobile rendering of your title and description is what ranking considers. Many teams write copy on desktop and forget that mobile will truncate earlier. The dual preview here keeps both layouts honest.
Bold-match preview shows what the user sees on a query. Google bolds query-matching terms in the rendered snippet. A title with the user's primary query embedded reads visually different from a title without it. Test the visual emphasis with the optional query field; if your primary keyword appears bold and near the front, the snippet will perform better than one where the keyword falls past the truncation cut-off.
For sibling tools that go deeper on each input: Title Tag Checker for length + best-practice analysis, Meta Description Checker for the description-specific signal, Meta Tag Generator for the full HTML head with OG + Twitter previews.
Six questions users ask.
Why preview the SERP snippet before publishing?
Google truncates titles around 580 pixels (~60 characters at typical letter widths) and meta descriptions around 920 pixels mobile / 990 pixels desktop (~155 chars). A title that reads cleanly on a mockup may truncate mid-word in production. The preview lets you adjust before publishing rather than after the page is indexed and the truncation costs CTR.
Will Google use my exact meta description?
Sometimes. Google rewrites meta descriptions roughly 60-70% of the time based on the user's query, pulling matching text from the page body when it judges that more relevant. A well-written meta description survives untouched on branded queries and on queries closely matching the page's primary keyword. For long-tail variants, Google tends to compose its own. Treat the meta as a guarantee for branded SERPs and a hint for everything else.
Why do mobile and desktop look different?
Mobile devotes less horizontal pixels to titles and meta descriptions, so truncation kicks in earlier. Mobile also stacks the URL on its own line above the title; desktop puts URL above title in smaller text. Mobile snippets render in a slightly larger font for readability. We render both because mobile-first indexing means the mobile preview is the canonical rendering for ranking.
Does this tool fetch my URL?
No. You paste the URL, title, and meta directly. Nothing is fetched, nothing is sent to Digital Heroes servers. Recent previews are stored in your browser's localStorage. No signup, no email gate.
What about title pixel width — is character count not enough?
Character count is a crude proxy. A title with many narrow letters (i, l, t, j) fits more characters than the same character-count title with wide letters (W, M, m, w). The pixel-width estimator below the form measures the rendered title width using your browser's canvas API; we apply Google's font (Arial 20px desktop / Roboto 22px mobile) and report the actual pixel cost. The 580-pixel desktop limit and ~600-pixel mobile limit are Google's published truncation thresholds.
Does this work for Google Ads?
No — Google Ads uses different character limits (Headline 1/2/3 at 30 chars each; Description 1/2 at 90 chars each) and a different visual layout with the Sponsored badge. This tool models the organic SERP only. For Google Ads previews, build a small calculator with the published RSA character limits or use the live preview inside the Ads UI.
Build, preview, ship.
Title Tag Checker
Length + pixel-width + brand check.
Meta Description Checker
155-char gauge + CTA presence.
Meta Tag Generator
Full HTML head with OG + Twitter.
Open Graph Preview
Facebook + X + LinkedIn share preview.
Structured Data Validator
JSON-LD validation in browser.
SEO service
Title + meta + structured data audit.