How to Integrate ReactJs and react-helmet-async - Manage SEO and Meta Data
Manage single page App SEO with react-helmet-async.
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.