Improving SEO with React Helmet Async

Tolu AdegboyegaTolu Adegboyega
4 min read

Table of contents

Search Engine Optimization (SEO) is paramount in getting your website noticed in the competitive landscape of the internet. Optimizing your website for search engines not only increases visibility but also drives organic traffic. However, improving SEO in Single Page Applications (SPAs), like those built with React, can be particularly challenging due to their dynamic nature. React Helmet Async is a great tool that can help to overcome these challenges. This article is the first in a two-part series, Improving SEO: A Tale of Two Libraries.

What is React Helmet Async?

React Helmet Async is a JavaScript library that enables you to dynamically manage the content of the document head. To put it simply, it gives you the ability to manage the <head> of your HTML document in React apps. Because search engines like Google significantly rely on the data in the <head> section to comprehend and rank your web pages, this control is crucial for SEO.

Why React Helmet Async for SEO?

React Helmet Async provides a robust toolkit for optimizing your website's SEO performance. It offers a wide range of features related to SEO, and in this section, we'll focus on the following key aspects:

  • Title and Meta Tags - The Foundation of SEO: Proper management of title and meta tags is fundamental in SEO. These tags are a vital component of any SEO plan because they serve as the first link between your site and search engines. React Helmet Async gives you the ability to dynamically set and change title tags for each page in your React app.

  • Open Graph and Twitter Cards: When users share content on social media platforms, they expect it to look good. Open Graph and Twitter Card metadata allow you to define the image, name, and description that appears in social media preview formats. With React Helmet Async, you can set up metadata for Open Graph and Twitter Cards for each page in your React app.

Setting Up React Helmet Async

Installation

Start by installing react-helmet-async using npm or yarn.

npm install react-helmet-async
# or
yarn add react-helmet-async

Wrapping Your Application with HelmetProvider

In your root component (e.g. App.js), wrap your entire React application with the HelmetProvider.

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

function App() {
  return (
    <HelmetProvider>
      {/* Your entire React application */}
    </HelmetProvider>
  );
}

Using React Helmet Async across Different Pages

Now that react-helmet-async is up and running, let’s take a closer look at how it can be used across different pages of your app.

Importing Helmet

In each component where the document head is to be changed, import Helmet

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

Updating Tags, Titles, and Descriptions

Helmet can be used to set and update different document head elements within your component. For example, you can set and update the following title and meta description:

function HomePage() {
  return (
    <main>
      <Helmet>
        <title>Home Page's Title</title>
        <meta name="description" content="This is the home page's description." />
      </Helmet>
      <h1>This is the home page 🏡 </h1>
    </main>
  );
}

Implementing Open Graph and Twitter Cards

Specific metadata tags can be added to the Helmet component to create Open Graph and Twitter cards.

function AboutPage() {
  return (
    <main>
      <Helmet>
        // Open Graph Tags
        <meta property="og:title" content="About Page's Title" />
        <meta property="og:description" content="This is my About Page's Title description." />
        <meta property="og:image" content="https://example.com/about-page-image.jpg" />

        // Twitter Card Tags
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="About Page's Title" />
        <meta name="twitter:description" content="This is my About Page's Title description." />
        <meta name="twitter:image" content="https://example.com/about-page-image.jpg" />
      </Helmet>
      <h1>This is the about page 🕵🏾‍♀️</h1>
    </main>
  );
}

It’s important to test and troubleshoot after you’ve implemented react-helmet-async. You can do this using browser developer tools and SEO testing tools to make sure your metadata is set correctly.

Conclusion

React Helmet Async is an effective solution for managing the document head of your React app. You can manage titles, descriptions, Open Graph, and Twitter Cards by effectively utilising it across many pages, which will improve your SEO and social media presence through improved content sharing on social platforms.

Thank you for reading and I hope you found this post helpful. 💫

3
Subscribe to my newsletter

Read articles from Tolu Adegboyega directly inside your inbox. Subscribe to the newsletter, and don't miss out.

SEOReactJavaScriptWeb Developmentreact-helmet

Written by

Tolu Adegboyega
Tolu Adegboyega

Front-end developer that enjoys building aesthetically pleasing and functional products.