Today we will learn how we can improve SEO for our react.js applications. Search engine optimization is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website. For this tutorial, we will learn how we can change our site title and our meta tags with information on each specific page to be SEO friendly.
To accomplish that we will use a react.js package called “react-helmet“. So go ahead and install react-helmet package into your project by running follwoing command in the terminal:
npm install react-helmet
React Helmet plugin handles the title and meta tags to improve the SEO on our websites. We need to import React Helmet after the installation is completed. You can import that by typing the follwing in your App.js files:
import Helmet from 'react-helmet';
Now we can easily change the title of our page by adding the title prop to the Helmet component like this:
Now run your application and you should be able to see our “This is my Page Title” title in your browser. we can also change the page meta-tags:
You can also use a second syntax if you want to add the HTML code directly into the Helmet component:
This is my Page Title
So, that was a quick and easy way for making our react applications SEO friendly by using a simple yet powerful react plugin.