Metadata API

Metadata API を分かりやすく

Next.js 13.2 で、SEO 対策として新しい Metadata API が導入されました。

Metadata API は、Next.js の新機能で、ウェブアプリケーションの SEO（検索エンジン最適化）をサポートし、メタデータの管理を効果的に行うことができるように設計されています。この API は、サーバーコンポーネントであるレイアウトやページにおいて、メタデータ（HTML の head 要素内の meta タグや link タグなど）を明示的に設定することができます。

layout.js もしくは page.js にメタデータを設定する例を示します。

静的メタデータ

// app/layout.tsx

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'ここにタイトルが入ります',
  description: 'ここに説明が入ります',
}

動的メタデータ

export async function generateMetadata({ params, searchParams }) {
  const product = await getProduct(params.id)
  return { title: product.title }
}

Metadata API の特徴

Metadata API の主な特徴をまとめました。

組み合わせ可能

複数のメタデータオブジェクトを組み合わせてマージすることができる。

静的および動的メタデータのサポート

静的なメタデータと動的なメタデータの両方に対応している。

TypeScript 対応

TypeScript プラグインを使用するか、Metadata タイプを追加することで、TypeScript に対応できる。

オープングラフ対応

Metadata API を使って、オープングラフの画像やその他の属性を定義することができる。

App Router との互換性

Next.js の App Router（app）に対応しており、バージョン 13.2 で利用可能。

pages ディレクトリでは利用できない

ただし、Metadata API は pages ディレクトリでは利用できない点に注意が必要です。

参考：Blog - Next.js 13.2 | Next.js