Redirects in Payload — Retaining SEO Value and Avoiding 404s

If you're re-platforming to Payload (hooray!) you need to have a proper approach for redirects in place to ensure a successful migration.

Having bulletproof redirect functionality in place will ensure you retain your current SEO value on existing pages and avoid any 404s. Google (mainly) and other search engines have gotten much more strict about how they rank websites, specifically those that have 404s, or pages that lead to nowhere.

Additionally, the marketing team has likely done a lot of work building up their SEO ranking, and it's extremely important to keep that in place after a migration.

Surprisingly, many headless content management systems don't offer redirect functionality out of the box, and you're stuck with the hassle of building this yourself.

We've been there, and that's exactly why we built our redirects plugin. It's easy for you to integrate and even easier for marketers or content managers to use which lets you focus on the rest of your project.

To make it easy to familiarize yourself with our redirects plugin, we've built an example with it already installed. Clone down the Payload repo if you haven't already, and look in the examples folder for redirects. There is a straightforward readme that will get you up and running in minutes.

For the purposes of this post, I've already got our redirects example up and running so let's dive in!

As you can see in the screenshot below, the redirects plugin creates a new collection called Redirects, which is where you'll create and manage all of your redirects.

Now, if you take a look at the example below, you'll see our payload.config is pretty straightforward. We have a pages collection, and when we go to setup our redirects we will have the ability to select documents from that collection.

import redirects from '@payloadcms/plugin-redirects'
import path from 'path'
import { buildConfig } from 'payload/config'

import { Pages } from './collections/Pages'
import { Users } from './collections/Users'
import { MainMenu } from './globals/MainMenu'

export default buildConfig({
  collections: [Pages, Users],
  cors: ['http://localhost:3000', process.env.PAYLOAD_PUBLIC_SITE_URL],
  globals: [MainMenu],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
  plugins: [
    redirects({
      collections: ['pages'],
    }),
  ],
})

If you click into one of the redirects you'll see two fields. The fields themselves are pretty straightforward - you have a From URL field, which is the URL string that will be matched up against the requested path, and the To URL field, which is conditional, and provides the option to link to a custom URL or internal doc.

The nice thing is that don't need to know all the ins and outs of how the plugin works, but we suspect you're going to dig around anyway and we're all for that.

Wrap up

We understand that redirects aren't the most exciting thing in the world, but being able to simply drop this into your project will make things much easier. With our redirects plugin, you've got a solution for almost any scenario you'll be up against.

I hope you found this post helpful and that you can start utilizing this powerful plugin for your Payload project. Cheers.

Learn More

To learn more about the official redirects plugin, Payload CMS and Next.js, take a look at the following resources:

• Redirects Plugin
• Payload CMS Docs
• Next.js Docs
• Learn Next.js

Get Started

yarn add @payloadcms/plugin-redirects

Like what we're doing? Give us a star on GitHub

We're trying to change the CMS status quo by delivering editors with a great experience, but first and foremost, giving developers a CMS that they don't absolutely despise working with. All of our new features are meant to be extensible and work simply and sanely.

Stop by GitHub and give us a star!