How to use the SERP Preview
- Type or paste your title tag and meta description. The meters turn green when the text fits Google’s pixel budget.
- Add the page URL and an optional site name — the preview builds the breadcrumb (
example.com › blog › post) from it. - Enter the search query you are targeting to see which words Google would bold, and toggle the date or review stars to see how much space they take.
- Compare the desktop and mobile previews, fix anything marked in Snippet checks, then copy the HTML tags or a share link for your client or team.
What is a SERP preview?
A SERP (search engine results page) preview shows how a page is likely to appear as a blue-link result in Google: the favicon and site name, the breadcrumb-style URL, the clickable title and the grey description snippet. It lets you write and polish your <title> and <meta name="description"> before publishing, instead of discovering a cut-off headline in Search Console weeks later.
Why pixels matter more than characters
Google truncates titles and descriptions by rendered width, not by a character count. A capital “W” is roughly three times wider than a lowercase “i”, so a 60-character title in uppercase can be cut while a 70-character title full of narrow letters fits. This tool measures your text with the same fonts Google uses (Arial 20 px for desktop titles, 14 px for descriptions) via the browser’s canvas API, and truncates at a word boundary with an ellipsis the way Google does.
| Element | Approx. limit | Rough character equivalent |
|---|---|---|
| Desktop title | ~580–600 px | 50–60 characters |
| Desktop description | ~920 px | 150–160 characters |
| Mobile title | two lines | up to ~75 characters |
| Mobile description | ~680 px | ~120 characters |
These limits are observations, not published rules — Google adjusts its layout regularly and may rewrite a title or snippet entirely if it thinks other text on the page matches the query better.
Tips for titles and descriptions that earn clicks
- Front-load the keyword. Put the topic people search for in the first few words, so it survives truncation and gets noticed when users scan.
- Keep the brand short and at the end. Google often shows your site name separately above the URL, so “| Brand Name Inc.” at the end of every title mostly costs space.
- Write descriptions as a promise. Say what the visitor gets — a price, a checklist, a free tool — rather than repeating the title. Google bolds words that match the query, so natural use of the keyword helps the snippet stand out.
- Remember dates and stars eat space. A visible date (“Oct 25, 2026 —”) is shown in front of the description and reduces how much of your text fits. Review stars only appear for eligible schema types such as Product or Recipe — you can generate the markup with the Schema Markup Generator.
Using it on a Webflow site
In Webflow, the title and description live in Page settings › SEO settings. On CMS template pages you can build them from fields (for example Name | Category) — paste a typical item’s values here to check that long CMS names don’t get truncated. To check what a live page actually outputs, run it through the Meta Tag Checker; to write the complete set of head tags, use the Meta Tag Generator.
Tools that pair well with the SERP Preview
- Open Graph Checker — Preview how your link will look when shared on Facebook, LinkedIn, X and Slack.
- SEO Checker & Site Audit — Paste a URL to run up to 70 on-page SEO checks in seconds.
- Heading Checker — Visualise the heading outline of any page.
- Image Alt Checker — Audit every image on a page in one table: alt text status, file size, width/height attributes, format and lazy loading — with filters and CSV export.