React-helmet is the industry standard for meta tags optimization. It allows every page to have its own custom meta tags, what we have seen is a major victory for React SEO. The library also allows for the addition of Open Graph, which directly impacts the shareability of your content on potentially highly viral spaces such as social networks.

Resource: React Helmet Documentation

Manage document head dynamically: Dynamically manage your app’s metadata (titles, descriptions, etc.). Ideal for boosting SEO and optimizing social media previews. 🛠️ 🔗github.com/nfl/react-helmet

In a React application, you can use the react-helmet library to manage meta tags dynamically:

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:

React will enable the usage of the , , and tags anywhere in the App, improving SEO performance.
Previously, libraries like as react-helmet were used for this.

Summary

In my perspective, React v19 will deliver a lot of relevant and required enhancements, allowing developers to focus more on important features that matter!

Resources

https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#react-compiler
https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler
https://www.youtube.com/watch?v=qOQClO3g8-Y
https://react.dev/reference/react/

React Helmet

To do that, create a PageWrapper.tsx component in the component folder. This component will act as a wrapper for each of the pages you will eventually create in our app. In there you will have a Header, children(the content of each page), a Footer, and additional head meta tags using react-helmet. But for this article, I will keep things simple and just use only the footer data there.

React doesn't handle page titles in an accessible way without additional work. Typically when a user changes page, the page title is read-out-loud through a screen reader as the page is reloaded. However with React, as this is a SPA that does routing, this doesn’t happen quite the same. There’s some additional work or a plugin that’s needed.

react-document-title

React Document Title package that allows for easy page titles

I would like to set the document title (in the browser title bar) for my React application. I have tried using react-document-title (seems out of date) and setting document.title in the constructor and componentDidMount() - none of these solutions work.