@pcode-at/tinacms-seo

TinaCMS SEO

Mission and Vision

Our vision of this package is to create the one stop shop for all your SEO concerns using TinaCMS, similar to the Wordpress Plugin Yoast.

Getting started

Follow these 5 steps to include tinacms-seo in your project:

1. Install the package:

npm install @pcode-at/tinacms-seo

or

yarn add @pcode-at/tinacms-seo

depending on your package manager.

NOTE: If you are using yarn (or an npm version that doesn't install peer dependencies automatically) then you have to install used peer dependencies by yourself manually:

yarn add next-seo

2. Import the required schema parts from the package:

import { defaultSeoPageProps, seoPageProps } from "@pcode-at/tinacms-seo";

3. Include it in your schema:

  ...
  {
      label: "Pages",
      name: "pages",
      path: "content/pages",
      fields: [
        seoPageProps,
        {
          ... fields
        },
      ],
      ...
    },

4. Congratulations! 🎉 Now you should see an editable SEO object in your sidebar:

Expert mode

For usability reasons we do not expose all fields in defaultSeoPageProps and seoPageProps. If you have a usecase for full control about all seo relevant fields you can import expertDefaultSeoPageProps and expertSeoPageProps.