article cover

Easily Generate Meta Tags for Your React App

Reed Bargerviews icon-
reactweb development
reactweb developmentseo

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.

Alt Text

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 this site into Hey Meta and see what we get:

Alt Text

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.

Alt Text

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:

Alt Text

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.

Alt Text

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>
);
}


course cover
Join The 2020 JS Bootcamp Video Course 🏕️
Code ArtistryWatch Now
Reed Barger
Professional JS developer who loves to write. Here to make you a better developer, faster.