Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Angelillo15/MetaCSR-Generator
This is a tool to generate an index.html file for each route to have a better SEO with placeholders.
https://github.com/Angelillo15/MetaCSR-Generator
client-side-rendering client-side-rendering-seo csr html-meta-tags node npm seo seo-optimization seo-tools vite vitejs webpack
Last synced: about 1 month ago
JSON representation
This is a tool to generate an index.html file for each route to have a better SEO with placeholders.
- Host: GitHub
- URL: https://github.com/Angelillo15/MetaCSR-Generator
- Owner: Angelillo15
- Created: 2023-05-07T16:18:08.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-05-07T16:45:28.000Z (over 1 year ago)
- Last Synced: 2024-10-06T09:06:01.597Z (about 1 month ago)
- Topics: client-side-rendering, client-side-rendering-seo, csr, html-meta-tags, node, npm, seo, seo-optimization, seo-tools, vite, vitejs, webpack
- Language: TypeScript
- Homepage:
- Size: 13.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MetaCSR Generator
This is a tool to generate an index.html file for each route to have a better SEO.
## Installation
### NPM
```bash
npm install -D metacsr-generator
```
### Yarn
```bash
yarn add -D metacsr-generator
```
## Usage (example for vite)
Create a metacsr.json file in the root of your project with the example configuration below.
```json
{
"project": "Minearte Web",
"baseHtmlPath": "./dist/index.html",
"distPath": "./dist/",
"routes": [{
"name": "Home",
"path": "/",
"description": "Home page",
"replaceMap": [{
"search": "{%title%}",
"replace": "Home Page"
}]
},
{
"name": "About",
"path": "/about",
"description": "About page",
"replaceMap": [{
"search": "{%title%}",
"replace": "About Page"
}]
}]
}
```
And in your html you can add the placeholders
```html
{%title%}
```
That will generate this structure
```bash
dist/
├── about
│ └── index.html
└── index.html
```
Here is an example in vite of a package.json
```json
{
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build && cp dist/index.html dist/404.html && metacsr -v --config metacsr.json",
"preview": "vite preview"
},
"meta-csr-generator": {
"routes": [
"/",
"/about",
"/contact"
]
}
}
```