How to programmatically update the HTML headers of a static site generated with create-react-app (CRA)

seo-injector.md

If you want to find an elegant way to dynamically insert HTML elements inside the block, such as all those needed for a good SEO (meta, open graph, twitter cards, icons etc...), you might have tried to use a React method that acts on the DOM of the application.

In the past I tried with the react-helmet library, which allows to insert free elements inside the headers. The problem is that when search engines or social networks try to generate the site preview, they don't see anything of the inserted meta. This issues is that the javascript method is only good if the site is then interpreted after react has rendered it. Search engine crawlers, but also social, use the bare index.html file as is. That way, react-helmet hasn't inserted the tags yet, and therefore doesn't see them.

To solve this problem, I made this library: Seo Injector

Usage

npx seo-injector

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

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.