Metadata And Open Graph Images

Static and Dynamic Metadata

Export `metadata` object or `generateMetadata` async function from layouts and pages. Title, description, openGraph, twitter, robots, and alternates fields map to HTML meta tags.

generateMetadata receives params and searchParams for dynamic titles — blog post title from slug lookup. Metadata merges down the tree with child overrides extending parent defaults.

• metadata export for static SEO
• generateMetadata for dynamic routes
• Child metadata overrides parent

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

Open Graph and Twitter Cards

openGraph object sets og:title, og:description, og:image, og:url for social sharing previews. twitter card type `summary_large_image` shows large preview on X/Twitter.

Absolute URLs required for og:image — use metadataBase in root layout to resolve relative paths. Test previews with Facebook Sharing Debugger and Twitter Card Validator.

• openGraph for social previews
• metadataBase for absolute URLs
• Validate with platform debug tools

Dynamic OG Images

opengraph-image.tsx (or .js) in route segments generates images with ImageResponse using JSX and CSS-like styles. Dynamic params produce unique preview images per blog post or product.

File size and generation time matter — cache generated images. Fallback to static default OG image when dynamic generation fails.

• opengraph-image.tsx with ImageResponse
• Unique previews per dynamic route
• Fallback static image

Canonical and Robots

alternates.canonical prevents duplicate content penalties when same content exists at multiple URLs. robots.index and robots.follow control crawler behavior — noindex for staging, auth pages, and duplicate filters.

Sitemap.ts generates /sitemap.xml dynamically listing public routes. robots.ts generates robots.txt with sitemap reference.

• Canonical URLs for duplicates
• noindex for non-public pages
• sitemap.ts and robots.ts generation

Structured Data

JSON-LD scripts in layout or page describe Article, Product, Organization schema for rich search results. Validate with Google Rich Results Test.

Keep structured data synchronized with visible page content — mismatches trigger penalties. Generate JSON-LD from same data source as page render.

• JSON-LD for rich results
• Validate with Google tools
• Match visible content exactly