Chris Colborne

Can I use React Helmet to add social card meta tags for Twitter and Facebook?

February 18, 2020

Photo by Bank Phrom on Unsplash

So you’ve built an awesome React powered site. It’s shiny, and cool, and does everything you need… until your client/boss/best mate’s dad asks about social sharing meta tags. ‘Hey mate, I’ve heard you can put some tags in and I’ll get the cool card when I share my pages on Twitter and Facebook?’ Uhhh sure, just chuck them in React Helmet and you’ll be sweet right? But hang on, it’s not working!

So what’s the deal, can you add social share meta tags with React Helmet?

Absolutely… with a caveat.

See, the problem is that the various social networks don’t run your JavaScript and so won’t see your dynamically updated meta tags as they’re added on page load.

So the answer is that you need a way to either statically generate, or server-side render your React app.

Whilst not exhaustive, here are a couple of ways you can do that.

React Snapshot

Probably the easiest if you’ve just got a Create React App (CRA) app, is to use React Snapshot.

React Snapshot takes your CRA app, follows any internal links it can find and generates a static site.

Just a simple npm install, update 3 lines and you’ve got a statically generated site.


If you’ve got a custom Webpack setup, you can use the static-site-generator-webpack-plugin

This plugin formed the basis of Gatsby (mentioned next) before version 2.


As primarily a static site generator, Gatsby can do this out of the box. If you use the blog starter, you can use the SEO component

Even if you’re not using the blog starter, you can use the SEO component for inspiration and implement it in your site.


Next.js has a feature called Static HTML Export which can statically render your site.

$ next build && next export

And if you’re not using getInitialProps, you might not even need to use next export.

Next.js has a feature called Automatic Static Optimization which will automatically prerender .html files for those it can.

Testing your social cards

Once you’ve set up your social card meta tags, you can test your meta tags using the following tools.

Like what you've read?

Why not subscribe to my mailing list to get my latest articles by email.

I respect the privacy of your email address. You can unsubscribe at any time.

Written by Chris Colborne, an Aussie software engineer from Brisbane, Australia. Follow me on Twitter

Chris Colborne © 2023