{"id":13902815,"url":"https://github.com/spences10/react-seo-component","last_synced_at":"2025-07-18T00:32:07.259Z","repository":{"id":46574463,"uuid":"216829124","full_name":"spences10/react-seo-component","owner":"spences10","description":"A React SEO component","archived":true,"fork":false,"pushed_at":"2021-10-27T09:31:36.000Z","size":2015,"stargazers_count":34,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"production","last_synced_at":"2025-07-06T23:49:16.565Z","etag":null,"topics":["component","gatsby","react","react-helmet","seo","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-seo-component","language":"TypeScript","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/spences10.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-22T14:05:57.000Z","updated_at":"2024-11-08T12:29:30.000Z","dependencies_parsed_at":"2022-09-03T21:12:49.058Z","dependency_job_id":null,"html_url":"https://github.com/spences10/react-seo-component","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/spences10/react-seo-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spences10%2Freact-seo-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spences10%2Freact-seo-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spences10%2Freact-seo-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spences10%2Freact-seo-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spences10","download_url":"https://codeload.github.com/spences10/react-seo-component/tar.gz/refs/heads/production","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spences10%2Freact-seo-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265685524,"owners_count":23811191,"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":["component","gatsby","react","react-helmet","seo","typescript"],"created_at":"2024-08-06T22:01:26.277Z","updated_at":"2025-07-18T00:32:06.962Z","avatar_url":"https://github.com/spences10.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React SEO Component\n\n[![CodeFactor](https://www.codefactor.io/repository/github/spences10/react-seo-component/badge)](https://www.codefactor.io/repository/github/spences10/react-seo-component)\n![bundlephobia min](https://badgen.net/bundlephobia/min/react-seo-component)\n![bundlephobia minzip](https://badgen.net/bundlephobia/minzip/react)\n\nUse it for adding canonical links, metadata and OpenGraph information\nto your React projects!\n\nIf you are rendering client side (not using Gatsby, or Next.js static\nroutes) then you can use [react-snap] to create your static HTML.\n\nThis is primarily targeted for use in Gatsby sites.\n\n## Use it!\n\nInstall it from npm!\n\n```bash\nyarn add react-seo-component\n# peer dependency of react helmet\nyarn add react-helmet\n```\n\nIf you are using it with Gatsby you will also need to install the\nGatsby plugin:\n\n```bash\nyarn add react-seo-component\nyarn add react-helmet\nyarn add gatsby-plugin-react-helmet\n# or in one command\nyarn add react-seo-component react-helmet gatsby-plugin-react-helmet\n```\n\nThis will create the meta tags at build time.\n\n**Examples:**\n\nFor an index page:\n\n```jsx\n\u003cSEO\n  title={title}\n  titleTemplate={siteName}\n  titleSeparator={`-`}\n  description={description || 'nothin’'}\n  image={image}\n  pathname={siteUrl}\n  siteLanguage={siteLanguage}\n  siteLocale={siteLocale}\n  twitterUsername={twitterUsername}\n/\u003e\n```\n\nFor a blog post:\n\n```jsx\n\u003cSEO\n  title={title}\n  titleTemplate={siteName}\n  titleSeparator={`-`}\n  description={description}\n  image={image}\n  pathname={siteUrlPlusSlug}\n  siteLanguage={siteLanguage}\n  siteLocale={siteLocale}\n  twitterUsername={twitterUsername}\n  author={authorName}\n  article={true}\n  publishedDate={createdDate}\n  modifiedDate={updatedDate}\n/\u003e\n```\n\n## Props\n\n| Prop            | Type                            | Default      |\n| --------------- | ------------------------------- | ------------ |\n| title           | Page title                      | ''           |\n| titleTemplate   | Page Title + Site title         | ''           |\n| titleSeparator  | Between Page Title + Site title | ·            |\n| description     | Page description                | ''           |\n| pathname        | Full Page URL                   | ''           |\n| article         | `article` or `website`          | `website`    |\n| image           | Full image URL                  | ''           |\n| siteLanguage    | Content Language                | `en`         |\n| siteLocale      | Content Locale                  | `en_gb`      |\n| twitterUsername | can be empty                    | ''           |\n| author          | can _not_ be empty              | 'J Doe'      |\n| datePublished   | ISO date string                 | `Date.now()` |\n| dateModified    | ISO date string                 | `Date.now()` |\n\n## To test locally\n\nUse `npm pack` or `yarn pack` to create a `.tgz` of the project you\ncan install locally on your project to test with.\n\n```bash\n# from here\nyarn pack\n# copy to project to test\ncp react-seo-component-2.0.1.tgz ../project-to-test-with/\n# ~/project-to-test-with\nyarn add file:react-seo-component-2.0.1.tgz\n```\n\n## Thanks:\n\n- **[LekoArts]** for the initial components detailed in his Gatsby\n  [Prismic starter].\n\n- **[Leigh Halliday]** for the [primer video] on using [TSDX]\n\n- **[Jared Palmer]** for [TSDX]\n\n## Resources\n\nhttps://medium.com/recraftrelic/building-a-react-component-as-a-npm-module-18308d4ccde9\n\nhttps://github.com/recraftrelic/dummy-react-npm-module/blob/master/package.json\n\n\u003c!-- Links --\u003e\n\n[lekoarts]: https://github.com/LekoArts\n[prismic starter]: https://github.com/LekoArts/gatsby-starter-prismic\n[jared palmer]: https://github.com/jaredpalmer\n[leigh halliday]: https://github.com/leighhalliday\n[tsdx]: https://github.com/jaredpalmer/tsdx\n[primer video]: https://www.youtube.com/watch?v=V3XZYC8zmvo\n[react-snap]: https://github.com/stereobooster/react-snap\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspences10%2Freact-seo-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspences10%2Freact-seo-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspences10%2Freact-seo-component/lists"}