SEO Metadata

Learn how to configure SEO metadata for your application.

Static Metadata

You can define static metadata in your layout.tsx or page.tsx files using the metadata export:

// app/layout.tsx
export const metadata = {
  title: 'My Website',
  description: 'Welcome to my website',
  keywords: ['Next.js', 'React', 'JavaScript'],
  openGraph: {
    title: 'My Website',
    description: 'Welcome to my website',
    url: 'https://mywebsite.com',
    siteName: 'My Website',
    images: [
      {
        url: 'https://mywebsite.com/og.png',
        width: 1200,
        height: 630,
      },
    ],
    locale: 'en-US',
    type: 'website',
  },
}

Dynamic Metadata

For dynamic routes, use generateMetadata function to generate metadata based on route parameters:

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
 
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  }
}

Metadata Files

Next.js supports special metadata files that are automatically handled:

favicon.ico, apple-icon.jpg, icon.jpg - Place in app/ directory
opengraph-image.jpg - For Open Graph images
robots.txt - For search engine crawling rules
sitemap.xml - For search engine indexing

Metadata Inheritance

Metadata cascades through the route hierarchy:

Layout metadata merges with page metadata
Child routes can override parent metadata
More specific routes take precedence

JSON-LD

You can add structured data using JSON-LD:

export default function Page() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Article",
            "headline": "Article headline",
            "author": {
              "@type": "Person",
              "name": "John Doe"
            }
          })
        }}
      />
      {/* Page content */}
    </>
  )
}