trangiabao1203 / plugin-seo

SEO plugin for Payload CMS

Payload SEO Plugin

A plugin for Payload CMS to auto-generate SEO meta data based on the content of your documents.

Core features:

• Adds a meta field to every SEO-enabled collection or global. It:
  • includes title, description, and image subfields
  • auto-generates meta data from your document's content
  • displays hints and indicators to help content editors
  • renders a snippet of what a search engine might display
  • soon will support variable injection

Installation

  yarn add @payloadcms/plugin-seo
  # OR
  npm i @payloadcms/plugin-seo

Basic Usage

In the plugins array of your Payload config, call the plugin with options:

import { buildConfig } from 'payload/config';
import seo from '@payloadcms/plugin-seo';

const config = buildConfig({
  collections: [
    {
      slug: 'pages',
      fields: []
    },
    {
      slug: 'media',
      upload: {
        staticDir: // path to your static directory,
      },
      fields: []
    }
  ],
  plugins: [
    seo({
      collections: [
        'pages',
      ],
      uploadsCollection: 'media',
      generateTitle: ({ doc }) => `Website.com — ${doc.title.value}`,
      generateDescription: ({ doc }) => doc.excerpt
    })
  ]
});

export default config;

Options

• collections : string[] | optional

  An array of collections slugs to enable SEO. Enabled collections receive a meta field which is an object of title, description, and image subfields.

• globals : string[] | optional

  An array of global slugs to enable SEO. Enabled globals receive a meta field which is an object of title, description, and image subfields.

• uploadsCollection : string | optional

  An upload-enabled collection slug, for the meta image to access.

• tabbedUI : boolean | optional

  Displays meta fields as tabs using Payload's Tabs Field. Defaults to false.

• generateTitle : method | optional

  A function that allows you to return any meta title, including from document's content.

  seo({
    ...
    generateTitle: ({ doc, locale }) => `Website.com — ${doc?.title?.value}`,
  })

• generateDescription : method | optional

  A function that allows you to return any meta description, including from document's content.

  seo({
    ...
    generateDescription: ({ doc, locale }) => doc?.excerpt?.value
  })

• generateImage : method | optional

  A function that allows you to return any meta image, including from document's content.

  seo({
   ...
   generateImage: ({ doc, locale }) => doc?.featuredImage?.value
  })

• generateURL : method | optional

  A function called by the search preview component to display the actual URL of your page.

  seo({
    ...
    generateURL: ({ doc, locale }) => `https://yoursite.com/${doc?.slug?.value}`
  })

  TypeScript

  All types can be directly imported:

  import {
    SEOConfig,
    GenerateTitle,
    GenerateDescription
    GenerateURL
   } from '@payloadcms/plugin-seo/dist/types';

  Screenshots