The official SEO plugin for Payload
This repo has been merged into the Packages Directory of the Payload Monorepo. Please refer to the new location of the SEO Plugin for all future updates, issues, and pull requests.
The following logic doesn't account for fields that should end up in the sidebar:
Lines 82 to 98 in 348b519
Would be great to allow for opengraph field support here as well!
Using the SEO plugin and enabling it for a collection breaks positioning elements in the admin sidebar for that collection.
Reproduce
tabbedUI enabled seo({
collections: ['users'],
tabbedUI: true,
}),
Disabling the plugin for that collection or setting tabbedUI to false fixes the problem immediately.
I'm using latest version of payload-cms and the plugin.
Apparantly the SEO inputs cannot be typed, generate button doesn't work as well
Content - SEO
MyTab1 - MyTab2
MyTab1 - MyTab2 - SEO
See screenshot:
Is there a way to do this?
Thanks in advance! And thanks for this plugin!
The moment I add the seo object to my payload.config.ts, I'm getting the following error:
[nodemon] restarting due to changes...
[nodemon] starting `ts-node src/server.ts`
[19:26:15] INFO (payload): Starting Payload...
C:\Coding\GitHub\wheelcosmos-payload\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\payload\components\forms.ts:1
export {
^^^^^^
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1032:15)
at Module._compile (node:internal/modules/cjs/loader:1067:27)
at Module._compile (C:\Coding\GitHub\wheelcosmos-payload\node_modules\.pnpm\[email protected]\node_modules\pirates\lib\index.js:136:24)
at Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
at require.extensions.<computed> (C:\Coding\GitHub\wheelcosmos-payload\node_modules\.pnpm\[email protected][email protected]\node_modules\ts-node\src\index.ts:1045:43)
at Object.newLoader [as .ts] (C:\Coding\GitHub\wheelcosmos-payload\node_modules\.pnpm\[email protected]\node_modules\pirates\lib\index.js:141:7)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
[nodemon] app crashed - waiting for file changes before starting...
My payload.config.ts:
import { buildConfig } from 'payload/config';
import path from 'path';
import Categories from './collections/Categories';
import Posts from './collections/Posts';
import Tags from './collections/Tags';
import Users from './collections/Users';
import PostTest from './collections/PostsTest';
import Media from './collections/Media';
import seo from 'payload-plugin-seo';
export default buildConfig({
serverURL: 'http://localhost:3000',
admin: {
user: Users.slug,
},
collections: [
Categories,
Posts,
Tags,
Users,
PostTest,
Media
],
plugins: [
seo({
collections: [
'posts-test',
],
uploadsCollection: 'media',
generateTitle: ({ doc }) => `WheelCosmos.com — ${doc.title}`,
generateDescription: ({ doc }) => doc.excerpt
})
],
localization: {
locales: [
'en-SG',
'de-DE',
],
defaultLocale: 'en-SG',
fallback: false,
},
typescript: {
outputFile: path.resolve(__dirname, 'payload-types.ts')
},
});My package.json:
{
"name": "payload-blog-typescript",
"description": "Blog template",
"version": "1.0.0",
"main": "dist/server.js",
"license": "MIT",
"scripts": {
"dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
"build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
"build:server": "tsc",
"build": "yarn build:payload && yarn build:server",
"serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
"generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types"
},
"dependencies": {
"dotenv": "^8.2.0",
"express": "^4.17.1",
"payload": "^0.15.7",
"payload-plugin-seo": "^0.0.4"
},
"devDependencies": {
"@types/express": "^4.17.9",
"cross-env": "^7.0.3",
"nodemon": "^2.0.6",
"ts-node": "^9.1.1",
"typescript": "^4.1.3"
}
}If the seo() object is empty, I'm getting the same error. Removing the seo() object fixes it.
Also when I use tabbedUI: true only searching by ID is available on collection's page:
Without tabbedUI: true:
It would be awesome when there is a new page created that the fields would be populated with initial values from the generators.
It would be hard to implement because there is no slug or title etc set. So for this to work we need some kind of template snippets to bind fields after a page read.
Would suggest to use the same format as Yoast SEO https://yoast.com/help/list-available-snippet-variables-yoast-seo/
And the names could be the name of the field.
After I've updated to v1.0.12 I can no longer see my own fields in my collections. I tried to debug it and found that adding this back worked for me. I didn't have the time to dig too much into the code. But maybe this helps :)
To reconstruct:
Are Localization / Translation support for this SEO plugin?
Clicking on 'Auto-generate' does nothing in this case. Just a minor UI issue I guess.
This plugin seams to offer the Basic SEO fields
Will it at some point support also other social post option like
OpenGraph / Twitter Cards and other advanced meta field like geolocations
to get something like
For a generate function I want to get data from the settings page like this.
generateDescription: async ({ doc, locale }) => {
const settings = await payload.findGlobal({
slug: 'settings',
overrideAccess: true,
depth: 1,
});
return settings?.fields?.defaultDescription?.value;
}
Thing is that its running client side so is there a way to access the payload api easy in the generate function?
Normaly it would be accesable via the req.payload object.
When trying to work with next-payload, one can currently not use plugin-seo. It took me some time to figure out why the login screen was not loading. But after some debugging I found out it is due to plugin-seo.
When deploying to vercel, with plugin-seo enabled, one gets the following runtime error for /api/users/me and /api/users/init:
/var/task/apps/payload/node_modules/payload/dist/admin/components/forms/Label/index.scss:1
@import '../../../scss/styles.scss';
^
SyntaxError: Invalid or unexpected token
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1094:15)
at Module._compile (node:internal/modules/cjs/loader:1129:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
at Module.load (node:internal/modules/cjs/loader:1043:32)
at Function.Module._load (node:internal/modules/cjs/loader:878:12)
at Module.require (node:internal/modules/cjs/loader:1067:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (/var/task/apps/payload/node_modules/payload/dist/admin/components/forms/Label/index.js:9:1)
at Module._compile (node:internal/modules/cjs/loader:1165:14)
Locally everything works without issues.
I'm using the SEO plugin on next-payload with the S3 adapter, and both the og:image and twitter:image tags are being set to SITE_URL/S3_IMAGE_URL, for example:
http://localhost:3000/https:/bucket.s3.us-east-2.amazonaws.com/meta-image.webp
How can I remove the site URL portion and just have the url to the S3 image?
Currently the plugin only works on collections but it would be nice if it could work on globals because for example you may have a global for content on a single unique page such as an about us page.
Unless there some caveats with doing so, I think it would be as simple as adding a globals option to the plugin like so:
// src/index.ts
globals: config.globals?.map((global) => {
const { slug } = global;
const isEnabled = seoConfig?.globals?.includes(slug);
if (isEnabled) {
return {
...global,
fields: [...(global?.fields || []), ...seoFields],
};
}
return global;
}),globals also added in config
// src/types.ts
export type SEOConfig = {
collections?: string[]
globals?: string[]
uploadsCollection?: string
fields?: Partial<Field>[]
generateTitle?: <T = any>(args: { doc: T, locale?: string }) => string | Promise<string>
generateDescription?: <T = any>(args: { doc: T, locale?: string }) => string | Promise<string>
generateImage?: <T = any>(args: { doc: T, locale?: string }) => string | Promise<string>
generateURL?: <T = any>(args: { doc: T, locale?: string }) => string | Promise<string>
}ValidationError: _pages_versions validation failed: version.meta.image: Cast to Embedded failed for value "[object Object]" (type string) at path "image" because of "ObjectExpectedError".
Not sure if above is an issue or something I haven't done correctly
Thanks for the great too. I have a (probably very simple...) question about generating the URL with the generateURL: ({ doc }) function.
I would like the generated urls to be like https://example.com/<collection slug>/<doc slug>.
From the doc (generateURL: ({ doc, locale }) => {console.log(doc); return https://example.com/${doc?.fields?.slug?.value}`) I cannot find any info about the parent collection. I'd really like to get its slug in there without adding another dummy field on the collection.
Do you know of an easy way? Thanks!
Currently there is no mention of the generateImage function that auto-generates the meta image.
Is its somehow possible to re-use LengthIndicator.tsx to be used with other payload fieds to display a fancy max length??
In the title and description SEO fields, if you place the cursor and start to type anywhere in the existing content, you can only type 1 character then the cursor jumps to the end of the content.
Expected behavior is to be able to move the cursor and edit text anywhere, the current bug makes it very difficult to update existing text, you basically have to write it correctly the first time and make no updates.
Screen recording for demonstration:
https://user-images.githubusercontent.com/67977755/200879822-bc1b3160-6eec-4d53-b121-4d732f7bec3f.mov
Just added this plugin to an existing payload project running 1.6.17, and no matter how I change the config or what collections I specify I see no changes in the admin interface (have tried tabbedUI true and false).
Current config:
plugins: [
seo({
collections: [
Informationals,
],
generateTitle: ({ doc }) => `${doc.title.value}`,
generateDescription: ({ doc }) => doc.title
}),
And here's the very simple test collection:
const Informationals = {
slug: 'Informationals',
admin: {
useAsTitle: 'title',
group: 'Pages',
},
fields: [
{
name: 'title',
type: 'text',
localized: true,
},
]
}
export default Informationals;
Am I missing something obvious?
Having installed the seo plugin this should alter the display of media so title /descriptions are showing on the uploaded image so they can be quickly altered
I almost have the generate working with values from a settings page.
Is it an idea to add it as an example? And so where is the best place? In the readme or in a separate example folder inside the project?
installed the plugin and got this error
I'm using i18n in my Payload CMS. Is it possible to make the meta description and meta title fields localizable?
If not, could you treat this as a feature request?
It would be great if you could as a focus keyword or keyphrase field
I'm trying to use this plugin to replace our own implementation of seoMeta.
But we have more fields than this plugin. Could you allow add more fields as option like
seo({
overrides: {
fields: [
...
]
}
})
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.