PayloadCMSのSEO設定｜公式プラグインとメタタグの出力方法

「PayloadにもYoast SEOのようなプラグインがあるから、入れればSEOの設定は終わりそう」。公式のSEOプラグインの説明にも、Yoast SEOのようなものを使ったことがあれば、なじみがあると感じるかもしれないと書かれているため、WordPressと同じ感覚で考えられがちです。ところが、公式のSEOプラグインが足すのは管理画面の入力欄だけで、titleタグやmeta descriptionをページのHTMLに書き出すのは、Next.jsなどのフロントのコードです。

本記事では、PayloadCMSのSEO設定を、公式プラグインの導入からNext.jsでの出力、公開の前後の確認まで、自社のサイトをPayloadCMSで運用している記事制作会社の視点で順を追ってお伝えします。

PayloadCMSのSEO設定はどこで行うか

PayloadCMSのSEO設定は、管理画面の入力欄と、Next.jsなどのフロントのコードの2か所で行います。PayloadCMSが受け持つのは、記事のデータを保存して管理画面とAPIで扱うところまでで、公開ページのHTMLを組み立てるのはフロントのコードだからです。

管理画面の入力欄は、記事ごとのSEOタイトル・説明文・OGP画像を入れる場所で、公式のSEOプラグインで足すか、フィールドを自分で定義して作ります。フロントのコードは、入力欄の値を読み、titleタグやmeta descriptionとしてページのHTMLに書き出します。入力欄だけを作っても、HTMLにタグは出ません。

弊社のサイトもPayloadCMSで動いており、プラグインを使わずに、SEOタイトル・説明文・OGP画像の3つの入力欄を自分で定義しています。プラグインを使うと文字数の目安や自動生成のボタンなどが付きますが、フロントで出力するコードが要る点は変わりません。

公式SEOプラグインの導入手順

PayloadCMSの公式SEOプラグイン（@payloadcms/plugin-seo）は、次の3つの手順で導入します。

payload.config.tsの設定は、次のように書きます。generateTitleとgenerateDescriptionは、編集画面の「自動生成」のボタンを押したときに、入力欄へ入る値を決める関数です。

// payload.config.ts（抜粋）
import { buildConfig } from 'payload'
import { seoPlugin } from '@payloadcms/plugin-seo'

export default buildConfig({
  // collections などの設定は省略
  plugins: [
    seoPlugin({
      collections: ['posts'],
      uploadsCollection: 'media',
      tabbedUI: true,
      generateTitle: ({ doc }) => `${doc?.title}｜会社名`,
      generateDescription: ({ doc }) => doc?.excerpt,
    }),
  ],
})

tabbedUIをtrueにすると、SEOの入力欄が本文とは別のタブにまとまります。

Payload公式ドキュメント｜SEO Plugin

Payload is a headless CMS and application framework built with TypeScript, Node.js, React and MongoDB

🌐 payloadcms.com

外部リンク

日本語の記事では、プラグインが入力欄の下に表示する文字数の目安も、書き換えが必要です。

Next.jsでメタタグを出力する方法

PayloadCMSの入力欄の値をNext.jsでメタタグとして出力するのは、記事ページのファイルに書くgenerateMetadataという関数です。関数が返したタイトルや説明文から、Next.jsがtitleタグやmeta descriptionを作ってページに入れます。

// app/(frontend)/posts/[slug]/page.tsx（抜粋）
import type { Metadata } from 'next'

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>
}): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug) // PayloadCMSから記事を1件取る自作の関数
  if (!post) return {}

  const title = post.meta?.title || post.title
  const description = post.meta?.description || post.excerpt

  return {
    title,
    description,
    alternates: { canonical: `https://example.com/posts/${slug}` },
    openGraph: { title, description, type: 'article' },
  }
}

generateMetadataは、サーバーコンポーネントのファイルでしか使えません。ページのファイルの先頭に「use client」を書いていると関数をエクスポートできないため、ブラウザで動かす部分は別のファイルに分けます。

Next.js公式ドキュメント｜generateMetadata

Learn how to add Metadata to your Next.js application for improved search engine optimization (SEO) and web shareability.

🌐 nextjs.org

外部リンク

入力欄が空のときに使う値

入力欄が空のときに使う値は、generateMetadataの中で決めておきます。上のコードでは、SEOタイトルが空なら記事のタイトルを、説明文が空なら記事の抜粋を使います。弊社のサイトも同じ形にしていて、入稿の担当者がSEOの入力欄を埋め忘れても、titleタグは空になりません。

とりわけ見落とされがちなのが、公式のWebsiteテンプレートの初期値です。テンプレートのgenerateMetaという関数は、SEOタイトルが空のページのtitleタグを「Payload Website Template」にし、入力のあるページでもタイトルの後ろにこの文字列を付けます。テンプレートから作ったサイトでは、「Payload Website Template」をサイト名に書き換えます。

titleとdescription以外に書く項目

titleタグとmeta description以外のSEOの項目でも、PayloadCMSの側でデータを持ち、Next.jsの側で出力する分け方は変わりません。主な4つの項目を、どちらで何を用意するかで分けると、次の表になります。

slug・H1・リダイレクトの3つの注意点

PayloadCMSを初期設定のまま使ったときに、日本語のサイトで失敗につながりやすいのは、slugの自動生成・本文のH1・リダイレクトの3つです。

日本語が消えるslugの自動生成

PayloadCMSの3系（3.59.0以降）にあるslugFieldは、タイトルからslugを自動で作るフィールドで、公式のWebsiteテンプレートでも使われています。ただし、初期設定の変換は、半角スペースをハイフンに置き換えたうえで、英数字・アンダースコア・ハイフン以外の文字を消します。たとえば「PayloadCMSのSEO設定」というタイトルから作られるslugは、日本語が抜けた「payloadcmsseo」です。

日本語のサイトでは、slugを英数字で手入力するのが確実です。自動で作りたいときは、3.66.0以降なら、slugFieldのslugifyという設定に、自社で決めた変換の関数を渡せます。公開した後にslugを変えるとURLが変わるため、古いURLからの転送が要ります。

本文に入れられるH1

PayloadCMSのリッチテキストエディタ（Lexical）の見出しの機能は、初期設定ではH1からH6までを選べます。公式のWebsiteテンプレートも、記事のタイトルをH1で出力したうえで、本文でH1を選べる設定です。入稿の担当者が本文にH1を使うと、1ページにH1が2つできます。

本文で選べる見出しは、HeadingFeatureのenabledHeadingSizesにh2・h3・h4の3つだけを指定すると、H2からH4までに絞れます。弊社のサイトもこの設定にしていて、本文にはH1を入れられません。

自動では転送されないリダイレクト

公式のRedirectsプラグイン（@payloadcms/plugin-redirects）は、転送元と転送先のURLを管理画面で登録するためのプラグインです。公式ドキュメントにも、Redirectsプラグインは管理画面とデータベースでリダイレクトを管理するだけで、転送そのものは行わないと書かれています。

転送を行うのは、Next.jsのnext.configのredirectsか、登録した内容を読んで転送するコードです。slugを変えた記事や、WordPressから移した記事の古いURLは、恒久的な転送（301か308）で新しいURLへ送ります。

WordPressとのSEO設定の違い

WordPressとPayloadCMSでは、titleタグやslugなどのSEO設定でできることはほぼ同じで、違うのは、設定を受け持つ場所と、設定を用意する人です。設定項目ごとに並べると、次の表になります。

WordPressでは、プラグインを入れた時点で、入稿の担当者が使う入力欄がそろいます。PayloadCMSでは、入力欄も出力のコードも開発者が書くため、入稿の担当者が使える入力欄は、開発者が作った分だけです。WordPressから移すときや新しく作るときは、SEOタイトルや説明文、OGP画像、slug、canonicalなど、記事の担当者が入れたい項目を、作り始める前に開発者へ伝えておきます。

関連記事：【2025年最新版】初心者でもできるSEOのやり方完全ガイド | 上位表示するための具体的な方法を徹底解説

公開の前後に確かめるSEOの項目

公開の前後に確かめるSEOの項目は、次の7つです。slugと画像のaltは公開前に管理画面で、残りの5つは公開した直後にページのソースで確かめます。

• slug：英数字で、記事の中身が分かる綴りになっている
• 画像のalt：主な画像に、画像の中身を表す文が入っている
• titleタグ：入力したSEOタイトルが、ページのソースのtitleタグに出ている
• meta description：入力した説明文が出ていて、空になっていない
• canonical：記事自身のURLを指している
• H1：ページの中に1つだけある
• OGP：og:title・og:description・og:imageが出ている

ページのソースは、ブラウザで記事を開き、右クリックのメニューから「ページのソースを表示」を選ぶと見られます。

Web担当者

SEOプラグインでmeta descriptionを入れたのに、Googleの検索結果の説明文が変わりません。

Writers-hub
編集部

まず、記事のページのソースに、meta descriptionのタグがあるかを見てください。タグが無ければ、フロントのコードがまだ入力欄の値を読んでいません。タグがあるなら、Googleが説明文にページの本文を使っています。

Googleの資料にも、検索結果の説明文は主にページの本文から作られ、meta descriptionはページをより正確に説明できる場合に使われることがある、と書かれています。meta descriptionを入れても、説明文が必ずその文になるわけではありません。

Google検索セントラル｜検索結果のスニペットを管理する

スニペットとは、Google 検索で表示される検索結果の説明文です。スニペットの作成方法とそれに影響するメタ ディスクリプション（meta description）について説明します。

🌐 developers.google.com

外部リンク

まとめ｜プラグインだけでは終わらないSEO設定

PayloadCMSのSEO設定は、公式のSEOプラグインやフィールドの定義で入力欄を作り、Next.jsのgenerateMetadataでタグを出力して、はじめてページのHTMLに反映されます。日本語のサイトでは、slugの自動生成と本文のH1、プラグインの文字数の目安を、初期設定のまま使わないことも欠かせません。

WordPressとPayloadCMSのどちらでも、設定できる中身はほぼ同じです。差が出るのは、入力欄と出力のコードを漏れなくそろえたかどうかでしょう。

私たち合同会社Writers-hubは、累計8,000記事以上を制作してきた記事制作会社で、自社のサイトもPayloadCMSで運用しています。PayloadCMSで記事を増やすときは、入稿の担当者が入れる項目と、公開後に確かめる項目を、制作の手順に組み込んでおくことをおすすめします。

関連記事：WordPressのSEO対策｜初期設定5つと記事ごとの設定を解説

関連記事：descriptionとは｜英語の意味とSEOでの役割・文字数の目安

関連記事：301リダイレクトの設定方法｜.htaccess・WordPress・Next.jsでの書き方

関連記事：GA4でコンテンツの成果を計測する方法——記事ごとのCV貢献を可視化する設定

関連記事：CMS選びでSEOが割れるのは『タグ出力の差』じゃない——運用で見えた本当の分岐点