js-seo-ingector

js-seo-ingector

A Javascript command to automatically modify the main html file (like index.html) to add the provided SEO meta tags and more. Designed for Create React App. For example you can use it to add on the build time the following meta tags: title, description, open graph, twitter, icons and more.

Usage

npx js-seo-ingector

Demostration

Example with --pretty:

Before:

After:

Options

• --help Print this help message
• --version Print the version of this tool
• --verbose Print verbose output (default: false)
• --waitkey Wait for a keypress before exiting (default: false)
• --base-path The base path to the project (default: process.cwd())
• --build-dir The build directory (default: build)
• --file The file to inject the SEO data into (default: index.html)
• --config The config file to use (default: seo.json)
• --pretty Pretty print the output (defaults: false)
• --example Use the example config file

Using with Create React App (CRA)

In a standard CRA project, we have to add seo html tags into the production build index.html file.

To make it automatic, we can edit the package.json file at the build script:

from this:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

to this:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && npx js-seo-ingector",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

And then we have to create a seo.json file in the same directory as the package.json file.

Example json file (seo.json):

{
    "title": "Example Title",
    "description": "Example Description",
    "keywords": "Example Keywords",
    "author": "Example Author",
    "openGraph": {
        "url": "https://example.com",
        "title": "Example Title",
        "description": "Example Description",
        "image": "https://example.com/image.jpg",
        "site_name": "Example Site Name",
        "type": "website",
        "locale": "it_IT"
    },
    "twitter": {
        "image": "https://example.com/image.jpg",
        "url": "https://example.com",
        "card": "summary_large_image",
        "title": "Example Title",
        "description": "Example Description"
    },
    "favicon": null,
    "manifest": null,
    "icons": [{
            "src": "https://example.com/icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://example.com/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Then we can run the build script:

npn run build

and the seo tags will be injected into the ./build/index.html file.

Json Schema (types and formats) for the config file

Tags

title

type: string required: true result:

<title>Example Title</title>
<meta name="title" content="Example Title">

description

type: string required: true result:

<meta name="description" content="Example Description">

keywords

type: string required: true result:

<meta name="keywords" content="Example Keywords">

author

type: string required: true result:

<meta name="author" content="Example Author">

openGraph:

type: object required: false props:

• url
• title
• description
• image
• site_name
• type
• locale

result:

    <meta property="og:url" content="https://example.com">
    <meta property="og:title" content="Example Title">
    <meta property="og:description" content="Example Description">
    <meta property="og:image" content="https://example.com/image.jpg">
    <meta property="og:site_name" content="Example Site Name">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="it_IT">

twitter:

type: object required: false props:

• image
• url
• card
• title
• description

result:

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://example.com">
    <meta name="twitter:title" content="Example Title">
    <meta name="twitter:description" content="Example Description">
    <meta name="twitter:image" content="https://example.com/image.jpg">

favicon

type: string required: false result:

<link rel="icon" href="./favicon.ico" />

manifest

type: string required: false result:

<link rel="manifest" href="./manifest.json" />

icons

type: array required: false content: type: object props:

• src (required)
• sizes (required)
• type (required)

result:

<link rel="icon" sizes="192x192" href="./icon-192.png" />
<link rel="icon" sizes="512x512" href="./icon-512.png" />

custom

description: In this field you can put what you want type: array required: false content: type: object props:

• tag - the tag name (e.g. meta, link, script)
• children - the content of the tag (inside the tag)
• attrs - the attributes of the tag (e.g. name, content, etc.)

result (example):

<meta name="custom" content="custom-value">

or in case of this example:

"custom": [{
    "tag": "script",
    "children": "if (window.location.hostname === 'example.com') { window.location.hostname = 'example.com'; }"
}]

<script>
    if (window.location.hostname === 'example.com') { window.location.hostname = 'example.com'; }
</script>

Additional information

This tool does not check if the tags are already present in the html file. It will inject the tags in the html file before the closing head tag.

License

This tool is licensed under the MIT license. Author: Elia Lazzari