Skip to content
This repository has been archived by the owner. It is now read-only.
production
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React SEO Component

CodeFactor bundlephobia min bundlephobia minzip

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!

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