以前からアナウンスされていた通り、Next.js 13.2ではSEO機能の改善の一環としてMetadata APIが新たに追加されました。
この記事ではNext.js13.2で新たに追加されたMetadata APIの使い方と、Metadata APIへの移行方法を説明します。
Metadata APIはHTMLの head 要素内の meta タグや link タグを置き換えるものとしてデザインされています。
Next.js 13.0でリリースされたappディレクトリ機能では、これまでappディレクトリ以下の各ディレクトリに head.js または head.ts, head.jsx, head.tsx （以降は単に .js のみで表記します）を配置して head 要素を定義していましたが、Metadata APIはこれらのheadファイルを置き換えるものとなります。
Metadata APIは layout.js または page.js で下記のように定義します。
export const metadata = {
title: '...',
};
下記のように generateMetadata メソッドを用いて動的に定義することもできます。
export async function generateMetadata({ params, searchParams }) {
return { title: '...' };
}
動的パラメータ params から、GETパラメータは searchParams から得ることができます。
例えば app/products/[id]/page.tsx のような動的パスの場合 id は params.id として得られます。
検索パラメータは searchParams.get('foo') のようにして取得できます。
Metadata APIによって head.js は不要になります。
head.js が存在する場合はMetadata APIを定義していても head.js が優先されてしまうため削除しておきます。
Metadata APIを使い始める前に、デフォルトのメタデータが存在する点には注意しましょう。
下記はデフォルトで追加されるため、変更の必要がない場合は定義する必要はありません。
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
基本的にはMetadata APIのリファレンスを見れば何が利用可能なのか一目瞭然ですが、唯一 title だけはテンプレート機能が用意されています。
通常、titleは下記のように定義します。
export const metadata = {
title: 'Next.js',
};
titleに限り layout.js に下記のようにテンプレートを使って定義することもできます。
export const metadata = {
title: {
default: 'Acme',
template: '%s | Acme',
},
} このようにテンプレートを使用する場合 page.js 側で title: 'About' のようにmetadataを定義すると、titleは <title>About | Acme</title> のようにテンプレートが適用された出力結果になります。
また page.js 側でtitleを定義しない場合はdefaultの Acme が適用され、出力結果は <title>Acme</title> となります。
titleに関する注意点として openGraph や twitter のtitleにはテンプレートが適用されないことに気をつけてください。
例えば og:title の値を About | Acme のようにしたい場合は openGraph.title に直接 About | Acme を指定する必要があります。
og:title として、サイト名は og:site_name として別々に定義する仕様ですが、多くのサイトでそうなっていないという実情があります。
最後に実際に筆者がMetadata APIへの移行を対応した差分をご紹介します。良かったら参考にしてみてください。
以上です。
この記事ではNext.js13.2で新たに追加されたMetadata APIの使い方と、Metadata APIへの移行方法を説明しました。
コメントを送る
コメントはブログオーナーのみ閲覧できます