Skip to main content
Back to Blog
Next.jsMetadata APISEO

Next.js Metadata API: Dynamic SEO Tags, OG Images, and Canonical URLs

7 min read

Learn to use the Next.js Metadata API to generate dynamic page titles, descriptions, Open Graph images, Twitter cards, canonical URLs, and structured data for better SEO.

The Next.js Metadata API is one of the framework's most powerful features for search engine optimisation, allowing you to programmatically generate accurate, dynamic SEO metadata for every page in your application. Muhammad Sufyan of Sufyan Frontend has used the Metadata API across production Next.js projects and shares this complete 2026 guide covering static metadata, dynamic generation, Open Graph images, and canonical URLs.

Static Metadata: The Foundation

For pages with fixed content — landing pages, about pages, contact pages — exporting a static metadata object from your layout.tsx or page.tsx is the simplest approach. Next.js merges metadata from layout files down to page files, so you can set defaults in your root layout and override specific fields at the page level.

// app/layout.tsx — global defaults
export const metadata: Metadata = {
  title: {
    default: "Muhammad Sufyan — Frontend Developer",
    template: "%s | Sufyan Frontend",
  },
  description: "React and Next.js developer from Lahore, Pakistan",
  metadataBase: new URL("https://sufyan-frontend.vercel.app"),
};

// app/about/page.tsx — page override
export const metadata: Metadata = {
  title: "About",  // Becomes: "About | Sufyan Frontend"
  description: "Learn about Muhammad Sufyan's experience and projects",
};

Dynamic Metadata for Blog Posts and Dynamic Pages

For pages with dynamic content — blog posts, product pages, user profiles — use the generateMetadata async function. It receives the same params as your page component, allowing you to fetch the data needed to generate accurate, page-specific metadata including canonical URLs and Open Graph images.

  • ▸Fetch the page's content data to generate accurate title and description
  • ▸Set the canonical URL via alternates.canonical to prevent duplicate content issues
  • ▸Generate Open Graph and Twitter card metadata for social sharing previews
  • ▸Return empty object for 404 cases to avoid setting incorrect metadata

Open Graph Image Generation

Next.js supports automatic Open Graph image generation through the opengraph-image.tsx file convention. You can render a React component to an image at build time or request time, creating branded social preview images for every page without manually creating individual image files.

Conclusion

The Next.js Metadata API is one of the most complete SEO toolsets available in any web framework. Used correctly, it ensures every page in your application has accurate, dynamic, and well-structured metadata that search engines and social platforms can use effectively. Muhammad Sufyan implements the Metadata API on all his production Next.js projects — visit https://sufyan-frontend.vercel.app to see it applied in a real portfolio built by Sufyan Frontend Developer from Lahore, Pakistan.