The recent release of React 19 introduced Document Metadata, a feature that manages meta tags and elements like titles and descriptions directly from React components. This feature simplifies the process of defining SEO elements by allowing you to directly define metadata in React components, and by being built directly into React 19 and all future releases.
Before React 19 was released, developers relied on SEO libraries like React Helmet or react-helmet-async to handle metadata. While these libraries offer flexibility in managing metadata, they come with certain drawbacks, including potential vulnerabilities.
In this article, you will learn how to use the new React 19 Document Metadata feature through practical code examples. We will compare its functionalities with third-party SEO libraries to see which approach gives the most efficient approach to managing SEO elements in React applications.
The success of a website is highly dependent on its discoverability and accessibility to search engine crawlers. Websites have to be optimized for search engines using SEO metadata, which can be implemented for the following use cases:
SEO metadata makes it possible for React applications to achieve better search engine rankings and ultimately drive more organic traffic and conversions. SEO metadata can easily be implemented using document metadata.
React 19’s Document Metadata is a new, inbuilt feature that enables you to define and add SEO meta tags within your React components. This feature is only available in React 19 and future versions. Using document metadata offers many advantages, including improved webpage SEO configuration and the following:
In the next section, you will see an example of how to incorporate SEO metadata using this new feature.
Implementing Document Metadata is easy and time-efficient because you do not have to install any library or set up any other wrappers or components that support document metadata. And though Document Metadata requires familiarity with JSX, because most React developers already use JSX, this shouldn’t be a concern when opting for Document Metadata over third-party SEO libraries.
To start implementing document metadata, you have to define your function that will set SEO metadata for a website. This can be any function you want to feed with SEO metadata.
For example, we can create a function called CarModel. This function will use document metadata to set content for a website that displays exotic cars. This function takes in a prop called showroom. The showroom object contains all data regarding car model information, including car name and year:
function CarModel({showroom}) {
return (
Next, the code layout changes as you add the JSX code that defines and declares the SEO metadata by setting the <article> element container to outline the SEO metadata. The code fetches the content title by invoking the showroom prop:
<article>
<title>{showroom.title}</title>
After adding the article element, you can start defining SEO meta tags such as name:
<meta name="car" content="jaguar" />
You can also define relationships between the current document and external resources using the link rel metadata. For example, <link rel="stylesheet" href="styles.css"> links an external CSS file to the HTML document, and <link rel="canonical" href="https://example.com/page"> specifies the preferred URL for a webpage. Below is an example using link rel metadata:
<link rel="showroom" href="https://carsxy/showroom" />
Keywords will always provide search engines with valuable context about a page’s content. Using accurate and relevant keywords helps in associating the webpage with the correct search queries. You can set keywords using document metadata, as seen in the following example:
<meta name="keywords" content={showroom.keywords} />
Besides meta tags, you can also add comments to your code using paragraph elements, <p>:
<p> This article showcases the best sports cars in the world... </p>
When you are done adding the SEO metadata, close the function:
</article> ); }
There are many metadata elements you can add when using Document Metadata, including the following meta tags:
Incorporating these metadata elements properly using document metadata enhances the SEO of your website and ensures that search engines and browsers can effectively interpret and display your webpages.
Before Document Metadata was released, developers used SEO libraries to modify the <head> in React components, as there was no native way to do so. Unlike Document Metadata, which is still new, these React SEO libraries have big ecosystems and support. Some alternatives to Document Metadata include:
Document Metadata is convenient and secure because it is built into React, whereas SEO libraries like React Helmet have security issues. React Helmet hasn’t had a GitHub commit since 2020, though it still garners about 1 million weekly downloads on npm. Despite its popularity, the project was abandoned due to data integrity and leakage issues. Consequently, Scott Taylor, the developer of React Helmet, archived it and replaced it with react-helmet-async, which eliminates the security issues found in React Helmet by encapsulating changes within a server-side request to prevent memory leaks.
Unlike Document Metadata, where you don’t have to import any components, SEO libraries require you to import SEO library components:
import React from 'react';
import { HelmetProvider } from 'react-helmet-async';
Below is an example of code that implements SEO elements using react-helmet-async:
const app = (
<HelmetProvider>
<App>
<Helmet>
<title>LogRocket Blog</title>
<link rel="canonical" href="https://www.logrocket.com/" />
</Helmet>
<h1>Home for top notch frontend developer content</h1>
</App>
</HelmetProvider>
);
The advantage that Document Metadata gives React developers is that they do not have to install and familiarize themselves with third-party metadata libraries, but it does not make these tools obsolete.
SEO libraries offer different features and capabilities for customization, but here are some of the common features they offer:
prioritizeSeoTags flagLibraries like react-helmet-async provide flexibility and extensive support for SEO meta tags and are compatible with both the older and latest React versions. Document Metadata was only released in React 19, so it will take some time before many developers start using it and testing its limits.
Document Metadata and React Helmet do a great job of enabling developers to configure SEO metadata and rank better on Google searches. However, it is important to know that many technical aspects affect the ranking of a React web application, including:
Document Metadata is for developers who want a straightforward solution for SEO metadata without going into the customizations that third-party libraries offer. It is important to assess the security state of the third-party SEO library you want to use to avoid the risk of using abandoned SEO libraries, such as React Helmet, that have memory leak issues.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
Learn more →
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Learn how the call stack, event loop, and various queues help JavaScript handle asynchronous operations while maintaining its single-threaded nature.
Let’s review React Context API. When should you use it to avoid prop drilling, and how does it compare to Redux?
Arrow functions have a simpler syntax than standard functions, and there are some important differences in how they behave.
null, undefined, or empty values in JavaScriptIn most languages, we only have to cater to null. But in JavaScript, we have to cater to both null and undefined. How do we do that?
