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.

npx seo-injector

Example with --pretty:

Before:

After:

• --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

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 seo-injector",
    "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.

type: string required: true result:

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

type: string required: true result:

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

type: string required: true result:

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

type: string required: true result:

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

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">

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">

type: string required: false result:

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

type: string required: false result:

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

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" />

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>

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.

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