Seo.js (demo)

The most simple, framework agnostic and easy to use JavaScript SEO meta tag management library.

Features

• Built in pure vanilla JavaScript with no dependencies.
• Blazing fast SEO tags update.
• Support the tag meta elements.
• Support the link meta elements.
• Support the meta meta elements.
• Support extending by custom tag configurations
• Support tag generation white templates and tokens.

Getting Started

  npm install @oothkoo/seo-js

<script src="dist/seo-X.X.X.min.js" type="text/javascript"></script>

Initialisation options

| name | type | default | description | |---------------------|-----------|----------|----------------------------------------------------| | debug | Boolean | false | Enable debug mode | | headSelector | String | 'head' | Page CSS selector | | ignoreEmptyTagValue | Boolean | true | Ignore all meta registered with no values provided |

Example :

    import Seo from '@oothkoo/seo-js'

    var seo = new Seo({
        debug: true,
        headSelector: 'head',
        ignoreEmptyTagValue: true
    })

Register (tag, link and meta) SEO tags

Seo.use(config)

Register a meta configuration. You must register all metas before to use the library.

• config - Object - Configuration to use.

Example :

    seo.use({
        name: 'name',       // meta configuration ame
        selector: 'name',   // dom selector (.class, #id etc..)
        template: '<template>{value}</template>' // html template
    })

Seo.tag(name)

Generate a tag meta configuration. This configuration produces tags from this html template <{name}>{value}</{name}>.

• name - String | Array - Tag name(s)

Example :

    // Register 'title' tag and produces <title>{value}</title>
    seo.use(seo.tag('title'))
    seo.use(seo.tag([
        'author',
        'section'
    ]))

Seo.metaName(name)

Generate a meta[name=""] meta configuration. This configuration produces tags from this html template <meta name="{name}" content="{value}" />.

• name - String | Array - Tag name(s)

Example :

    // Register 'title' tag and produces <meta name="title" content="{value}" />
    seo.use(seo.metaName('title'))
    seo.use(seo.metaName([
        'keywords',
        'description'
    ]))

Seo.metaProperty(name)

Generate a meta[property=""] meta configuration. This configuration produces tags from this html template <meta property="{name}" content="{value}" />.

• name - String | Array - Tag name(s)

Example :

    // Register 'og:title' tag and produces <meta name="og:title" content="{value}" />
    seo.use(seo.metaProperty('og:title'))
    seo.use(seo.metaProperty([
        'og:site_name',
        'og:description'
    ]))

Seo.link(name)

Generate a link[rel=""] meta configuration. This configuration produces tags from this html template <link rel="{name}" href="{value}" />.

• name - String | Array - Tag name(s)

Example :

    // Register 'favicon' tag and produces <link rel="favicon" href="{value}" />
    seo.use(seo.link('favicon'))
    seo.use(seo.link([
        'icon',
        'robots'
    ]))

Seo.clearMetas()

Delete all registered SEO meta tags.

Example :

    seo.clearMetas()

Seo.clearTerms()

Delete all terms used for templating.

Example :

    seo.clearTerms()

Seo.updateTerms(terms)

Setting a couple of terms to be used for templating.

• terms - Object - Tokens name/value list ({name: value})

Example :

    // Setting terms for templating
    seo.updateTerms({
        'title': "Seo.js - A beautiful example",
        'description': "Seo example page description",
        'website': "https://www.oothkoo.com"
    })

Seo.clear()

Delete all registered meta tags in current html page.

Example :

    seo.clear()

Seo.update(metas, only)

Update all metas specified in current html page. Theses metas must be registered by Seo.use(config) before calling this function.

• metas - Object - Meta name/value list ({name: value})
• only - Boolean - Meta scope (default: false)
  • true : Update only metas specified in metas argument
  • false: Update all metas registered and overwrite if needed

Example :

    // Setting terms for templating
    seo.update({
        'title': "{title}", // Using terms 'title' for value
        'description': "{description}", // Using terms 'description' for value
        'website': "https://www.oothkoo.com"
    })

Complete example

// When page content is loaded
window.addEventListener('DOMContentLoaded', function () {

    // Initialize Seo library
    var seo = new Seo({
        debug: true
    })

    // Register basic page metas
    seo.use(seo.tag('title'))
    seo.use(seo.metaName([
        'description',
        'keywords'
    ]))
    seo.use(seo.metaLink('canonical'))

    // Register Open Graph page metas
    seo.use(seo.metaProperty([
        'og:type',
        'og:site_name',
        'og:title',
        'og:url',
        'og:description',
        'og:image',
        'og:image:width',
        'og:image:height'
    ]))

    // Register Twitter page metas
    seo.use(seo.metaName([
        'twitter:card',
        'twitter:site',
        'twitter:creator',
        'twitter:domain',
        'twitter:url',
        'twitter:image',
        'twitter:title',
        'twitter:description',
        'twitter:label1',
        'twitter:data1',
        'twitter:label2',
        'twitter:data2'
    ]))

    // Register Slack page metas
    seo.use(seo.metaName([
        'slack-app-id'
    ]))

    // Setting terms for templating
    seo.updateTerms({
        'name': "SlugBay",
        'title': "Seo - A beautiful example",
        'description': "SlugBay helps you centralise and better manage all your resources, and discover new interesting material more quickly",
        'domain': "slugbay.com",
        'website': "https://www.slugbay.com",
        'image': "https://www.slugbay.com/pictures/opengraph.png",
        'username': "@slugbay"
    })

    // Update all current registered metas
    seo.update({
        'title': "{title}",
        'description': "{description}",
        'keywords': "example keyword seo js",

        'canonical': "{website}",

        'og:type': "website",
        'og:title': "{title}",
        'og:site_name': "{name}",
        'og:url': "{website}",
        'og:description': "{description}",
        'og:image': "{image}",
        'og:image:width': "640",
        'og:image:height': "280",

        'twitter:card': "summary_large_image",
        'twitter:site': "{username}",
        'twitter:creator': "{username}",
        'twitter:domain': "slugbay.com",
        'twitter:url': "{website}",
        'twitter:image': "{image}",
        'twitter:title': "{title}",
        'twitter:description': "{description}",

        'slack-app-id': "A2UTWA5PT"
    })
})

Donations

:heart: Donations are always welcome :heart:.

Coins | Symbols | Addresses --- | --- | --- | BTC | 3B52fbzNFQTaKZxWf5GrCUsASD2UP8na4A | ETH | 0x1C389f1f85Cdb3C2996b83fAc87E496A80698B7C