SEO/readability Analysis DatoCMS plugin

This plugin uses the YoastSEO.js package to generate in real-time interesting SEO and readability metrics about a specific record you're editing in DatoCMS.

It shows potential SEO problems, improvements, considerations, and content that is already optimized or "Good".

🚨 Important: This is not a drag & drop plugin! It requires some work on your frontend website in order to function. Read more in the following sections!

Installation and configuration

Once the plugin is installed, please configure your Frontend metadata endpoint URL in the plugin settings:

This plugin is meant to be used on JSON fields, so please assign it to some JSON fields in in your project.

The plugin will store information inside the JSON field using this structure:

1
{
2
  "keyword": "food shows",
3
  "synonyms": "cooking shows, culinary demonstrations",
4
  "relatedKeywords": [
5
    {
6
      "keyword": "food",
7
      "synonyms": ""
8
    }
9
  ]
10
}

The Frontend metadata endpoint

In order to work, this plugin needs a CORS-ready endpoint API that is able to return, given the ID of a DatoCMS record, a number of information related to its canonical page (that is, the page on the frontend that presents the content stored inside the record).

The plugin performs a GET request to the URL specified in the settings, passing down the following query string parameters:

1
<ENDPOINT_URL>?itemId=89274&itemTypeId=544589&itemTypeApiKey=blog_post&environmentId=main&locale=en

• itemId the ID of the DatoCMS record
• itemTypeId the ID of the record's model
• itemTypeApiKey the API key of the record's model
• sandboxEnvironmentId the environment ID (only passed if the record belongs to a sandbox environment)
• locale the preferred locale

The endpoint is expected to return a 200 response, with the following JSON structure:

1
{
2
  "locale": "en",
3
  "slug": "hello-world",
4
  "permalink": "https://www.yourwebsite.com/blog/hello-world",
5
  "title": "This is the SEO title of the page",
6
  "description": "This is the SEO description of the page",
7
  "content": "<p>This is the main content of the page/article</p>..."
8
}

To better serve the content writer, the information returned should be related to the latest version of the record's content — which could be unpublished.

Implementation examples

If you have built alternative endpoint implementations for other frameworks, please open up a PR to this plugin and share it with the community!

Next.js

We suggest you look at the code of our official Next.js Starter Kit:

• Route handler called implementing the endpoint: src/app/api/seo-analysis/route.tsx
• Route handlers to toggle Next.js Draft Mode: app/api/draft-mode/enable/route.tsx and app/api/draft-mode/disable/route.tsx