Although React is one of the most popular frameworks on the market , it is quite difficult to benchmark a site using it.
In this article, we will see how to create a site suitable for SEO. You'll learn the main hurdles that prevent React from being SEO-friendly, and learn about best practices for making your web application appealing to Google.
How Google Bots Work
To solve the SEO problem of React applications, we need to understand how Google bots work and common issues that React faces.
 |
| best practices for SEO |
Google uses robots to rank websites. These robots explore the pages of your site to find new ones. When creating a website, you can choose which pages you want to crawl by listing them in the Sitemap file . To avoid overloading your site with requests from robots, and save your "crawl budget", you can also ask not to crawl certain pages.
The next step performed by Google robots is indexing. During this process, a Google robot analyzes the content of a web page to understand what it is: the results of this process are stored in the Google index.
Because the indexing of web pages is automated, it is important to structure and format the content in a way that it is understandable to a machine.
The final step includes the dissemination and ranking processes. When a user performs a search, Google consults its index to find the most relevant results.
So what's the deal with React web apps?
Why is it hard to optimize React for SEO?
Developers should identify the issues that search engines encounter when trying to crawl and index React pages.
Let's take a closer look: what makes React SEO difficult and what developers can do to overcome this challenge.
- Empty content
We know that React apps rely on JavaScript, and they often have trouble with search engines. This is because React employs a default application shell template.
The initial HTML does not contain any meaningful content, a user (or a robot) must execute JavaScript to see the content of the page.
This approach implies that Googlebot detects an empty page on its first pass. To see the content, you have to wait for the page to be rendered. This delays the indexing of the content especially when it comes to tens (hundreds?) of pages.
- Loading time and user experience
Extracting, parsing, and executing JavaScript takes time. Additionally, JavaScript may need to make network calls to retrieve the content, and the user may have to wait some time before being able to view the requested information.
Google has defined a set of web metrics related to user experience , used in its ranking criteria. A long loading time can affect the user experience score, causing Google to rank a site lower.
- Metadata
The <meta> tags are useful: they allow Google and social networking sites to display titles, thumbnails and descriptions for each page. To get this information, they rely on the webpage's <head> tag. These sites therefore do not execute any JavaScript for the target page.
React renders all content, including meta tags, on the client. As the application shell is the same for the whole website/application, it can be difficult to adapt metadata for individual pages.
How to make your React website SEO friendly?
 |
| How to make your React website SEO friendly |
- Pre-rendering
Pre-rendering is a common approach to making an application search engine friendly.
Pre-rendering is used when search bots cannot render your pages properly. In this case, you can use special programs that intercept requests to your website and, if the request comes from a robot, they send a static (cached) HTML version of your website. If the request comes from a user, the usual page is loaded.
Advantage
Pre-rendering programs are capable of running all types of modern JavaScript and transforming it into static HTML. They support all the latest on the web, and require little or no modification.
Disadvantages
However, pre-rendering is not suitable for pages that display frequently changing data, and can take a long time if the website is large and contains a lot of pages. Also, you have to rebuild your pre-rendered page each time you modify its content. Finally, it pays off.
- Server-side rendering
If you are planning to build a React web application, you should know the difference between client-side rendering and server-side rendering.
Client-side rendering means that a browser and a Google crawler get empty HTML files or files with little content. Then the JavaScript code downloads the content from the server and users see it on their screens.
In terms of SEO, client-side rendering is problematic, with Google bots either receiving no content or receiving limited content that they cannot index properly.
With server-side rendering, they receive HTML files containing all the content. Google robots can index the page correctly and rank it.
Server-side rendering is the easiest way to create an SEO-friendly React site.
Commentaires
Enregistrer un commentaire