npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

seo-html-defect-checker

v1.0.2

Published

Lightweight module for checking SEO HTML defect elements.

Downloads

5

Readme

SEO HTML defect checker

Lightweight module for checking SEO HTML defect elements.

Built for

Status

Build Status

Installation

This is node.js libarary. Install nodejs first, then:

npm install seo-html-defect-checker

or

yarn add seo-html-defect-checker

How to use?

There are 7 defined rules that you can use to validate HTML.

  1. Detect if there are any <img /> tags without alt attribute
  2. Detect if there are any <a /> tags without rel attribute
  3. In tag
  • Detect if there is any header that doesn’t have <title> tag
  • Detect if there is any header that doesn’t have <meta name=“descriptions” … /> tag
  • Detect if there is any header that doesn’t have <meta name=“keywords” … /> tag
  1. Detect if there are more than 15 <strong> tag in HTML (15 is a value should be configurable by user)
  2. Detect if a HTML have more than one <H1> tag.

Rules object as follows:

Rules = {
  definedRules : {
    aTagWithoutRel,
    imgTagWithoutAlt,
    dontHaveTitle,
    dontHaveMetaDescription,
    dontHaveMetaKeywords,
    moreThan15StrongTag,
    moreThan1H1Tag,
  }
}

For example:

const {Checker, Rules} = require('seo-html-defect-checker')

const c = new Checker(htmlText)
c.check([Rules.definedRules.aTagWithoutRel], (results) => {
  // manipulate results
})

There is a defined rule list that include 7 rules as follows example:

const {Checker, Rules} = require('seo-html-defect-checker')
const htmlText = loadHtmlFunction() // function return string
const c = new Checker(htmlText)
c.check(Rules.definedRules.defaultRuleList, (results) => { // results is array
  // manipulate results
})

And you can customize the rules list such as

const {Checker, Rules} = require('seo-html-defect-checker')
const htmlText = loadHtmlFunction() // function return string
const c = new Checker(htmlText)
const myRules = [
  Rules.definedRules.aTagWithoutRel,
  Rules.definedRules.dontHaveMetaDescription
]
c.check(myRules, results => {
  console.log(results)
})

Beside that you can customize the rule throw 4 objects:

Rules = {
  //....
  MissAttributeRule,  // check tags that don't have some specific attributes
  MissTagRule,  // check HTML without tags which have some specific attributes (or only just tags)
  MoreTagThanRule, // check there is more than a specific number of tags which occur in HTML
  CustomRule, // custom whatever rule you want
}

Examples:

const {MissAttributeRule, MissTag, MoreTagThan} = Rules
const r1 = new MissAttributeRule('img', {
    alt: null,
})
const r2 = new MissTag('title', {}, 'head >')
const r3 = new MoreTagThan('strong', {}, null, 5)
const rules = [r1, r2, r3]
const c = new Checker(htmlText)
c.check(rules, results => {
  // manipulate results
})
const {CustomRule} = Rules
const r4 = new CustomRule('meta', {
        'keywords*': 'shopping'
    }, 'head >', (dom, selector) => {
        var num = dom.count(selector)
        if (num == 0) {
            return 'miss shopping keyword'
        }
        return null
    })
const c = new Checker(htmlText)
c.check([r4], results => {
  // manipulate results
})

And you can customize your selector query

const r5 = new CustomRule('p', {}, null, (dom, selector) => {
        var num = dom.count('p.highlight:not(.warning)')
        if (num == 0) {
            return `there are ${num} p tags with hightlight class and without warning class`
        }
        return null
    })
const c = new Checker(htmlText)
c.check([r4], results => {
  // manipulate results
})

API

  • constructor(input, output)
    • input is text or stream reader
    • output is file path or stream writer or console
  • check(rules, cb)
    • rules is an array list, contains rule object
    • cb is callback function with first parameter is results (array) of check
  • constructor(tag, attributes, prefix, cb)
  • check(domQuery)
  • constructor(tag, attributes, prefix)
  • check(domQuery)
  • constructor(tag, attributes, prefix)
  • check(domQuery)
  • constructor(tag, attributes, prefix, specificNumber)
  • check(domQuery)

Features

  • [x] Detect HTML element defect by the defined rules
  • [x] Can add customize rule flexibility
  • [ ] Support i18n

Contribute

Let people know how they can contribute into your project.

License

A short snippet describing the license (MIT, Apache etc)

MIT © DoHa