Improve SEO for React Applications

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:

<Helmet title="This is my Page Title" />

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:

   <Helmet
      title="This is my Page Title"
      meta={[
        { name: 'title', content: 'This is my Page Title' },
        { name: 'description', content: 'I am going to be the page decscription.' }
      ]}
    />

You can also use a second syntax if you want to add the HTML code directly into the Helmet component:

  <Helmet>
      <title>This is my Page Title</title>
      <meta name="title" content="This is my Page Title" />
      <meta name="description" content="I am going to be the page decscription." />
    </Helmet>

So, that was a quick and easy way for making our react applications SEO friendly by using a simple yet powerful react plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending