Skip to main content
Back to Blog
Next.jsSEOMetadata API

Next.js SEO Guide 2026: Metadata API, Sitemaps, and Structured Data

8 min read

A complete Next.js SEO guide for 2026 — using the Metadata API, generating sitemaps, adding structured data, optimizing Open Graph tags, and achieving top search rankings.

Next.js has become the premier framework for building SEO-friendly web applications, thanks to its server-side rendering, the Metadata API, automatic sitemap generation support, and built-in image optimisation. Muhammad Sufyan of Sufyan Frontend has implemented SEO for multiple production Next.js projects and shares this comprehensive 2026 guide covering every layer of technical SEO in Next.js.

The Metadata API: Dynamic and Static SEO Tags

Next.js App Router provides the Metadata API for generating page titles, descriptions, Open Graph tags, Twitter cards, and more. You can export a static metadata object for simple pages or an async generateMetadata function for pages that need dynamic data from a database or API call.

// Static metadata — layout.tsx or simple pages
export const metadata: Metadata = {
  title: "Muhammad Sufyan — Frontend Developer",
  description: "React and Next.js developer from Lahore, Pakistan",
  alternates: { canonical: "https://sufyan-frontend.vercel.app" },
  openGraph: {
    title: "Muhammad Sufyan — Frontend Developer Portfolio",
    images: [{ url: "/og-image.png", width: 1200, height: 630 }],
  },
};

Sitemaps and Robots.txt

Next.js supports automatic sitemap generation through a sitemap.ts file at the app root. This file returns an array of URL objects that Next.js converts to a valid XML sitemap accessible at /sitemap.xml. Similarly, robots.ts generates your robots.txt file programmatically, allowing you to control which pages are crawled based on your application logic.

Structured Data and JSON-LD

  • ▸Add JSON-LD schema markup for articles, organisations, breadcrumbs, and FAQs
  • ▸Use dangerouslySetInnerHTML to inject JSON-LD in a script tag in your page component
  • ▸Test structured data with Google's Rich Results Test tool after implementation
  • ▸Implement breadcrumb schema on all inner pages for enhanced search appearance

Conclusion

Next.js gives you every tool you need to build a technically excellent SEO foundation, but it requires deliberate implementation. Muhammad Sufyan has applied all these techniques on projects including his portfolio at https://sufyan-frontend.vercel.app, the Ehya Education Platform, and the Alif Laila platform. Follow these patterns on your Next.js project and watch your search rankings improve.