Successful Strategies for Handling React SEO

React is the most efficient, popular, and impactful tool to come to front-end development since its release in 2015. It’s one of very few libraries to represent a major step-change in technologies for developers. Yet, it’s a step-change that has come with some significant compromise.

Despite the advantages React unlocks for designers and developers, search engine optimization remains a bit of an Achilles’ heel for naive implementations of the library. Put simply, pages generated by traditional React code are much more difficult for search engines to parse efficiently.

Without an effective strategy to improve React SEO, React-based sites are slower to index, less likely to rank highly in results, and more difficult for users to find.

What is it that makes React sites a challenge for search engines to access, and what can developers do to improve the rankings of React-based pages?

AboutReact

React has quickly become a de-facto standard for writing highly performant, cross-platform, front-end applications. Those looking to pick up an alternate set of libraries or a competing framework often have no choice but to justify it against the capabilities of React first.

Developed to solve internal challenges at Facebook, React was designed to create attractive interfaces in a declarative and modular way.

While React’s way of doing things is less revolutionary today, it’s hard to overstate its impact on development when it was released seven years ago. A mainstream, well-supported solution for declarative UI represented a significant boost to front-end development. A trade-off for this shift in thinking has been interfacing with related technologies designed for a more traditional way of doing things.

Related frameworks, tools, and libraries have often been adapted or retrofitted to meet the challenge. Search engine technologies are a key example of this change.

While shifting away from developing UI components directly is what makes React such an efficient, effective, and powerful tool; it’s also why search engine crawlers have such a difficult time parsing React-based pages.

Search Optimisation for React

A search engine crawler is designed to scan through pages of HTML to pick up the content, tags, and relevant information to answer questions posed by users. First built for much earlier versions of the web, new and emerging technologies create challenges for these relatively simple search engine tools.

Google’s crawler, for example, places the JavaScript components it encounters into a queue for future execution. Once the JavaScript components are finally retrieved and executed in turn, the content and data extracted will be attributed to the site’s entry along with the HTML tags and content the crawler was able to extract on its first pass.

Of course, the challenges and delays associated with this approach aren’t unique to React SEO. Almost every page now uses a number of JavaScript components for interfaces and customisations. React, however, is somewhat unique in that it relies almost exclusively on JavaScript to build its pages—leaving very little content behind for crawlers to parse.

In many cases, a search engine’s first pass of a React-based page will retrieve a site that is virtually empty. This can have two immediate consequences when it comes to React’s SEO performance

1. React Pages Are Slower to Index

As components have to be rendered first to retrieve the vast majority of content, the amount of time it takes for this action to be queued and executed is significantly longer than a page that can be instantly crawled.

On sites where entries are being updated regularly and those in fast-moving fields, these challenges can add up to major problems.

2. Developers Have to Consider Crawl Budget

Search engines allocate a certain amount of time, memory, and resources to every page they index. JavaScript, comparably more expensive and heavyweight than plain HTML, can exceed that budget surprisingly fast.

Large, content-heavy websites may run into issues. E-commerce sites, for example, may find some content isn’t picked up by search engines and their ranking for some products negatively impacted by React SEO performance.

Technical Challenges Impacting Traditional React SEO

Page Loading Times

Fetching, parsing, and executing JavaScript takes more time than simply displaying HTML. Pages requiring heavyweight features will inevitably load slower. Few are aware, however, of just how impactful an extra few milliseconds can be when it comes to search engine rankings.

Today, loading time is a key metric search engines look at when ranking pages. The technical abilities of a site are a major factor for engineers to consider when designing a site for optimal SEO.

Metadata

HTML tags are critical to how a web page performs in search. Meta tags allow titles, descriptions, and thumbnails for a page to be loaded in advance for search engines to evaluate the content of a site.

Content tags describing a page are key to matching searcher intent—a metric designed to ensure the content served by a page is what the searcher is looking for when making their query. Sites that can better match intent are ranked far higher in searches than those that have a more broad approach to including content and keywords.

Because React pages are rendered on the client by default, search engine crawlers can’t capture this metadata on a native React site. There are, however, isomorphic strategies available to optimise React to meet these metrics.

Sitemaps

Providing a file where you can place the relevant information about a page and its content—the sitemap is one of several files search engines rely on to find out about the content of a site.

Inherent to its design, React can’t generate a sitemap natively. Without the sitemap, search engine crawlers miss significant clues about how to parse a web page and categorise its contents. There are some tools that can add one in later.

Optimising for React Seo

Despite the drawbacks to using React to build sites, the advantages it brings in usability, user experience, and design make it a solution well-worth the notable trade-offs. Today, there are an array of tools and strategies we can use to overcome the drawbacks of the library and ensure that React-based pages perform at least as highly as other solutions.

Following good SEO practices recommended for all sites is a must when it comes to building React pages. These include:

• A clear and logical structure of generating URLs to give search engines the best chance at knowing what’s on a page. E.g. https://moz.com/learn/seo/url
  
• Generating and optimising supplementary files such as robots.txt and the sitemap to help crawlers understand what content should be indexed and what should be left alone

React engineers should do all they can to maximise their SEO results using these common techniques before looking at React-specific strategies to maximise search engine results.

Isomorphic React Applications

Isomorphic applications are React apps that run on both the client and server. This development strategy involves sharing components between both and optimising the use of both sides to create a site that is search optimised, highly responsive, and dynamic user experience.

In practical terms, this provides developers with the ability to run React applications server-side and simply capture the rendered HTML file that would otherwise be rendered by the client.

Doing this enables us to simply serve the captured HTML directly to search engine crawlers when asked. Using this approach, the burden of rendering JavaScript is shifted away from Google servers to use internal resources instead.

Isomorphic React apps can render some, none, or all of their scripts on the server and then pass through the HTML direct to the client. Doing this maintains HTML features such as meta tags, CSS, sitemaps, and robots.txt files just as if the page was built using HTML.

The way in which we execute Isomorphic applications impacts the advantages and benefits we get from the application.

Trading Simplicity for Performance

Isomorphic React applications can be highly performant in SEO, loading times, and execution. Solving many of the challenges that come with the framework while maintaining the dynamic features of a React app. The most significant trade-off this approach is one of development time.

These applications and their components are a significant departure from conventional React code. Often requiring relatively specific knowledge and skill-sets, their development typically starts from the ground up as retrofitting sites with isomorphic solutions can be prohibitively costly.

Metrics for React Seo Performance

How then, do we decide whether or not a page will be performant enough when it comes to SEO?

While there are parts of the algorithm that are inherently unknowable about the way Google ranks pages in search, we can create sites to maximise our performance by looking at some key metrics that matter.

Google’s guidelines help us to understand what the most popular and dominant search engine is looking for when deciding how to rank its sites. These metrics, known as page experience signals, include:

Rapid Loading Time

If a page can’t load quickly a user is very likely to lose interest and navigate elsewhere. Today, online user attention is at a high premium.

Google measures Time to First Byte as an analogue to site loading time. This means the time between a user clicking a link and the first bit of a page’s content arriving at the browser. Ideally, this timing should be around 200 milliseconds or less.

Content Loading Time

Similar to loading time, a user isn’t likely to remain too patient when bits and pieces of content are loaded into the browser over a long period of time. When a site loads, a user is going to want access to view the content inside relatively quickly.

Google uses a metric called Largest Contentful Paint to understand how long it takes before content is loaded. Ideally, content should be fully available to users in less than two and a half seconds.

Interaction Loading Time

Most of us will have experienced sites that have loaded fast but remained impossible to interact with through taps, clicks, or the keyboard. Google’s SEO docs indicate this is a frustration the search engine is particularly keen to avoid.

First Input Delay (FID) is a metric that measures the earliest time page elements can be clicked, scrolled, etc. A good FID value should be less than 100 milliseconds.

Minimise Fetch and Execution

Care should be taken not to fetch unnecessary data or execute expensive code without good reason.

In the age of mobile devices, this metric is increasingly important as fetch and execution cycles come with data costs and battery use. Worse still, they could be an indication of malicious page activity or a potential mining attack.

Google measures bundle size, the number of bytes downloaded and executed before a page becomes both readable and interactive to gauge appropriate fetch and execution. In addition to speeding load times, keeping the bundle size low is an indication of an optimised page.

Creating Better React Apps

Building highly-performing isomorphic React appsimproves each of these metrics and contributes significant points towards a site’s SEO. Despite the potential pitfalls of React, it remains a library well-suited to building search optimised pages that are dynamic, attractive, and deliver a consistent cross-platform user experience.

There are several ways for applications to achieve this result with combinations of client-side and server-side rendering. Each one has benefits and drawbacks targeted towards improving the relevant SEO metrics and creating better and more performant applications. These include:

• Client-side Rendering. The default for React apps. Poorly optimised for SEO
• Client-side Rendering with Bootstrapped Data. Allows for caching HTML elements to assist SEO
• Server-side Rendering to Static Content. Vastly improved SEO performance, less dynamic pages
• Pre-rendering to Static Content. Excellent SEO with the addition of Cached content to boost performance

Each option can be used for entire sites, specific pages, or even specific parts of a single page as requirements allow. A developer, for example, may choose to shore up only critical components with pre-rendered pages to reduce loading times.

Choosing between each involves compromising on trade-offs between load times, performance, data use, and development time.

Considering all the options from an engineering perspective is essential to making teams aware of what is possible when it comes to SEO ranking and extracting the maximum possible performance from all areas of your applications.