Arnab Ghosh
Arnab Ghosh

Arnab Ghosh

How to Optimize React  Website Title & Metadata?[Using React-Helmet-Async]

How to Optimize React Website Title & Metadata?[Using React-Helmet-Async]

Use React Helmet Async to Asynchronously change the head components of React app

Arnab Ghosh's photo
Arnab Ghosh
·Apr 26, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • Introduction
  • Why is SEO Tricky on React Websites?
  • How to Make the Meta Description Dynamic using React-Helmet-Async
  • Conclusion

Introduction

It has become one of the most popular ways to build rich web applications in the last couple of years. React is flexible enough to serve as the basis for generating web pages, mobile apps, or even desktop programs.

It is perfect for real-time applications and offers seamless installation alongside the consistency of HTML.

Owing to this popularity, I started building my portfolio website on React, only to realize that optimizing a React Website for Search Engine Optimization can be a tricky subject.

In this blog, I'll show you how you can optimize meta-data for each page of your React Website using react-helmet-async.

Why is SEO Tricky on React Websites?

Here are some SEO challenges with a React Website:

1. Initial Empty Page

If you've been using React for a while, you'll know that the /public/index.html does not contain any meaningful content.

It uses JavaScript to render the pages and then populate the /public/index.html file to show content in the browser.

So it's difficult for Googlebot to get the page data easily. It also sees a blank page during the initial pass and gets the website's entire content after rendering. It adds to the page loading page and delays indexing.

2. No Change in Meta-Tags

If you look at any website's code, you might see a meta description inside the tag.

It looks like this:

<meta name=”title” content=”This is the title of the website” />
<meta name=”description” content=”Here, write the description of the website” />
<meta name=”keyword” content=”what is meta tag” />

This information helps Googlebot understand what the content is about. Also, it shows in the SERP when a user performs a search.

What is a meta description. png

But with React websites, this meta description does not change dynamically when you switch a page.

Example:

meta-explanaition.gif

You can see the title is the same even if the pages are changing.

How to Make the Meta Description Dynamic using React-Helmet-Async

Step 1: Install React-Helmet-Async.

npm install react-helmet-async

Step 2: Go to Index.js and import HelmetProvider from React-Helmet-Async.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.jsx';
import {HelmetProvider} from "react-helmet-async";

ReactDOM.render(
  <React.StrictMode>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Step 3: Go to individual routes and import Helmet from `React-Helmet-Async'and add meta title and descriptions that should go in the head of the page under Helmet component:


import { Helmet } from 'react-helmet';

export default function hero() {
  return (
    <div className="hero">
      <Helmet>
      <title> Title Goes Here</title>
      <meta name="description" content="Description goes here."/>
      <link rel="canonical" href="/" />
      <meta name="robots" content="index, follow"/> 
      </Helmet>
      <div className="herocontent "> Your App Conent Goes here<div/>
    </div>
  );
}

Step 4: Finally, go to public/index.html and add data-rh="true" on the meta description tag:

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

Step 5: After you do this, run your website and inspect the head tag of your website to see if the meta is changing.

meta fixed.gif

Conclusion

This is how you can dynamically change the meta tags of React websites.

There are many things to consider when optimizing a React website.

I'll share those as I learn.

For now, you can visit my website and tell me how it looks.

You can also connect with me on LinkedIn or Twitter.

Did you find this article valuable?

Support Arnab Ghosh by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this