SERP Snippet Preview
Type a title, a page address and a meta description, and this tool draws the search result they could make, once at desktop width and once at phone width. Each part is measured in pixels and cut where the estimate says, so you can judge the whole result before a page goes live. It all runs in your browser, nothing is uploaded, and the drawing is an approximation.
Measured in this browser tab. Nothing is uploaded or saved.
Shown as the site and breadcrumb line. The page is not fetched.
Limits: Up to 8 KB of text in each of the title and description boxes. Larger input is refused with a message. The address, site name and date boxes have no cap of their own.
Results
- Title, estimated at 20 px Arial
- -
- Title on desktop, 600 px budget
- -
- Title on mobile, 500 px budget
- -
- Description, estimated at 14 px Arial
- -
- Description on desktop, 920 px budget
- -
- Description on mobile, 680 px budget
- -
Search result preview
An approximation drawn from the estimates above, not a copy of a real results page.
Your title appears here
Your description appears here
Your title appears here
Your description appears here
| Part | Level | What the preview found |
|---|
How to use the SERP Snippet Preview
- Fill in the title, the meta description and the address of the page you are working on.
- Optionally add the site name shown above the address and a date shown before the description.
- Compare the desktop and mobile drawings and the six estimates above them.
- Edit any part in place and watch both drawings update as you type.
Worked example
A repair guide on a cycling site, with a date and a long description. Press Load the example to fill in the title, description, address and settings listed below; these are the estimates the preview shows in Chrome with Arial installed.
Bike Chain Slipping? Seven Fixes to Try at Home
- Meta description
- Fix a slipping bike chain at home: check chain wear, adjust the rear derailleur and replace a worn cassette, with the tools each step needs and how long it takes.
- Page address
- https://www.example.com/repair/bike-chain-slipping/
- Site name
- Spoke and Gear
- Date in front of the description
- Jun 12, 2026
- Title, estimated at 20 px Arial
- 47 characters, 438 px
- Title on desktop, 600 px budget
- Fits, 162 px to spare
- Title on mobile, 500 px budget
- Fits, 62 px to spare
- Description, estimated at 14 px Arial
- 162 characters, 992 px
- Description on desktop, 920 px budget
- Cut after 133 of 162 characters
- Description on mobile, 680 px budget
- Cut after 93 of 162 characters
How to read the results
- Title and description, estimated
- How many characters each text has and how wide it is on one line, in Arial at 20 px for the title and 14 px for the description, rounded to the pixel.
- On desktop and on mobile
- Fits with the pixels left, or the number of characters kept before the cut. For the description, a date reduces the budget first.
- Search result preview
- Two drawings of the same result. The desktop one is a 600 px column on a wide screen, the mobile one a card about the width of a 360 px phone. Each shows the text its own estimate keeps.
- Site and breadcrumb line
- The site name, or the host name when you leave it empty, over the address turned into a trail of folders. A long trail is shortened with an ellipsis by the layout only; it is not measured.
- Checks
- Findings for each part, a warning when something is likely to cost space or clarity, and a note for the rest. Nothing here is a score.
How this tool works and its limitations
Both texts are measured by your browser's canvas measureText method: the title at 20 px and the description at 14 px, in Arial or a font with its widths (Helvetica, Liberation Sans, Arimo), with kerning off. A sentence of known Arial width is measured as soon as the page opens, and if this browser is using some other font the page says by how much the results will differ. The drawing uses the same fonts and settings, so what it shows matches what was measured.
The budgets are fixed reference figures, 600 px desktop and 500 px mobile for the title, 920 px and 680 px for the description, chosen from those that SEO tool makers publish; Google itself publishes none and truncates to fit each screen. A part that is too wide keeps its longest start that fits with an ellipsis, then stops at the last whole word. Google's pages linked here were read on 21 October 2026. Keep these limits in mind:
- This is a drawing made from what you type, not a fetch of a live results page: it cannot show the title link, snippet, site name or date Google would really choose.
- Every width is an estimate against this tool's own budgets of 600 and 500 px for titles and 920 and 680 px for descriptions, since Google publishes none.
- The breadcrumb line is built from the path of the address. A site with breadcrumb structured data, or one Google labels in its own way, can show a different trail.
- Rich result features such as ratings, prices, images and sitelinks are not drawn, and the preview does not tell you whether a page is eligible for any of them.
- Measured widths depend on the fonts your computer has; when the test sentence does not match Arial, the page warns you and says by how much.
- The title and description boxes take up to 8 KB of text each and refuse more with a message; the address, site name and date boxes set no cap.
Features
- Site name, breadcrumb line, title and description in one result, drawn for desktop and for mobile.
- Title and description widths measured in Arial and compared with separate device budgets.
- A breadcrumb built from the address path, with the query string and fragment left out.
- Checks across parts, such as a description that repeats the title or a title that repeats the site name.
The parts of a text result
Google's visual elements gallery breaks a text result into attribution elements, which show where it comes from, followed by the title link and the snippet. The attribution part holds the favicon, the site name and a visible URL made of a domain and a breadcrumb. A byline date can sit before the snippet. This preview draws those pieces in that order, with a plain circle standing in for the favicon, so you see the title and description in the context a searcher meets them.
How the address line and site name are chosen
The breadcrumb shows the page's position in the site's hierarchy, and Google can take it from breadcrumb structured data when a page has it. Here it is built from the folders in the address, decoded and joined by angle marks, with any query string or fragment dropped. Google's site name system is fully automated: it looks at the home page and references to the site, and may fall back to the domain when it is not confident in a name. The setting lets you see your preferred name in place.
Reading the title and description together
A result works when its parts divide the job. The title names the page, the description adds what the title had no room for, and the address tells people where they will land. Look for repetition across them: a description that restates the title wastes its width, and a brand in the title next to the same site name above it may be shortened by Google anyway. Then compare the two drawings. A phone usually keeps less of both texts, so the detail that decides a click should appear early in each.
Frequently asked questions
Is this exactly how my page will appear in Google?
No. It is a drawing built from your text with this tool's width estimates. Google may write a different title link or snippet, choose another site name, add or leave out a date, and change its fonts and layout at any time.
Does the preview fetch my page or read its structured data?
No. Nothing is requested from your site. The preview uses only the fields on this page, so you can check a page that is not published yet.
Why does the address show arrows instead of slashes?
Results show a breadcrumb trail rather than the raw address. The preview splits the path at each slash and joins the folders with an angle mark; breadcrumb markup on the page can give Google a better trail.
What do I put in the site name field?
The name you would like shown above the address, usually your brand. Left empty, the preview uses the host name without www. Google decides the real site name and may show the domain instead.
How does the date change the result?
A date in front of the description moves the start of the text along the line, so the preview measures the date and takes its width from both description budgets before deciding where to cut.
Will a result that looks complete here get more clicks?
No tool can promise that. The preview shows how much of each part could appear, so you can make sure the words you care about are visible; what searchers choose depends on their query and the other results.
Last updated .