@elderjs/plugin-seo-check

Elder.js Plugin: SEO Check

Checks the generated HTML for more than 50 common SEO issues along with tips on fixing them.

Works in single page mode and site wide mode.

Pro users can easily use this plugin to fire off an email to the marketing/content team any time an SEO issue is encountered.

SEO Checks

This plugin is very opinionated based on years of Nick Reese's experience running major SEO assets.

If you think the rules are too strict or opinionated this plugin supports adding your own rules.

Sitewide

These are only checked when Elder.js runs in build mode.

• check for orphaned pages (no incoming internal links)
• check for broken internal links.
• check for duplicate title tags
• check for duplicate meta descriptions

Canonical

• canonical tag exists
• canonical tag matches request.permalink
• there is only one canonical tag

Title Tag

• Title tag exists
• Title tag innerText and innerHTML are the same. (no html tags in your title tag)
• Only one title tag per page
• Title tag is less than 70 chars
• Title tag is more than 10 chars
• Title doesn't include common stopwords.
• Title tag doesn't have null
• Title tag doesn't have undefined
• checks for stop words.

Meta Description

• meta description exists
• only one meta description tag per page
• Meta description doesn't have null
• Meta description doesn't have undefined
• Meta description is longer than 10 chars
• Meta description is less than than 120 chars
• Meta description is longer than 300 chars (sometimes things go REALLY wrong and this helps catch it.)
• Meta description includes at least one the keywords of the title tag.

HTags

• h1 Exists on page
• only a single h1 per page.
• h1 has at least one word from your title tag
• h1 is less than 70 chars
• h1 is more than than 10 chars
• H2 or H3 don't exist if an H1 is missing.
• H2 exists on the page
• h2 is less than 100 chars
• h2 is more than than 7 chars
• At least one of your h2s contains a single word from your title tag.
• h3 is less than 100 chars
• h3 is more than than 7 chars
• h4 is less than 100 chars
• h4 is more than than 7 chars
• If no h2s checks for h3s.
• If no h3s checks for h4s.
• If no h4s checks for h5s.
• If no h5s checks for h6s.

Images

• Checks images for alt tags.

Links

• Internal links are lowercase
• Internal links have trailing slash
• Internal links are not nofollow
• Notifies if there are more than 50 outbound links on the page.
• check for trailing index.html
• internal fully formed links include 'https'

Misc

• Checks for width=device-width, initial-scale=1.0 meta viewport.

Install

npm install --save @elderjs/plugin-seo-check

Config

Once installed, open your elder.config.js and configure the plugin by adding @elderjs/seo-check to your plugin object.

plugins: {
  '@elderjs/plugin-seo-check': {
    display: ['errors', 'warnings'], // what level of reporting would you like.
    handleSiteResults: async ({ meta, ...results }) => {
      // 'results' represents all of the issues found for the site wide build.
      // power users can use this async function to post the issues to an endpoint or send an email
      // so that the content or marketing team can address the issues.
      if (Object.keys(results).length > 0) {
        console.log(results);
      } else {
        console.log(`No SEO issues detected.`);
      }
    },
    preferences: [], // define your own preferences. See below.
    rules: [], // define your own rules. This overwrites existing rules. See below.
    // writeLocation: './report.json' // used to write a JSON report. Relative to the root.
  },
}

If things are too verbose for dev, try this:

plugins: {
  '@elderjs/plugin-seo-check': {
    display: process.NODE_ENV === 'production' ? ['errors', 'warnings']: [], // disables reporting unless you in production building.
    },
  },

}

For access to the default rules and preferences:

const { defaultPreferences, rules } = require('@elderjs/plugin-seo-check');

Contributing:

• If you end up writing your own rules, if you want to write a how-to that would be great.