Meta Data in React

Hello! Today I want to delve into a crucial but often overlooked aspect of web development: SEO (Search Engine Optimization) and how we can improve the visibility of our React web applications through dynamic meta-data.

As many of you may know, React is a powerful tool for building interactive and dynamic web applications. However, one of its limitations is its performance in terms of SEO, especially if you are working with client-side rendering. This is due to the behavior of the virtual DOM and how it renders on the page.

When search engines crawl a website, they prefer static and well-structured content. However, React generates content dynamically on the client side using JavaScript, which can result in indexing issues for search engines.

One way to address this issue is through the manipulation of meta-data, such as page titles, descriptions, and more meta tags, for each page of our application. This not only helps search engines understand and rank our content but also enhances the user experience by providing accurate and relevant information in search results.

A common way to implement dynamic meta-data in a React application is through the use of libraries like Helmet. Helmet allows us to manipulate meta-tags programmatically, greatly simplifying the process and freeing us from the need to manually update each page.

In this post, I want to share with you how I've used it to significantly improve the SEO of my applications.

Installation
After React Helmet encountered certain difficulties in updating tags for social media, React Helmet Async emerged as a fork of React Helmet. This new library was established as a more reliable and robust solution for handling dynamic meta-tags updates. Therefore, it is recommended to use it over the original version of React Helmet to ensure consistent and optimal behavior in managing meta-data.
So first, we need to install it with our package manager. In my case, I'm using npm, so:

npm i react-helmet-async

Implementation

Now you must wrap your application with the HelmetProvider component. In my case, it looks like this:

import AnimatedRoutes from './AnimatedRoutes.js';
import Header from './Header.js';
import Footer from './Footer';
import { HelmetProvider } from 'react-helmet-async';

function App () {
  return (
    <HelmetProvider>
      <Header />
      <AnimatedRoutes/>
      <Footer />
    </HelmetProvider>
  );
}

export default App;

So on each of your pages, you can import a Helmet component and declare each necessary meta-tag for that page within it. But why not leave that logic to a component, let's call it 'MetaTags', and have more concise and maintainable code?

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

// You can have more props. In my case, these are enough.
function MetaTags ({ title = '', description = '', image = '', name = '' }) {
  return (
        <Helmet>
            { /* Standard metadata tags */ }
            <title>{title}</title>
            <link rel='canonical' href={ window.location.href } />
            <meta name='description' content={description} />
            { /* Open Graph tags (OG) */ }
            <meta property="og:url" content={window.location.href} />
            <meta property="og:type" content="website" />
            <meta property="og:title" content={title} />
            <meta property="og:description" content={description} />
            {/* OG image tags */}
            <meta property="og:image" content={image} />
            <meta property="og:image:secure_url" content={image} />
            <meta property="og:image:type" content="image/jpeg" />
            <meta property="og:image:width" content="200" />
            <meta property="og:image:alt" content={`Image of ${title} site`} />
            { /* Twitter tags */ }
            <meta name="twitter:creator" content={name} />
            <meta name="twitter:card" content="summary" />
            <meta name="twitter:title" content={title} />
            <meta name="twitter:description" content={description} />
        </Helmet>
  );
}

export default MetaTags;

Open Graph is a protocol developed by Facebook that allows us to control how our shared content appears on social media platforms. It is used by Facebook, LinkedIn, TikTok, and many others. However, Twitter has its own protocol for setting up its meta-tags. You can find more information about these protocols on their official websites:
Open Graph
Twitter Tags

Now we only need to place a MetaTag component on each page to have all our meta-data configured:

import React from 'react';
import MetaTags from '../components/MetaTags';

// Example page
function MetaExample () {
  return (
        <>
            <MetaTags
                title='Meta Example'
                description='This is a test description to show you how to improve SEO in your React web applications!'
                image='url to the image'
                name='FacuDev'
            />
            <div>MetaExample</div>
        </>
  );
}

export default MetaExample;

To verify the functionality of our meta-tags, we can use a Google Chrome extension such as "META SEO Inspector":

If you are hosting your site, you can see how the social cards look using the Facebook Card Validator and by simply making a post on your Twitter account. Twitter has its own card validator, but it's no longer functional, so you have to simulate a post to see it.

Conclusion
We have seen a simple way to manage our meta-data to provide better performance in our SEO. I consider this a crucial aspect if we are working with single-page applications and client-side rendering where this aspect is more affected.
I hope this post has been helpful to someone, and you can suggest changes or ideas!