まれに記事をコミュニティのSlackに上げるのですが、OGPの設定をしてなかったので、この機に設定してみることにしました。

環境

• Next.js 14.2

やったこと

• generateMetadataを使ってのmetaタグ生成
• Localhost OGPチェッカーを使っての実装確認

generateMetadataを使ってのmetaタグ作成

どうやら、Next.jsでは、generateMetadataを使い、この中でデータフェッチをした上で動的にmetaタグを作ってくれるようで、これを設定するだけでいけました。

以下のような形です。

// posts/[slug]/page.tsx
import { Metadata } from 'next';

async function getData(slug: string) {
  // NOTE: getPostはContentfulのAPIにfetchして記事情報を取りにいく関数
  const { post } = await getPost(slug);
  return post;
}

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  // NOTE: postの内容を取得
  const post = await getData(params.slug);
  return {
    title: post.title,
    description: "***",
    openGraph: {
      title: post.title,
      description: "***",
      url: "***",
      locale: "ja_JP",
      type: "article",
      siteName: "***",
    },
  };
}

export default async function PostPage({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getData(params.slug);
  return (
	(略)
  );
}

呼び出し階層は別にルートのlayout.tsxやpage.tsxでなくても良く、記事個別のタイトルなどを反映させられるように深めの階層（この記事の場合[slug]以下のページコンポーネント）でgenerateMetadataを呼び、metaタグを生成しています。

Localhost OGPチェッカーを使っての実装確認

実装したものの、ローカル環境ではどう検証してよいものか途方に暮れたのですが、Localhost OGPチェッカーでの検証が手軽で便利でした。

拡張機能を入れて、ローカル環境のページを開いて拡張機能のボタンを押すとheadタグを一時的にホスティングしてくれて、そのURLを使って確認ができるといった代物です。

以下のようにSlackにぶん投げたりして確認していました。