SEO Optimization

Metadata API, Open Graph, sitemaps, robots.txt, and structured data.

Overview

Next.js provides built-in SEO optimization features.

Key Concepts

• Metadata API — Export metadata objects or functions
• Open Graph — Social media sharing optimization
• Sitemaps — XML sitemaps for search engines
• Robots.txt — Control crawler access
• Structured Data — JSON-LD for rich snippets

Code Examples

// app/layout.js
export const metadata = {
  title: 'My App',
  description: 'My awesome Next.js app',
  openGraph: {
    title: 'My App',
    description: 'My awesome Next.js app',
    images: ['/og-image.png']
  }
};

// app/blog/[slug]/page.js
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.coverImage]
    }
  };
}

// app/sitemap.js
export default function sitemap() {
  return [
    { url: 'https://example.com', lastModified: new Date() },
    { url: 'https://example.com/about', lastModified: new Date() },
    { url: 'https://example.com/blog', lastModified: new Date() }
  ];
}

// app/robots.js
export default function robots() {
  return {
    rules: [
      { userAgent: '*', allow: '/', disallow: '/admin' }
    ],
    sitemap: 'https://example.com/sitemap.xml'
  };
}

// Structured data
function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    author: { '@type': 'Person', name: post.author }
  };

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <article>{post.content}</article>
    </>
  );
}

Practice

Implement comprehensive SEO with metadata, sitemaps, and structured data.