tiny-seo-detector

v1.0.2

Published

4 years ago

A simple SEO defect detector

0High
0Medium
0Low

poepanda

seo defects detector

Prerequisites

nodeJS: version 8 and above

How to install

Using npm

npm install tiny-seo-detector

or with Yarn

yarn add tiny-seo-detector

Usage

  const Detector = require('tiny-seo-detector');

  // Get an instance of Detector
  // const detector = new Detector(input, output, config);
  const myDetector = new Detector('<html><h1>Title</h1></html>');

  // Run the defects checker and get the result
  myDetector.defects();

❗ Before you continue, read this:

This detector work (detect defects) base on rules
Rules will be defined based on primitive conditions and meta data
Primitive condition can be one of these:
- Is this element required
- This element required a specific attribute
- This element has to be unique
- The number of this element can't be more than a limit
- ... can be added more later
There will be a list of pre-defined rules
Rules configuration will define which rule is on/off
Rules definition will define how the rule is validate and also the fail output message
You set the input and output on Detector instance
You set the configuration for defects when call defects method

Input

The input is configured on Detector instance and can be either a HTML plain text

const myDetector = new Detector('<html><h1>HTML TITLE</h1></html>');

Or a file

const myDetector = new Detector({ file: '<path_of_html_file>');

Or a readable stream

const readableStream = fs.createReadStream('./really-bad-seo.html');
const myDetector = new Detector({ stream: readableStream });

Output

The output can be either by console (by Default)

const myDetector = new Detector('<html><h1>HTML TITLE</h1></html>', console);
// Or const myDetector = new Detector('<html><h1>HTML TITLE</h1></html>');

Or to a file

const myDetector = new Detector('<html><h1>HTML TITLE</h1></html>', '<path_of_file>');

Or to a writabe stream

const writableStream = fs.createWriteStream('./really-bad-seo.html');
const myDetector = new Detector('<html><h1>HTML TITLE</h1></html>', writableStream);

Configured rules

You can toggle specific rules by passing rules options into defects method as following

Notes: All rules are turned on (true) by default

  // Run defects checker with custom rules config
  myDefector.defects({
    rules: {
      tooManyStrong: false // Turn off this rule => no more validation on this
    }
  });

Predefined/Default rules config

DEFAULT_RULES_CONFIG = {
  imgWithoutAlt: true,
  aWithoutRel: true,
  missingMetaTitle: true,
  missingMetaDesciption: true,
  missingMetaKeywords: true,
  tooManyStrong: true,
  duplicatedH1: true,
}

Defects Rules definition

Every rule is defined base on a set of meta and condition field

For example, The rule "alt attribute is required in img tag" will be defined as:

{
  id: 'imgWithoutAlt',
  description: 'Img tag without alt attribute',
  selector: 'img',
  tagHtml: '<img>',
  requiredAttr: 'alt',
  // failMessage is a Handlebars template, will be explain more below
  failMessage: 'There is {{quantity}} {{{tagHtml}}} tag without {{requiredAttr}} attribute'  
}

Available fields

Meta fields

id: (required) ID of the rule. For example: imgWithoutAlt, duplicatedH1, missingTitle, ...
description: (optional) Description about the this rule
selector: (required) jQuery/query-like selector. For example: img, .class-name, #id, ...
tagHtml: Just a html-friendly display of the tag. For example: <img> <title> <meta name="keywords"/>

Condition fields

Primitive condition to form the rule (more like a single condition for one rule for the moment)

required: this element is required in the target html
requiredAttr: name of required attribute in this element
maxQuantity: The number of this element cannot be more than a defined limit
unique: This element has to be unique in the target html

Input/Output config fields

failMessage: This message template will be compiled and display to user
- Using Handlebars templating library
- Current available expression/variables:
  - {{{tagHtml}}}, {{requiredAttr}}, {{maxQuantity}}: value of corresponding field
  - {{quantity}}: additional data - the total number of this element
  - For example: "The {{requiredAttr}} attribute is required in {{{tagHtml}}} tag"

Define new rules

const Detector = require('tiny-seo-detector');

// Define a new custom rule
Detector.defineDefectRules({
  id: 'linkMissingRel',
  description: 'Rel attribute is required in Link tag',
  selector: 'link',
  tagHtml: '<link/>',
  requiredAttr: 'rel',
  failMessage: 'There are {{quantity}} {{{tagHtml}}} without {{requiredAttr}} attribute'
})

// Or a set of new rules
Detector.defineDefectRules([
  {
    id: 'linkMissingRel',
    description: 'Rel attribute is required in Link tag',
    selector: 'link',
    tagHtml: '<link/>',
    requiredAttr: 'rel',
    failMessage: 'There are {{quantity}} {{{tagHtml}}} without {{requiredAttr}} attribute'
  },
  {
    id: 'missingMetaContentType',
    description: 'Meta content type tag is required',
    selector: 'meta[http-equiv="content-type"]',
    tagHtml: '<meta http-equiv="content-type"/>',
    required: true,
    failMessage: 'This HTML is missing {{{tagHtml}}} tag'
  }
])

Override the current rule

...
myDetector.defects({
  overrideDefinition: {
    tooManyStrong: {
      // Change the maximum number of strong tag to 20
      maxQuantity: 20
      // And the fail message
      failMessage: 'You have too many {{{tagHtlm}}} tag lah'
    }
  }
});

API

To be updated!

TODO?

[ ] Add some examples
[ ] Able to Define custom primitive rules/condition for more flexible rule composing
[ ] Update API section in README

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme