SERP Preview Tool:
See Your Title and Meta Description in Google

What the SERP preview tool shows

The SERP (search engine results page) is the page of results Google returns for a query. Each organic result has three parts: the site name and URL, the clickable title link, and the snippet, the two lines of text underneath. The title link usually comes from your title tag, and the snippet from your meta description when Google finds it relevant. The tool rebuilds that block, on desktop and mobile, from what you type.

What sets it apart: it measures the real width of the text in pixels, not just the number of characters. Your browser draws the text on a hidden canvas with the measureText function, in Arial 20 px for the title and Arial 14 px for the description, then cuts it at a word boundary, with an ellipsis, as soon as it passes the threshold.

What Google says, and what it does not

Google Search Central is clear: there is no length limit for the title element or the meta description. Google truncates title links and snippets as needed, typically to fit the device width. Two more points matter:

• The title link can come from elsewhere than your title tag: the page’s main heading (h1), the og:title tag, the anchor text of links pointing to the page, WebSite structured data. Google does this mostly when the title is too long, stuffed with keywords, repeated across pages or unrelated to the content.
• Snippets are built primarily from the page content. Google shows your meta description only when it judges it a more accurate description of the page for the query typed.

The thresholds in this tool are therefore observed guidelines, not official rules: about 580 to 600 px for a title, about 920 px for a description on desktop and 680 px on mobile. Treat them as a safety margin, and check them against real results from time to time.

How to use the SERP preview tool

1. Paste your page’s title tag, or the title you plan to publish.
2. Paste the meta description, then the page URL: the tool turns it into the breadcrumb Google shows.
3. Optional: add your main keyword and your brand name to turn on the presence and repetition checks.
4. Switch between Desktop and Mobile to see where the text gets cut on each device.
5. Read the gauges: blue below the threshold, orange right next to it, red beyond it. The checks list what to fix, from the most urgent to simple advice.
6. Copy the title, the description or both HTML tags, ready to paste into your site or SEO plugin.

Pixels or characters: the formula

The width of a string is the sum of the widths of its characters in a given font and size: width = sum of glyph advance widths × font size ÷ 1,000, since fonts describe each glyph in thousandths of an em. In Arial 20 px, a capital W is about 18.9 px wide and a lowercase i about 4.4 px: ten Ws take up the room of more than forty is. At the same character count, widths vary a lot:

The same title in all caps is 28% wider. Converted to characters, the 600 px guideline means roughly 55 to 65 characters for a typical title; 920 px means about 140 to 150 characters of description, and 680 px about 105 to 110 characters on mobile. Character counts are fine for a first draft; pixel width settles the question.

Worked example: an emergency plumber in Austin

First draft: "Emergency Plumber in Austin, TX: 24/7 Repairs in Under an Hour | Example Plumbing". 81 characters, about 765 px. On desktop, the result would likely read "Emergency Plumber in Austin, TX: 24/7 Repairs in Under an Hour...": the brand disappears behind the ellipsis, and any extra word would cut into the promise.

Revised version: "24/7 Emergency Plumber in Austin, TX | Example Plumbing". 55 characters, about 528 px: it fits on one line, with the keyword up front and the brand at the end. The speed promise moves to the meta description: "Burst pipe, broken water heater or clogged drain? A licensed plumber at your door in under an hour across Austin. Upfront pricing, free estimates." At 146 characters and about 901 px, it shows in full on desktop. On mobile it stops after "in under an hour across", but the problem, the promise and the timing stay readable. These are the tool’s default values.

Best practices for titles and descriptions

• One unique title per page that describes its content precisely: Google advises against identical or boilerplate titles across pages.
• Your main keyword near the start, phrased the way a customer would say it, without repetition.
• Your brand once, ideally at the end, separated by a hyphen, colon or pipe, as Google suggests.
• A meta description written like a small ad: the problem, the promise, a proof point (timing, price, reviews), a reason to click.
• The key message within the first 105 characters, so it survives the mobile cut.
• A distinct description for each important page: generic text copied sitewide helps nobody.

Common mistakes

• Counting characters only: a 55-character title in all caps can pass 600 px.
• Stacking keywords: "Plumber Austin | Emergency Plumber Austin 24/7 | Cheap Plumber Austin" repeats "plumber" three times and measures about 655 px. Google may rewrite it.
• Repeating the brand: "Example Plumbing | Austin Plumber | Example Plumbing". Google already shows the site name above the URL.
• Leaving the meta description empty on the pages that matter, or copying the same one everywhere.
• Promising in the title what the page does not deliver: the click turns into a quick trip back to Google.
• Forgetting mobile, where the description is cut sooner, around 680 px.

A great result is wasted on a weak page: our guide what is a landing page covers what makes a page convert, and the conversion rate calculator measures how well it does. Running ads too? Check them with the Google Ads preview tool. And if you would rather hand it off, here is how we design websites.