spences10 / react-seo-component

A React SEO component

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!

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

react-seo-component's Issues

Remove pipe character ( | ) in titleTempalte

Is your feature request related to a problem? Please describe.
When configuring a titleTemplate users are forced to use the formatting as described on line 164 of SEO.tsx. It would be nice to not be forced to have a pipe character in our site's title when using titleTemplate.

Describe the solution you'd like
Don't include the pipe character in the titleTemplate by default.

Describe alternatives you've considered
I have considered the fact that the ability to override this already exists and I am just missing it. 😝

Add Gatsby as a Keyword

Add Gatsby to the package.json keywords

Not working for facebook social cards

When using the Facebook social debugger, the response code is a 404 and it does not fetch the og:image, og:title, etc.

To Reproduce
Steps to reproduce the behavior:

1. Deploy the site, copy url
2. Go to the debugger (link above), paste url and click "debug"
3. See error

Expected behavior
It should render the card correctly, as it does with twitter

Screenshots

Additional context
Here's the link to my dummy site: https://polo-dev.netlify.app/

Google / Search Engine Tags

Result from HeyMeta shows tags I've not seen before: https://www.heymeta.com/url/cfromp.xyz

Result:

<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Characters from Password">
<meta itemprop="description" content="Pick Characters from Password">
<meta itemprop="image" content="http://cfromp.xyz/default-site-image.jpg">

Look at the Structured Data Markup Helper from Google for more info: https://www.google.com/webmasters/markup-helper/u/0/

Add test for testing Helmet

SO Answer: https://stackoverflow.com/questions/44073960/unit-testing-react-helmet-code

YouTube video: https://www.youtube.com/watch?v=V3XZYC8zmvo

titleSeparator can't be removed

I didn't specify titleSeparator in my tag but it stills appears as a default "·" . Tried titleSeparator="" but even that doesn't change anything. Deleting titleSeparator from seo.d.ts also did nothing.

<SEO
            title="Classy Blog"
            titleTemplate=""
            description="Strona informacyjna dla aplikacji Classy. Znajdziesz tu informacje oraz poradniki związane z najlepszą aplikacją do zadań domowych!"
            siteLanguage="pl"
            pathname="https://blog.classy-app.pl"
/>

datePublished & dateModified props - why nulls?

Hello 👋

great component!

I've found one interesting thing.

react-seo-component/src/seo.tsx

Lines 40 to 45 in d534b8c

	datePublished: datePublished
	? null
	: new Date(Date.now()).toISOString(),
	dateModified: dateModified
	? null
	: new Date(Date.now()).toISOString(),

Why there is a null replacement when datePublished or dateModified is provided? Is there any reason for SEO or it is just an oversight?

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Lock file maintenance

---

• Check this box to trigger a request for Renovate to run again on this repository

Meta tags not added after building gatsby project

Describe the bug

Hi,
I run into problems when I'm trying to configure SEO component into my project. I'm trying to recreate a blog based on this tutorial: https://www.freecodecamp.org/news/build-a-developer-blog-from-scratch-with-gatsby-and-mdx/
After running gatsby build & gatsby serve meta tags are not added. I'd be grateful for any clues about what may be the reason for this behaviour.

To Reproduce
Steps to reproduce the behavior:

Here's the example repo:
https://github.com/progexplorer24/blog-template

Expected behavior

I expect meta-tags to be added to my blogPostPage and to my main page.

Desktop (please complete the following information):

• OS: Linux Mint 19.3
• Browser Chromium
• Version 80