Handling SEO in React apps

I have landed successfully in Bali, rented a scooter and been enjoying my ride from my place to Dojo Bali where I'm currently writing this article.

#SEO definition

Search engine optimization (SEO) is the process of increasing the quality and quantity of website traffic, increasing visibility of a website or a web page to users of a web search engine.

Taken from Wikipedia

#The SPA issues with SEO myth

All React apps built using CRA (create-react-app) or Gatsby to serve dynamic content are single page apps, meaning that there is one index.html file that renders the content of your app, which means that all your meta tags within your components won't be crawled for indexing on search engines, or it used to be! As of May 2019, Google announced that its crawler can now crawl JavaScript just like the Twitter/Facebook/Slack/Telegram crawlers, so when ever a non technical person mentions this SPA SEO myth, make sure to enlighten them.

#What we used to do before crawlers turned out to be able to crawl JavaScript

Most React developers used Next Js as it offers server side rendering, meaning that the pages are generated on demand when the user visits a certain url or use a technique called Pre-rendering which is basically server side rendering during build time, Gatsby still uses this approach to generate the pages for your static content but doesn't offer that feature for dynamic content unlike some services such as Netlify that offers pre-rendering for your dynamic content.

#SEO component

Inspired from this GitHub repository which contains all you need to include in your header tag, I made this SEO component that I re-use almost on all my Gatsby/React apps to handle SEO

I added few comments within the code explaining each part

I had to separate the snippets for a11y concerns

And I include it on each component that is meant to act like a page like so

You can get this component from the code source of this blog.

#Tips & tools to rank your website higher on search results

If your website is a blog like this website, it's highly recommend to have a RSS feed like this one as some apps and extension do crawl the feed and will bring you more visitors that will boost your ranking on search results.

Having a sitemap helps as well and you have to submit it to your Google Search console.

You can test your structured data here

Feel free to drop your questions down in the comments section and I'll do my best to answer them all.