SEO Tools
Next.js metadata previewer.
Paste an export const metadata or the object a generateMetadata function returns. See the <head> tags the App Router emits for title, description, canonical, robots, Open Graph, and Twitter.
Metadata
Privacy note: the code is read by a small parser in this browser. It is never evaluated and nothing is uploaded. The preview shows what the documentation says Next.js emits for the fields listed below; it does not run your app, so it is not proof of what a deployed page serves.
Expected <head>
Paste metadata and press Preview head tags.
How the preview is built
Title templates
title.template (for example %s | Acme) applies to child segments only, never to the segment that defines it, and needs a title.default. title.absolute skips the parent template. Source: Next.js docs, title section.
Merging
Metadata from layouts down to the page merges shallowly. If a page defines openGraph, it replaces the layout’s whole openGraph object rather than adding to it. The parent box lets you check this.
metadataBase
Relative URLs in canonical, alternates, Open Graph, and Twitter images are joined to metadataBase. Without one, a relative URL is a build error in Next.js, so the preview flags it as an error.
Worked example
Layout: title: { template: '%s | Acme', default: 'Acme' } and metadataBase: new URL('https://acme.com'). Page: title: 'About' and alternates: { canonical: '/about' }. Result: <title>About | Acme</title> and <link rel="canonical" href="https://acme.com/about" />. Load the first example to try it.
Fields covered
title, description, metadataBase, alternates (canonical, languages, media, types), robots (index, follow, noimageindex, max-* and googleBot), openGraph (title, description, url, siteName, locale, type, images, videos, audio, publishedTime, authors), and twitter (card, siteId, creator, creatorId, title, description, images). Other valid fields such as icons or verification are reported as not rendered. Docs checked against Next.js 16.3.8, page last updated 2026-08-25.
Next.js metadata questions
Does this run my generateMetadata function?
No. It reads the returned object literal and never executes code. Values that come from variables, fetches, or expressions (like product.title) show as {{product.title}} placeholders, so you can still check the structure.
Why is my layout title template not applied to the layout’s own page?
Per the Next.js docs, a template applies to child segments, not the segment that defines it. A page.js in the same folder as the layout that defines the template does not get it; a page in a nested folder does.
Does a matching preview mean Google will index or show it this way?
No. It confirms what the Next.js documentation says the metadata renders to. Search engines choose their own titles and snippets, and the deployed page may differ. Use the Meta Tag Analyzer on the live URL to check what is actually served.
What about fields this tool does not render?
They are listed in the notes under the preview, not guessed at. Only output shown in the Next.js documentation examples is reproduced.
Sources
- Next.js: generateMetadata (App Router API reference)Field list, title template, metadataBase table, merging rules, and the head output examples. Version 16.3.8, last updated 2026-08-25.