The problem with react with SEO

Reach is one of the most popular JS libraries but there are caveats that really ruin the web experience on Google. From reactJS not being SEO friendly from scratch to creating SEO issues in indexing and the right description on google, react add a lot of work that should not need to be added in the very first place.

Let’s see what am I talking about!

1. SalaryOverflow missing description

She was on AWS series and mentioned their product salary overflow. When I search for it on google, this is what I observed.


2. Kaptcha missing description

Kaptcha was presenting its product and Bangalore Tech Summit 2022 and imagine the number of customers who might have searched for the brand on Google.

Having no description reduces the CTR (click-through rate) and eventually, users searching for you end up on another webpage.

Google tries its best to rank these websites but even when it ranks, people often miss the site due to the “Untitled” title of the webpage.

The company spends tons of money on the office in electronic city,  doing a showcase at Bangalore Tech Summit but ends up not having a webpage title on google with a good description.

It should be a very niche problem and an opportunity for an SEO company to outreach these companies, presenting themselves as an expert and getting them onboard for an SEO service.

The funny thing to know is, google rewrites the titles of many popular blog posts where rewriting is not really needed but ends up not writing for pages that need them.

How to solve this problem? 

  1. List pages
  2. Write Title and Descriptio in Excel Sheet, likely google sheet
  3. Use helmet NPM Package
  4. and Push the code into production

What if this still doesn’t solve my problem?

JS requires compilation before the webpage is visible. Google Bots require a lot of resources to make this happen. Google clearly doesn’t accept or deny the compilation.

Sometimes, it takes more than 5 seconds to load the webpage for the first time.

In this case, the best idea is to keep SSR (Server Side Rendering) pages ready to be served. In this process, HTML is sent in frontend and shows in the front while the gets load in the background.


Martin From Google, whom I met in 2019 at Google Office Hyderabad, suggested that we should have links using <a hrefs=””> not on the event. This improves the crawl rate.

What about microdata and schema to achieve a rich snippet? 

You can use the helmet NPM Package, it will help you solve the problem. It has options to send risk data as an option using <script> and JSON.