ReactHelmet | Enhance the SEO of your React App
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-helmetif 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.
