Next.jsでヘッドレスWPを使うときに、各ページのmetaタグのtitleやdescriptionをどうやって生成するか。

そもそもHeadタグ内に書くMetaタグってどうやって書くの

答えは、layout.tsxやpage.tsxなどに書けばいい！

• layout.tsxに書くとそのlayoutを使用するページ全てに共通して使用される。
• page.tsxに書くと、そのpage.tsxにだけ使用される。なお、layout.tsxで設定している場合はその値を上書きして設定される。

🎯 Metaタグを静的に生成する方法

生成するページ（page.tsxやlayout.tsx）でグローバルスコープにmetadataオブジェクトを作成しエクスポートすれば完了！

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "トミケルの部屋",
  description: "ヘッドレスWordPressを使ったブログ",
};

😎 動的に生成する方法（ページごとにtitleやdescriptionを作る）

SSGされるページで、動的に生成するにはグローバルスコープでgenerateMetadata関数をエクスポートする。

なお、WordPress側ではYoast SEOとWPGraphQL Yoast SEO Addonを使用してます。

generateMetadata関数の特徴

• 関数の引数にはparams(動的に生成されるパスの値)がPromiseオブジェクトで渡される
  • そのため引数はawaitで解決してあげる必要あり
• 渡された引数を使って記事に関するデータを取得し、戻り値のオブジェクトの値に使用する
• 関数の戻り値はPromiseオブジェクト（Promise<Metadata>）

export async function generateMetadata({
  params,
}: {
  params: Promise<Node>;
}): Promise<Metadata> {
  const { slug } = await params;
  const { data } = await client.query({
    query: getSEOonPageBySlug,
    variables: { slug: slug },
  });
  return {
    title: data.page.seo.title || data.page.title || "トミケルの部屋",
    description:
      data.page.seo.metaDesc ||
      "なるべく分かりやすい情報発信を心がけています。",
  };
}

なおデータが取得できなかった場合（WordPress側で設定されていない場合）に備え、戻り値の各プロパティにはフォールバック時の値（文字列）を設定しておくと良い。

Queryの取り方

//固定ページの場合(slug = urlを使って取得)
const getSEOonPageBySlug = gql`
  query getPageSeoBySlug($slug: ID!) {
    page(id: $slug, idType: URI) {
      title
      seo {
        title
        metaDesc
      }
    }
  }
`;

//投稿ページの場合(databaseIdを使って取得)
const getSEOonPostById = gql`
  query getPageSeoBySlug($id: ID!) {
    post(id: $id, idType: DATABASE_ID) {
      title
      seo {
        title
        metaDesc
      }
    }
  }
`;

💛 WordPress側の設定

Yoast SEO

記事編集内で「検索での見え方」→「SEOタイトル」と「メタディスクリプション」を調整。（これが最終的にGraphQLから引っ張ってくる情報）

WPGraphQL Yoast SEO Addon

GraphQLを使ってYoast SEOで設定した項目の情報を引っ張ってくるには、このプラグインが必要。このプラグインを入れるだけで、PostとかTitleなどのフィールド（クエリで選択できるデータのキー）にseoという項目が使用できるようになりますよ。