his plugin allows you to easily manage SEO metadata for your application from within your admin panel. When enabled on your collections and globals, it adds a new meta field group containing title, description, and image by default. Your front-end application can then use this data to render meta tags however your application requires. For example, you would inject a title tag into the <head> of your page using meta.title as its content.
As users are editing documents within the admin panel, they have the option to “auto-generate” these fields. When clicked, this plugin will execute your own custom functions that re-generate the title, description, and image. This way you can build your own SEO writing assistance directly into your application. For example, you could append your site name onto the page title, or use the document’s excerpt field as the description, or even integrate with some third-party API to generate the image using AI.
To help you visualize what your page might look like in a search engine, a preview is rendered on page just beneath the meta fields. This preview is updated in real-time as you edit your metadata. There are also visual indicators to help you write effective meta, such as a character counter for the title and description fields. You can even inject your own custom fields into the meta field group as your application requires, like og:title or json-ld. If you’ve ever used something like Yoast SEO, this plugin might feel very familiar.
yarn add @payloadcms/plugin–seo
import { buildConfig } from ‘payload/config’;
2import seoPlugin from ‘@payloadcms/plugin-seo’;
3
4const config = buildConfig({
5 collections: [
6 {
7 slug: ‘pages’,
8 fields: []
9 },
10 {
11 slug: ‘media’,
12 upload: {
13 staticDir: // path to your static directory,
14 },
15 fields: []
16 }
17 ],
18 plugins: [
19 seoPlugin({
20 collections: [
21 ‘pages’,
22 ],
23 uploadsCollection: ‘media’,
24 generateTitle: ({ doc }) => `Website.com — ${doc.title.value}`,
25 generateDescription: ({ doc }) => doc.excerpt
26 })
27 ]
28});
29
30export default config;