Adding meta tags is easy right? yeah but not for React apps. Making your site SEO friendly is one of the major things that everyone cares about. One of the challenges of deploying an app built with
As always let me start with why had to do this. I recently started my internship at Rootcode Labs. So I got this awesome project to work on. It’s called Aphelia. Aphelia is an AI-based resume parser API that can seamlessly integrate with your recruitment application. This is the future of resume parsers. My task was to build a React website to showcase this awesome AI. So to make this React app SEO friendly I needed to add meta tags for each page.
I started my research and found these two libraries which will help me to achieve this.
1. React Snapshot
This gives static pre-renderer for React apps. React snapshot takes a static site snapshot of all your publicly-accessible pages & leaving anything requiring authentication as a normal. These snapshots still have the normal JS bundle included, so once that downloads the site it will function exactly as before (i.e. instantaneous page transitions), but serve you real, functional HTML & CSS as soon as possible. All you have to do is add this to your
index.js and update your package.json file with
build”: “react-scripts build && react-snapshot” .
If you run
npm run build you’ll see it will detect your react-routes and create a static HTML page for each route inside your
2. React Helmet
This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML tags. With React helmet we can embed meta tags, title, link, script to components.
Using React Helmet is super easy. Here’s an example code snippet,
Once you used these two libraries it will do the rest of things for you. Snapshot will do the static Pretty cool right? No need to worry about anything else. If you use this Facebook sharing debugger tool you can easily test how your meta tags are doing.
I hope this gives you a small idea on how to achieve this. Please make sure to go through the documentation for each library before doing this. Make sure to check out our Aphelia site also. Have a nice day! See you in the next one. PEACE!✌️