Next.js SEO: metadata, sitemaps and rendering

Titles, descriptions and canonicals

Use the Metadata API: export a metadata object from a layout or page, or a generateMetadata function for dynamic routes. Next.js puts the tags in the <head>.

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost((await params).slug)
  return {
    title: post.seoTitle,
    description: post.description,
    alternates: { canonical: `https://example.com/blog/${post.slug}` },
    openGraph: { title: post.seoTitle, description: post.description },
  }
}

next-seo is a community package for the older Pages Router. In the App Router, the built-in Metadata API replaces it.

sitemap.ts and robots.ts

// app/sitemap.ts
export default async function sitemap() {
  const posts = await getPosts()
  return posts.map((p) => ({ url: `https://example.com/blog/${p.slug}`, lastModified: p.updatedAt }))
}

// app/robots.ts
export default function robots() {
  return {
    rules: [{ userAgent: '*', allow: '/' }],
    sitemap: 'https://example.com/sitemap.xml',
  }
}

Checklist

• Fetch page content on the server (in Server Components or at build time), not in useEffect.
• Use generateStaticParams for content pages so they're prebuilt.
• Return notFound() for missing items, so they get a real 404 status.
• Use next/link for internal links; it renders real <a href> elements.
• Add JSON-LD in a <script type="application/ld+json"> rendered by the page.
• Use next/image with width and height to avoid layout shift.
• Check the HTML with JavaScript disabled to confirm titles and content are there.

Next.js and AI search

• Check robots.txt allows the AI search crawlers you want: OAI-SearchBot (ChatGPT search), Claude-SearchBot, PerplexityBot. See the AI crawler list and the robots.txt generator.
• Check your host's or CDN's bot protection doesn't block them even when robots.txt allows them.
• Make sure the main text is in the HTML the server sends. AI crawlers don't run JavaScript.
• Avoid nosnippet and tiny max-snippet values on pages you want quoted; they also keep pages out of Google's AI Overviews.