Know about React-Helmet
Because of the nature of single page applications (SPAs), modifying metadata in React apps can be tricky without using a helper library.and React Helmet is the one which solves this problem.
Leveraging Helmet for metadata inclusion can significantly simplify the process of making a React app SEO and social media friendly.
Helmet lets us insert metadata into the <head> tag in much the same way we would using standard HTML syntax.
Intallation of React Helmet
However, before demonstrating, it’s important to note that the standard react-helmet library is now considered deprecated. Instead, you should use react-helmet-async.
This is because react-helmet led to a few bugs that resulted in memory leaks and poor data integrity. Suffice it to say, when React developers mention Helmet, they’re almost always referring to react-helmet-async.
npm i react-helmet-asyncBacics
There are mainly two components of React Helmet
- HelmetProvider will wrap the entire app component in order to create context and prevent memory leaks. Therefore, this component will only need to be imported in the root App component.
- Helmet will be imported into any page component where you want to implement meta tags. Think of <Helmet> as the <head> tag for the page in question.
Lets start with a basic example
import React from 'react';
import { HelmetProvider } from 'react-helmet-async';
import NavBar from './NavBar';
import Landing from `./Landing;
export default function App() {
return (
<HelmetProvider>
<NavBar />
<Landing />
</HelmetProvider>
)}and
import React from 'react';
import { HelmetProvider } from 'react-helmet-async';
import NavBar from './NavBar';
import Landing from `./Landing;
export default function App() {
const helmetContext = {};
return (
<HelmetProvider context={helmetContext}>
<NavBar />
<Landing />
</HelmetProvider>
)}If you noticed the addition of the helmetContext variable being passed as a prop to our HelmetProvider, you nailed it!
This paradigm is found using most popular state management systems such as Redux, and helps ensure that context is never scoped outside of the current instance of your app.
Now, let’s assume the following page component is the landing page for your React app:
import React from 'react';
import { Helmet } from 'react-helmet-async';
export default function Landing() {
return (
<div>
<Helmet>
<title>Learning React Helmet!</title>
<meta name='description' content='Beginner friendly page for learning React Helmet.' />
</Helmet>
<h1>Cool Landing Page!</h1>
</div>
)
}A quick review of the Landing page component shows that we imported the Helmet component, and used it to add the title and description metadata to the page.
We simply add the HTML equivalent meta tag inside the Helmet component, and the work of adding this to the <head> HTML tag is handled for us.
Awesome! We’re now on the road to creating an SEO-friendly React app.
Creating an SEO Component With React Helmet
Metadata isn’t only about Google search results. We also want social media posts that reference our site to show up as cool preview cards.
When it comes to metadata and meta tags, there’s a ton of different variants to remember. Facebook uses og (open graph) tags, Twitter uses its own twitter variant, and so on.
How to Use Components for Abstraction
One cool thing about creating React components with props is that you can reuse a prop inside the component however you please.
Using this knowledge, you can create a component called SEO that abstracts away the usage for commonly used metadata tags, saving you from having to track down each tag variant every time you build an SEO-friendly app.
An example SEO component that streamlines the process of adding Facebook and Twitter tags could look like this:
import React from 'react';
import { Helmet } from 'react-helmet-async';
export default function SEO({title, description, name, type}) {
return (
<Helmet>
{ /* Standard metadata tags */ }
<title>{title}</title>
<meta name='description' content={description} />
{ /* End standard metadata tags */ }
{ /* Facebook tags */ }
<meta property="og:type" content={type} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
{ /* End Facebook tags */ }
{ /* Twitter tags */ }
<meta name="twitter:creator" content={name} />}
<meta name="twitter:card" content={type} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
{ /* End Twitter tags */ }
</Helmet>
)
}As shown above, our component accepts four props: title, description, name, and type. Using these four props, we were able to distribute the values across nine different types of meta tags!
Here’s an example of how we could implement this component in our Landing page component:
import React from 'react';
import { SEO } from './SEO’;
export default function Landing() {
return (
<div>
<SEO
title=’Learning React Helmet!’
description=’Beginner friendly page for learning React Helmet.'
name=’Company name.’
type=’article’ />
<h1>Cool Landing Page!</h1>
</div>
)
}So, all we had to do is pass in our four props, and our custom SEO component handles all the heavy lifting of creating the multiple different types of metadata tags. Nice.
This example is far from an exhaustive list of meta tags. It doesn’t take much imagination to visualize how useful this component would be if you wanted to include all relevant meta tags for your site.
Conclusion
In this article we went over why React Helmet is a useful addition to your React app. You learned not only basic setup and usage, but also a more advanced implementation that helps abstract away much of the repetitive work involved in metadata tags.
Thanks for reading Happy learning and happy coding!!!
