react-seo-meta-tags 

SEO metatags for React apps, originally designed for a Gatsby blog site with react-helmet. But it should work with any React setup, such as Next.js apps.

The motive behind it was the infuriating complexity of SEO coupled with the fact there wasn't any simple and understandable SEO packages out there for React.

Example Gatsby site

https://github.com/TeemuKoivisto/react-seo-meta-tags/tree/master/packages/site

How to install

Requires react >=16.2.0. You might also want to use react-helmet (although as of 2023 this seems rare).

``
npm i react-seo-meta-tags
`

How to use

With react-helmet:

`tsx
import React from 'react'
import Helmet from 'react-helmet'
import { ReactSEOMetaTags } from 'react-seo-meta-tags'
// Or
import ReactSEOMetaTags from 'react-seo-meta-tags'

...
render={(el: React.ReactNode) => {el}}
website={{ ...siteMetadata }}
/>
`

Next.js:

`tsx
import Head from 'next/head'
import { ReactSEOMetaTags } from 'react-seo-meta-tags'

...
render={(el: React.ReactNode) => {el}}
website={{ ...siteMetadata }}
/>
`

where siteMetadata could be:

`js
{
url: 'https://google.com/about',
title: 'This is a 70 character long title with a lot of padding to make it so!',
datePublished: '2019-10-06T13:56:03.123Z',
description: 'This is a 200 character long description of this web page which is quite interesting and which describes its contents well with a lot of relevant keywords and isn\'t just general marketing mumbo-jumbo.',
language: 'en-US',
image: 'http://website.com/image.png',
author: {
email: 'person@gmail.com',
name: 'John Smith',
image: 'http://john.me/my-face.jpg',
},
site: {
siteName: 'IMDb',
searchUrl: 'https://www.google.com/search?q=',
}
}
`

It appears both react-helmet and Next.js are a bit picky how they accept meta tags. ReactHelmet being the more choosy as it doesn't accept any nesting. Next.js works for some children but not all and therefore using the render function is required.

Without:

`tsx
import React from 'react'
import { ReactSEOMetaTags } from 'react-seo-meta-tags'

...
website={{ ...siteMetadata }}
breadcrumb={[
{ name: 'My Site', url: 'https://me.com' },
{ name: 'Blog', url: 'https://me.com/blog' },
]}
organization={{
name: 'Google',
legalName: 'Google Inc',
url: 'https://google.com',
logo: 'https://google.com/logo.jpg'
}}
blogPost={{ ...blogPost }}
facebook={{ facebookAppId: 'abc123' }}
twitter={{ twitterUser: '@mickey_mouse' }}
/>
`

In the previous example the inheritance of the properties goes like this: website < blogPost < facebook | twitter. So if the same property (eg image) is specified in blogPost and facebook, the facebook object's property will be the one used in its respective tag (og:image in this case).

The current properties shown are the ones I've seen websites use the most. Most sites don't even use JSON-LD, for example Google doesn't use it even though they have been a big contributor to it. So yeah, I wouldn't recommend going too deep into this rabbit hole. The API is complicated and if you feel there's something missing create a PR.

General page

For example a front or about page. I recommend adding just the website property with an organization if you have one. In that case remember to add good enough list of sameAs URLs (they seem to be helpful). Breadcrumb if you feel it makes sense. NOTE: Always remember to add the title of the page, it's used also to render a