Search Engine Optimization (SEO) is a process of improving the quality and quantity of website traffic to a website from search engines.
An enormous number of people use Google as a tool to search for information, so it is extremely important that your website is ranked as high as possible in search results.
The higher you rank, the more traffic you receive, as simple as that.
Before we start learning what problems with SEO and React are and how to get rid of them, let's get a really quick overview of how websites are indexed by Google.
There is no single place where all websites are registered, so Google has to constantly search for new websites and add them to its list.
This process is called crawling.
It uses a lot of Google Bots (web crawlers) to do this kind of work.
After your website is found, Google Bot tries to understand what it is about by processing the text content, key tags and attributes, images, videos, and more.
This process is called indexing.
The results of indexing are stored in the Google index, an enormously large database.
Google implements an algorithm that decides which results from its index to display in response to user queries.
There are hundreds of rules that are used to determine relevant results.
Some of these include page load time and mobile-friendliness, so make sure your website loads fast and works well on mobile devices.
Check your website on the PageSpeed Insights to get some important information about what can be improved to rank even better.
To get a deeper understanding of what the whole process looks like, read "How Google Search Works" by Google.
Server-Rendered Applications return HTML with all the content in the HTTP response, while Client-Rendered Applications do not.
HTTP response of a Server-Rendered Application:
HTTP response of a Client-Rendered application:
Important note: Notice, that
This process is complicated and there are many things that can go wrong, so it's a bit risky to rely on it.
Crawl budget is the level of attention Search Engine pays to your website.
If it is wasted, fewer pages will be indexed.
If you have Google Search Console connected to your website, go to Settings -> Crawl Stats and see how many of your pages are crawled daily.
This report can be used to detect whether Google encounters serving problems when crawling your site:
The higher the response time, the lower the number of crawl requests would be.
Pre-Rendering is a process of pre-loading website content using the Headless Chrome to prepare it for web crawlers.
Headless Chrome is a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line.
Typically Pre-Rendering is done with the help of a service (like prerender.io) or library (like react-snap) that intercepts all requests to your website and checks the user-agent to determine if a website is being requested by a robot or a human.
If a viewer is a bot, it gets Pre-Rendered version of a website (cached HTML).
If a viewer is a human, a website loads normally.
With the Server-Side Rendering (SSR) approach, HTML code is generated on the server.
Whenever a website is visited, the browser makes a request to the server, which generates and returns the HTML content.
There is a great open-source framework called Next.js that enables SSR for React-based web applications.
It relieves many of the problems developers typically face when trying to set up SSR from scratch, is easy to start, and has great documentation.
Consider using it if you are building a website that requires good SEO.
Static-Site Generation is a process of generating pages at the build time to make them available immediately upon user request.
The biggest difference with the "traditional" approach (like SSR or Client-Side Rendering) is that Static-Site Generator does this in advance for each page you deploy, rather than waiting for the page to be requested and generated on-demand.
One of the biggest advantages is speed, and Search Engines really like that.
One of the most popular open-source Static-Site Generators is GatsbyJS.
It uses React in conjunction with GraphQL, has great documentation and lots of useful plugins that make development super fun.
Isomorphic (Universal) Application - is an application that can run on both the server and the client.
In an Isomorphic Application, the first request is processed by the server and subsequent requests are processed by the browser.
This approach allows web crawlers to get the full HTML code in their request and index the web page.
There are a few ways to make your React application SEO-Friendly: Pre-Rendering, Server-Side Rendering, Statis-Site Generation, Isomorphic Application.
There is no "recommended" approach, each one comes with their own costs.
To choose the right path, you need to know exactly what kind of application you are building and how many resources are available.