Using React-Helmet in React.js

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.

As React.js is preferred for front-end development and is more efficient but this popular library can be problematic for search engines.

To solve this Search Engine Optimization issue and let your website appear on top of search we will be having a look at react-helmet.

What is React-Helmet?

This reusable React component will manage all of your changes to the document head.

Helmet takes plain HTML tags and outputs plain HTML tags. It’s dead simple, and React beginner friendly.

Using React-Helmet in React.js

Before starting you must have basic understanding of HTML and React.js components.

First we will create our React.js using the below command:

npx create-react-app frontend

Here I am naming my React app as frontend for the sake of simplicity.

Next I will be installing react-helmet package using npm from below command:

npm install react-helmet

Now once its installed lets execute the below command to run our web application:

npm start

Next create a folder named as components in src folder in our react.js folder. We will be creating all the components inside this folder and will be importing it in our App.js component.

To see our results for our React-Helmet, we need to create multiple components and render them on different routes. Since we will be rendering our components on different routes we will be using react-router-dom as well.

To use react-router we need to install react-router-dom by executing the below command:

npm install react-router-dom

we have created a component named as Dashboard.

import React from "react";
function Dashboard(){
return(
<div className="dashboard">
<h1>This is Dashboard</h1>
</div>
);
}
export default Dashboard;

Now we will be importing this component in App.js and routing it on root route using react-router-dom.

import Dashboard from './components/Dashboard';
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
function App() {
return (
<div className="">
<Router>
<Routes>
<Route  path="/" element={ <Dashboard />} />
</Routes>
</Router>
</div>
);
}
export default App;

Next we will be creating another component named as About.

import React from "react";
import {Helmet} from "react-helmet";
function About(){
return(
<div className="about">
<Helmet>
<meta charSet="utf-8" />
<title>About</title>
</Helmet>
<h1>This is about page</h1>
</div>
);
}
export default About;

We have imported react-helmet at the top and enclosed our page title in it. We then import About.jsx in our App.js and routed on “ /about” path.

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Dashboard from './components/Dashboard';
import About from "./components/About";
function App() {
return (
<div className="">
<Router>
<Routes>
<Route  path="/" element={ <Dashboard />} />
<Route  path="/about" element={ <About />} />
</Routes>
</Router>
</div>
);
}
export default App;

Similarly we have done the same thing with Dashboard component on Root route. You might see the page title changing on about and dashboard accordingly.

We can add other meta tags using this technique and improve our website ranking and SEO.

I will be posting another article regarding React-routing.