Why React sites are a challenge for search engines
Because react websites default to rendering website code on the client side, you will notice a steep decline in rankings if you have come from an HTML website. if you don’t take steps to mitigate the default rendering process of the CMS.
HTML pages on the other hand are quick and simple to crawl and render.
Here are website CMS features critical for SEO.
What is crawl budget?
Website crawl budget is best thought of as a “time spent crawling feature” that search engine spiders monitor to ensure efficiency.
Hypothetical Explanation of Crawl Budget
If your WordPress website takes an average of 0.89 seconds to crawl per request and you have 1,500 pages, your website total required crawl time (excluding resource requests) would be: 1173.195 seconds.
If Googlebot allocates a crawl budget of 46.28 seconds (46280 ms), then you could expect 52 of your website pages to get crawled.
If your website slows and it takes GoogleBot 1.35 seconds to crawl each page on your website, it will take GoogleBot 70.2 seconds (70,200 ms) to crawl the same 52 pages.
Total crawl time required for every page on WordPress site @0.89: 1335 seconds (1335,000 ms)
Total crawl budget for every page on React site @1.35: 2025 seconds (2025,000 ms)
This kind of change could have a hugely detrimental affect on the crawl budget of your website.
The numbers above are all hypothetical, search engines don’t confirm crawl budgets or allocate a specific amount of time to each website (and if they do, they don’t specify what the allocation is, however you can get recent averages in Google Search Console).
Google’s crawl, render, processing and index queue.
There’s no page content shown at all and the <body> tag contains a single empty <div>. For a search engine crawling this page, the only content that can be crawled on the first indexing wave is the title tag and meta description tags seen in the <head> and the URL.
Critical webpage elements to help with ranking like; the H1, content, images are not available until the page has been rendered.
Having your website ranked only by what’s included in the title tag and meta description is an ineffective SEO strategy in 2022 and will not produce the results that we would like.
The source code of a page is generally an effective way to identify what search engines will see when they crawl and render a webpage.
What the problems are
Rather than waiting hours or days for page changes or updates to get detected by search engines, with a react website, you could be waiting weeks or months, where the only available ranking factor for search engines is the meta content (which is not enough data for any website to compete effectively in modern search engines).
The impacts of migrating to a react based site are;
– issues with crawl budget for SEO
– issues with content discovery for search engines
– issues with content coverage by search engines
– removal and obstruction of onpage ranking factors (h1s, content internal links)
– general page speed issues
How to detect your issues
Use Google tools like;
mobile friendly test tool
URL inspection tool in Google Search Console
The tools will help you to visualise the webpage content as Google would do. If your pages show a low proportion of the content you normally see, then you’ll need to identify how you can show more content.
What are the Solutions?
Fortunately, there are solutions to rendering issues that React websites can create and many of these solutions come in the form of server side rendering, static site generation and static content rehydration. These methods can allow you successfully show content rich pages to users while still enjoying all of the benefits of React.
You’ll need the help of your technical team and engineers to ensure the below steps are correctly implemented.
Use prerenderer.io – this tool prerenders and caches a fully rendered version of your page which is served to search engines like Google when they request a URL.
This works because you can help your server determine real users from bots.
Prerender.io is effective and cost efficient and essential for any site looking to launch a react or vue.js based website. You can even set a recaching frequency so the prerender.io can detect changes to your pages and update the static cached version when you wish.
In addition to prerendering you should also consider the following methods, depending upon the nature of your react website;
pre-rendering with rehydration; you can pre-render content on servers around the world using CDNs so it’ll be pre-rendered even before the user request. Once a user requests the page, code splitting can take place on the server
server side rendering with rehydration; you can create web applications that render on the server side, but subsequent user requests are handled client side. So, your webpage will be interactive without you having to render anything too hefty client side for search engines. You’re delivering a built framework, but any additional user requests for interactive elements are rendered client side.
server side rendering to static content; this works for simple sites where any user interactivity can easily be served within the DOM without the requirement for a round trip to the server.
Isomorphic React; isomorphic react allows code to run both server side and client side which can benefit both the performance for search engines, by rendering code on the server and for clients who can render code client side (or on a mix of both) provided your app supports this. This will mean you can handle user interactions on the app without too much issue without losing out on search performance.
Should you choose React for your website?
Ultimately, as efficient as React can help to make website production and development, impacts on SEO must be considered by anyone who’s considering migrating a website to React.
If you and your engineering team truly believe that a react based platform is the best route forward in terms of efficiency and development then just make sure you take the required steps and follow the processes above to ensure your website remains fully visible and indexable to search engines.