SERP Snippet Preview
Type a title tag, meta description and URL to see a live search-result mock-up for desktop and mobile. Text is measured in pixels like search engines do, so you can see exactly where it will be cut off.
An original mock-up for checking length and wording. Real search engines may rewrite titles and descriptions.
How to use the SERP Snippet Preview
- Enter your title tag and watch the pixel meter; keep it green and under the limit.
- Write the meta description. The preview shows where it is cut off and adds “...” at the truncation point.
- Add the page URL and site name to see the breadcrumb line, and optional keywords to bold.
- Switch between Desktop and Mobile to check both layouts, and set a date if your page shows one.
- Press Copy HTML tags and paste the title, meta description and canonical link into your page's head.
Snippet length limits at a glance
| Element | Font used for measuring | Desktop limit | Mobile limit | Typical characters |
|---|---|---|---|---|
| Title | Arial 20 px (18 px on mobile) | ≈ 600 px, one line | 2 lines of ≈ 340 px | 50–60 |
| Meta description | Arial 14 px | ≈ 920 px (about 2 lines) | ≈ 680 px | 120–158 |
| URL / breadcrumb | Arial 12 px | Shown as domain › folder › page; long paths are shortened | – | |
These limits are approximations based on how search results are commonly rendered. They change from time to time, so leave a little room rather than filling every pixel.
Why pixels matter more than characters
Each letter has its own width. In 20 px Arial, a lowercase i is about 4.4 px wide, while a capital W is about 18.9 px. That is why a character limit alone is misleading:
| Title (55 characters) | Approximate width | Fits in 600 px? |
|---|---|---|
| All lowercase words with narrow letters | ≈ 430–480 px | Yes |
| Title Case With Many Capital Letters | ≈ 560–620 px | Borderline |
| ALL CAPS TITLE LIKE THIS ONE | ≈ 700+ px | No, truncated |
The tool measures text with the canvas measureText() API using the same font family and size, then removes whole words from the end until the text plus "..." fits the limit, which mirrors how truncation looks in results.
Writing snippets that earn the click
- Lead with the main keyword in the title, then add a benefit or differentiator; put the brand at the end (for example "… | Example Tools").
- Make every title unique across your site so search engines do not rewrite or group them.
- Answer the searcher's intent in the description and include a clear reason to click, such as "free", "step by step" or "updated for 2026".
- Avoid quotes and special characters in meta descriptions that may be cut or escaped, and do not stuff keywords; bolding only helps when the text reads naturally.
- Check mobile: most searches happen on phones, where titles wrap and descriptions are shorter.
Frequently asked questions
How long should a title tag be?
Search engines cut titles by pixel width, not by characters. On desktop, roughly 600 pixels of 20 px Arial fit, which is usually 50–60 characters. Wide letters such as W and M use more space than i or l, so a 55-character title can still be too long. The meter here measures the real width.
How long should a meta description be?
Aim for about 120–158 characters. Desktop results show up to about 920 pixels of 14 px text (around two lines), and mobile results usually show less. Put the most important information first so it survives truncation.
Will Google show my title and description exactly like this?
Not always. This is an approximation for checking length and wording. Google may rewrite titles, pick a different text snippet that better matches the search query, or add extras such as ratings and sitelinks. A well-written, accurate title and description is still the best way to influence the snippet.
Why does the date reduce the description length?
When a search engine shows a publication date, it appears at the start of the description line and the remaining text is shortened accordingly. Turn on the date field to see how much space is left.
Why are some words bold in the preview?
Search engines bold the words from the searcher's query that appear in your description. Enter the keywords you target to see how the snippet would look for that search.
Is anything I type sent anywhere?
No. The measurement uses your browser's canvas text metrics and everything runs locally. Your last snippet is saved only in this browser for convenience.