概要
Next.js 14 App RouterでgenerateMetadataを使って動的にmetaタグ内のtitle, description, OGP画像を設定する方法を解説します。
参考:
Metadata Object and generateMetadata Options
https://nextjs.org/docs/app/api-reference/functions/generate-metadata
Metadata
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
まずはじめに静的にtitleとdescriptionを設定する方法を紹介します。
title, descriptionの設定 (静的)
// ここ
export const metadata: Metadata = {
title: 'About Us',
description: 'We are...',
}
export default async function MembersPage() {
...
}静的に設定するときはとても簡単です。
metadata内にtitleとdescriptionにそれぞれ値を書いて、これをpage.tsxの中に置けば完了です。
title, description, OGPの設定 (動的)
async function fetchBlog(slug: string) {
...
}
// ここ
export async function generateMetadata({ params }: any): Promise<Metadata> {
const blog = await fetchBlog(params.slug);
const {title, description, imageUrl} = blog;
return {
title: title,
description: description,
openGraph: {
images: [imageUrl],
},
};
}今度もgenerateMetadata関数内に先ほどと同じように設定するだけです。
この例だとfetchBlogから取ってきたデータをtitle, description, imageUrlに分割代入してそれぞれreturn内の値に入れます。
これでも自分の環境では動作しましたが、Nextの公式ドキュメントでは次のコードも書き加えていました。
export async function generateMetadata({ params }: any,
parent: ResolvingMetadata,): Promise<Metadata> {
const blog = await fetchBlog(params.slug);
const previousImages = (await parent).openGraph?.images || [];
const {title, description, imageUrl} = blog;
return {
title: title,
description: description,
openGraph: {
images: [imageUrl, ...previousImages],
},
};
}
最後に
Nextでのメタ情報の設定方法をまとめてみました。もし間違いがあれば、お気軽に連絡ください。
https://keyboardtabetai.com/writer
注意点
metadataオブジェクトとgenerateMetadata関数は同じファイルから同時に使えません。
metadataオブジェクトとgenerateMetadata関数はサーバーコンポーネント内でのみ使えます。
OGP画像はベクター画像は非対応なので、PNGやJPGを使いましょう。
Unfortunately, SVG is not a supported format for OG images. Instead, SVG must be converted to another image format, like PNG or JPG.