Digital Presence BlogSearch

The Complete Guide to Next.js Metadata API for SEO

The Metadata API is how Next.js handles SEO tags, Open Graph and canonical URLs. Learn every export you need for perfect meta tags — and the common mistakes.

By Digital Presence Team3 min read
Laptop with analytics on a desk

The Metadata API is Next.js built-in way to manage <title>, meta descriptions, Open Graph tags, canonical URLs and robots directives from your components. No third-party SEO plugin required.

Every page can export a metadata object or a generateMetadata function, and the framework injects the correct tags into the <head>.

The exports you need

These cover the essentials for search and social sharing.

  • title and description: the basics.
  • alternates.canonical: prevents duplicate-content dilution.
  • openGraph: title, description, images, type.
  • twitter: the social card variant.
  • robots: index/follow directives per page.
  • metadataBase: makes relative URLs absolute.
A common mistake is setting the same default title everywhere. Use a title template with %s so every page gets a unique, descriptive title.

Dynamic metadata

For blog posts, export generateMetadata that reads your content and builds tags from the post fields. Pair it with JSON-LD scripts for structured data — the Metadata API and JSON-LD complement each other.

Validate after deploy

Test rendered pages with the rich results tool and social sharing debuggers. Metadata that renders incorrectly is invisible in previews and search snippets.

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    default: 'Digital Presence Blog',
    template: '%s | Digital Presence Blog',
  },
  description: 'SEO, GEO and AEO guides that actually work.',
  alternates: { canonical: 'https://blog.digital-presence.io' },
  openGraph: {
    type: 'website',
    title: 'Digital Presence Blog',
    description: 'SEO, GEO and AEO guides that actually work.',
    url: 'https://blog.digital-presence.io',
  },
  robots: { index: true, follow: true },
}

Metadata API FAQ

Is the Metadata API enough for SEO?

It handles the HTML side — meta tags, canonical, OG. Structured data (JSON-LD) is separate and should be added alongside for schema-based results.

Can I still use a traditional head library?

Avoid mixing. Next.js recommends the Metadata API, and mixing it with other head managers causes conflicts.

Related articles