SERP Snippet Preview

Optimal character lengths

Title tag optimization tips

How Google builds the search snippet

Google assembles the search snippet from three sources:

1. Title — usually your <title> tag, but Google may override it with your <h1>, the og:title, or anchor text from backlinks if it thinks those better represent the page.
2. Breadcrumb URL — built from your URL structure. https://example.com/blog/seo/ becomes example.com › blog › seo. Clean, readable URLs with descriptive slugs look better and may improve CTR.
3. Description — from your meta name="description" tag, OR dynamically extracted from your page body if Google believes the body text better matches the user's query. Google frequently rewrites descriptions.

Anatomy of a Google search result

A single organic result on a Google results page is built from several distinct pieces, each pulled from a different part of your page. Knowing what feeds each one is the key to controlling how you appear:

• Favicon and site name — a small icon and your site’s name sit above the result, helping users recognise the source at a glance.
• Breadcrumb / URL — Google shows a readable path derived from your URL structure (for example example.com › blog › seo) rather than the raw link.
• Title link — the large blue clickable headline, the most prominent and most clicked element of the result.
• Snippet (description) — the grey summary beneath the title that previews the page’s content.
• Rich result enhancements — optional extras such as star ratings, sitelinks, breadcrumbs, publish dates or product prices, added when your page supplies the right structured data.

The live preview above reproduces the first four elements for both desktop and mobile. The fifth — rich results — depends on structured data and is covered further down this page.

Why Google measures pixels, not characters

It is tempting to count characters, but Google truncates titles and descriptions by rendered pixel width, not by character count. In Google’s own words there is no fixed limit — the title link “is truncated in Google Search results as needed, typically to fit the device width,” and the same applies to the description snippet. Because most fonts are proportional, a run of narrow letters like iiiii takes far less space than wide ones like WWWWW, so two titles with identical character counts can truncate very differently.

As rough, widely observed guidance, a desktop title is usually cut at around 600 pixels — roughly 50–60 characters — while a desktop description is cut near 920–960 pixels, roughly 155–160 characters. On phones the available width is narrower, so snippets are shorter again. Treat the character counters in this tool as a convenient proxy and the pixel estimate as the more honest signal, but remember both are approximations: the only way to be certain your message survives is to put the important words early, before any possible cut.

Desktop and mobile results are not the same

Most searches now happen on phones, and Google indexes the web mobile-first, so the mobile result is the one to optimise for. The two layouts differ in ways that affect every snippet. Mobile screens are narrower, which means titles and descriptions are truncated sooner — front-loading your key message matters even more. Mobile results also present the site name and favicon prominently and can wrap the breadcrumb URL differently, while descriptions sometimes run a little longer than on desktop before they are cut.

The practical takeaway is to check both previews. A title that fits comfortably on a wide desktop result can lose its final, important words on a phone. Because you cannot control which device a searcher uses, the safe design is one that reads clearly even at the shortest, mobile truncation point — the live desktop and mobile mock-ups above let you confirm that at a glance.

A brief history of meta tags in search

Meta tags are HTML elements that describe a page without appearing on it. In the mid-1990s, early engines such as Infoseek and AltaVista leaned heavily on the meta keywords tag — authors simply listed the words they wanted to rank for. Predictably it was abused: pages stuffed the tag with irrelevant and repeated terms, and its value as a ranking signal collapsed. In September 2009 Google’s Matt Cutts confirmed publicly that Google does not use the keywords meta tag in ranking at all, and it has been ignored ever since.

The meta description tag survived because it serves a different purpose: not ranking, but presentation. Google may use it as the snippet when it judges the description a good match for the query, which is why it remains worth writing well. That distinction is the heart of modern on-page SEO — meta tags today control indexing behaviour (through robots directives) and how a result is displayed (titles and descriptions), but they are not a place to hide keywords hoping to climb the rankings.

How and why Google rewrites titles and descriptions

Writing a <title> tag does not guarantee Google will use it verbatim. Google generates the title link from several possible sources — your <title> element, the main on-page heading such as the <h1>, large prominent text, the og:title, and even the anchor text of links pointing to the page — then picks whatever it judges most accurate. Since a 2021 update to how it builds titles, these rewrites became more common.

Google’s documentation lists the situations that most often trigger a title rewrite:

• Half-empty or too-short titles that do not describe the page.
• Obsolete titles where the visible content contradicts an outdated <title>.
• Boilerplate — many pages sharing one identical, generic title.
• Keyword stuffing or repetitive phrases in the title.
• Language or script mismatch between the title and the page’s main content.

Descriptions are rewritten for a related reason: Google often replaces your meta description with a passage taken straight from the page when that passage matches the searcher’s query more closely — which is also why the same page can show different snippets for different searches. The way to keep your own wording is to make it earn its place: write a unique, accurate, concise title and description for every page that genuinely reflect the content. You cannot force Google’s hand, but well-matched tags are used far more often than vague or manipulative ones.

Rich results and structured data

Beyond the basic title-and-snippet, Google can display rich results — listings enhanced with extra visual detail. A recipe page might show a photo, cooking time and star rating; a product might show price and availability; an article might show a byline and date; and a site can earn sitelinks that list its key sub-pages. These enhancements often make a listing larger and more eye-catching, which can lift its click-through rate.

Rich results are powered by structured data — machine-readable markup, usually written in JSON-LD using the shared schema.org vocabulary, that labels the meaning of your content (this is a Product, that is its price, this is a Review rating). Unlike a meta description, structured data does not change the words of your snippet; it gives Google the option to draw a richer result. Two caveats matter: eligibility is never a guarantee — Google alone decides when to show a rich result — and the markup must accurately reflect content that is visible on the page, or it can be ignored or trigger a penalty. Structured data complements good title and description tags rather than replacing them.

Open Graph, Twitter Cards and social previews

The card that appears when someone shares your link on social media is built from a separate set of meta tags, not from your Google snippet. The Open Graph protocol, introduced by Facebook in 2010 and inspired by earlier standards such as Dublin Core and RDFa, defines the properties most platforms read. Its four core properties are og:title, og:type, og:image and og:url, with og:description adding a one- or two-sentence summary.

X (Twitter) layers its own twitter:card tags on top — most often summary_large_image for a big preview image — but falls back to the Open Graph tags when its own are absent, so well-formed Open Graph markup usually covers every major network. The preview image deserves attention: a landscape image around 1200 × 630 pixels (a 1.91:1 ratio) is the long-standing recommendation, large enough to render crisply without being cropped awkwardly.

The Social Card tab above simulates these previews. Because search snippets and social cards are governed by different tags, it is worth setting both: a strong <title> and meta description for Google, and matching Open Graph and Twitter tags for the share card. The Meta Tag Generator produces the exact HTML for all of them.

URLs, slugs and breadcrumbs

The line of text above your title is the breadcrumb, and Google builds it from your URL structure. A clean, readable path like example.com/blog/seo-basics becomes a tidy example.com › blog › seo-basics, while a messy URL full of IDs and parameters reads poorly and gives users less confidence in the link. Descriptive, lowercase, hyphen-separated slugs that include a relevant keyword are the goal.

You can also tell Google the exact breadcrumb trail to display by adding BreadcrumbList structured data, rather than leaving it to infer the path from the URL — useful when your site’s information architecture differs from its folder structure. Either way, keep slugs short and stable: changing a published URL means setting up a redirect, so it pays to choose a concise, human-readable slug the first time and then leave it alone. A good slug is one a person could read aloud and roughly guess what the page is about.

Related tools

• Meta Tag Generator
• WCAG Contrast Checker
• CSS Formatter
• URL Encode / Decode

Frequently asked questions