💡
PayloadのSEOプラグインについて

2025/05/09に公開
 はじめにPayloadには、プラグインという機能拡張の仕組みがあります。プラグインを追加することで簡単にSEO（メタタグ）機能、リダイレクト機能、サイト内検索機能などをプロジェクトに実装することができます。Payload公式が提供しているオフィシャルプラグインの他、Payload利用者が開発し公開しているコミュニティプラグインもあります。また、プラグインは自作することも可能です。
この記事では、オフィシャルプラグインとして提供されているSEOプラグインについて紹介したいと思います。

 SEOプラグインの概要SEOプラグインをプロジェクトに追加することで、コンテンツにSEOメタデータのフィールドを簡単に追加することができます。
SEOメタデータのフィールドのUIは下記のようになります。単なるテキストフィールドや画像フィールドとは異なり、文字数カウントなどの入力ガイドが付いています。

 プラグインの追加・設定方法プラグインの追加・設定方法を解説したいと思います。
まず、プラグインの追加はnpmでパッケージをインストールします。
npm install @payloadcms/plugin-seo
次に、src/payload.config.tsのpluginsキーの配列にSEOプラグインを追加します。
src/payload.config.ts
import { seoPlugin } from '@payloadcms/plugin-seo'

// ...
export default buildConfig({
  // ...
  plugins: [
    seoPlugin({}),
  ],
  // ...
})
最後に、SEOメタデータを使用したいコレクションのフィールド設定に、SEOメタデータのフィールドを追加します。
src/collections/[Collection Name]/index.ts
import {
  MetaDescriptionField,
  MetaImageField,
  MetaTitleField,
} from '@payloadcms/plugin-seo/fields'

// ...
  fields: [
    // ...
    {
      name: 'meta',
      label: {
        en: 'Meta',
        ja: 'メタデータ',
      },
      type: 'group',
      fields: [
        MetaTitleField({}),
        MetaDescriptionField({}),
        MetaImageField({
          relationTo: 'media',
        })
      ]
    },
    // ...
上記の設定では、タイトル・ディスクリプション・OGイメージのフィールドを設け、これらをメタデータグループでまとめています。OGイメージはmediaコレクションから選択できるよう設定しています。
これらの設定により、SEOメタデータのフィールドは下記のようになります。
以上で、追加・設定は完了です。

 補足SEOプラグインはフィールドの機能を提供するのみで、フィールド値として登録したデータをフロント画面にメタタグとして出力する機能はありません。SEOプラグインが提供するフィールドの値も通常のフィールドと同様に取得できるため、Next.js App RouterのgenerateMetadata関数でフィールド値を取得して利用可能です。generateMetadata関数の実装方法については、下記のNext.jsのドキュメントをご参照ください。
https://nextjs.org/docs/app/api-reference/functions/generate-metadata

 まとめこの記事では、オフィシャルプラグインとして提供されているSEOプラグインについて紹介しました。プラグインを追加することで簡単に機能拡張できることを理解していただけたかと思います。ただし、Next.js App Routerの仕組み上、基本的にプラグインはフロント画面の機能を提供しておらず、あくまで管理画面の機能を提供するに過ぎません。そのため、完全に機能させるにはNext.js App Routerでフロント画面を実装するスキルが必要不可欠であることも理解していただけたならば幸いです。

 参考https://payloadcms.com/docs/plugins/overview
https://payloadcms.com/docs/plugins/seo
はじめに

SEOプラグインの概要

プラグインの追加・設定方法

補足

まとめ

参考

Discussion
