This website uses cookies to better the user experience of its visitors. Where applicable, this website uses a cookie control system, allowing users to allow or disallow the use of cookies on their computer/device on their first visit to the website. This complies with recent legislative requirements for websites to obtain explicit consent from users before leaving behind or reading files such as cookies on a user’s computer/device. To learn more click Cookie Policy.

Privacy preference center

Cookies are small files saved to a user’s computer/device hard drive that track, save, and store information about the user’s interactions and website use. They allow a website, through its server, to provide users with a tailored experience within the site. Users are advised to take necessary steps within their web browser security settings to block all cookies from this website and its external serving vendors if they wish to deny the use and saving of cookies from this website to their computer’s/device’s hard drive. To learn more click Cookie Policy.

Manage consent preferences

These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
Cookies list
Name _rg_session
Provider rubygarage.org
Retention period 2 days
Type First party
Category Necessary
Description The website session cookie is set by the server to maintain the user's session state across different pages of the website. This cookie is essential for functionalities such as login persistence, ensuring a seamless and consistent user experience. The session cookie does not store personal data and is typically deleted when the browser is closed, enhancing privacy and security.
Name m
Provider m.stripe.com
Retention period 1 year 1 month
Type Third party
Category Necessary
Description The m cookie is set by Stripe and is used to help assess the risk associated with attempted transactions on the website. This cookie plays a critical role in fraud detection by identifying and analyzing patterns of behavior to distinguish between legitimate users and potentially fraudulent activity. It enhances the security of online transactions, ensuring that only authorized payments are processed while minimizing the risk of fraud.
Name __cf_bm
Provider .pipedrive.com
Retention period 1 hour
Type Third party
Category Necessary
Description The __cf_bm cookie is set by Cloudflare to support Cloudflare Bot Management. This cookie helps to identify and filter requests from bots, enhancing the security and performance of the website. By distinguishing between legitimate users and automated traffic, it ensures that the site remains protected from malicious bots and potential attacks. This functionality is crucial for maintaining the integrity and reliability of the site's operations.
Name _GRECAPTCHA
Provider .recaptcha.net
Retention period 6 months
Type Third party
Category Necessary
Description The _GRECAPTCHA cookie is set by Google reCAPTCHA to ensure that interactions with the website are from legitimate human users and not automated bots. This cookie helps protect forms, login pages, and other interactive elements from spam and abuse by analyzing user behavior. It is essential for the proper functioning of reCAPTCHA, providing a critical layer of security to maintain the integrity and reliability of the site's interactive features.
Name __cf_bm
Provider .calendly.com
Retention period 30 minutes
Type Third party
Category Necessary
Description The __cf_bm cookie is set by Cloudflare to distinguish between humans and bots. This cookie is beneficial for the website as it helps in making valid reports on the use of the website. By identifying and managing automated traffic, it ensures that analytics and performance metrics accurately reflect human user interactions, thereby enhancing site security and performance.
Name __cfruid
Provider .calendly.com
Retention period During session
Type Third party
Category Necessary
Description The __cfruid cookie is associated with websites using Cloudflare services. This cookie is used to identify trusted web traffic and enhance security. It helps Cloudflare manage and filter legitimate traffic from potentially harmful requests, thereby protecting the website from malicious activities such as DDoS attacks and ensuring reliable performance for genuine users.
Name OptanonConsent
Provider .calendly.com
Retention period 1 year
Type Third party
Category Necessary
Description The OptanonConsent cookie determines whether the visitor has accepted the cookie consent box, ensuring that the consent box will not be presented again upon re-entry to the site. This cookie helps maintain the user's consent preferences and compliance with privacy regulations by storing information about the categories of cookies the user has consented to and preventing unnecessary repetition of consent requests.
Name OptanonAlertBoxClosed
Provider .calendly.com
Retention period 1 year
Type Third party
Category Necessary
Description The OptanonAlertBoxClosed cookie is set after visitors have seen a cookie information notice and, in some cases, only when they actively close the notice. It ensures that the cookie consent message is not shown again to the user, enhancing the user experience by preventing repetitive notifications. This cookie helps manage user preferences and ensures compliance with privacy regulations by recording when the notice has been acknowledged.
Name referrer_user_id
Provider .calendly.com
Retention period 14 days
Type Third party
Category Necessary
Description The referrer_user_id cookie is set by Calendly to support the booking functionality on the website. This cookie helps track the source of referrals to the booking page, enabling Calendly to attribute bookings accurately and enhance the user experience by streamlining the scheduling process. It assists in managing user sessions and preferences during the booking workflow, ensuring efficient and reliable operation.
Name _calendly_session
Provider .calendly.com
Retention period 21 days
Type Third party
Category Necessary
Description The _calendly_session cookie is set by Calendly, a meeting scheduling tool, to enable the meeting scheduler to function within the website. This cookie facilitates the scheduling process by maintaining session information, allowing visitors to book meetings and add events to their calendars seamlessly. It ensures that the scheduling workflow operates smoothly, providing a consistent and reliable user experience.
Name _gat_UA-*
Provider rubygarage.org
Retention period 1 minute
Type First party
Category Analytics
Description The _gat_UA-* cookie is a pattern type cookie set by Google Analytics, where the pattern element in the name contains the unique identity number of the Google Analytics account or website it relates to. This cookie is a variation of the _gat cookie and is used to throttle the request rate, limiting the amount of data collected by Google Analytics on high traffic websites. It helps manage the volume of data recorded, ensuring efficient performance and accurate analytics reporting.
Name _ga
Provider rubygarage.org
Retention period 1 year 1 month 4 days
Type First party
Category Analytics
Description The _ga cookie is set by Google Analytics to calculate visitor, session, and campaign data for the site's analytics reports. It helps track how users interact with the website, providing insights into site usage and performance.
Name _ga_*
Provider rubygarage.org
Retention period 1 year 1 month 4 days
Type First party
Category Analytics
Description The _ga_* cookie is set by Google Analytics to store and count page views on the website. This cookie helps track the number of visits and interactions with the website, providing valuable data for performance and user behavior analysis. It belongs to the analytics category and plays a crucial role in generating detailed usage reports for site optimization.
Name _gid
Provider rubygarage.org
Retention period 1 day
Type First party
Category Analytics
Description The _gid cookie is set by Google Analytics to store information about how visitors use a website and to create an analytics report on the website's performance. This cookie collects data on visitor behavior, including pages visited, duration of the visit, and interactions with the website, helping site owners understand and improve user experience. It is part of the analytics category and typically expires after 24 hours.
Name _dc_gtm_UA-*
Provider rubygarage.org
Retention period 1 minute
Type First party
Category Analytics
Description The _dc_gtm_UA-* cookie is set by Google Analytics to help load the Google Analytics script tag via Google Tag Manager. This cookie facilitates the efficient loading of analytics tools, ensuring that data on user behavior and website performance is accurately collected and reported. It is categorized under analytics and assists in the seamless integration and functioning of Google Analytics on the website.

Is React SEO-Friendly? Key React Search Engine Optimization Tips

  • 256390 views
  • 7 min
  • May 11, 2022
Mykola V.

Mykola V.

IOS/Android Developer

Daria R.

Daria R.

Copywriter

Share

The first five links that appear in Google search results always get the most traffic. That’s how vital search engine optimization is in terms of your web app’s success. Although React.js is the most wanted framework for creating rich interactive web apps, there are a lot of concerns connected with its SEO-friendliness.

In this post, we’ll reveal the common issues of building a SEO-friendly software product and uncover the best practices to make your React-based web app attractive to Google.

Common issues and best practices for React SEO

How Google bots work

To solve the React web app problem with SEO, we need to understand how Google bots work and what common issues React solutions face. Google uses bots to rank websites. These bots crawl your site’s pages to find new ones. When creating a website, you can choose the pages you want to be crawled by listing them in the robots.txt file. To avoid overloading your site with bot requests, you can also hide some pages.

The next step that Google bots do is indexing. During this process, a Google bot analyzes the content on a web page to understand what it’s about. The results of this process are stored in Google index — a huge database with information about all web pages. Web page indexing is automated, so it’s very important to structure and format all content in a way that is understandable for a machine.

The third step includes serving and ranking processes. When a user searches for something, Google goes to the Google index to find the most relevant results.;

Sounds simple, right? Then what’s the problem with React web apps?

Common indexing issues with JavaScript pages

Here are the most common problems with JavaScript pages that can influence their indexing and ranking.

#1. Slow and complex indexing process

Google bots can easily scan and understand only HTML pages. Here’s how it works:

SEO for React Websites

Google performs all these operations very fast. But when it comes to pages with JavaScript code, the process of indexing gets more complex. Let's take a look:

Indexing JS pages

Only when all these steps are fulfilled can the bot find new links and add them to the crawling queue.

This process is linear and significantly slower than indexing an HTML page.

#2. Errors in JavaScript code

HTML and JavaScript have absolutely different approaches to processing errors. A single error in JavaScript code can make indexing impossible.

This is because the JavaScript parser is completely intolerant of errors. If the parser meets a character in an unexpectable place, it immediately stops parsing the current script and shows a SyntaxError. Therefore, a single character or typo can lead to complete inoperability of the script. If this situation occurs when the Google bot is indexing the page, the bot will see an empty page and index it as a page without content.

#3. Exhausted crawling budget

A crawling budget is the maximum number of pages that search engine bots can crawl in a specific period of time (usually five seconds for one script).

A lot of websites built on JavaScript experience indexing problems because Google has to wait too long (more than five seconds) for scripts to load, parse, and execute. Slow scripts mean the Google bot will quickly run out of its crawling budget for your site and leave it before indexing it.

#4. Challenges of indexing SPAs

Single-page applications (SPAs) are web apps created with React. These web apps consist of only one page that’s loaded once. All other information is dynamically loaded when necessary. Unlike traditional multi-page apps, SPAs are fast, responsive, and provide users with a smooth linear experience.

However, despite all these benefits for end users, SPAs have a significant limitation in terms of SEO. Such web apps can give content when the page is already loaded. If a bot is crawling the page when the content hasn’t been loaded, the bot will see an empty page. A significant part of the site won’t be indexed. Therefore, your site will get a much lower ranking in search results.

Read about how we built an SEO-friendly single-page application with React.

How to make your React website SEO-friendly

All the limitations we’ve described above can be bypassed. Here are the best practices you can use to solve React and SEO problems.

#1. Pre-rendering

Pre-rendering is a common approach to make both single- and multi-page web apps SEO-friendly.

Pre-rendering is used when search bots can’t render your pages correctly. In these cases, you can use pre-renderers: special programs that intercept requests to your website and, if the request is from a bot, pre-renders send a cached static HTML version of your website. If the request is from a user, the usual page is loaded.

This approach to make your website SEO-friendly has the following advantages:

  • Pre-rendering programs are able to execute all types of modern JavaScript and transform it into static HTML.
  • Pre-renderers support all the latest web novelties.
  • This approach requires minimal codebase modifications or no modifications at all.
  • It’s simple to implement.

However, there are also some drawbacks to this approach:

  • It isn't suitable for pages that display frequently changing data.
  • Pre-rendering can take too long if the website is large and contains a lot of pages.
  • Pre-rendering services aren’t free.
  • You need to rebuild your pre-rendered page every time you change its content.

#2. Server-side rendering

If you're only planning to create a React web app, you need to know the difference between client-side and server-side rendering.

Client-side rendering means that a browser and Google bot get empty HTML files or files with little content. Then JavaScript code downloads the content from the server and users see it on their screens.

In terms of SEO, client-side rendering is a problem, as Google bots don’t get any content or get a little content they can’t index properly.

With server-side rendering, browsers and Google bots get HTML files with all the content. Google bots can index the page properly and rank it higher.

Server-side rendering is the easiest way to create an SEO-friendly React website. However, if you want to create an SPA that will render on the server, you’ll need to add an additional layer of Next.js.

Let's talk about this in detail.

#3. Next.js for SPA search engine optimization

Having worked with numerous React projects and dealt with their SEO optimization, the RubyGarage team has concluded that Next.js is a powerful tool to solve the SEO problems of single-page applications.

Next.js is a JavaScript framework for creating static server-rendered apps. It has a bunch of capabilities that allow even heavily loaded SPAs to render on the server without a hitch.

Here's what Zack Tanner, a senior Hulu software engineer, says about Hulu’s migration to Next.js:

Productivity has skyrocketed. We’re able to focus on feature development and improving our product, while Next.js handles the more difficult tooling for us.

Zack Tanner, senior software engineer at Hulu

PlayStation Competition Center, Uber Marketplace, Hilton, Trip.com, Invision, and many other famous projects use the Next.js framework because of its simple but powerful features.

Conclusion

You can face a lot of challenges when building an SEO-friendly React app. However, all of them are surmountable, and they certainly don’t make it worth avoiding React and all its fantastic capabilities.

CONTENTS

FAQ

    • Google bot downloads HTML files
    • Google bot loads CSS and JavaScript files
    • Google Web Rendering Service (WRS) parses, compiles, and executes JavaScript code
    • WRS fetches data from external APIs and databases
  1. Google uses bots to rank websites. The process takes three steps:

    1. Bots crawl site’s pages to find new ones. 
    2. The next step is indexing, when a Google bot analyzes the content on a web page to understand what it’s about. The results are stored in Google index — a huge database with information about all web pages. 
    3. The third step includes serving and ranking. When a user searches for something, Google goes to the Google index to find the most relevant results.
  2. The most common practices to build an SEO-friendly ReactJS website are page content pre-rendering and server-side rendering.

  3. It’s possible to make an SPA SEO-friendly. Check out how RubyGarage built an SEO-friendly design crowdsourcing marketplace with React!

Authors:

Mykola V.

Mykola V.

IOS/Android Developer

Daria R.

Daria R.

Copywriter

Rate this article!

Nay
So-so
Not bad
Good
Wow
59 rating, average 4.61 out of 5

Share article with

Comments (3)
Normandin Norka
Normandin Norka over 4 years ago
Well written article!
Reply
Farhan Majid
Farhan Majid over 4 years ago
Do you guys offer consultancy services? I'm looking for someone who understands React as well as is adept at technical SEO. One of my clients is facing an issue ranking website build on React JS. We've tried multiple approaches including using a pre-render but nothing seems to be working.
Reply
Daria R.
Daria R. over 4 years ago Farhan Majid
Hi, Farhan! Please fill in the contact form, so we could contact you and discuss the issue you've faced.
Reply

Subscribe via email and know it all first!