React SEO Component

Use it for adding canonical links, metadata and OpenGraph information to your React projects!

Use it!

Install it from npm!

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:

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:

<SEO
  title={title}
  titleTemplate={siteName}
  titleSeparator={`-`}
  description={description || 'nothin’'}
  image={image}
  pathname={siteUrl}
  siteLanguage={siteLanguage}
  siteLocale={siteLocale}
  twitterUsername={twitterUsername}
/>

For a blog post:

<SEO
  title={title}
  titleTemplate={siteName}
  titleSeparator={`-`}
  description={description}
  image={image}
  pathname={siteUrlPlusSlug}
  siteLanguage={siteLanguage}
  siteLocale={siteLocale}
  twitterUsername={twitterUsername}
  author={authorName}
  article={true}
  publishedDate={createdDate}
  modifiedDate={updatedDate}
/>

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.

# 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