You’ll learn the challenges that React applications face when it comes to SEO (Search Engine Optimization). To be more specific, you will see how React combines with search engine optimization techniques.
Entrepreneurs rely on the most popular framework for developing web applications, React. And they are interested in the SEO side. When we talk about SEO websites on React face big problems. One of the main reasons is that developers mostly focus on the client-side rendering, whereas Google focuses on the server-side. And this creates huge problems for both React and SEO.
In this article, we’re going to talk about the basics of React SEO-friendly websites. In this guide, you’ll find a list of problems that prevent React from being search engine optimized. Also, we’ll see best practices that will help your app appear higher in Google search results.
How does Google bot scan web pages?
Of all search engines, Google gets about 90% of all queries when it comes to SEO. Before we delve into how SEO works for React, let’s take a look at how Google crawls and indexes.
The image below is taken from the Google Documentation.
Note: this is an example block diagram. Google bot itself is quite complex.
Points to remember:
- Google bot keeps track of a queue containing all the URLs it needs to crawl and index later.
- When the search bot becomes idle, it selects further URLs from the queue, queries them, and collects the HTML code.
- The processing unit retrieves all the URL tags mentioned on the page and adds them back to the render queue.
- The content is added to Google’s index.
General SEO problems
SEO for React sites is extremely important. Below are a few SEO problems that developers can fix.
1. Blank page on first view
2. Page metadata
A Sitemap is a file that contains all the details about videos, pages, and other sections of your site, as well as the relationship between them. Being a smart search engine, Google looks at this file to make it easier to read your site’s information. React doesn’t have built-in methods for creating sitemaps. If you use the React Router to navigate, you need to find ways to create a sitemap. Although it will take some effort.
4. User experience and load time
5. Other SEO Considerations.
Here are a few practices for building great SEO.
- Use CDNs to serve every static resource like JS, CSS, fonts, etc., and use adaptive images to reduce load times.
- Improving your robots.txt file can help search bots in the way they crawl your site.
If you want to improve the performance of your React application, React.memo is a great solution to achieve that.
Challenges of React SEO
Let’s see what problems React developers have to face when developing SEO-friendly sites.
1. Using a single-page application (SPA)
To reduce load time, developers create JS-based SPAs. This is the main SEO problem with React sites. Sites do not reload all content. Instead, these pages are updated. With the help of this is realized increased performance applications.
2. No dynamic SEO tags
SPAs load data in the process. Thus, when the site scanner clicks on a particular link, it makes it difficult to complete the page load cycle. The metadata cannot be updated. And this is the main reason why the bot scanner can’t show the SPA, eventually indexing a blank page. In the end, it all worsens the position of search results. However, there is a way to solve this problem, the developers need to create separate pages for Google bot. But this raises a new problem. Creating separate pages entails a business cost over and above the difficulties of ranking on the first page of results in Google.
3. SEO problems with the SPA
As you know, single-page applications are created to optimize site performance. There are several problems associated with SEO.
How to make React applications SEO-friendly
Below are approaches for improving SEO in React.
1. isomorphic React
As one of the best choices for creating single- and multi-page SEO-friendly applications, pre-rendering is commonly used when crawlers or search bots do not display web pages effectively. Prerenderers, are unique programs that limit queries to a site. In a situation where the request comes from a search robot, prerender sends a static HTML version. If there is a standard request, the page loads as usual.
- Easy to connect
- Support for the latest web standards
- It’s not free.
- Not suitable for pages whose data changes frequently
- Takes a long time to load if the site is too big
3. Server-side rendering: Getting HTML files with all the content
If you want to build a React application, you need to have a precise idea between client-side and server-side rendering. When rendering on the client side, Google bot and browser get empty HTML files with less or no content.
React SEO Best Practices
These practices will give you answers to the question of how to make your React app SEO-friendly:
1. Using React Router
You probably know that React uses SPA (single-page application). However, you can use the SPA model more optimally if you describe SEO elements and rules in a certain way on your pages. The guideline is to open the page as a separate URL without the hashtag (#).
(According to Google, it can’t read URLs with a hashtag, and therefore can’t index any URLs created by React).
Consequently, we create URLs so that they open on separate pages. We must use React Router hooks in the URLs. Below is a sample:
When creating content, we recommend that you refrain from using setTimeout. Because of this Google bot may leave the page and site without reading the data.
2. URL register
Google counts certain pages as individual pages when the URL contains lowercase or uppercase letters.
Google will treat these two addresses as two separate pages. To avoid this duplication, always write the addresses in lower case.
3. Using “href” in links
Make sure that you set the “href” of the links. Unfortunately, Google bot cannot track onClick conversions. Consequently, it becomes important to specify an href in links to make it easier for Google bot to detect and visit other pages.
4. React Helmet
One important component of SEO is metadata. Thus, they should appear in the source code, even when using React. Using the same description and title on all pages may not be enough for CTR (click through rate) and other SEO indicators.
This is when React Helmet comes into play. Below is a sample code structure along with metadata:
If you can’t universalize the item description, try filling the description with the first 160 characters of the page content.
Make sure that the element’s data structure is preserved in the source code along with the metadata. (Organization schema, product, etc.)
For example, the raw and rendered versions of yolcu360.com are shown below. Structured data is displayed in protected form in both versions. Ideally, we should see no such difference.
When we check a page with the Rich Results tool, it shows us whether the data on your page is structured and whether Google bot can easily view it.
You can display metadata or content and items in Google using Helmet and server-side rendering together. Any flaw or potential metadata errors can negatively impact each of the metrics presented in the search results.
5. Error code 404
All defective pages have a 404 error code. Consequently, this is a reminder to configure files such as server.js and route.js.
You must point images to pages using “img src”. According to the study, although images appear in page elements without difficulty, the scanner cannot index them.
Using anything as a CSS background in conjunction with React can lead to difficulties in indexing images.
Implementing lazyload will help users browse your site faster and will have a positive impact on Google’s download speed ratings.
You can find this package on npm.
You can use React-Snap to optimize site performance. Below is an example:
Disclosure: This post contains affiliate links. This means we may make a small commission if you make a purchase.