Miss any of our Open RFC calls?Watch the recordings here! »

react-seo-component

2.0.2 • Public • Published

React SEO Component

CodeFactor 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:

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

Install

npm i react-seo-component

DownloadsWeekly Downloads

98

Version

2.0.2

License

MIT

Unpacked Size

65 kB

Total Files

18

Last publish

Collaborators

  • avatar