Next.js 16 provides developers with a robust app router metadata API that outputs canonical layouts, crawlers index constraints, and dynamic files for search robots directly from configuration constants.

1. Dynamic Sitemaps with Image Tags

Generating sitemaps inside sitemap.ts allows you to dynamically fetch database slugs and append image schemas. This helps Google Image Search index key visual elements alongside page text links.

// Dynamic sitemap image output
export default async function sitemap() {
  const posts = await fetchPosts();
  return posts.map(post => ({
    url: `https://neeltech.me/blog/${post.slug}`,
    images: [post.image],
    priority: 0.8
  }));
}

2. Structured Data Graphs (JSON-LD)

Always output semantic Schema.org objects inside your layout. Injecting a structured graph combining Person, WebSite, WebPage, and FAQPage schemas enables rich search results that stand out in Google Search queries.

3. Alternate Lang Hreflangs

Define locales mappings in your layout metadata alternates array. Mappings like "en-IN" and "en-US" instruct global search engine bots which region-specific page versions to present to localized readers.