https://github.com/spences10/react-seo-component
A React SEO component
https://github.com/spences10/react-seo-component
component gatsby react react-helmet seo typescript
Last synced: 5 months ago
JSON representation
A React SEO component
- Host: GitHub
- URL: https://github.com/spences10/react-seo-component
- Owner: spences10
- License: mit
- Archived: true
- Created: 2019-10-22T14:05:57.000Z (about 6 years ago)
- Default Branch: production
- Last Pushed: 2021-10-27T09:31:36.000Z (about 4 years ago)
- Last Synced: 2025-07-06T23:49:16.565Z (6 months ago)
- Topics: component, gatsby, react, react-helmet, seo, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-seo-component
- Size: 1.92 MB
- Stars: 34
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React SEO Component
[](https://www.codefactor.io/repository/github/spences10/react-seo-component)
Use it for adding canonical links, metadata and OpenGraph information
to your React projects!
If you are rendering client side (not using Gatsby, or Next.js static
routes) then you can use [react-snap] to create your static HTML.
This is primarily targeted for use in Gatsby sites.
## Use it!
Install it from npm!
```bash
yarn add react-seo-component
# peer dependency of react helmet
yarn add react-helmet
```
If you are using it with Gatsby you will also need to install the
Gatsby plugin:
```bash
yarn add react-seo-component
yarn add react-helmet
yarn add gatsby-plugin-react-helmet
# or in one command
yarn add react-seo-component react-helmet gatsby-plugin-react-helmet
```
This will create the meta tags at build time.
**Examples:**
For an index page:
```jsx
```
For a blog post:
```jsx
```
## Props
| Prop | Type | Default |
| --------------- | ------------------------------- | ------------ |
| title | Page title | '' |
| titleTemplate | Page Title + Site title | '' |
| titleSeparator | Between Page Title + Site title | · |
| description | Page description | '' |
| pathname | Full Page URL | '' |
| article | `article` or `website` | `website` |
| image | Full image URL | '' |
| siteLanguage | Content Language | `en` |
| siteLocale | Content Locale | `en_gb` |
| twitterUsername | can be empty | '' |
| author | can _not_ be empty | 'J Doe' |
| datePublished | ISO date string | `Date.now()` |
| dateModified | ISO date string | `Date.now()` |
## To test locally
Use `npm pack` or `yarn pack` to create a `.tgz` of the project you
can install locally on your project to test with.
```bash
# from here
yarn pack
# copy to project to test
cp react-seo-component-2.0.1.tgz ../project-to-test-with/
# ~/project-to-test-with
yarn add file:react-seo-component-2.0.1.tgz
```
## Thanks:
- **[LekoArts]** for the initial components detailed in his Gatsby
[Prismic starter].
- **[Leigh Halliday]** for the [primer video] on using [TSDX]
- **[Jared Palmer]** for [TSDX]
## Resources
https://medium.com/recraftrelic/building-a-react-component-as-a-npm-module-18308d4ccde9
https://github.com/recraftrelic/dummy-react-npm-module/blob/master/package.json
[lekoarts]: https://github.com/LekoArts
[prismic starter]: https://github.com/LekoArts/gatsby-starter-prismic
[jared palmer]: https://github.com/jaredpalmer
[leigh halliday]: https://github.com/leighhalliday
[tsdx]: https://github.com/jaredpalmer/tsdx
[primer video]: https://www.youtube.com/watch?v=V3XZYC8zmvo
[react-snap]: https://github.com/stereobooster/react-snap