Improving SEO with React Helmet

React Helmet is a tremendously popular library that helps us improve our SEO by “tailoring” our pages’ metadata to each page content, in a dynamic and efficient way.

React Helmet is a tremendously popular library that helps us improve our SEO by “tailoring” our pages’ metadata to each page content, in a dynamic and efficient way. In this article, we’ll take a look at how to use it for React single-page apps as well as Gatsby static websites.

https://www.npmtrends.com/react-helmet

Using React Helmet with React SPAs

As with any other package, we’ll start by installing it:

$ npm i react-helmet

And, we’ll go ahead and use it in our app:

In the example above, we added the Helmet component into our App component with the title element — to change the title — and themeta element — to add a meta tag to our app.

Additional tags can be the base, link, script, noscript, and style tags.

• base is the base path of the app for accessing assets, etc.
• link is the link tag, which usually references external stylesheets, but can also reference icons, author search, license, and other metadata.
• noscript is an element that’s loaded when JavaScript is disabled.
• meta tag contains metadata for the app. It can have various attributes.
• The keywords attribute lists keywords related to that page.
• The description attribute explains what the page is about (to humans and search engines)
• The robots attribute tells search-engines how to handle the page. For example, noindex tells search-engines to not index that page. The nofollow tells search engines to not traverse the links on the page.

We can also add attributes for body, html and title tags.

• title is, of course, the title of the app/page.
• bodyAttributes are the attributes of the body element.
• htmlAttributes are the attributes of the html element.

Note that if more than a single Helemet component exists in the same app, the last use of it will override the others.

Tip: Publish and Reuse React Components with Bit

Publish independent React components from any codebase to a single component hub. Use Bit to document, organize, and even keep track of component updates and usage.

Share components with your team to maximize code reuse, speed up delivery and build apps that scale.

The shared component cloud

Example: exploring React components published on Bit.dev

React Helmet and Gatsby

Gatsby is a static website generated based on React. It has React Helmet included in the default scaffold.

If not already installed:

npm install --save gatsby-plugin-react-helmet react-helmet

And, then in gatsby-config.js, we can add the 'gatsby-plugin-react-helmet' entry to the plugins array. The project should have an SEO component in the componentsfolder.

Here’s how that looks:

The code above makes a query to the GraphQL API to get the metadata of the website, which includes the title, description, and author. It then passes the title into the title prop and the meta array. Each entry has the name with the meta attribute name and the content for the value.

The metadeta can be changed in the gatsby-config.js file.

For instance:

The siteMetadata object is what gets returned by the GraphQL in seo.js.

The SEO component can be used anywhere.

For instance, in pages/index.js, we have:

We use the SEO component to change the title.

If the titles don’t appear when opening in the background when using the gatsby-plugin-offline plugin, then we can set the defer prop to false to change the description synchronously:

<Helmet title="foo bar" defer={false} />

Learn More

10 Super Useful Tricks for JavaScript Developers

Publish and Reuse React Components to Build Gatsby Sites Faster

Building with React for All Platforms: Top Frameworks and Tools