今回はこのブログでNextjsのMetadataを用いてhead情報を記載したので備忘として残しておこうと思います。

現時点でのNextjsのVersionは14.2.3です。

まずはサイト全体のベースを作ります。

ここではルートのlayout.tsxかstaticなpage.tsxのどちらかに設定を入れますが、私はlayout.tsx側へ設定したためその前提で記載します。

ポイントとしてmetadataは必ずexportしてください！

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Blog',
  description: 'description',
};

export default function RootLayout() {...}

これでページ全体に適用できたかと思いますが、すべてのページで同じmetadataというのはちょっと物足りないと思いますので、

動的に設定することとしました。

ページごとに動的にmetadataを設定することにしました。

私の場合は記事のタイトルを入れる形で実際のコードは以下のようにしています。

ポイントとしてgenerateMetadataをexportして使ってください！

ページのパラメータを受け取り、記事データをフェッチしてタイトルと説明を取得したのちにmetadataの設定をしています。

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = params;

  const post = await getPost(id);

  return {
    title: post.title,
    description: post.description,
  };
}

export default function PostPage(...) {

例えばRootのMetadataにテンプレートを設定することで子要素のMetadataの値を利用することができます。

以下のようなtitle.templateを設定することで%sへ子のmeta titleを表示します。

例えば子のMetadataがPost TitleならばPost Title | Blogとして設定されます。

これによりページごとに動的にhead情報を設定することができました！

export const metadata: Metadata = {
  title: {
    template: '%s | Blog',
    default: 'Blog',
  },
};

もしまだmetadataを設定していないのであれば設定してみてはいかがでしょうか？

参考にした記事

https://nextjs.org/docs/app/building-your-application/optimizing/metadata