メタデータとSEO — generateMetadataでtitle・OGPを動的に設定する

// src/app/about/page.tsx
import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "このサイトについて",
  description: "私たちのサービスの理念とチームを紹介します。",
};
 
export default function AboutPage() {
  return <h1>このサイトについて</h1>;
}

// src/app/blog/[slug]/page.tsx
import type { Metadata } from "next";
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await fetch(`https://api.example.com/posts/${slug}`).then((r) => r.json());
 
  return {
    title: post.title,
    description: post.excerpt,
  };
}
 
export default async function BlogPostPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  // ...記事本体の描画
}

// src/app/layout.tsx
export const metadata: Metadata = {
  title: {
    default: "My Blog", // タイトル未設定のページで使う既定値
    template: "%s | My Blog", // %s に各ページのtitleが入る
  },
};

// src/app/about/page.tsx
export const metadata: Metadata = {
  title: "このサイトについて", // → 「このサイトについて | My Blog」になる
};

export const metadata: Metadata = {
  title: "新サービスを公開しました",
  openGraph: {
    title: "新サービスを公開しました",
    description: "詳しくはこちらをご覧ください。",
    images: ["/og/launch.png"], // SNSカードに表示される画像
    type: "article",
  },
};