SERP Snippet Preview

How Google picks the title and the snippet

A search result has three parts you can influence: the site name and URL at the top, the title link, and the snippet below it. Google does not simply copy your tags into it.

• The title link is built automatically. According to Google's documentation on title links, the sources include the <title> element, the main visible title and headings on the page, og:title, prominent text, anchor text on the page, the text of links pointing to the page, and WebSite structured data.
• The snippet is created mainly from the page content. Google's snippet guide says it sometimes uses the meta description when that describes the page more accurately, and that one page can get different snippets for different searches.
• The site name applies to the whole domain or subdomain. Google suggests telling it your preferred name with WebSite structured data on the home page.

So your title and description are strong suggestions, not commands. Written well, they give Google good text to work with, and this preview shows how they look.

Pixels, not characters: how truncation works

Google's documentation sets no length limit for titles or meta descriptions. It says both are truncated as needed, typically to fit the device width. Width is the key word: a result has a fixed amount of room, and letters differ a lot in width. Measured in Arial, a capital W is more than four times as wide as a lowercase i.

Here are four titles of similar length, measured at 20 px Arial against the 600 px desktop width of this preview:

The capitals title has about as many characters as the others and still loses its end. That is why a character limit alone can tell you a title fits when it does not, or warn you about one that would be fine.

The tool measures your text in the browser with a canvas, the same way for every counter, check and cut in the preview. Google does not publish pixel limits, so the widths below are the settings of this preview, an approximation of a typical result:

Google changes its result layout from time to time, and its fonts vary by device and system. Leave a little room below each limit, and keep the important words at the front, where no cut can reach them.

A worked example

The example in the tool is a gardening guide. Its title, “How to Repot a Snake Plant Without Killing It | Leaf & Loam”, has 59 characters and measures about 530 px at 20 px Arial, so it fits the 600 px desktop width with 70 px to spare. On a phone it wraps to a second line, which is normal.

The description has 147 characters and is about 910 px wide at 14 px. That fits the 920 px desktop width of the preview, but not its 680 px phone width: on mobile, the preview stops after “When to repot a snake plant, which pot and soil mix to use, and the watering mistake behind most root rot....”, 106 characters in. The key facts (when to repot, which soil, root rot) come first, so the cut costs nothing important.

The copied tags escape the ampersand in the brand name, so the HTML stays valid:

<title>How to Repot a Snake Plant Without Killing It | Leaf &amp; Loam</title>
<meta name="description" content="When to repot a snake plant, which pot and soil mix to use, and the watering mistake behind most root rot. Step by step, with photos of each stage.">

How to write a good title

Google's title link documentation lists a few best practices. In short:

• Give every page its own title. Descriptive and concise beats vague labels like “Home” or “Products”.
• Do not stuff keywords. Repeating the same word or phrase does not help and reads badly. The tool flags words that appear twice. For a whole page of text, the keyword density checker shows how often each word appears.
• Avoid boilerplate. Titles that differ only in a number or a tiny detail are hard to tell apart in results.
• Brand it briefly. Add your site name at the start or end, separated by a hyphen, colon or pipe, and keep it short.

Our own advice on top: lead with the topic people search for, add one detail that makes your page the better click (a year, a number, a format), and put the brand last.

How to write a good meta description

Google's snippet guide asks for descriptions that are unique to each page, that summarize the page accurately and that include relevant facts, such as the author, the date or product details. It warns that a long string of keywords gives people no clear idea of the page. Large sites may generate descriptions from their data, as long as the result is readable and varied.

• Answer the question behind the search in the first sentence. On phones, that may be all that shows.
• Add what makes the page worth a click: what is inside, what it costs, how long it takes.
• Write in plain sentences. One or two are enough.

Good and weak snippets

When Google rewrites your title

The title link documentation names the common reasons Google shows something other than your <title>:

• Half-empty titles, such as one that only contains the site name.
• Obsolete titles, for example with last year's date while the page shows this year's.
• Inaccurate titles that do not match what the page is about.
• Micro-boilerplate: nearly identical titles across many pages.
• No clear main title, when several headings look equally important.
• A different language or script in the title than on the page.

If your title is rewritten, check it against this list first. Fixing the cause usually brings your own title back.

Dates, site names and icons

• Dates: Google may show a byline date, its estimate of when the page was published or updated, if it considers it useful to the user. Its guide to byline dates recommends a visible date on the page plus datePublished or dateModified in structured data. Use the date field to see how much room it takes in the preview.
• Site name: Google can show one for a domain or a subdomain, but not for a subdirectory. The field here only changes the preview.
• Icon: real results can show your favicon in the circle, though Google does not guarantee it. Google's favicon guidelines ask for a square image, recommend one larger than 48 by 48 pixels, and need both the icon file and the home page to be crawlable. The preview uses a letter instead.

How to use the SERP snippet preview

1. 1Type or paste the page title and the meta description. The bars show the width as you type: green fits, orange is close to the preview width, red gets cut.
2. 2Add the page URL and site name for a realistic header, and keywords to see them in bold. Switch between desktop and mobile, and between light and dark mode.
3. 3Fix what the checklist points out, then copy the tags into the head of your page, or copy a link to share the preview.

Next steps: the Meta Tag Generator adds Open Graph and X card tags for shared links, the Open Graph Checker reads the tags of a live page, the Slug Generator makes a short, clean URL, and the Schema Generator writes structured data such as the WebSite markup for your site name.

Built by Tobias Kurth, designer. Updated October 13, 2026.

Frequently asked questions