# datocms-plugin-seo-readability-analysis

> Run SEO/Readability analysis using YoastSEO.js on your frontend everytime you make a change to the content of a record

Latest version **2.2.5** (published 2026-08-31) · GPLv3 license · 0 weekly downloads

## Install

```sh
npm install datocms-plugin-seo-readability-analysis
pnpm add datocms-plugin-seo-readability-analysis
yarn add datocms-plugin-seo-readability-analysis
bun add datocms-plugin-seo-readability-analysis
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; large bundle.

## Facts

| | |
|---|---|
| Version | 2.2.5 |
| Published | 2026-08-31 |
| First published | 2021-08-06 |
| Weekly downloads | 0 |
| License | GPLv3 |
| TypeScript types | none |
| Module format | ESM |
| Node | ^20.0.0 \|\| >=22.0.0 |
| Dependencies | 11 |
| Unpacked size | 36.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | DatoCMS |
| Maintainers | marcelofinamorvieira, stefanoverna, delphaber, mat_jack1, souljuse, sistrall_, datoroger |
| Keywords | datocms, datocms-plugin, field-editor, json-field, seo, analysis, keywords, readability |

## Links

- npm: https://www.npmjs.com/package/datocms-plugin-seo-readability-analysis
- Homepage: https://github.com/datocms/plugins/tree/master/seo-readability-analysis#readme
- npm.io page: https://npm.io/package/datocms-plugin-seo-readability-analysis

## Dependencies (11)

- [react](https://npm.io/package/react.md) ^19.2.4
- [yoastseo](https://npm.io/package/yoastseo.md) ^3.6.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.23
- [react-dom](https://npm.io/package/react-dom.md) ^19.2.4
- [final-form](https://npm.io/package/final-form.md) ^5.0.0
- [@types/lodash-es](https://npm.io/package/@types/lodash-es.md) ^4.17.12
- [datocms-react-ui](https://npm.io/package/datocms-react-ui.md) 2.2.1
- [react-final-form](https://npm.io/package/react-final-form.md) ^7.0.0
- [final-form-arrays](https://npm.io/package/final-form-arrays.md) ^4.0.1
- [datocms-plugin-sdk](https://npm.io/package/datocms-plugin-sdk.md) 2.2.1
- [react-final-form-arrays](https://npm.io/package/react-final-form-arrays.md) ^5.0.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 2.2.5 (latest) — 2026-08-31
- 2.2.4 — 2026-06-07
- 2.2.3 — 2026-06-05
- 2.2.2 — 2026-06-05
- 2.2.1 — 2026-06-03
- 0.1.22 — 2026-06-03
- 0.1.21 — 2026-04-16
- 0.1.20 — 2026-04-16
- 0.1.19 — 2026-04-15
- 0.1.18 — 2026-04-14
- 0.1.17 — 2026-03-24
- 0.1.12 — 2024-12-11
- 0.1.11 — 2024-07-16
- 0.1.10 — 2023-02-24
- 0.1.9 — 2021-11-30
- … 3 more at https://npm.io/package/datocms-plugin-seo-readability-analysis/versions

## README

# SEO/readability Analysis DatoCMS plugin

This plugin uses the [YoastSEO.js](https://github.com/Yoast/javascript/tree/master/packages/yoastseo) 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:

![Demo](https://raw.githubusercontent.com/datocms/plugins/master/seo-readability-analysis/docs/settings.png)

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

You can either hook this plugin manually to your JSON fields, or have it auto-applied to every JSON field whose API identifier matches the value entered in the **Auto-apply to all JSON fields with the following API identifier** setting on the configuration screen.

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

```json
{
  "keyword": "food shows",
  "synonyms": "cooking shows, culinary demonstrations",
  "relatedKeywords": [
    {
      "keyword": "food",
      "synonyms": ""
    }
  ]
}
```

## 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:

```
<ENDPOINT_URL>?itemId=89274&itemTypeId=544589&itemTypeApiKey=blog_post&sandboxEnvironmentId=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

If the endpoint is protected by a secret, add it under **Custom headers** in the
plugin settings instead of putting it in the endpoint URL: an URL ends up in
proxy logs, and is shown in clear text to everyone who can open the plugin
settings. Note that a custom header makes the request non-simple, so the
endpoint must also answer the CORS preflight `OPTIONS` request and list the
header in `Access-Control-Allow-Headers`.

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

```json
{
  "locale": "en",
  "slug": "hello-world",
  "permalink": "https://www.yourwebsite.com/blog/hello-world",
  "title": "This is the SEO title of the page",
  "description": "This is the SEO description of the page",
  "content": "<p>This is the main content of the page/article</p>..."
}
```

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](https://github.com/datocms/nextjs-starter-kit):

* Route handler called implementing the endpoint: [`src/app/api/seo-analysis/route.tsx`](https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/seo-analysis/route.tsx)
* Route handlers to toggle Next.js [Draft Mode](https://www.datocms.com/docs/next-js/setting-up-next-js-draft-mode): [`app/api/draft-mode/enable/route.tsx`](https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/draft-mode/enable/route.tsx) and [`app/api/draft-mode/disable/route.tsx`](https://github.com/datocms/nextjs-starter-kit/blob/main/src/app/api/draft-mode/disable/route.tsx)

---
_Source: https://npm.io/package/datocms-plugin-seo-readability-analysis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._