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.
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.
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.
Even if you’re not using the blog starter, you can use the SEO component for inspiration and implement it in your site.
$ next build && next export
And if you’re not using
getInitialProps, you might not even need to use
Next.js has a feature called Automatic Static Optimization which will automatically prerender
.html files for those it can.
Once you’ve set up your social card meta tags, you can test your meta tags using the following tools.
I’ve personally completed both and they really helped me level up my React game.
Please note: The above are affiliate links.
Written by Chris Colborne, an Aussie web dev from Brisbane, Australia. You should follow him on Twitter