How to Integrate ReactJs and react-helmet-async - Manage SEO and Meta Data

Manage single page App SEO with react-helmet-async.

ยท

6 min read

How to Integrate ReactJs and react-helmet-async - Manage SEO and Meta Data
Play this article

Earlier we had very basic web technologies and static, just HTML pages with some CSS ( to at least have some UI/UX ๐Ÿ˜… ). But as we are moving ahead, we are entering into a new era of web technologies and it's getting better day by day with cutting-edge technologies and web frameworks.

Now we have SPAs ( Single page applications ) that load the single page and update the data dynamically based on user interaction with the help of JavaScript APIs. ReactJs is one of them and it allows you to build a User Interface with ease and in an efficient manner. ReactJs is widely known for its DRY principle and component isolation.

But there are some tradeoff disadvantages such as SEO ( Search Engine Optimization ) because in SPAs there is no direct and easy way to handle the SEO.

So now the question is how can you handle this SEO problem in your SPA? How can you improve your SPA SEO?

Do you have any solutions? No, don't worry, I have and I will share that with you in this tutorial.

In this tutorial, we will be integrating react-helmet-async with ReactJs for managing SEO and Meta Data.

Let's get started,

What is react-helmet-async? ๐Ÿค”

react-helmet-async is a ReactJs library that provides an API and Components for managing SEO and Meta Data In SPAs on both the server and client sides.

react-helmet-async is a fork of react-helmet with some improvements and bug fixes.

react-helmet-async handles the states with context so that every new request has its new data instead of old data.

Read more about the announcement here.

Alright, now you know what is react-helmet-async and what problem its solves, let's integrate it into our ReactJs App.

Setup the project ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

In this section, we will set up the React project and install the required dependencies.

Create a React App

npx create-react-app spa-with-seo
# OR
yarn create react-app spa-with-seo

It will create the React App spa-with-seo, now open it with your VsCode editor.

Install the dependencies

npm install react-helmet-async react-router-dom
# OR
yarn add react-helmet-async react-router-dom

Here we are installing react-helmet-async and react-router-dom, react-router-dom is for managing the routes (navigation).

Wrap the app with HelmetProvider

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';
// importing the provider
import { HelmetProvider } from 'react-helmet-async';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// If you are using react-helmet-async on server side
const helmetContext = {};

root.render(
  <StrictMode>
    <HelmetProvider context={helmetContext}>
      <Router>
        <App />
      </Router>
    </HelmetProvider>
  </StrictMode>
);

We have imported the HelmetProvider from the react-helmet-async and wrapped our application within it.

If you want to use it on the server side then you have to provide the default context object to the provider.

Create pages for the App ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

In this section, we will create two pages Home and About, and set up the routing with react-router-dom.

Create Home Page

# pages/HomePage.jsx

import React, { Fragment } from 'react';

export const HomePage = () => {
  return (
    <Fragment>
      <h1>Home Page</h1>
      <h2>
        How to Integrate ReactJs and react-helmet-async - Manage SEO and Meta
        Data
      </h2>
    </Fragment>
  );
};

Here we are creating a simple component name HomePage with a heading and subheading.

Similarly, create an AboutPage component and paste the below content.

Create an About Page

# pages/AboutPage.jsx

import React, { Fragment } from 'react';

export const AboutPage = () => {
  return (
    <Fragment>
      <h1>About Page</h1>
      <h2>
        react-helmet-async is a ReactJs library that provides an API and
        Components for managing SEO and Meta Data In SPAs on both the server and
        client sides.
      </h2>
    </Fragment>
  );
};

Create a routes

import { Routes, Route } from 'react-router-dom';
import { AboutPage } from './pages/AboutPage';
import { HomePage } from './pages/HomePage';

export const AppRoutes = () => {
  return (
    <Routes>
      <Route element={<HomePage />} path="/" />
      <Route element={<AboutPage />} path="/about" />
    </Routes>
  );
};

We are using the latest version of react-router-dom and here we are importing two components Routes and Route.

Routes is like a switch component like we had in the older version of react-router-dom

Then we created two routes with Route components, one for the home and another for the about page.

Create header component

# Header.jsx

import React from 'react';
import { Link } from 'react-router-dom';

export const Header = () => {
  return (
    <div className="header">
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </div>
  );
};

With the Link component, we are creating clickable links for users, so, that they can use these links to navigate between pages.

Let's update the App component to render the page according to the matching routes.

import { AppRoutes } from './AppRoutes';
import { Header } from './Header';
import './styles.css';

export default function App() {
  return (
    <div className="App">
      <Header />
      <AppRoutes />
    </div>
  );
}

Dynamic SEO content with Helmet Component โœจ

In this section, we will be using the Helmet Component provided by react-helmet-async to inject the dynamic meta tags and links.

# pages/HomePage.jsx

...
import { Helmet } from 'react-helmet-async';

export const HomePage = () => {
  return (
    <Fragment>
      <Helmet>
        <title>React SEO | Home Page</title>
        <meta name="description" content="Description for Home Page"/>
      </Helmet>
      ....
    </Fragment>
  );
};

Here we are passing the title and description for HomePage and it will show something like this.

I have used generate metatags tool to fetch and preview the site social preview.

Similarly, update the About page with the Helmet component and inject the title and description.

# pages/AboutPage.jsx

...
import { Helmet } from 'react-helmet-async';

export const AboutPage = () => {
  return (
    <Fragment>
      <Helmet>
        <title>React SEO | About Page</title>
        <meta name="description" content="Description for About Page"/>
      </Helmet>
      ....
    </Fragment>
  );
};

Don't you think ๐Ÿค” this is repetitive? Yes, as I mention earlier ReactJs work with DRY ( don't repeat yourself ), so let's create one common component with props and use it in all other components.

Create a common SEO component ๐Ÿ’ก

import React from 'react';

import { Helmet } from 'react-helmet-async';

export const Seo = ({ title, description, type, name }) => {
  return (
    <Helmet>
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta property="og:type" content={type} />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta name="twitter:creator" content={name} />
      <meta name="twitter:card" content={type} />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
    </Helmet>
  );
};

One of the best things about ReactJs is that with the help of props you can create a reusable component that can be used by other components of the application.
Here we are abstracting the usage of the Helmet component and avoiding repetition.

Now you can use the Seo component on both pages to inject the dynamic tags.

# pages/AboutPage.jsx

...
import { Seo } from '../Seo';

export const AboutPage = () => {
  return (
    <Fragment>
      <Seo
        title="React SEO | About Page"
        description="description for about page"
        type="webapp"
        name="Sachin Chaurasiya"
      />
      ....
    </Fragment>
  );
};

As you can see this is more readable and cleaner than repetitive meta tags and you don't have to visualize it, you have to just pass the required props and Seo the component will take care of everything.

And thatโ€™s it for this topic. Thank you for reading.

If you found this article useful, please consider liking and sharing it with others. If you have any questions, feel free to comment, and I will do my best to respond.

Resource โœจ

Connect with me ๐Ÿ‘‹

Did you find this article valuable?

Support Sachin Chaurasiya by becoming a sponsor. Any amount is appreciated!

ย