SEO metadata rules for Next.js pages. Use when creating or modifying page metadata, title tags, meta descriptions, Open Graph tags, canonical URLs, or Twitter cards.
Compatible with Next.js 15.x/16.x, App Router and Pages Router. Code examples use App Router conventions — for Pages Router, use
next/headwithgetStaticProps/getServerSideProps.
Follow these rules when creating or modifying page metadata.
{Page Content} | {Brand Name} — put the most important words firstgenerateMetadata (App Router) or next/head with SSR/SSG data (Pages Router) to create titles from data?page=1; subsequent pages should have a self-referencing canonicalRequired on every page:
| Tag | Rule |
|---|---|
og:title | Same as or adapted from title tag |
og:description | Same as meta description |
og:url | Must match canonical URL exactly |
og:type | website (or product, article as appropriate) |
og:image | Representative image, min 1200x630px |
og:site_name | Your site/brand name |
| Tag | Rule |
|---|---|
twitter:card | summary_large_image (for pages with images) or summary |
twitter:title | Same as og:title |
twitter:description | Same as og:description |
generateMetadata, Pages Router: next/head + SSR):export async function generateMetadata({ params }: Props): Promise<Metadata> {
const data = await getData(params.id);
return {
title: `${data.name} | Brand`,
description: data.summary,
alternates: { canonical: `${siteConfig.url}/page/${data.slug}` },
openGraph: {
title: `${data.name} | Brand`,
description: data.summary,
url: `${siteConfig.url}/page/${data.slug}`,
type: 'website',
images: [{ url: data.imageUrl, width: 1200, height: 630 }],
},
};
}
metadata export:export const metadata: Metadata = {
title: 'About Us | Brand',
description: 'Learn about our company and mission.',
};