Meta tags provide important information about your web page. Not only are the <title> tags displayed in your visitors’ browsers but they along with other tags like the <description> tag is used in search engine results.
It’s important to note that in 2020, meta tags still matter, but not all of them help you. SEO experts agree that if you want to rank highly in search engines your meta tags need to accompany high-quality content.
With Single-Page Applications like those written in React, managing <head> content can be challenging. That is why the good people over at NFL have created React Helmet.
What is React Helmet
React Helmet is a simple component that makes it easy to manage and dynamically set the content of your HTML’s <head> section. For example, you can use React Helmet to set all valid <head> tags including: title, base, meta, link, script, noscript, and style.
It comes in hand with server-side and static rendering improving the crawl-ability of your site. This will make your site more SEO and social media friendly.
Installation
Run the following to install React Helmet in your React project:
$ yarn add react-helmet
# or, using NPM:
$ npm install --save react-helmetGetting Started
Add the following to your parent App function and it will act as a default for all of your pages that don’t have a <Helmet> tag:
import React from "react";
import { Helmet } from "react-helmet";
function App() {
return (
<div className="App">
<Helmet>
<title>My App</title>
<link rel="canonical" href="http://example.com" />
<meta name="description" content="My app description" />
</Helmet>
<h1>Hello, World!</h1>
</div>
);
}
export default App;
In the <head> this will render something like:
<head>
<title>My App</title>
<link rel="canonical" href="http://example.com">
<meta name="description" content="My app description" />
</head>Nesting <Helmet> Tags
How does React Helmet know which <Helmet> to use?
Nested or latter components override duplicate tags. Any tags that exist in both the child and the parent will use the child version. Any tags that exist in the parent and not the child will use the parent version.
Let’s make a new child component to test how <Helmet> interacts:
import React from "react";
import { Helmet } from "react-helmet";
export function ChildComponent() {
return (
<div className="Child">
<Helmet>
<title>Child Page - My App</title>
<link rel="canonical" href="http://example.com/child" />
</Helmet>
<h2>Hello, Child!</h2>
</div>
);
}Add the child component to the App:
import React from "react"
import { Helmet } from "react-helmet";
import { ChildComponent } from "./child.component";
function App() {
return (
<div className="App">
<Helmet>
<title>My App</title>
<link rel="canonical" href="http://example.com" />
<meta name="description" content="My app description" />
</Helmet>
<h1>Hello, World!</h1>
<ChildComponent />
</div>
);
}
export default App;This will render something along the lines of:
<head>
<title>Child Page - My App</title>
<link rel="canonical" href="http://example.com/child">
<meta name="description" content="My app description" />
</head>Note the <title> and <link> tags changed but the description didn’t.
Adjusting <body> attributes
React Helmet gives you the ability to change attributes of the <body> tag by adding it to your <Helmet> tag like this:
<Helmet>
<title>Child Page - My App</title>
<link rel="canonical" href="http://example.com/child" />
<body className="dark" />
</Helmet>Conclusion
That’s it for React Helmet. Simple, easy, and straight forward. For more information on what <head> tags are available see https://htmlhead.dev/
You need to login in order to like this post: click here
One day I’ll have to do this!
You need to login in order to like this post: click here