YoastSEO content assessments for Netlify CMS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
src Initial commit. Apr 5, 2018
.babelrc
.gitignore
.npmignore
LICENSE add license and readme Apr 5, 2018
README.md
netlify-cms-yoast-seo-screenshot.png
package-lock.json
package.json
webpack.config.js

README.md

Netlify CMS / YoastSEO.js

YoastSEO content assessments for Netlify CMS.


Demo

You can find the demo code in the demo directory.

You can also check out a standalone demo (without Netlify CMS) here: https://content-score.indigotree.co.uk

Screenshot

screenshot showing yoast seo assessments in netlify cms

CDN

https://unpkg.com/netlify-cms-yoast-seo@~1.0/dist/main.css
https://unpkg.com/netlify-cms-yoast-seo@~1.0/dist/main.js

Usage

Currently, assessment results are rendered within a CMS preview template. This means you will need custom preview templates for each of the collections you would like assessments on.

You will need to include the following 4 fields in each of your collections:

  1. Title
  2. Content
  3. Focus Keyword
  4. Meta Description

You can then use a custom preview template to render the assessment results as shown below:

CMS.registerPreviewStyle('https://unpkg.com/netlify-cms-yoast-seo@~1.0/dist/main.css');

CMS.registerPreviewTemplate('page', createClass({
    render: function () {
        const entry = this.props.entry
        const title = entry.getIn(['data', 'title']) || ''

        YOAST.setContent({
            title: title,
            description: entry.getIn(['data', 'description']) || '',
            keyword: entry.getIn(['data', 'yoast_keyword']) || '',
            text: entry.getIn(['data', 'body']) || '',
            titleWidth: title.split('').length * 5 // 5px is an average width of each character ;)
        })

        return h('div', {},
            this.props.widgetFor('body'),
            YOAST.getScoresAsHTML(h)
        );
    }
}));

You can find a full working example within the demo directory.

License

GPL-3.0