Clew

HomeToolsSEOSERP snippet preview

Title and meta description checker with SERP preview

Paste your page title and description — the tool measures their width in pixels, shows where Google will cut them with an ellipsis, highlights your query words and flags common mistakes. Get escaped <title> and <meta name="description"> tags in one click.

● Free, no sign-upUpdated:

Used for the URL line in the preview.
Query words are shown in bold, and the tool checks whether they appear in your text.
Device

—

 

Approximate preview

Title— · —
Description— · —

Width is measured with Arial in your browser. The limits are practical guidelines, not official numbers: search engines change their result layouts and often rewrite snippets.

    Tags for <head>

    
  
    

    

    Everything is calculated in your browser — nothing you enter is sent anywhere.
    How to use it
    

    1. Paste the title and descriptionThe text of your page’s <title> and <meta name="description">, or a draft for a new page.
    2. Pick a deviceDesktop or mobile: the description budget is narrower on phones.
    3. Add a queryQuery words are highlighted in the preview the way search results bold them, and the tool tells you which words are missing.
    4. Copy the tagsFix the warnings and copy the ready tags: quotes and special characters are already escaped.
    Why title length is measured in pixels
    Search results limit a title not by character count but by the width of the block. Letters in a proportional font have different widths: “W” and “m” are several times wider than “i” and “l”, capitals are wider than lowercase. So 60 characters of one title fit on a line while 52 characters of another do not.
    

    The tool measures text the way a browser does: it draws it on an invisible canvas (canvas.measureText) in a font close to the results font and compares the width with a practical budget. If the text does not fit, it is cut at the last whole word and an ellipsis is added — as it typically looks in results.
    

    Google, desktop: title ≈ 600 px (Arial 20 px), description ≈ 920 px (Arial 14 px, about two lines)
Google, mobile:  title ≈ 600 px, description ≈ 680 px
    

    These are not official limits. Google’s documentation states plainly that it does not limit the length of the <title> element or the meta description: title links and snippets are truncated to fit the device width. The budgets above are widely used by SEO practitioners and describe typical layouts, which change regularly.
    

    The practical takeaway: length is not the goal. Make sure the essence of the page and the key words sit in the first 40–50 characters, so the end of the title can be lost without losing meaning.
    How Google builds the snippet
    Title links
    

    Google calls the result headline a “title link”. Most often it comes from the <title> tag, but Google also considers other sources: the main visible heading and other headings, og:title, prominent text, and anchor text of links to the page. Google changes the title when <title> is empty, identical across many pages, stuffed with keywords or does not match the content.
    

    Snippets
    

    Google builds snippet text mainly from page content, chosen for the specific query. The meta description is used when it describes the page more accurately than text fragments. That is why the same URL can appear with different descriptions for different queries.
    

    Why snippets get rewritten
    

      

    • The title is the same on many pages: “Home”, “Products”, “Clew”.
      • 

    • The title lists comma-separated keywords instead of naming the page.
      • 

    • The description does not answer the query the page was found for.
      • 

    • The text shouts: ALL CAPS, “!!!”, promises without specifics.
      • 

    How to write a title and description for a SaaS page
    For landing pages, feature pages and blog posts of a SaaS product, the same pattern works well.
    

    title:       [what it is / main query] + [who it is for or what sets it apart] — [brand]
description: [the problem it solves] + [1–2 concrete facts] + [a soft call to action: try, calculate, compare]
    

      

    • Query first. “User onboarding for SaaS without developers — Clew” beats “Clew — a platform that helps…”. Put the brand first only if people already search for it by name.
      • 

    • One title, one page. Pricing, feature and blog pages should not compete with the same title.
      • 

    • Specifics in the description. What the person gets: “tours, tooltips and checklists inside your app”, “free plan forever”. No invented numbers.
      • 

    • Match the intent. For an informational query — “how to increase activation” — the description promises an answer, not a sales pitch.
      • 

    • No duplication between title and description. The description continues the title rather than restating it.
      • 

    

    A good snippet brings in people who actually need the product. After that, the first session decides everything — see Product onboarding: what it is and how to set it up.
    Sources
      

    1. Google Search Central. Influencing your title links in search results — developers.google.com/search/docs/appearance/title-link.
      2. 

    2. Google Search Central. Control your snippets in search results — developers.google.com/search/docs/appearance/snippet.
      3. 

    3. MDN Web Docs. CanvasRenderingContext2D: measureText() — developer.mozilla.org.
      4. 

    4. HTML Living Standard: the title element and the description meta name — html.spec.whatwg.org.
      5. 

    FAQ
    

    What is the ideal title tag length?
    For Google, the practical budget is about 600 pixels — roughly 50–60 characters depending on the letters. There is no official limit: a long title is simply truncated, so put the important part first.
    What is the ideal meta description length?
    On Google desktop, about 920 pixels — roughly two lines or 150–160 characters; less is visible on mobile. Google does not limit meta description length but truncates snippets to the screen width, and often builds them from page text instead.
    Why does Google show a different title?
    Google may build the title link from other sources — the main heading, og:title, link text — if the title is empty, duplicated across many pages, stuffed with keywords or does not match the content. Make the title unique, concise and accurate.
    Why isn’t my meta description shown?
    Google picks snippet text for the query. If a fragment of page text answers the query better than the meta description, that fragment is shown. This is normal; the meta description is still worth writing because it is used for many queries.
    How does the tool measure pixel width?
    The text is drawn on an invisible browser canvas in Arial at the right size (20 px for the title, 14 px for the description), and measureText returns the width. It approximates the results layout rather than copying it exactly.
    Should the brand be in the title?
    Usually yes, but at the end: “UTM Builder — Clew”. Put the brand first only if people already know and search for it, for example on the home page.
    Do I need a meta keywords tag?
    No. Google does not use meta keywords for ranking. There is no need to fill it in, and a public keyword list only shows competitors what you target.
    More in SEO
    

    Open the collection →
    Related reading
    Product onboardingClew for marketersOpen Graph generatorUTM builderAll tools
    Tours, tooltips and checklists whose impact shows up in the numbers.
    

    Try Clew for freeHow it worksFree plan forever · no credit card
    

    Product tours, popups and onboarding in the age of AI
    

    7 patterns with step counts, copy rules and what to measure, what AI changes, and a checklist before you publish. PDF, 2 pages. What is inside →