Ogunsemore Moses Olaseni
SEO With React-Helmet-Async

Photo by Carlos Muza on Unsplash

SEO With React-Helmet-Async

Ajdev's photo
Ajdev
·

5 min read

Table of contents

Hey guys, welcome to this new week's article on SEO with react.

let's hit the ball rolling, shall we?

What is SEO?

SEO stands for search engine optimization, it is essentially focused on making your site better for search engines. Organically makes your sites rank high on Google. It's also the job title of a person who does this for a living: We just hired a new SEO to improve our presence on the web.

Concerns

However, a lot of people are concerned with two questions;

a) Can meta tags be set on more than a single application on a React app?

The answer is YES, it can be applied to more than a single page application, it is helpful to set the meta tags to control how different pages will be shown in the google search engine.

b) Can Google crawl the page?

Google can crawl data from your page. It retrieves information from your site and uses that data to rank your site on Google.

React Router-dom and Helmet Async

We are going to make use of a library known as react helmet async but before we get into working with this library let's install react app and create a very simple app that has some routing in it.

Installing the React App

npx create-react-app seo-practise

Good, now we have our workstation set and ready to go.

Next, we install our router;

npm i react-router-dom

Since that's installed, let's create a login page and an About page

import { React } from "react";

function Login() {
  return (
    <>
      <h2>Login Here</h2>
    </>
  );
}
export default Login;

import { React } from "react";
function About() {
  return (
    <>
       <h2>About us </h2>
    </>
  );
}
export default About;

let's import some functions and the two Components created above to our App.js file

import { React } from "react";
import { Routes, Route } from "react-router-dom";
import Login from "./Login";
import About from "./About";
function App() {
  return (
    <div>
      <Routes>
        <Route exact path="/login" element={<Login />} />
        <Route exact path="/About" element={<About />} />
      </Routes>
    </div>
  );
}
export default App;

We should be able to view and route from the login page to the about page in our browsers now, cool...

Now I'd like you to install the meta SEO for chrome called meta SEO inspector, it has the same meta title and description, however, the title and description are optimal and can't be changed from the index file because the changes will affect all pages within the react application, this simply means that it shows the same title for all pages in your react applications. This is gotten from the index.html file in the Public folder.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
<div id="root"></div>
  </body>
</html>

Once you've got that installed, you can proceed to view the Inspection on your chrome extensions plugins. This is what the Meta Extension looks like.

Awesome work so far, let's install our helmet async to our application;

npm i react-helmet-async

Okay, so it's installed right now, I will go to the index.js to create and import my helmet provider and wrap my async in there;

import React from "react";
import ReactDom from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { HelmetProvider } from "react-helmet-async";

const container = document.getElementById("root");
const root = ReactDom.createRoot(container);
root.render(
  <BrowserRouter>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </BrowserRouter>
);

The next thing we want to do is to add data.rh="true" to a meta tag in the index.html file.

  <meta
      name="description"
      content="Web site created using create-react-app"
      data-rh="true"
    />

Brilliant!!!!!!

Now, we can configure a helmet component on each page.

Let's start with the login page

 NOTE: it is always a good practise to add a href link

      return (
     <>
            <Helmet>
            <title>Login</title>
            <meta name="description" content="Login to enjoy your shopping"/>
            <link rel="canonical" href="/login" />
          </Helmet>
          <h2>Login Here</h2>
    </>
  );

When you go back to the react app and navigate to log in and check the meta SEO you will see the new title and description of the page that you've added however if you check the About page, the default title and description will still be there because you have not made changes to this file so, therefore, do the same procedure for the About page.

We have this working now, next you can choose to prevent google from crawling on some of your application pages also.

Go to the robots.txt file and input the pages you don't google to crawl..an example to show this process

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

The above code shows that google will crawl all your pages. Also, if you don't want google to crawl all pages you can add a /... let's see this in action

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow: /

However, let's say we have an app and we don't want a certain page to be crawled we can go ahead to specify the pages..let's see this in action also

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow: /login

Note: we can as much pages as we like, Also disallowing a certain page does not guarantee it does not up in the search results

Let Google crawl your sitemap.txt file

STEP A- Deploy your site and name your site e.g AjdevSitemap

STEP B - Create a sitemap.txt file (public)

Here pass in the URL that your site contains

https://AjdevSitemap.netlify.app/   (the root url)

https://AjdevSitemap.netlify.app/login

https://AjdevSitemap.netlify.app/About

STEP C- Go to the Google Search Console and pass in your site Url

Also here, copy the HTML tags generated by Google and paste them into the index.html(public)

<meta name="google-site-verification" content="f9lvMu5xe8A5sS7AK3bLqYRR0p7AopwNjFHbfkaOL6w" />

STEP D- Redeploy your site again

Step D- Click on Verify on the Google Search Console

Nice, you can check the properties, click on the URL and a page will be displayed to see the dashboard of the site, click on sitemap on the dashboard and type the sitemap.txt beside the Url of the site deployed

Conclusion

Note: Your App will benefit from using Nextjs if your pages are much as the above practise isn't best for Applications with so much pages.

Congratulation, we've been able to achieve Improving your SEO and make google crawl your pages.

Thanks for reading.

SEO for DevelopersSEOSEO toolsReactGoogle