Serpkin
Get started

Free tool · Runs in your browser

See your page in Google before you ship it

Type a title and description. See them as a Google result on desktop and mobile, measured in pixels, with the exact point where they'd be cut off and code to copy.

Your result

Used for the address line and the code snippets.

Desktop67 chars630 / ~600 pxCut off
Mobile, 2 lines630 / ~656 pxFits

Desktop cut: Next.js caching explained: fetch, use cache and revalidation Hidden: | Acme

Desktop175 chars1155 / ~920 pxCut off
Mobile1155 / ~680 pxCut off

Desktop cut: How caching works in the Next.js App Router: what gets cached, for how long, and how to revalidate on demand. With copy-paste examples Hidden: for fetch, use cache and route handlers.

Optional

Google picks it from your WebSite markup and home page. Defaults to the domain.

Checks it's in the title and near the start.

Google sometimes shows a date before articles.

Desktop only. Defaults to the URL path. Separate with › or /.

Fetch from my page

This tool runs in your browser and sends nothing to a server, so it can't load another site's HTML (browsers block cross-site reads). Two ways to get your current tags:

1. Run this in a terminal, then paste the output below:

curl -sL 'https://acme.dev/guides/nextjs-caching' | grep -iE '<title|name="description"'

2. Or use the free SEO checker, which fetches the page on our server and checks the title, description and more: Check this page

Preview

Device
Theme
Acmehttps://acme.dev › guides › nextjs-caching
Next.js caching explained: fetch, use cache and revalidation...

How caching works in the Next.js App Router: what gets cached, for how long, and how to revalidate on demand. With copy-paste examples ...

Measured in 20px and 14px Arial against about 600 px for the title and 920 px for the description. Approximate: Google cuts by width, varies by device, and may rewrite both.

Share this preview

Tips for this result

Title

  • CheckCut off on desktop after "...use cache and revalidation". Put what matters in the first 60 characters or so.
  • GoodKeyword near the start.
  • TipThe brand at the end is cut on desktop. That's usually fine: Google shows your site name above the title.
  • TipGive every page its own title. Duplicate titles across pages are a common reason Google rewrites them.

Description

  • CheckCut off on desktop after "...demand. With copy-paste examples". Keep the key point in the first sentence.
  • TipGoogle often shows page text instead of your description, picked to match each search. Write it anyway: it's used when it describes the page best.

Copy the code

HTML, in <head>
<title>Next.js caching explained: fetch, use cache and revalidation | Acme</title>
<meta name="description" content="How caching works in the Next.js App Router: what gets cached, for how long, and how to revalidate on demand. With copy-paste examples for fetch, use cache and route handlers.">
Next.js App Router, page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: { absolute: "Next.js caching explained: fetch, use cache and revalidation | Acme" },
  description: "How caching works in the Next.js App Router: what gets cached, for how long, and how to revalidate on demand. With copy-paste examples for fetch, use cache and route handlers.",
  alternates: { canonical: "https://acme.dev/guides/nextjs-caching" },
};
Hand it to your coding agentPaste this into Claude Code, Codex or Cursor in your repo.
Update the title and meta description for the page at https://acme.dev/guides/nextjs-caching (route /guides/nextjs-caching).

Title (67 characters, about 630 px at Google's 20px Arial; aim for about 600 px or less):
Next.js caching explained: fetch, use cache and revalidation | Acme

Meta description (175 characters, about 1155 px at 14px Arial; aim for about 920 px or less):
How caching works in the Next.js App Router: what gets cached, for how long, and how to revalidate on demand. With copy-paste examples for fetch, use cache and route handlers.

Steps:
1. Find where this route sets its <title> and <meta name="description"> (in Next.js App Router: the `metadata` export or `generateMetadata` in the route's page.tsx or layout.tsx).
2. Set them to the exact text above. If a parent layout has a title template that appends the brand, make sure the final title isn't longer than above or the brand isn't repeated.
3. Keep each page's title and description unique: don't copy these to other routes.
4. Check the server HTML contains the new tags, for example with: curl -sL 'https://acme.dev/guides/nextjs-caching' | grep -iE '<title|name="description"'

How the preview measures

Pixels, not characters

Why width
Google's docs say title links and snippets are cut "as needed, typically to fit the device width". Sixty narrow letters can fit where forty wide ones don't.
How we measure
Your browser's canvas measures each string in Arial at 20px for titles and 14px for snippets, the sizes commonly measured on Google's results. Google doesn't publish its styles, so treat the numbers as approximate.

The limits we use (approximate)

Desktop
Title: about 600 px on one line. Description: about 920 px, over roughly two lines. A date before the snippet uses some of that space.
Mobile
On a 360 px wide phone the title wraps to about 2 lines and the description gets about 680 px. Since January 2025 Google shows only the domain on mobile, without breadcrumbs.

Write titles that survive

Keyword near the start
Lead with what the page is about, in the words people search for. The start is what people read and what's never cut.
Brand at the end
"Topic | Brand", not the other way round. Google also shows your site name above the title.
Unique per page
Repeated or boilerplate titles are a common reason Google replaces them.

Descriptions are suggestions

Often rewritten
Google usually builds the snippet from page text that matches the search, and uses your description when it fits better.
Still worth writing
A specific summary of the page, with the key point first, is what Google can use. Don't copy one description across pages.

Keep going

More free tools

Questions

How long should a title tag be?

Google doesn't set a limit. It cuts title links to fit the screen, so what matters is width in pixels, not characters. On desktop that's commonly measured at about 600 px in 20px Arial, which is roughly 50 to 60 characters depending on the letters. Wide letters like W and M use more space than i and l.

How long should a meta description be?

There's no limit on the tag, but Google shortens snippets to fit the device. A common rule of thumb is about 920 px on desktop, roughly 150 to 160 characters, and less on mobile. Put the most useful sentence first so it survives the cut.

Why does Google show a different title or description than mine?

Google writes title links and snippets automatically. It may replace a title that's missing, very short, repeated across pages, stuffed with keywords or out of date, using your headings or link text instead. Snippets are usually taken from the page text that best matches each search; your meta description is used when it describes the page better.

Is this preview exactly what Google shows?

It's a close approximation. It measures your text with the browser's canvas in Arial, the font commonly measured on Google's results, and applies the commonly cited width limits. Google doesn't publish exact limits, layouts change, results differ by device and search, and Google may rewrite your text. Use it to catch titles that are clearly too long, not to count single pixels.

Is anything I type sent to a server?

No. The preview runs entirely in your browser. Your text stays on your device, except that it's added to the page address so you can share the preview link.

How do I set the title and description in Next.js?

Export a metadata object, or a generateMetadata function, from the route's page.tsx or layout.tsx with title and description. If your root layout sets a title template like "%s | Brand", the brand is added to every page title, so preview the full result. The tool's Next.js snippet uses title.absolute to skip the template.