SEO and Meta in React JS
React is probably my favorite frontend JS library to build UIs. It is precise and has a small learning curve compared to Angular or other JS libraries. But for all its goodness there are some issues that need to be worked around. One of the issues is SEO.
SEO also known as Search Engine Optimization is the practice of increasing the quantity and quality of traffic to your website through organic search engine results. I mean, you survived all the blood, sweat and tears to create something awesome, obviously you want people to come and check out your awesome creation, Right?
Because of React configurations, search engine crawlers cannot index your web app pages correctly. This is due to a few reasons….
- Because we are working with “Virtual DOM” we are technically funneling all the components to one single “page”. So the crawlers cannot read the pages properly.
- Javascript can be a problematic and quirky when it comes to crawlers and scrapers. Mainly this is due to Javascript’s asynchronous functionality.
The solution I have learned to incorporate is to use React-Helmet.
React-Helmet is an NPM package you can import into your project. This reusable React component will manage all of your changes to the document head. Helmet takes plain HTML tags and outputs plain HTML tags. It’s dead simple, and React beginner friendly.
After including the React-Helmet package we need to build a Meta component which is quite simple in its functionality.
After we have built our Meta component import it into the Welcome or Home page component and voila….SEO issues have been solved.
