ReactHelmet | Enhance the SEO of your React App

Alejov
Alejov
Nov 26 · 2 min read

Who says that ReactApps can’t be SEO Friendly?, Today we are going to take a look to react-helmet, an open-source library created by the NFL (I didn’t know they were also into open-source) that helps you manage the changes in the <head/> of your webpage

It is a component that you place anywhere on your App and the children of the component are the head tags that you want to update, improving the SEO of your app (Don’t wait to be the first at google by just doing this).

First, install the dependency, just run one of these commands in the root of your React app (i will also use react-router-dom)

react helmet:
yarn add react-helmet
or
npm i react-helmet
if you want react router:
yarn add react-router-dom
or
npm i react-router-dom

So, let’s assume that your app consists of two pages Todos.js and Config.js and the main fileApp.js something like this:

Now we want to update the title tags on each page:

Let’s add a dynamic counter on the title:

Now you can optimize your different app screens with meta tags like description,robots,title,canonical,content-type,viewport,icon,keywords, you can read more here.

You can use this template I made and update the data to each screen of your app.

I hope it was useful to you, there are more ways to improve your SEO but you can start with this, Thanks.

JavaScript in Plain English

Learn the web's most important programming language.

Alejov

Written by

Alejov

Hi there, I’m Alejandro, I’ve been coding for 4 years mainly with JS tools like React and firebase.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade