Any React app or website, to be seen by users, needs to have good SEO practices.
The go-to package for providing all of your SEO metadata is react-helmet.
What’s great about it is that you can use it just like a normal react component and list all of your meta tags as children, like so:
import React from "react";
import Helmet from "react-helmet";
function App() {
return (
<main>
<Helmet>
<title>My app</title>
</Helmet>
<div>{/* app content... */}</div>
</main>
);
}
What I have found through creating many React apps (Gatsby apps in particular) is that it gets very tedious to create and manage all of these individual meta tags that you need for your app to be recognized by search engines and presentable when linked to in social media apps like Facebook or Twitter.
The best tool that I have found for automatically creating and testing your metadata is available on the site, HeyMeta.
It allows you to both test your site’s metadata and preview what it will look like for other users, as well as automatically generate the meta tags that you need.
Here’s a quick example. Let me plug my personal site (reedbarger.com) into Hey Meta and see what we get:
The first thing you can see is the Social Card Preview which is how it will look like on social media sites, which is Twitter.
And it should include the app title, a description, and a link as well as an image.
Underneath that, you can see—and make changes to—the title, description, and image.
What’s most convenient about it is that you can actively make changes to any field. And once you blur away from it, you’ll be given a button to preview what it looks like with those changes.
In my case, let’s say I want to change my title (from ‘Reed Barger’ to just ‘Reed’) and then click away from the input, I can update the preview:
And once you’ve made all the necessary changes that you need, you can go down to the bottom, to the Generate meta tags area.
If you hit the Generate button, you’ll be given all of the necessary tags for Google and search engines, as well as for Facebook and Twitter.
All you have to do is copy that and paste it right into your Helmet tags. Just make sure to convert each of the tags to JSX by adding a trailing slash at the very end and remove the comments (or convert them to be valid JSX comments, not HTML).
Here is the final product for me:
import React from "react";
import Helmet from "react-helmet";
function App() {
return (
<main>
<Helmet>
{/* <!-- HTML Meta Tags --> */}
<title>Reed</title>
<meta
name="description"
content="Articles, tips, and insights aimed at making you a world-class developer, designer, and beyond."
/>
{/* <!-- Google / Search Engine Tags --> */}
<meta itemprop="name" content="Reed" />
<meta
itemprop="description"
content="Articles, tips, and insights aimed at making you a world-class developer, designer, and beyond."
/>
<meta
itemprop="image"
content="http://reedbarger.com/static/ca-styled-logo-5205dbb0983e1531d228c98584ab5711.png"
/>
{/* <!-- Facebook Meta Tags --> */}
<meta property="og:url" content="https://reedbarger.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Reed" />
<meta
property="og:description"
content="Articles, tips, and insights aimed at making you a world-class developer, designer, and beyond."
/>
<meta
property="og:image"
content="http://reedbarger.com/static/ca-styled-logo-5205dbb0983e1531d228c98584ab5711.png"
/>
{/* <!-- Twitter Meta Tags --> */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Reed" />
<meta
name="twitter:description"
content="Articles, tips, and insights aimed at making you a world-class developer, designer, and beyond."
/>
<meta
name="twitter:image"
content="http://reedbarger.com/static/ca-styled-logo-5205dbb0983e1531d228c98584ab5711.png"
/>
</Helmet>
<div>{/* app content... */}</div>
</main>
);
}
Enjoy this post? Join The React Bootcamp
The React Bootcamp takes everything you should know about learning React and bundles it into one comprehensive package, including videos, cheatsheets, plus special bonuses.
Gain the insider information hundreds of developers have already used to master React, find their dream jobs, and take control of their future:
Click here to be notified when it opens
Top comments (2)
Hi Reed!
I used svg image and checked Social Card Preview on these sites heymeta.com/ and metatags.io/ they place a svg image but when I tested on Twitter and the Facebook image was not shown. I found an official debugger on metatags.io/. After debugging and searching by error I found this discussion stackoverflow.com/a/26876671/9783262
I changed svg to png and it works now fine.
Thank you!
other alternatives include react-meta-tags and react-document-meta