Enhance SEO with React Helmet Async – Example Use Case

In modern web development, ensuring that your React application is SEO-friendly is crucial for visibility and accessibility.

React Helmet Async is a powerful tool that allows you to manage your document head asynchronously, ensuring that search engines and social media platforms receive the correct metadata for each page.

Let’s dive into how you can effectively use React Helmet Async with a practical example.

Setting Up Your Project

First, let’s set up a new React project using Vite. If you don’t have Vite installed, you can install it globally via npm:

npm install -g create-vite

Next, create a new React project:

create-vite my-react-app --template react
cd my-react-app
npm install

After setting up the project, install React Router DOM for routing.

npm i react-router-dom

To enable routing in our React app, we first need to import BrowserRouter from react-router-dom.

Generally you will import your router in the main.jsx page of your application and it will wrap your App component.

In the main.jsx file, enter the following:

main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App.jsx';
import './index.css';

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

Finally, install React Helmet Async:

npm install react-helmet-async

Example Project Structure

Assume the following project structure:

/src
|-- App.jsx
|-- components
|   |-- About.jsx
|   |-- Contact.jsx
|   |-- Product.jsx
|   |-- SEO.jsx
|-- main.jsx

Implementing React Helmet Async

Step 1: Integrating HelmetProvider

In your App.jsx, wrap your application with HelmetProvider to enable React Helmet Async throughout your app:

App.jsx

// Import Lib
import './App.css';
import { Route, Routes, NavLink } from 'react-router-dom';
import { HelmetProvider } from 'react-helmet-async';

// Import component
import About from './components/About';
import Contact from './components/Contact';
import Product from './components/Product';

function App() {
  return (
    <>
      <HelmetProvider>
        <h1>Welcome to our website</h1>

        <nav>
          <ul>
            <li>
              <NavLink to="/">Home</NavLink>
            </li>
            <li>
              <NavLink to="/about">About</NavLink>
            </li>
            <li>
              <NavLink to="/contact">Contact</NavLink>
            </li>
            <li>
              <NavLink to="/product">Product</NavLink>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/product" element={<Product />} />
        </Routes>
      </HelmetProvider>
    </>
  );
}

export default App;

Step 2: Creating SEO Metadata Components

Create an SEO.jsx component to handle metadata for each page. This component can be reused across different parts of your application to maintain consistency:

SEO.jsx

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

const SEO = ({ title, description, keywords, type, scrImg, pageUrl }) => {
  return (
    <>
      <Helmet>
        {/* Standard metadata tags */}
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta name="keywords" content={keywords} />
        {/* End standard metadata tags */}

        {/* Facebook tags */}
        <meta property="og:title" content={title} />
        <meta property="og:type" content={type} />
        <meta property="og:image" content={scrImg} />
        <meta property="og:url" content={pageUrl} />
        <meta property="og:description" content={description} />
        {/* End Facebook tags */}

        {/* Twitter tags */}
        <meta name="twitter:card" content={type} />
        <meta name="twitter:title" content={title} />
        <meta property="twitter:url" content={pageUrl} />
        <meta name="twitter:description" content={description} />
        {/* End Twitter tags */}
      </Helmet>
    </>
  );
};

export default SEO;

Step 3: Using SEO Component in Pages

In each of your page components (About.jsx, Contact.jsx, Product.jsx), import and use the SEO component to set specific metadata for that page:

Product.jsx

import React from 'react';
import SEO from './SEO';

const Product = () => {
  return (
    <>
      <SEO
        title="Discover our amazing product that offers incredible features and benefits. Get yours now and experience the difference."
        description="Discover our amazing product that offers incredible features and benefits. Get yours now and experience the difference."
        keywords="product, buy, features, benefits, high quality, affordable"
        type="article"
        scrImg="https://i.ibb.co/MP69Hzt/product-og-tag.jpg"
        pageUrl="https://www.myntra.com/men-suits"
      />
      Product Page
    </>
  );
};

export default Product;

For About.jsx and Contact.jsx we are going to use react-helmet-async without SEO component.

About.jsx

// Import Lib
import React from 'react';
import { Helmet } from 'react-helmet-async';

const About = () => {
  return (
    <>
      <Helmet>
        {/* For Google */}
        <title>About Us</title>
        <meta
          name="description"
          content="Learn more about our company's history, mission, and values. Meet the team that makes it all happen."
        />
        {/* For Facebook Open Graph */}
        <meta property="og:title" content="About Us" />
        <meta property="og:type" content="website" />
        <meta
          property="og:image"
          content="https://i.ibb.co/tHJCM6d/about-us-og-tag.jpg"
        />
        <meta
          property="og:url"
          content="https://www.myntra.com/men-sports-wear-tshirts"
        />
        <meta
          property="og:description"
          content="Learn more about our company's history, mission, and values. Meet the team that makes it all happen."
        />
        {/* For Twitter */}
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:title" content="About Us" />
        <meta
          property="twitter:url"
          content="https://www.myntra.com/men-sports-wear-tshirts"
        />
        <meta
          property="twitter:description"
          content="Learn more about our company's history, mission, and values. Meet the team that makes it all happen."
        />
        <meta
          property="twitter:image"
          content="https://i.ibb.co/tHJCM6d/about-us-og-tag.jpg"
        />
      </Helmet>
      About Page
    </>
  );
};

export default About;

Contact.jsx

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

const Contact = () => {
  return (
    <>
      <Helmet>
        {/* For Google */}
        <title>About Us</title>
        <meta
          name="description"
          content="Get in touch with us for any inquiries or support. We're here to help you with any questions or concerns you may have."
        />
        <meta
          name="keywords"
          content="contact us, inquiries, support, customer service, help, questions"
        />
        {/* For Facebook Open Graph */}
        <meta property="og:title" content="Contact Us" />
        <meta property="og:type" content="website" />
        <meta
          property="og:image"
          content="https://i.ibb.co/brpy9j5/contact-us-og-tag.jpg"
        />
        <meta
          property="og:url"
          content="https://www.myntra.com/contactus"
        />
        <meta
          property="og:description"
          content="Reach out to us for any inquiries or support. Our team is here to assist you with any questions or concerns."
        />
        {/* For Twitter */}
        <meta property="twitter:card" content="summary_large_image" />
        <meta property="twitter:title" content="About Us" />
        <meta
          property="twitter:url"
          content="https://www.myntra.com/contactus"
        />
        <meta
          property="twitter:description"
          content="Get in touch with us for any inquiries or support. We're here to help you with any questions or concerns you may have."
        />
        <meta
          property="twitter:image"
          content="https://i.ibb.co/brpy9j5/contact-us-og-tag.jpg"
        />
      </Helmet>
      Contact Page
    </>
  );
};

export default Contact;

Output:

Conclusion

Integrating React Helmet Async ensures that each page of your React application has the appropriate metadata for SEO and social sharing, enhancing visibility and user engagement.

By using reusable SEO components and wrapping your app with HelmetProvider, you can efficiently manage and update metadata across your entire application.

Start implementing React Helmet Async today to improve your application’s SEO capabilities and ensure it’s ready for effective social media sharing!

For more details on React Helmet Async, refer to the official documentation.