What does the SERP preview tool do?
The tool draws a search result card from a title, description, URL and search query. For each text it reports the character count, pixel width, how many lines it wraps to and whether it exceeds the budget. Words that match the query are bolded in the description, and the bold parts are measured on their own.
Editors can test a headline before publishing, developers can check titles generated from templates, and agencies can compare title options side by side before sending them to a client. Once the wording works, the meta tag generator turns it into a ready-to-paste head block.
How to use it
- Type the page
titleinto the title field. The preview updates as soon as you pause typing. - Add the meta description. If you leave it empty, the card stays intact and simply hides the description line.
- Optionally enter an absolute HTTP or HTTPS URL. It is validated locally only; no request is sent to it.
- Enter the target query. Matching words are shown in bold in the description.
- Switch between desktop and mobile, and choose Turkish matching rules if your copy is in Turkish.
- Copy the result, download it as JSON or create a share link that optionally includes your inputs.
Pixels versus characters
Truncation in search results depends on how much horizontal space the text takes, not on how many characters it has. WWWWWW and iiiiii have the same length, yet the first is several times wider. That is why a 55-character title can fit while a 48-character one gets cut.
Measurements use the browser’s CanvasRenderingContext2D.measureText(). Titles are measured in normal 20px Arial, descriptions in normal 14px Arial and bolded query parts in bold 14px Arial. The preview renders with exactly the same font values. One decimal is displayed, but the fit decision uses the unrounded width.
Lines break at word boundaries. A single word too long for a line is split at grapheme boundaries, so emoji and combined letters are never cut in half. When the last allowed line needs truncation, the width of … is counted inside the budget. With Turkish matching, İstanbul matches the query istanbul and I lower-cases to ı. The query is never run as a regular expression.
Desktop and mobile profiles
The values below are this tool’s approximate preview profiles. They are not fixed truncation limits published by Google, and the live interface may differ as it changes.
| Profile | Title budget | Description budget |
|---|---|---|
| Desktop | 1 line × 600 px | 2 lines × 460 px |
| Mobile | 2 lines × 340 px | 3 lines × 340 px |
Worked example
The Load example button fills in the title “SERP Preview Tool: Measure Your Title and Description Pixel by Pixel | Yunus Emre” and the query “serp preview”. On desktop the title overflows the 600 px budget, so the tool adds … after the last word that fits and reports the overflow in pixels.
Switch to mobile and the same title wraps onto two lines and may fit completely. In the description, “SERP” and “preview” are bold; because bold glyphs are wider, the total description width grows slightly as well. The result changes with the device without editing a single character, which is exactly why pixel measurement matters.
Google may rewrite your title
Google does not always show a page’s title element as written. If the title does not describe the page well, is very long or repeats boilerplate, Google may build a title link from other sources such as the H1 or anchor text. It can also pick a passage from the page as the snippet instead of your description. This tool shows how your own text could look; it does not predict which text Google will choose. See Google’s title link documentation for details.
Measurement limits and common mistakes
- If Arial is not installed, the browser substitutes another sans-serif font, so pixel values can differ by a few pixels between operating systems.
- The card imitates the site name and favicon row; real results can include dates, ratings or other elements that take space.
- Moving the important words to the front of a title is more reliable than trimming it to a character count.
- Reusing the same title across many pages makes a rewrite by Google more likely.
- Limits: title 600, description 2,000 and query 200 characters. Longer input is never silently cut; an error is shown.
Frequently asked questions
How many characters should a title have?
There is no fixed character limit; pixel width decides. In practice 50–60 characters fit most desktop titles, but wide letters lower that number. Measuring the actual text in a preview is the most reliable approach.
Is the measurement identical to Google?
No. The tool uses your browser’s Canvas measurement and approximate profiles. Google’s interface, fonts and truncation behaviour can change, so treat the result as a good estimate.
Why are query words shown in bold?
Search results can bold words in the snippet that match the query. Bold text is wider, so the tool measures those parts separately with bold 14px Arial.
Is a request sent to the URL I enter?
No. The URL is only checked for a valid format and shown on the card. The page is not fetched, no favicon is downloaded and your inputs are not sent to a server.
Is the share link private?
Including inputs in the link is off by default. If you turn it on, the text is stored in the # part of the URL as Base64, which is not encryption; anyone with the link can read it.