DEV Community

loading...
Cover image for Easily Generate Meta Tags for Your React App

Easily Generate Meta Tags for Your React App

reedbarger profile image Reed Barger Originally published at reedbarger.com on ・3 min read

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

Enter fullscreen mode Exit fullscreen mode

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 my personal site (reedbarger.com) 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>
  );
}

Enter fullscreen mode Exit fullscreen mode

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:

The React Bootcamp
Click here to be notified when it opens

Discussion (2)

pic
Editor guide
Collapse
xai1983kbu profile image
xai1983kbu

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!

Collapse
madza profile image
Madza

other alternatives include react-meta-tags and react-document-meta