SERP Preview

What the SERP preview estimates

A SERP preview is a reading of a title and a description as a Google snippet preview. The card on this page is that estimate. It is not a live Google result, and it does not account for Google rewriting the title, choosing another description, or showing a longer result for some queries.

Paste a public URL and press Fetch, or type the two lines yourself. The SERP snippet uses the text in the form. On a wide screen you can switch between desktop and mobile. On a phone the card fills the width and the budget stays on mobile.

Where the title and description come from

Fetch reads the first HTML response. The meta title preview is the document title, the text inside the title element. The meta description preview is the content of name="description". og:title and og:description are not copied into these fields. A share card is a different reading. The Open Graph checker draws that card from the Open Graph tags, and the Open Graph preview guide lists which tags that card uses.

The request does not run the page's JavaScript, so a title that exists only after the app boots stays off the form. Localhost and private network addresses are refused. A successful check is kept for about ten minutes. A failed check is not kept.

<head>
  <title>Field notes from the workshop</title>
  <meta name="description" content="A weekly log of tools, materials, and the jobs they finished." />
</head>

Paste a public page into the form above to fill the title and description from that HTML. Open the same URL in the meta tag checker when you want those two lines listed beside the canonical URL, robots tag, and the other head tags.

Title pixel width

The table measures characters and pixels. Title pixel width is the title measured at 19.75 px Arial. The description is measured at 14.04 px Arial. Desktop allows about 561 px for the title and about 985 px for the description. Mobile allows about 583 px for the title and about 1,020 px for the description. The same font is measured on both devices. Only the available width changes.

What the rows mean

Length under Chars is the full line, including a description prefix when one is selected. Displayed is the number of characters kept. The ellipsis on the card is not part of that count. Truncated is the number of characters removed, and a number above zero is marked.

Length under Pixels is the measured width of the full line. Available is the budget for the selected device. Remaining is that budget minus the measured width. Remaining goes negative, and is marked, when the line is wider than the budget.

The card shows the part that fits. When the cut lands inside a word, the visible line stops at the previous word and adds an ellipsis, so the card can be slightly shorter than the Displayed count. The title on the card is drawn at 22 px with a 28 px line height. The pixel budget above is the measurement, not that drawn size. On a wide screen the text column is 652 px. Below 768 px the card uses the full width.

Character count and pixel width answer different questions. Type a title of about 30 characters and read Truncated. For ordinary letters that line fits the title budget. Wide letters can change the result, so the table is the check. Shorten the line when Remaining is negative, then read the card again.

Device, prefix, and bold words

The device control is on the form when the window is at least 768 px wide. Mobile is the default. On a narrower window the control is hidden and the preview stays on mobile, so a desktop budget is not available there.

A description prefix sits in front of the description and uses some of the description budget. Date adds the day, a short month, and the year. Product No.s adds a short range, such as 1-10 of 24. This preview counts that prefix toward the description width, so the description text truncates sooner. Read Remaining again after you turn a prefix on.

Keywords are words to bold in the snippet. Separate them with commas. A word of one letter is skipped. Each remaining word is bolded where it appears in the visible title or description, including a different capital letter. The bolding is a reading aid. It does not change the pixel width.

The site name is the label above the URL. Fetch fills it from og:site_name when that tag is present. An empty field falls back to the hostname. The line under the name shows the https origin and up to two path parts. The icon is the page favicon when one can be resolved, otherwise favicon.ico on that origin. If the image fails to load, the icon is left off.

Rich snippet samples

Reviews add a star line with a sample rating of 4.8. The rich snippet text is appended when you type one. An empty field shows "120 reviews" beside the rating. People show the rich snippet text as a byline, or the word Person when the field is empty. Events show today's date beside that text.

These lines are samples of how extra result text can look. They are not generated from schema on the page, and they are not a promise of a rich result.

Before you trust the card

• The URL is a public page, not a draft on your machine.
• The title in the form is the title element meant for publishing, not only og:title. The guide on og:title vs title explains the difference.
• The description in the form is the meta description.
• Remaining pixels for the title and the description are zero or above on the device you care about.
• A date or product prefix still leaves enough of the description visible.
• The site name is the brand you want above the URL, or the hostname fallback is acceptable.
• The rich snippet control is set to None unless you are only sampling that line.

Paste the public URL into the form above and read Remaining on both devices when the window is wide enough to switch. For the tags behind a shared link, use the Open Graph checker. The about page states the limits these checks share: no account, no JavaScript on the target page, and cards that are estimates rather than a platform screenshot.

Frequently asked questions