{"id":19810342,"url":"https://github.com/elius94/seo-injector","last_synced_at":"2025-05-01T08:31:54.672Z","repository":{"id":128920368,"uuid":"468016765","full_name":"Elius94/seo-injector","owner":"Elius94","description":"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.","archived":false,"fork":false,"pushed_at":"2022-03-10T14:41:45.000Z","size":39,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-21T05:06:13.677Z","etag":null,"topics":["cra","create-react-app","html","seo","seo-optimization","seo-tags"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Elius94.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-03-09T16:57:01.000Z","updated_at":"2024-10-09T10:20:07.000Z","dependencies_parsed_at":"2023-03-24T11:32:31.940Z","dependency_job_id":null,"html_url":"https://github.com/Elius94/seo-injector","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"f06c5b6496718e283144a6b910ff72cda73136b7"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elius94%2Fseo-injector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elius94%2Fseo-injector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elius94%2Fseo-injector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elius94%2Fseo-injector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Elius94","download_url":"https://codeload.github.com/Elius94/seo-injector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251847806,"owners_count":21653581,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cra","create-react-app","html","seo","seo-optimization","seo-tags"],"created_at":"2024-11-12T09:20:53.535Z","updated_at":"2025-05-01T08:31:54.443Z","avatar_url":"https://github.com/Elius94.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/seo-injector.svg)](https://npmjs.com/package/seo-injector) [![npm](https://img.shields.io/npm/dt/seo-injector)](https://npmjs.com/package/seo-injector) ![npm bundle size](https://img.shields.io/bundlephobia/min/seo-injector) ![GitHub](https://img.shields.io/github/license/elius94/seo-injector) [![Node.js Package](https://github.com/Elius94/js-seo-ingector/actions/workflows/release-package.yml/badge.svg)](https://github.com/Elius94/js-seo-ingector/actions/workflows/release-package.yml)\n\n# seo-injector\nA 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.\nFor example you can use it to add on the build time the following meta tags: title, description, open graph, twitter, icons and more.\n\n [![Readme Card](https://github-readme-stats.vercel.app/api/pin/?username=elius94\u0026repo=seo-injector\u0026theme=github_dark\u0026show_icons=true)](https://github.com/Elius94/seo-injector) [![https://nodei.co/npm/seo-injector.png?downloads=true\u0026downloadRank=true\u0026stars=true](https://nodei.co/npm/seo-injector.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/seo-injector)\n\n## Usage\n```bash\nnpx seo-injector\n```\n\n## Demostration\n\nExample with --pretty:\n\nBefore:\n![image](https://user-images.githubusercontent.com/14907987/157652223-1de86b32-212a-4457-9ee3-5a54cd3ddc8a.png)\n\nAfter:\n![image](https://user-images.githubusercontent.com/14907987/157652468-5217c94e-2825-4945-8e2d-7425d50b3116.png)\n\n## Options\n - --help                 Print this help message\n - --version              Print the version of this tool\n - --verbose              Print verbose output (default: false)\n - --waitkey              Wait for a keypress before exiting (default: false)\n - --base-path            The base path to the project (default: process.cwd())\n - --build-dir            The build directory (default: build)\n - --file                 The file to inject the SEO data into (default: index.html)\n - --config               The config file to use (default: seo.json)\n - --pretty               Pretty print the output (defaults: false)\n - --example              Use the example config file\n\n## Using with Create React App (CRA)\nIn a standard CRA project, we have to add seo html tags into the production build index.html file.\n\nTo make it automatic, we can edit the package.json file at the build script:\n\nfrom this:\n```json\n\"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n},\n```\nto this:\n```json\n\"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build \u0026\u0026 npx seo-injector\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n},\n```\n\nAnd then we have to create a seo.json file in the same directory as the package.json file.\n\nExample json file (seo.json):\n\n```json\n{\n    \"title\": \"Example Title\",\n    \"description\": \"Example Description\",\n    \"keywords\": \"Example Keywords\",\n    \"author\": \"Example Author\",\n    \"openGraph\": {\n        \"url\": \"https://example.com\",\n        \"title\": \"Example Title\",\n        \"description\": \"Example Description\",\n        \"image\": \"https://example.com/image.jpg\",\n        \"site_name\": \"Example Site Name\",\n        \"type\": \"website\",\n        \"locale\": \"it_IT\"\n    },\n    \"twitter\": {\n        \"image\": \"https://example.com/image.jpg\",\n        \"url\": \"https://example.com\",\n        \"card\": \"summary_large_image\",\n        \"title\": \"Example Title\",\n        \"description\": \"Example Description\"\n    },\n    \"favicon\": null,\n    \"manifest\": null,\n    \"icons\": [{\n            \"src\": \"https://example.com/icon-192.png\",\n            \"sizes\": \"192x192\",\n            \"type\": \"image/png\"\n        },\n        {\n            \"src\": \"https://example.com/icon-512.png\",\n            \"sizes\": \"512x512\",\n            \"type\": \"image/png\"\n        }\n    ]\n}\n```\n\nThen we can run the build script:\n```bash\nnpn run build\n```\nand the seo tags will be injected into the ./build/index.html file.\n\n## Json Schema (types and formats) for the config file\n\n### Tags\n##### title \ntype: \u003cfont color=\"salmon\"\u003e*string*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*true*\u003c/font\u003e\nresult: \n```html\n\u003ctitle\u003eExample Title\u003c/title\u003e\n\u003cmeta name=\"title\" content=\"Example Title\"\u003e\n```\n\n##### description\ntype: \u003cfont color=\"salmon\"\u003e*string*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*true*\u003c/font\u003e\nresult:    \n```html\n\u003cmeta name=\"description\" content=\"Example Description\"\u003e\n```\n\n##### keywords\ntype: \u003cfont color=\"salmon\"\u003e*string*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*true*\u003c/font\u003e\nresult:\n```html\n\u003cmeta name=\"keywords\" content=\"Example Keywords\"\u003e\n```\n\n##### author\ntype: \u003cfont color=\"salmon\"\u003e*string*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*true*\u003c/font\u003e\nresult:\n```html\n\u003cmeta name=\"author\" content=\"Example Author\"\u003e\n```\n\n##### openGraph:\ntype: \u003cfont color=\"salmon\"\u003e*object*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*false*\u003c/font\u003e\nprops:\n - \u003cfont color=\"orange\"\u003e*url*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*title*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*description*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*image*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*site_name*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*type*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*locale*\u003c/font\u003e\n\nresult:\n```html\n    \u003cmeta property=\"og:url\" content=\"https://example.com\"\u003e\n    \u003cmeta property=\"og:title\" content=\"Example Title\"\u003e\n    \u003cmeta property=\"og:description\" content=\"Example Description\"\u003e\n    \u003cmeta property=\"og:image\" content=\"https://example.com/image.jpg\"\u003e\n    \u003cmeta property=\"og:site_name\" content=\"Example Site Name\"\u003e\n    \u003cmeta property=\"og:type\" content=\"website\"\u003e\n    \u003cmeta property=\"og:locale\" content=\"it_IT\"\u003e\n```\n\n##### twitter:\ntype: \u003cfont color=\"salmon\"\u003e*object*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*false*\u003c/font\u003e\nprops:\n - \u003cfont color=\"orange\"\u003e*image*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*url*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*card*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*title*\u003c/font\u003e\n - \u003cfont color=\"orange\"\u003e*description*\u003c/font\u003e\n\nresult:\n```html\n    \u003cmeta name=\"twitter:card\" content=\"summary_large_image\"\u003e\n    \u003cmeta name=\"twitter:url\" content=\"https://example.com\"\u003e\n    \u003cmeta name=\"twitter:title\" content=\"Example Title\"\u003e\n    \u003cmeta name=\"twitter:description\" content=\"Example Description\"\u003e\n    \u003cmeta name=\"twitter:image\" content=\"https://example.com/image.jpg\"\u003e\n```\n\n##### favicon\ntype: \u003cfont color=\"salmon\"\u003e*string*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*false*\u003c/font\u003e\nresult:\n```html\n\u003clink rel=\"icon\" href=\"./favicon.ico\" /\u003e\n```\n\n##### manifest\ntype: \u003cfont color=\"salmon\"\u003e*string*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*false*\u003c/font\u003e\nresult:\n```html\n\u003clink rel=\"manifest\" href=\"./manifest.json\" /\u003e\n```\n\n##### icons\ntype: \u003cfont color=\"salmon\"\u003e*array*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*false*\u003c/font\u003e\ncontent:\ntype: \u003cfont color=\"orange\"\u003e*object*\u003c/font\u003e\nprops:\n - \u003cfont color=\"orange\"\u003e*src*\u003c/font\u003e (required)\n - \u003cfont color=\"orange\"\u003e*sizes*\u003c/font\u003e (required)\n - \u003cfont color=\"orange\"\u003e*type*\u003c/font\u003e (required)\n\nresult:\n```html\n\u003clink rel=\"icon\" sizes=\"192x192\" href=\"./icon-192.png\" /\u003e\n\u003clink rel=\"icon\" sizes=\"512x512\" href=\"./icon-512.png\" /\u003e\n```\n\n##### custom\ndescription: \u003cfont color=\"gray\"\u003e*In this field you can put what you want*\u003c/font\u003e\ntype: \u003cfont color=\"salmon\"\u003e*array*\u003c/font\u003e\nrequired: \u003cfont color=\"salmon\"\u003e*false*\u003c/font\u003e\ncontent:\ntype: \u003cfont color=\"orange\"\u003e*object*\u003c/font\u003e\nprops:\n - \u003cfont color=\"orange\"\u003e*tag*\u003c/font\u003e - the tag name (e.g. meta, link, script)\n - \u003cfont color=\"orange\"\u003e*children*\u003c/font\u003e - the content of the tag (inside the tag)\n - \u003cfont color=\"orange\"\u003e*attrs*\u003c/font\u003e - the attributes of the tag (e.g. name, content, etc.)\n\nresult (example):\n```html\n\u003cmeta name=\"custom\" content=\"custom-value\"\u003e\n```\n\nor in case of this example:\n```json\n\"custom\": [{\n    \"tag\": \"script\",\n    \"children\": \"if (window.location.hostname === 'example.com') { window.location.hostname = 'example.com'; }\"\n}]\n```\n\n```html\n\u003cscript\u003e\n    if (window.location.hostname === 'example.com') { window.location.hostname = 'example.com'; }\n\u003c/script\u003e\n```\n\n## Additional information\nThis 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.\n\n## License\nThis tool is licensed under the MIT license.\nAuthor: [Elia Lazzari](\"https://www.github.com/elius94\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felius94%2Fseo-injector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felius94%2Fseo-injector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felius94%2Fseo-injector/lists"}