U.UtilityApp
📈 SEOFree · No signup

Google SERP Snippet Preview

Preview how your title and meta description will appear in Google search results on desktop and mobile, with pixel-width checks.

How each line of the preview is built

Enter a title, a URL and a meta description, and the preview draws a search result from them in three lines:

  1. The address, with https:// or http:// removed. https://www.clayworks.example/shop/planters/ shows as www.clayworks.example/shop/planters/.
  2. The title, in blue on a single line. If it's wider than the result area, which is at most 600 pixels across, it's cut with an ellipsis.
  3. The description, cut at exactly 160 characters with no ellipsis.

Empty boxes show placeholder text, so you can see the layout before you type anything.

Counters and cut-offs measure different things

The counters above the boxes count characters and show a tick when the title is 30–60 characters and the description 70–155. The preview itself works differently for each line, so the two can disagree:

  • Title: the cut depends on width, not count. Sixty narrow lowercase letters may fit while fifty capitals don't. Trust the preview line over the counter here.
  • Description: the cut is a fixed count. A 158-character description gets no tick from the counter but still shows in full in the preview.

Here is a 167-character description. The preview shows the first 160 characters and drops the rest, so it ends on "…without staining your windowsill or" and the last word, "floor.", disappears. When a cut lands mid-thought like this, shorten the sentence rather than hoping the full text will be shown.

Where a real search result will look different

The preview is a quick approximation, not a copy of a live results page. Expect these differences:

  • Font. The preview uses this site's typeface, so where a title gets cut won't match Google's rendering exactly.
  • The top line. Google normally shows a site name, a small icon and a breadcrumb-style path rather than the raw address.
  • Mobile. There is one layout, sized for desktop. Phone results are narrower and wrap differently.
  • Extras. Dates, ratings, prices and other rich-result details aren't drawn.
  • The words themselves. Google can show a different title or pull a description from the page text instead of yours, especially when the page and the tags don't match.

Use the preview to catch obvious problems: a title that runs far too long, a description that ends mid-word, or text that reads badly once shortened.

Checking a batch of existing pages

For an audit, open each important page, copy its current title tag and meta description from the page source, and paste them in. Note the pages where the title gets an ellipsis or the description is cut. Those are the ones to rewrite first.

When you rewrite, read only the part of the preview that remains after the cut. If that text still tells a searcher what the page offers, a little truncation is fine. If the meaning disappears with the missing words, shorten the line. When you're happy, the Meta Tag Generator on this site turns the final title and description into tags you can paste.

Frequently asked questions

Is the preview pixel-accurate?+

No. The preview box is at most 600 pixels wide and narrower on a small screen, and the text is drawn in this site's font, not Google's. The exact point where a title is cut can therefore differ, so treat a title that only just fits as a risk.

Does it show how my result will look on a phone?+

No, there is only a desktop-width preview. Mobile results have less room per line, so a title that just fits here may wrap or be cut on a phone.

Why does Google show a different description from the one I wrote?+

Google picks the snippet text for each search. If another passage on the page matches the query better, it can show that instead. A clear, accurate description makes it more likely yours is used, but nothing guarantees it.

Guides & deep dives

Embed this tool on your website

Free to use on blogs, school sites and intranets. Paste this code into your page's HTML; please keep the credit line.

<iframe src="https://utilityapp.lat/embed/seo/serp-snippet-preview" title="Google SERP Snippet Preview" width="100%" height="600" style="border:0;max-width:760px" loading="lazy"></iframe>
<p style="font-size:13px"><a href="https://utilityapp.lat/seo/serp-snippet-preview">Google SERP Snippet Preview</a> by UtilityApp</p>