Preview a Google-style search result on desktop and mobile, with pixel-based width measurement, truncation estimates, and snippet checks.
Content last reviewed
Google-style search preview
Draft a title, URL, and meta description, then preview a Google-style result on desktop and mobile with pixel-based width checks. Google can rewrite titles, descriptions, and breadcrumbs, so treat this as a realistic estimate — not a guarantee.
49 characters · 489px of ~580px desktop width.
Query parameters are hidden in the preview, like real results. The URL never leaves your browser.
157 characters · 1026px total · 2 desktop / 3 mobile line(s).
Shown above the title. Defaults to a name derived from the domain.
Matching words are bolded in the preview, the way Google emphasizes query terms.
Shown in front of the description, as on articles and blog posts.
Title
49 chars · 489px
Good rangeDescription
157 chars · 1026px
Good rangeEstimated lines
2 desktop · 3 mobile
Mobile truncatesPixel widths are measured locally with the preview font. Real limits vary by device, font rendering, and Google's own layout changes.
Example
example.comtoolsserp-preview
Free SERP Snippet Preview Tool - Desktop & Mobile
Preview how your title, URL, and meta description may appear in Google search results on
desktop and mobile, with pixel-width checks and truncation warnings.
10 of 10 checks look good. Guidance only — this is not a Google ranking score.
Page title
Title length is in a workable range.
Meta description
Description has enough substance to summarize the page.
Page URL
URL parses cleanly.
URL path length
Path is short enough to display as a readable breadcrumb.
Brand in title
No brand duplication issues.
Capitalization
Casing looks natural.
Separators & punctuation
Punctuation looks clean.
Focus keyword
The focus keyword appears in the snippet text.
Keyword repetition
No obvious keyword repetition.
Readability
Description should wrap and read cleanly.
About this preview
Google decides at query time what to display: it may rewrite your title, pick different description text from the page, shorten breadcrumbs, or show extra elements like dates and sitelinks. Everything you type here is processed locally in your browser and never uploaded.
Pair this preview with the Meta Tag Generator to produce the full head markup, the Slug Generator for a clean display URL, and the Keyword Density Checker to review the page copy behind the snippet.
Type your page title, URL, and meta description; add a site name, breadcrumb, query, or date if relevant.
Switch between Desktop, Mobile, and Side-by-side previews and watch the pixel widths and line counts update.
Resolve anything the readiness checklist flags, then copy the title, description, or ready-to-paste HTML tags.
A concise, mixed-case title lands inside the roughly 580-pixel desktop budget.
Input
Title: Cold Brew Ratios — A Practical Guide (38 characters)Output
Status: Good range — the full title is likely to display on desktop without truncation; the mobile view wraps it within its two-line budgetUppercase letters are much wider, so an all-caps title of similar character count can overflow and is also flagged by the capitalization check.
Input
Title: COLD BREW RATIOS — A PRACTICAL GUIDEOutput
Wider rendered width, potential May-truncate status, and a "Shouty" capitalization flag — mostly-uppercase titles read as spammy and are often rewrittenA search snippet is often the only impression a page gets — a title link, a breadcrumb URL, and two lines of description competing with nine other results. This preview shows how yours may render before you publish: type a title, URL, and meta description, and the tool draws a Google-style result card for desktop and mobile, measures your text in pixels, and estimates exactly where truncation will cut it.
Pixels are the point. Search engines do not truncate titles at a character count; they truncate at a rendered width — roughly 580 pixels on a desktop result. Two 24-character titles can differ by hundreds of pixels depending on whether they use wide capitals or narrow lowercase letters, which is why character-count advice keeps misleading people. This tool measures your actual text with the browser's own text-measurement engine in a result-page-style font, and reports both the characters and the pixels, per device — desktop titles get one line, mobile titles wrap to two, and descriptions get about two desktop lines against three on mobile.
Around the measurements sits practical feedback: a readiness checklist flags missing fields, shouty capitalization, separator overload, keyword stuffing, and long URL paths, while optional fields simulate the trimmings — a site name above the title, a breadcrumb override, a date prefix, and bolding of a target query. The tool is candid about its boundaries, and so is this page: Google frequently rewrites titles and descriptions at query time, so treat the preview as a realistic estimate, not a screenshot of the future. Everything runs locally in your browser; the URL is parsed on-device and never fetched.
Enter your Page title, Page URL, and Meta description. Each field's helper shows live character and pixel figures; the URL field explains that query parameters are hidden in the display, as in real results.
Optionally add a Site name (otherwise derived from the domain), a Breadcrumb override (levels separated by ›), a Search query to highlight (matching words are bolded the way Google emphasizes query terms), and a Displayed date for article-style results.
Switch between Desktop, Mobile, and Side-by-side views to see both renderings — the same snippet can fit on one device and truncate on the other.
Read the Length & width panel: title and description characters and pixels, estimated line counts per device, and fits-or-truncates badges.
Work through the Snippet readiness checks, revising until the flags clear. Click Load example any time to see a well-formed snippet.
Copy what you need: the title, the description, the plain snippet text, or the ready-to-paste HTML title, meta description, and canonical tags.
Text width is measured with the browser's canvas text engine in a result-style font, so truncation estimates reflect rendered width rather than character counts.
Both device layouts render simultaneously if you want — one desktop title line versus two on mobile, two description lines versus three.
Site name and generated favicon initial above the title, a breadcrumb-style URL with deep paths collapsed, an optional date prefix, and query-term bolding.
Up to ten advisory checks covering missing fields, length, capitalization, separators, brand duplication, keyword presence and stuffing, URL path depth, and readability.
Overflowing text is cut with an ellipsis in the card exactly where the measurement says it will be, so you see what survives.
One-click copies of the title, description, plain snippet text, or the HTML title, meta description, and canonical tags.
Confirm a new page's title displays fully on desktop and mobile before it ships.
Edit a meta description against live line counts until it fits cleanly without truncation.
Paste current metadata from live pages and let the checklist surface what needs fixing.
Enter the target search phrase and see how the bolded terms draw the eye in your snippet.
Once the snippet reads well, copy the HTML title, description, and canonical block for the page.
Your text is measured, wrapped, and truncated the way a browser lays out a real result. A hidden canvas measures each string in an Arial-style font at result sizes (20px titles, 14px descriptions); a deterministic estimator stands in wherever canvas is unavailable, so the tool works everywhere.
Each device has a width and line budget approximating current Google conventions: desktop gives the title one line of roughly 580 pixels and the description two lines of about 600; mobile gives the title two lines and the description three lines of about 339 pixels each. Text is word-wrapped into lines against those widths, and overflow past the last allowed line is cut with an ellipsis — a binary search finds the exact fitting prefix, which is what the preview card renders.
The display URL is built the way results show it: protocol, query parameters, and fragments hidden, path segments turned into › breadcrumb levels, with paths deeper than three segments collapsed around an ellipsis. The site name falls back to a capitalized form of the domain, and the favicon is a generated initial — nothing is fetched. Query highlighting splits your text around the query's words case-insensitively and bolds the matches, mimicking how Google emphasizes query terms.
Plain-text title and description plus a page URL — a missing https:// is assumed for display purposes.
A copyable block with the title element, meta description, and canonical link, values escaped.
Shown above the title; when empty, a name is derived from the domain.
Replaces the path-based breadcrumb; separate levels with the › character.
Words from the query are bolded in the title, URL, and description, as in real results.
Prefixed to the description the way article results show dates.
Desktop, Mobile, or Side-by-side rendering of the result card.
Fill the form with a well-formed sample snippet, or clear every field.
The URL must parse to a real http or https address with a dotted domain. A missing protocol is tolerated (https:// is assumed), but a bare word without a domain is not.
Normal — the budgets differ. Mobile wraps the title onto two narrower lines, so different overflow behavior per device is expected; check both views before deciding.
Google rewrites titles and descriptions at query time when it judges other text a better match, and layouts shift over time. The preview reflects your metadata measured realistically — accurate metadata that matches the page is your best defense against rewriting.
Paths deeper than three segments are collapsed around "...", as in real results. Use the breadcrumb override, or a shallower URL, if the collapsed form reads badly.
The preview is a realistic simulation, not a promise: Google rewrites titles and descriptions at query time, varies layout by locale and device, and changes conventions without notice — the pixel budgets here approximate current desktop and mobile results. Measurement uses your browser's font rendering, so widths are close to, not identical with, Google's own. The tool does not fetch your URL, so it cannot check what your live page currently serves — paste the metadata in. Rich-result elements beyond dates (ratings, sitelinks, images) are not simulated, and the readiness checks are editorial guidance, not a ranking score.
Everything runs on your device: the URL is parsed locally to build the display breadcrumb (never fetched), the favicon is a generated initial rather than a remote lookup, and titles, descriptions, and queries are never uploaded or stored. The measurement itself is a local canvas operation.
Put the meaning-carrying words at the front of the title — truncation always eats the end.
Judge length in pixels, not characters; capitals and wide letters cost far more room.
Check the mobile view too — its two-line titles and three-line descriptions behave differently.
Write the description as a fair summary with one concrete detail, using the focus keyword once.
Re-check snippets after significant page edits; metadata that matches the content is likeliest to be shown as written.
Be specific before being clever. The title's job is to let the right searcher recognize the page: name the task or question, in the words a searcher would use, with the key phrase early. A pattern like primary topic + useful qualifier + brand covers most pages — and skipping the brand is fine, since Google usually displays your site name above the title anyway.
Write the description as evidence, not advertising. One or two sentences that fairly summarize the page, with a concrete detail a vague competitor cannot claim, get kept by Google more often and clicked more when shown. Resist repeating the keyword — the checks flag stuffing because it reads as distrust-worthy to people, which is the audience that matters.
Then verify in both device views and treat remaining truncation as an editing prompt, not a failure: if the first 580 pixels carry the message, the ellipsis costs little. Draft the full head markup with the Meta Tag Generator, and tidy the URL with the Slug Generator when the breadcrumb reads poorly.
Widths are measured via a 2D canvas context using an Arial-based stack at 20px (titles) and 14px (descriptions); an SSR-safe per-character estimator provides deterministic fallback until canvas is ready, keeping hydration consistent. Layout budgets: desktop ~580px × 1 title line and ~600px × 2 description lines; mobile ~339px with 2 title and 3 description lines. Wrapping is word-based with character-level splitting for oversized tokens, and the ellipsis cut point is found by binary search. URL parsing, breadcrumb collapsing (max three segments), query highlighting (regex-escaped, case-insensitive), and the advisory checks all run client-side; measurement is memoized so unrelated keystrokes do not re-run the math.
| Desktop | Mobile | |
|---|---|---|
| Result column | ~600 px | ~371 px |
| Title | 1 line, ~580 px | 2 lines, ~339 px each |
| Description | ~2 lines | ~3 lines |
| Typical title fit | ~50–60 mixed-case characters | Similar total, wrapped |
The same snippet can fit on one device and truncate on the other — which is why the tool always computes both and offers the side-by-side view.
SEO practitioners and content editors polishing titles and descriptions before publication, developers verifying metadata during builds, and site owners auditing why their results look truncated or thin. It rewards anyone who has been burned by character-count rules of thumb — the pixel measurements explain the cases those rules get wrong.
Because that is how truncation actually works: search engines cut text when it runs out of rendered width, not at a character number. A title of wide capitals truncates far sooner than a lowercase title of identical length — pixel measurement reflects what happens.
No. Roughly 580 desktop pixels — often near 50–60 mixed-case characters — usually displays in full, but the real limit depends on your letters, the device, and Google's current layout. Front-load the important words and treat the measurement as guidance.
Often, but not always — Google rewrites snippets at query time, using page headings or body text when it judges them a better match. Accurate metadata that genuinely describes the page is the most reliable way to keep your own words.
It bolds occurrences of the query's words in the title, URL, and description, the way Google emphasizes matched terms. It exists to show emphasis and check keyword presence — not to encourage packing the query into every sentence, which a separate check flags.
Mobile results use a narrower card with different budgets: titles wrap onto up to two lines and descriptions get about three. The same text can therefore fit on one device and truncate on the other.
No — the URL is parsed locally just to build the display URL and breadcrumb, and nothing you type leaves your browser. To audit a live page, copy its current title and description tags in manually.
You can enter them and the measurement accounts for their width, but Google frequently strips decorative characters from real results. Use them sparingly and never to carry meaning.
No — the checks are presentation and clarity heuristics (length, casing, separators, keyword usage), explicitly advisory. They improve how the snippet reads to a human; rankings are decided by entirely different machinery.