React enables much of the modern web you’re familiar with: fluid, responsive, and animation-rich websites. It’s no wonder that React.js is the most used JavsScript framework for web development, according to the 2021 State of JavaScript survey.
SEO with React initially didn’t work smoothly due to search engines having trouble rendering JavaScript. With time, React and Google evolved to simplify crawling and rendering React webpages. But some React SEO issues still remain.
If you’re part of the ever-growing group of organizations in search of React developers, read on to know how React.js SEO works and how to fix common issues when perfecting SEO with React.
How Google Crawls and Indexes Webpages
In a nutshell, SEO or search engine optimization is the practice of enabling search engines to scan your website better. This boosts organic traffic from search results and improves your SEO ranking.
Google is the pre-dominant search engine today. But ranking on the coveted first page of Google’s search results takes some work. With 75% of all user clicks coming from the top three search results, SEO is not optional.
To optimize your website for Google, you need to have some insight into how Google scans and prioritizes web pages in its search results. This process is automated and contains three major steps.
1. Crawling
Every search engine has its own crawler that it uses to constantly search the web and scan new and updated webpages. Google calls its crawler ‘Googlebot’ and it’s responsible for scanning your website and all the sites it links to. It also crawls sitemaps and webpages offered by managed web hosts.
2. Indexing
After Googlebot finds new webpages, it needs to understand the content within to be able to identify the SEO-worthiness of the webpage. Text is easiest to understand for Googlebot, followed by images and videos. Hence, the importance of relevant titles, headings, meta descriptions, and topical content to make your website more SEO-friendly.
3. Ranking
Once Googlebot delivers its report to Google, the last step is to rank your website based on how relevant your content is to users’ queries. Google uses this ranking database to then display its search results whenever a user searches for a particular keyword.
You can probably see the need to optimize your site content for not only humans but crawling bots as well. And this is where React and SEO start clashing.
Let’s look into why Ract poses certain challenges for SEO.
Why Is Optimizing React Websites for SEO a Challenge?
SEO with React is not always smooth sailing. Due to the fundamental nature of React’s JavaScript code and the way it renders webpages, several challenges arise when optimizing it for SEO.
Loading Time
JavaScript takes longer than simple HTML to load and get displayed on the client side. JavaScript also needs to make network calls to fetch content from the server which further increases the load time for users.
This delay in loading the requested information is encountered by the Googlebot which affects your website’s ranking in the search results.
First Crawl Delay
Due to React’s heavy reliance on JavaScript, Googlebot can encounter empty content during the first crawl. React uses an app shell model and therefore, the initial HTML visible to Googlebot doesn’t convey any meaningful information.
Hence, the bot needs to execute JavaScript to make the page’s actual content visible. This naturally delays the indexing stage and can become considerable when dealing with thousands of web pages on a single website, such as an e-commerce site.
Metadata
Meta tags allow Google and other websites to generate accurate headings and descriptions for web pages. But these websites don’t really execute JavaScript for every webpage. They simply refer to the <head> tag of the webpage to get the metadata.
As React renders the entire content, including meta tags, on the client-side, it’s hard to fetch accurate metadata for individual pages.
Sitemap
A sitemap is a file containing all the information about the web pages, images, videos, and other content on your website and the relationship between them. Google uses this file to intelligently crawl your website.
React cannot generate sitemaps as a built-in feature. It requires additional tools to do so. This can take some effort and make it harder for your website to be indexed.
What Are The Most Common SEO Issues with React?
When working on your SEO with React, you are bound to run into a number of issues that make the process less than ideal. Due to the peculiarities of React that we discussed above, you can expect to encounter the following specific issues with React SEO:
Slow and Complex Indexing
When dealing with JavaScript, Googlebot first retrieves HTML information from the webpage and queues the associated JavaScript execution for later. This adds to the time taken to index the respective web pages, affecting your website’s SEO score.
Handling of JavaScript Errors
When it comes to handling errors during rendering, HTML and JavaScript have markedly different approaches.
The JavaScript parser doesn’t do well with errors and a single one can mean failed indexing. This is because while executing JavaScript, if the parser encounters an error, it immediately stops the execution of the script.
If this occurs when the Googlebot is indexing the page, the bot will simply index the webpage as a blank page.
Exhausted Crawling Budget
Googlebot has a set crawling budget as crawling is a server-intensive process. It indicates the maximum number of web pages that Googlebot can crawl in a specific amount of time.
When Googlebot has to wait too long for JavaScript execution on React webpages, its crawling budget can get exhausted. It’ll move on to the next webpage or website without indexing the page in question.
Indexing of SPAs
With React, you can create single-page applications (SPAs) that are fast, responsive, and dynamically generated. These apps load a single page once and all other content on user interaction.
But SPAs have an SEO problem. SPAs can show their full content only after everything has finished loading. If Googlebot is crawling the webpage before the content has fully loaded, the bot will see an empty page. A major part of the site won’t be indexed and your site’s SEO ranking will suffer.
How React Components and Applications Interfere With User Experience
As a result of multiple factors, React can sometimes ruin the user experience instead of enhancing it. The many visual and feature-rich advantages React.js holds over other frameworks can not just cause SEO issues but also affect end users as well.
Loading Time
JavaScript execution on React webpages can occasionally take too long to load and hamper the browsing experience for the end user. This can not only hurt your SEO rankings but your brand perception too.
Rendering Lists
React is known to have problems with rendering long and complex lists. Imagine hundreds of images on an e-commerce website that need to accommodate multiple devices. Such lists take exceptionally long to load and the delay is quite noticeable, especially on low-end systems.
Although this issue is caused by React’s need to analyze every single change to every item on the list, it’s not hard to fix. Virtualized lists can be used to render only the portion of the list that’s visible on the screen. Everything else is not loaded until the user scrolls to that portion of content.
Wasted Rerenders
React.js developers often need to deal with complex data structures being rendered in React, such as group chats that contain vast collections of text, images, and quotes to messages that need to be re-rendered.
But these re-renders can also cause a noticeable drop in application performance for end users. Due to multiple items of a list being rendered, again and again, it causes a needless drain on device resources like the processor and battery. The application can even slow down and be perceived as ‘lagging’.
Server-Side vs. Client-Side Rendering: What Are the Differences?
Rendering JavaScript code is at the core of not just the performance of React webpages but also their SEO ranking. Developers often have to walk a tightrope when choosing between client-side and server-side rendering for React applications. Let’s look at both in detail.
Client-Side Rendering (CSR)
Client-side rendering refers to rendering JavaScript in the browser in one go. The browser receives a light HTML document with a JavaScript file as soon as the first request is made to the server. The browser then renders the JavaScript content, executes the React components, and loads the final page for the user.
Naturally, the initial page load is a bit slow as the browser executes every step of the process in succession. But post that, every subsequent page load is much faster. The browser doesn’t reload the UI every time a new call is made to the server. It simply updates the data for the respective element by re-rendering only that element.
In summary:
- CSR is ideal for web applications that require rich site interactions.
- It is slow for the first load but much faster than SSR for every reload after that. CSR can also lead to poor SEO if not implemented correctly.
Server-Side Rendering (SSR)
Server-side rendering involves receiving a user-specific HTML document from the server, rendering the page to be viewed, and executing JavaScript in the background.
SSR enables faster loading of React apps owing to a quick rendering of the HTML document that contains updated data for each element on the page. JavaScript is then executed in the browser, after which users can interact with the page.
Every subsequent page load also follows the same process which makes SSR slower in overall rendering.
In summary:
- SSR is great for websites with static content.
- It can deliver a viewable page faster but needs to recreate the entire page for every call to the server.
- SSR is better for crawling search engines and can gather more information from the information-heavy HTML document.
How To Optimize React Websites for SEO?
You’re now aware of how React interacts with search engine bots and some of the tools developers have to improve SEO scores. We can now dive deeper into specific measures to make React website more SEO-friendly.
Pre-Rendering
Pre-rendering is a technique you should consider for some quick gains when it comes to improving the SEO of your website.
Pre-rendering refers to intercepting crawling requests from bots and sending a cached HTML version of your website as a pre-rendered static page. Pre-renderers load your website normally if the request arises from a user instead of a bot.
For better indexing of your website, pre-rendering is fairly advantageous in the following ways:
- Pre-renderers are compatible with the latest web features.
- They can handle all kinds of modern JavaScript and transform it into static HTML.
- Minimal or no change to the codebase is required.
- It’s simple to implement.
But you should also be aware of the following cons of pre-rendering:
- Pre-rendering is not ideal for web pages with frequently-changing data.
- It can take longer to pre-render websites with a large number of web pages.
- Pre-renderers do not come free.
- With every change to a webpage, you need to pre-render it again.
Server-Side Rendering
If you use server-side rendering, Googlebot can easily crawl your website from its HTML document. This is because SSR passes all the webpage content in the HTML file from the server to the client.
Server-side rendering is a great way to boost your SEO. For SPAs, you need to add an additional layer of Next.js, which we’ll discuss in the next point.
Building Static or Dynamic Web Apps
Static and dynamic web applications naturally use server-side rendering which helps crawlers like Googlebot index webpages easily. Although SPAs are richer in content and can offer a greater user experience, you can still do a lot with static and dynamic web apps.
Static apps are great for building landing pages, and dynamic apps lend themselves quite well to sites like marketplaces.
And if you want to use SSR for your SPAs, you can still do that using Next.js. Next.js is a JavaScript framework that helps create static web apps and works well with heavy SPAs too.
SPAs commonly encounter issues like:
- No 3xx redirects, with JavaScript redirects being used instead
- 4xx status codes not reported for “not found” URLs
These errors can lead Google to wrongly index faulty pages or make it harder for internal SEO audits to catch pages returning ‘404’ errors.
Next.js can help you solve these issues as well with its response helpers. These can let you set the status code you want, including 3xx redirects and 4xx status codes.
Avoiding Hashed URLs
It might not be a major issue but avoiding hashed URLs is always recommended. Some examples of hashed URLs are:
https://buymgp.com/#/shop
https://buymgp.com/#/contact
https://buymgp.com/#/about
The issue with using hashed URLs like these is that Google isn’t able to see anything after the hash. All of the above pages will be seen as https://buymgp.com/.
SPAs that have client-side routing can implement the History API to change such pages. React Router and Next.js can help you do this easily.
Using href Links
Another mistake when changing URLs in SPAs is using <div> or <button> elements instead of <href>. This is more of a usage issue rather than a problem with React itself.
This practice can also hurt your SEO score. When Googlebot crawls a URL, it looks for additional URLs to crawl inside <href> elements. If it doesn’t find the <href> element, it won’t crawl the URLs at all.
Hence, whichever URLs you want Google to discover, include <href> links to those URLs on your website.
Conclusion
There are many more things to be considered while perfecting your SEO with React but don’t forget a few fundamentals that always apply. SEO best practices like XML sitemaps, mobile-first development, semantic HTML, and more should be implemented by skilled and seasoned professionals.
If you’re looking to hire industry-leading React talent that’s verified and don’t want to spend a bomb on recruitment agencies, then Trio can help you achieve your goal. Trio takes care of the entire process end-to-end and even handles all the HR functions for you.
Contact us today to know how Trio can help you hire Senior React.js developers for your project.
