SERP Snippet Preview
NewPreview how your title and description look in Google, desktop and mobile.
An approximation using Google's fonts and pixel widths. Real results can vary — Google may rewrite titles or descriptions per query.
Snippet checklist
Need Open Graph, Twitter cards and canonical tags too? Use the Meta Tag Generator →
Runs entirely in your browser. Nothing is uploaded.
Preview your Google search snippet before you publish
This SERP preview tool shows how your page's title, URL and meta description are likely to appear in Google search results — on both desktop and mobile — before you ever hit publish. Type into the fields and the live, Google-styled search result preview updates instantly, complete with favicon, breadcrumb and an optional date.
Unlike a plain character counter, this SERP snippet preview measures the real pixel width Google uses to truncate text, so you can see the exact moment a title or description will be cut off with an ellipsis — and fix it first.
Pixel-width truncation: why character counts lie
Google doesn't cut your title at a fixed number of characters — it cuts at a pixel width. Desktop titles truncate at roughly 580 pixels and meta descriptions at about 920 pixels. Because a 'W' is far wider than an 'i', two titles with identical character counts can render at very different widths. That's why a tool that only counts characters gives misleading advice.
The live character and pixel counters here track both numbers as you type and flash a warning the instant your title or description crosses the limit, so you always know whether your snippet will display in full.
Title tag and meta description length limits
As a rule of thumb, keep your title tag around 50–60 characters (under ~580px) and your meta description around 150–160 characters (under ~920px) on desktop. Lead with your primary keyword so it survives truncation, and finish titles with your brand name.
Use the snippet checklist below the preview as a quick audit: it flags titles that are too long or too short, descriptions outside the ideal range, and URLs that aren't on HTTPS — the same things a good snippet optimizer would catch.
Desktop and mobile snippets side by side
Most searches happen on phones, where the results column is narrower: titles wrap to two lines and descriptions are trimmed sooner than on desktop. A title that fits a single desktop line can read awkwardly when it wraps on mobile. Toggle Desktop and Mobile to preview both layouts and tune your copy for the devices your audience actually uses.
How this compares to Yoast, Rankmath and SeoMofo
Several tools offer SERP previews, but most fall short on accuracy. Yoast SEO and Rankmath show a snippet preview inside your WordPress dashboard, but both count characters rather than measuring actual pixel widths — so a title packed with wide capital letters might look fine in their preview while still truncating in real Google results.
SeoMofo's SERP snippet optimizer pioneered the pixel-width approach but shows only one layout at a time and hasn't been updated to match Google's current snippet design. Mangools (SERPsim) is accurate but sits behind a paid subscription wall. This tool is free, measures real pixel widths, shows desktop and mobile side by side, supports favicon uploads, and runs entirely offline in your browser with no data sent anywhere.
Favicon, breadcrumb, dates and rich results
Modern Google snippets show your favicon and a breadcrumb-style URL above the title. This google serp preview generates a favicon from your domain automatically, lets you upload your own, and builds the breadcrumb from your URL path — with an override field for custom trails. Add a published date to preview how article and news snippets look, and the truncation adjusts just like Google's does when a date prefix is present.
Copy your tags — private and offline
When the snippet looks right, copy the finished <title> and <meta name="description"> tags straight into your page's <head>. Need Open Graph, Twitter cards and canonical tags as well? Pair this with the Meta Tag Generator. Everything here runs entirely in your browser — nothing you type is uploaded — so your unpublished titles and descriptions stay completely private.
How Google generates your snippet — and when it rewrites you
Google assembles the snippet it shows from several candidate sources: your title tag, any prominent H1 on the page, anchor text from high-authority links pointing at the page, and text extracted from the body itself. John Mueller of Google's Search Relations team confirmed that Google rewrites approximately 13% of title tags — usually when the tag is truncated, keyword-stuffed, duplicated across multiple pages, or simply doesn't match the actual content on the page. The algorithm prefers descriptive, unique, concise titles that accurately label the page's primary topic.
The meta description receives even more rewriting than the title. Studies by Portent and Ahrefs consistently find that Google uses the author-supplied meta description as-is for only around 37% of queries. For the remaining 63%, Google generates a dynamic description by extracting the sentence or passage from the page body that best answers the specific query. This means the same URL can display completely different descriptions for different search terms — a searcher looking for 'SERP preview tool free' might see a different snippet than someone searching 'how long should a title tag be', even though they both land on the same page. Writing a meta description is still essential because it sets a strong default and is your best chance to control tone and CTA when Google does use it.
To minimize rewrites, keep your title unique per page, front-load the primary keyword, stay under the pixel-width limit, and make sure the title genuinely matches the content below it. For descriptions, write copy that directly addresses the most common intent for the page — if Google's extraction can't find a better match than your own copy, it will use yours.
Title tag best practices backed by data
The pixel-width limit for desktop titles is approximately 600 pixels rendered in Google Chrome's UI font (a variant of Arial). In practice this equates to roughly 50–60 characters, but the exact count depends on which characters you use. Narrow characters — lowercase i, l, t, r, the digit 1 — consume as little as 3–4px each, so a title built from them can run to 70+ characters without truncating. Wide characters — uppercase W, M, the @ symbol — can each consume 14–17px, meaning a title like 'WWW Marketing' eats its pixel budget almost immediately. This is why measuring actual pixel width rather than counting characters is the only reliable approach.
Keyword placement matters for both truncation resilience and user scanning behavior. Google bolds query-matching words wherever they appear in the title and description, and eye-tracking studies show searchers scan for those bolded terms before reading anything else. Placing your primary keyword in the first 30 characters of the title guarantees it stays visible even if the tail is cut. The long-standing debate over brand name placement — front vs. end — generally resolves in favor of putting the keyword first and the brand last (e.g., 'SERP Preview Tool | UtiloKit'), unless your brand is itself a high-traffic query, in which case leading with it can outperform. One consistent finding from CTR studies: title tags phrased as a question ('What Is a Meta Description?') outperform declarative titles for informational queries by 10–20% because they match the conversational framing of how people search.
Avoid repeating the same keyword more than twice in a title. Google's systems treat repeated terms as a signal of keyword stuffing and will substitute a cleaner alternative — often the H1. Keep each title unique: if ten pages on your site all begin with the same boilerplate phrase ('UtiloKit — Free Online…'), Google may strip the boilerplate and show only the differentiating part, which may no longer fit within the pixel budget you designed for.
Meta description psychology: the biggest CTR lever you control
The meta description is not a ranking factor — Google's ranking algorithms do not read the meta description to decide where your page appears. But it is the single highest-leverage element you control for click-through rate (CTR) after the title itself. A well-written description acts as marketing copy in the most literal sense: it sits inside a competitive SERP where several other results are competing for the same click, and it has roughly 155 characters to win that click. The mindset shift that produces better descriptions is thinking of each one as a micro-ad: what benefit does the user get from clicking? What sets this page apart from the other nine results on the page?
Including your target keyword in the meta description — even though Google does not rank on it — increases CTR measurably, because Google bolds matching terms wherever they appear in the displayed snippet. A description containing the exact phrase the user searched will show that phrase bolded, which draws the eye and signals relevance at a glance. Emotional trigger words consistently outperform bland informational language: 'Free', 'Proven', 'Step-by-step', 'Complete guide', 'Instant', and 'No signup required' all address real user concerns (cost, reliability, effort, completeness, speed, friction) and have been shown in split-test studies to lift CTR by measurable margins. End the description with an implicit or explicit call to action — 'Try it free', 'See the live preview', 'Check yours now' — which primes the click as the natural next step.
Write descriptions to approximately 150–155 characters on desktop (the tool's pixel counter will tell you the exact safe zone). Deliberately front-load the value proposition so that even if Google trims the description slightly shorter than you wrote it, the surviving portion still communicates your USP. Avoid ending descriptions mid-sentence — if Google does trim, you want a natural break, not a dangling clause followed by an ellipsis that confuses the user.
Rich results: beyond the standard organic snippet
A standard organic snippet — favicon, title, breadcrumb, description — is only one of the formats Google may use to display your page. Featured snippets (sometimes called 'position zero') appear above the first organic result and present a paragraph, numbered list, or table extracted directly from your page, alongside your URL. Google selects featured snippet content algorithmically based on how clearly and directly a page answers the query; adding concise, question-phrasing headers (H2s or H3s) above a direct answer paragraph is the most reliable way to become eligible. Pages that win featured snippets still receive a standard listing below the snippet if they also rank organically, effectively earning two placements on the first page.
Review stars, product prices, recipe metadata, event dates, and FAQ accordions are all examples of rich results — enhanced snippet formats enabled by adding Schema.org structured data to your page's HTML. Google only shows rich results for pages where the markup is accurate, complete, and matches the visible on-page content; mismatches trigger manual actions or suppression. Sitelinks — the indented sub-links that appear under a result for navigational branded queries — are not controlled by structured data; they emerge when Google's algorithms trust your site architecture and internal linking enough to surface key sub-pages automatically. The best way to encourage sitelinks is a clean URL hierarchy, a strong homepage title, and coherent internal anchor text.
People Also Ask (PAA) boxes and Knowledge Panels are further SERP features that can intercept clicks before they reach organic results — making it even more important that the clicks your organic snippet does earn are maximized through strong title and description copy. Video carousels, which display a thumbnail and duration from YouTube or structured VideoObject markup, are increasingly prominent for tutorials and how-to queries. Understanding which rich result types are present for your target queries — and whether your page's structured data makes you eligible — shapes how you should write your snippet copy, since a page that wins a featured snippet needs a different description strategy than one competing purely in the 10 blue links.
Frequently asked questions
What is a SERP preview tool?
A SERP (search engine results page) preview tool shows how your page is likely to look in Google's results before you publish — the blue title link, the URL/breadcrumb, the favicon and the grey meta description. You type your title and description and a live, Google-styled snippet renders instantly, so you can fix anything that gets cut off. This one measures the real pixel width Google uses to truncate, on both desktop and mobile.
What is a SERP (and how does it work)?
SERP stands for Search Engine Results Page — the page Google shows after a query. Each organic result is a 'snippet': a clickable title (pulled from your <title> tag or page H1), the URL shown as a breadcrumb with a favicon, and a description (usually your meta description). Google assembles these per query, so the same page can show different snippets for different searches.
How long should a title tag be?
Aim for roughly 50–60 characters, but the real limit is pixels: Google truncates desktop titles at about 580 pixels. A title of wide characters (W, M, capitals) hits 580px sooner than one of narrow letters (i, l, t). For example 'WWWWWWWWWW…' runs out of room far faster than 'illillillil…'. This tool measures the exact pixel width and warns you before the title is cut with an ellipsis. Tools like Yoast SEO and Rankmath also show a snippet preview, but they use character limits rather than real pixel widths, so they can give false confidence.
How long should a meta description be?
Keep it around 150–160 characters on desktop (Google shows roughly 920 pixels, about two lines) and tighter — near 120–130 characters — on mobile. Front-load the important words: if it's trimmed, 'Free SEO snippet tool — preview titles and descriptions…' still reads well, whereas burying the value at the end loses it to the ellipsis. Unlike character-counting SEO plugins, this tool shows the exact pixel width so you know the precise cut-off point.
Why is my title or description truncated in Google?
Because Google truncates by pixel width, not character count. Two titles with the same number of characters can render at very different widths, so a character counter alone is misleading. When the rendered text exceeds the limit (~580px for desktop titles, ~920px for descriptions) Google cuts it and appends an ellipsis (…). The live counters here show both the character count and the pixel width so you can see exactly when truncation kicks in.
What is a SERP snippet?
A snippet is a single result block on the results page: favicon + site name, the URL breadcrumb, the headline (title link), and the description below it. Rich snippets can add extras like a published date, star ratings, or sitelinks. This tool previews the standard organic snippet and lets you add a favicon, breadcrumb and date to see how those elements change the look.
How do I optimize my Google snippet?
Write a unique, specific title under ~580px that leads with the primary keyword and ends with your brand (e.g. 'SERP Snippet Preview — UtiloKit'); write a meta description of 150–160 characters that promises a clear benefit and includes a call to action; make sure the URL is clean and HTTPS; and front-load keywords so they survive truncation. Use the live snippet here and the built-in checklist to confirm nothing is cut off before you publish.
Does Google always use my meta description?
No. Google uses your meta description as a strong hint but frequently rewrites it — often pulling a sentence from the page body that better matches the searcher's query. Studies suggest Google rewrites the description for the majority of queries. A good meta description still matters: it's your best chance to control the snippet, and Google uses it when it judges it relevant.
Why does Google rewrite my title?
Google may replace your title when it's too long and gets truncated, when it's keyword-stuffed or duplicated across pages, when it doesn't match the page's actual content, or when a clearer H1 or anchor text exists. Keeping titles concise (under ~580px), descriptive and unique per page is the best way to make Google keep the one you wrote.
How does the snippet differ on mobile vs desktop?
Mobile uses a narrower column, so titles wrap to two lines (fitting roughly 70 characters) instead of one, and descriptions are trimmed sooner — closer to 120 characters. The site name and breadcrumb also stack differently. Toggle Desktop/Mobile here to check both, because a title that fits desktop on one line can read awkwardly when it wraps on a phone.
How do I preview my page on Google before publishing?
Paste your intended title, URL and meta description into the fields on the left and read the live snippet on the right — no need to publish, deploy or wait for Google to recrawl. Switch between desktop and mobile, watch the pixel and character counters, then copy the finished <title> and <meta description> tags straight into your page's <head>.
Does title length affect click-through rate?
Yes, indirectly. A title that's truncated mid-phrase or that hides its value past the ellipsis gives searchers less reason to click, while a complete, benefit-led title that fits the pixel limit tends to earn more clicks. Click-through is also a quality signal, so a snippet optimized to display in full and read well can compound over time.
How do I add my favicon and breadcrumb to the snippet?
Google shows your site's favicon and a breadcrumb-style URL above the title. Here, the favicon is generated automatically from your domain's initial, or you can upload your own icon (it stays on your device — nothing is sent anywhere). The breadcrumb is built automatically from your URL path; you can override it with a custom trail like 'Blog › SEO' to match how Google displays nested pages.
Does it work offline and is it private?
Yes to both. The entire preview — pixel measurement, truncation, the favicon and the copied tags — runs in JavaScript inside your browser. Nothing you type is uploaded, logged or sent to a server, so even unpublished titles and descriptions stay completely private, and the tool keeps working with no network connection.
Related tools
View all tools
New Robots.txt Generator
Build a valid robots.txt with allow/disallow rules and a sitemap line.
New Slug Generator
Turn any title into a clean, SEO-friendly URL slug — bulk and accent-aware.
New Meta Tag Generator
Generate SEO, Open Graph and Twitter Card meta tags with a live preview.
New UTM Builder
Build trackable campaign URLs with utm_source, medium, campaign and more.
New Stopwatch & Timer
Accurate online stopwatch with laps and a countdown timer with presets.
New Random Picker
Pick a random name, number, coin flip or dice roll — fair and instant.