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

React has become one of the most popular ways to build rich web applications in recent years. 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.

But, using React-Helmet-Async can significantly simplify the process of optimizing react websites for SEO and social media.

It helps us insert metadata into the tag of the website, which we couldn’t do on React.

In this article, I’ll show you:

How to install react-helmet-async on your project
How to use react-helmet-async ( server side and client side)
react-helmet-async vs react-helmet
Why is SEO Tricky on React Websites?

Prerequisite:

You need to have a basic knowledge of Node, npm, JavaScript and React.js to follow through with this tutorial.

How to install react-helmet-async on your project?

Installing react-helmet-async is pretty straightforward/

Step 1: Navigate to your project directory in terminal Type npm install react-helmet-async or yarn install react-helmet-async. Wait for some time to install it on the directory.

Once the installation is done, you can move to the next step, which is using it on your react website.

How to use react-helmet-async ( server side and client side)

We’ll mainly use two components with the react-helmet-async.

HelmetProvider: It will wrap the entire app component to prevent memory leak.
Helmet: It will be imported on the page component where you want to use meta tags. Your meta tags will be inside the tag.

Let’s see how to use it.

Step 1: Go to Index.js and import HelmetProvider from React-Helmet-Async. Wrap the App component with HelmetProvider

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 2: If you want to do the server-side implementation, it’s simple too. Just pass helmetContext as the context for HelmetProvider. This makes sure that the context is not scoped out of the app.

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 context={helmetContext}>
      <App />
    </HelmetProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Step 3: Now, go to the page component and import Helmet from `React-Helmet-Async. Add the HTML equivalent meta tag inside the component. Think of it as the <head> component on HTML.


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"
    />

What’s the difference between react-helmet-async vs. react-helmet

react-helmet-async is an async version of the react-helmet library. It allows you to load and manage the document head using a React component, just like react-helmet, but it uses asynchronous rendering to improve performance.

react-helmet is a library that allows you to manage the document head using a React component. It allows you to easily add, update, and remove tags in the document head, such as <title>, <meta>, and <link> tags. It uses synchronous rendering, which can affect the performance of your application if used improperly.

In general, react-helmet-async is preferred over react-helmet because it provides better performance and is easier to use. However, if you are using an older version of React that does not support asynchronous rendering, you may need to use react-helmet instead.

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.

Read my other blogs:

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

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

Table of contents

Prerequisite:

How to install react-helmet-async on your project?

How to use react-helmet-async ( server side and client side)

What’s the difference between react-helmet-async vs. react-helmet

Conclusion

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

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

Table of contents

Prerequisite:

How to install react-helmet-async on your project?

How to use react-helmet-async ( server side and client side)

What’s the difference between react-helmet-async vs. react-helmet

Conclusion

Did you find this article valuable?