Metadata and SEO

Optimize your application for search engines with metadata API, sitemaps, and robots.txt.

22 min

3 sections

seo

metadata

sitemaps

01. Metadata API

Section 1 of 3

Configure page metadata using the generateMetadata function for dynamic SEO optimization.

typescript

import { Metadata } from 'next';

type Props = {
  params: { slug: string };
};

export async function generateMetadata(
  { params }: Props
): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      images: [post.image],
    },
  };
}

Exercise

Add Dynamic Metadata

Practice

Create a blog post page with dynamic metadata that includes the post title and description.

Streaming and Suspense

Authentication

Back to Course