SERP Preview

Google SERP preview: what the tool shows and how to read it

Enter a page URL and the SERP preview fetches its HTML (following redirects, without running JavaScript), reads the <title> tag and meta name="description", and draws two result cards: desktop and mobile. The URL line shows the domain plus up to three path segments, next to the favicon Google already has for that domain. Below is a live editor that works as a snippet generator: rewrite the title and description and both cards update as you type, while the bars under each field show how much of the recommended length you have used.

The recommendations table checks title length (30–60 characters is "optimal"), description length (120–160), and whether og:title, og:image and a canonical URL are present. The date in front of the description is a placeholder set to today; the real date comes from the page or its structured data, and Google shows it only sometimes.

If the title is built by JavaScript (a React or Vue app without server-side rendering), the preview shows what the server sends — often an empty or generic title. Google does render JS, but later and not always; serving the title and description in the initial HTML is the safe choice.

Where Google takes each part of a snippet from

• Title link. The main source is <title>, but Google also looks at the H1 and other prominent headings, og:title and anchor text of links pointing to the page — and may use any of them instead.
• Site name and favicon. The site name is derived from the homepage; you can suggest it with WebSite structured data (name, alternateName). The favicon must be square, a multiple of 48 px and crawlable — the favicon checker verifies that.
• URL or breadcrumbs. Desktop shows a path or breadcrumbs from BreadcrumbList markup. Since early 2025 mobile results show the domain only.
• Description. Not necessarily your meta description: Google picks the text that best matches each query.

Length limits: characters vs pixels on desktop and mobile

Google publishes no character limits. Truncation depends on rendered width in pixels: "W" and "M" are much wider than "i" and "l", so two 60-character titles can cut off at different points. The editor counts characters, which is a convenient, conservative yardstick; when a title is close to the limit, trust the card itself — the ellipsis appears where the text hits the box width.

A long description isn't penalised — it just gets cut. The real risk is burying the key message at the end, where mobile users never see it.

Why Google shows different text from yours

Rewritten titles

According to Google's documentation, a title gets replaced when it is:

• half-empty ("Home", "Untitled") or identical across many pages;
• obsolete (last year in the title, this year on the page);
• inaccurate or stuffed with comma-separated keywords;
• far from the H1 — in that case Google often uses the H1.

The fix is a title that accurately describes the page and agrees with the H1. To compare title, description and headings on a page side by side, use the meta tag analyzer.

A different description

Google uses your meta description only when it describes the page better for that query than the on-page text. For long-tail queries the snippet usually comes from a paragraph containing the query words. Work on both levels: a strong description for head terms, and clear opening sentences in each section for the long tail.

You can control display with robots directives: <meta name="robots" content="max-snippet:160"> caps the length, nosnippet disables the snippet, and the data-nosnippet attribute keeps a specific block out of it — handy for prices that change often.

Rich results: what structured data actually gets you

Markup makes a page eligible for a rich result; it never guarantees one. Several popular types have been cut back:

Markup must describe visible content; stars without visible reviews violate the guidelines. Build JSON-LD with the Schema.org generator and confirm eligibility in Google's Rich Results Test.

Writing titles and descriptions that earn the click

Your snippet competes with nine others. The longest one doesn't win; the most specific one does — it tells searchers what they'll get and gives them a reason to choose you. Templates for common page types:

• Lead the title with the main query, phrased the way people search for it.
• Numbers and specifics (time, quantity, price, year) beat adjectives like "best" and "quality".
• Give every page its own title; identical titles across pagination and filters invite Google to rewrite them.
• Structure the description as answer + reason + action. Escape double quotes inside content ("), or the attribute ends at the first quote.

A simple snippet workflow

1. In Search Console, find pages ranking 1–10 whose CTR is lower than pages at similar positions. If the metrics are new to you, see impressions, clicks and CTR.
2. Open each one in the preview and read it as a searcher: is it clear what they get? Is there a number, a timeframe, a price, a reason to pick you?
3. Rewrite the title and description in the editor and copy them to your CMS — in WordPress, the Yoast or Rank Math fields; in Shopify, "Search engine listing" on the page or product.
4. Request indexing via URL Inspection and compare CTR over equal periods after 2–4 weeks. Change one group of pages at a time so you know what worked.