When we're developing React applications or web pages, our first goal is to make the app work. And once it's working, it's time to make it available for the users, it's time to show the world what we created.
If you want others to find your React website. And most importantly, if you want others to find your website organically. You need to make sure it's optimized for search engines.
This brings us to the topic of this article. Is React SEO friendly?
Yes! React is SEO friendly and it's often a good choice to build an SEO-friendly website. However, in order to make React app optimized for search engines, you need to set it up correctly and follow SEO best practices.
React is a great library and often is a very good choice to build a website that is optimized for both users and search engines.
Basics of Search Engine Optimization
Search engine optimization is the process of improving the ranking of a website or a web page in a search engine. It's mostly done through enhancing either its relevance to user search queries, or the page's authority.
info
When we publish a single article or a blog post, the search engine crawlers will read the content and determine its rank. It's mostly done by relevance and the authority of the website.
The most important function of SEO is to identify and use keywords properly. The words we choose and the articles we write should help answer the search queries of the users.
In reward, the search engine will position and promote given content with respect to the search queries (or a search keyword). This will result in better rankings on search engines.
All of this can be summarized by the following illustration.
Can Google Index React Apps?
Indexing a website is a crucial process in search engine optimization. If your site is not indexed, it can't be displayed in the search results. The indexing is an automated process and it's handled by google crawlers.
note
Google search engine crawls the web to index websites and ranks their content in the search results.
The problem with Google crawlers in the past was that they couldn't execute Javascript.
Many React developers were facing this problem in the past. All React websites that used client-side rendering were bad for SEO. It was because Google crawlers could not execute Javascript. And because of that, each React website would appear blank.
However, this is no longer the case!
Since then, Google has updated its crawlers. And now, they are able to read and index any React website. The crawler can now render React websites in a way that it can index them like it would any other website.
caution
While Google crawler can index React apps that use client-side rendering. Crawlers of other search engines may not. As a good rule of thumb, you should avoid client-side rendering at all costs if you want your website to be performing well at SEO.
Client-Side vs Server-Side Rendering
In order to show content for the user of a React website, we need to display it first. This process of displaying content is in the world of React called rendering.
In React applications, we distinguish between 2 types of rendering:
- Client-side rendering
- Server-side rendering
As it usually is while comparing 2 approaches, they both have some advantages and disadvantages. In this section, we're gonna compare these 2 types of rendering. And we're gonna explain how it affects the SEO of a React website.
Client-Side Rendering
Client-side rendering is the default mode for React apps.
note
If you create your app from scratch it's most likely being rendered on the client-side, or in other words, in the browser.
Client-side rendering is much faster than server-side rendering because it doesn't require any communication with the server to render HTML.
However, client-side rendering is not optimal for SEO because not all the crawlers can see rendered content properly.
info
Only the crawlers that can execute Javascript (e.g. Google crawler) will see rendered content properly.
Server-Side Rendering
Server-side rendering is an approach to render content on the server before sending it to the client.
To achieve server-side rendering in React app, we usually need to put in additional work and configure the app properly.
If you don't want to handle all the extra configuration, you can use NextJS framework that supports server-side rendering by default.
This type of rendering is much more optimal when it comes to SEO. When React app is rendered on the server-side, crawlers don't have any problems while reading its content.
While this technique is better for SEO, it has some downsides that come with it. It's slightly lower in performance because the website needs to communicate with the server in order to render initial content.
note
Another disadvantage of server-side rendering is that it makes state management more difficult.
Making React App SEO Friendly
In this section, we'll go over the best practices to follow to make your React app SEO-friendly. But they're not as much important as the advice we're gonna give you know. So read the following lines carefully.
Use Proper Tools
If you want to make your React app SEO-friendly, Don't use CRA or any custom Webpack configuration.
note
If you want your React app to be SEO-friendly. You need to use server-side rendering. This technique can be tricky to implement, but luckily for us, there are already frameworks available that support server-side rendering.
If you want to make your React app SEO-friendly. You should consider one of these 2 options:
They work in different ways, but they're both excellent choices when you want your React app to be rendered on the server-side.
Use Optimal URL Structure
Good URL structure is important to give your site a better ranking. Well-organized structure means well-organized content. And search engine crawlers love good content that's well organized and easily accessible.
Use Sitemap
Sitemap goes hand in hand with good website structure. A sitemap is basically a list of pages that are listed on your React website.
Structured listings of a site's page help with search engine optimization, providing a link for web crawlers such as search engines to follow. Site maps also help users with site navigation by providing an overview of a site's content in a single glance. (source: MDN)
Use Proper Meta Tags
The
metaelement can be used to provide document metadata in terms of name-value pairs, with thenameattribute giving the metadata name, and thecontentattribute giving the value. (source: MDN)
In summary, meta tags provide information about the given page on a website. Crawlers can use this information to better understand what the document is about.
tip
React Helmet is a great library to use for adding meta tags to your React app.
Concluding Thoughts
If you want to gain traffic to your React website. And most importantly, if you want to gain it organically. SEO will play a huge role in this process.
note
There are different ways to gain traffic, but SEO will provide a consistent stream of traffic to your website, without any additional cost.
In this article, we covered the basics of SEO and very quickly explained how SEO works. We answered some of the questions that are related to SEO with React in particular.
We provided a set of rules and best practices to follow if you want to optimize your React app for SEO.
Now, you have the basic knowledge and you understand the steps to take, in order to make your React app SEO friendly. And on top of that, you know the answer to the common question between React developers - Is React SEO friendly?