Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elius94/seo-injector
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.
https://github.com/elius94/seo-injector
cra create-react-app html seo seo-optimization seo-tags
Last synced: 2 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/elius94/seo-injector
- Owner: Elius94
- License: mit
- Created: 2022-03-09T16:57:01.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-03-10T14:41:45.000Z (almost 3 years ago)
- Last Synced: 2024-04-25T08:41:57.442Z (9 months ago)
- Topics: cra, create-react-app, html, seo, seo-optimization, seo-tags
- Language: JavaScript
- Homepage:
- Size: 38.1 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://npmjs.com/package/seo-injector) [](https://npmjs.com/package/seo-injector)   [](https://github.com/Elius94/js-seo-ingector/actions/workflows/release-package.yml)
# seo-injector
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.
[](https://github.com/Elius94/seo-injector) [](https://www.npmjs.com/package/seo-injector)
## Usage
```bash
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:
```json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
```
to this:
```json
"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):
```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:
```bash
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:
```html
Example Title
```
##### description
type: *string*
required: *true*
result:
```html
```
##### keywords
type: *string*
required: *true*
result:
```html
```
##### author
type: *string*
required: *true*
result:
```html
```
##### openGraph:
type: *object*
required: *false*
props:
- *url*
- *title*
- *description*
- *image*
- *site_name*
- *type*
- *locale*
result:
```html
```
##### twitter:
type: *object*
required: *false*
props:
- *image*
- *url*
- *card*
- *title*
- *description*
result:
```html
```
##### favicon
type: *string*
required: *false*
result:
```html
```
##### manifest
type: *string*
required: *false*
result:
```html
```
##### icons
type: *array*
required: *false*
content:
type: *object*
props:
- *src* (required)
- *sizes* (required)
- *type* (required)
result:
```html
```
##### 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):
```html
```
or in case of this example:
```json
"custom": [{
"tag": "script",
"children": "if (window.location.hostname === 'example.com') { window.location.hostname = 'example.com'; }"
}]
```
```html
if (window.location.hostname === 'example.com') { window.location.hostname = 'example.com'; }
```
## 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]("https://www.github.com/elius94")