React SEO Component

bundlephobia min bundlephobia minzip

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

npm

react-seo-component

React SEO Component

Use it!

Props

To test locally

Thanks:

Resources

Keywords

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Homepage

Repository

Last publish

Collaborators

react-seo-component

React SEO Component

Use it!

Props

To test locally

Thanks:

Resources

Keywords

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Homepage

Repository

Last publish

Collaborators

Weekly Downloads