Dynamic Metadata & SEO
Search engine discoverability and social share previews are first-class primitives in Next.js.Learn how to implement async generateMetadata resolving parent tags without duplicate database requests.Programmatically generate dynamic PNG social cards at the edge using @vercel/og and JSX, automate dynamic sitemap.ts generation, and safely inject Schema.org JSON-LD structured data.
Static vs Dynamic Metadata Generation
Next.js provides two ways to define SEO tags: static metadata via the export const metadata object, and dynamic metadata via the generateMetadata async function. Metadata merges hierarchically from root layouts down to nested pages, with leaf pages overriding parent properties while inheriting un-overridden defaults.
Dynamic OpenGraph Image Generation with @vercel/og
Next.js supports programmatically generating social share images (og:image) using opengraph-image.tsx route conventions powered by @vercel/og and Satori. This generates SVG/PNG images dynamically on the server using JSX and CSS Flexbox subsets, eliminating manual Photoshop/Figma asset generation for millions of dynamic pages.
Dynamic XML Sitemaps and Robots Configuration
Next.js provides special file-convention endpoints for search engine indexing: sitemap.ts generates standard XML sitemaps dynamically, while robots.ts generates robots.txt rules. For sites with more than 50,000 URLs, Next.js supports generateSitemaps to automatically shard URLs across multiple sitemap indices.
Structured Data (JSON-LD) Implementation in Server Components
Structured Data using schema.org vocabulary in JSON-LD format enables Google to understand page semantics and render rich search results (Rich Snippets, Star Ratings, FAQs, Product Badges). In Next.js App Router, JSON-LD is injected directly inside Server Components using a safe <script type="application/ld+json"> tag containing sanitized JSON.