Discover the Best React SEO Practices for Your Site

React can be fantastic in adding a lot of interactive and advanced features to your website and in building a product for the user which solves his problem. To build a successful SEO-compliant website, it is important that Googlebot (which periodically crawls your website) can read and index your website. Most issues with Javascript-based websites arise when developers rely on Javascript to render the core parts of their websites. In the following, we will first go into depth about how google indexes websites and then we discuss some of the most common errors new developers make.

Are you looking to get an overview of all the React frameworks for SEO? Read more here: Best Javascript Framework for SEO.

How does Google crawl and index a website?

Google crawls a website in two phases. First, Googlebot visits your website and reads all the HTML it can find. Having read your website, Googlebot will process what it found and index your website for certain keywords future users will possibly search for. If Googlebot finds Javascript and deems it necessary to render the javascript to fully understand your website, your website will be submitted to an additional slower rendering queue.

For example, if you have built www.catfood.com, GoogleBot will crawl your website and its HTML. The content of your website will be processed and indexed. Should Googlebot find additional Javascript on your website that is important, your website will be entered into the Render Queue and the rendered HTML will be processed and indexed.

Is react js SEO friendly?

React.JS can be SEO-friendly if you follow the best practices during the development phase. As described above, Google will first crawl the HTML content of your website. Since React is a Single Page Application (SPA) it is important to make the main content of your pages (e.g. the text) ‘visible’ to Googlebot. The main content of your website should be accessible without javascript. You can either check the mobile-friendly test or simply turn off Javascript in your browser. This will give you a rough gauge of what Googlebot sees the first time it entered your page.

It is important to consider crawl budgets. Every website has a certain crawl budget, i.e. how many resources can GoogleBot spent to render and process the website. The bigger (more pages) and the more important your website, the more crawl budget you have. Websites with heavy javascript exceed the crawl budget faster since they eat up the budget faster.

If your website, is totally empty, this is obviously not a good sign. There are a few scenarios:

• Small website: At best, your website will be processed and indexed with a delay (since you have to wait for the processing of the rendered HTML).
• Big website: Your website will be processed and indexed with a delay. Likely, Googlebot exceeds its crawl budget and many pages will not be processed (let alone indexed).

For fast indexing by GoogleBot, you want to stay clear of client-side rendering (CSR) since they only built the HTML file upon request. While it is possible for GoogleBot to index your website with CSR, directly serving the HTML (static page) or using server-side generation is preferred. Please refer here for more information about different rendering methods.

How to make react SEO friendly?

The best way to make your react-based website SEO-friendly is to avoid common mistakes. There are a number of things you should definitely not do when building your website in react.

Conditional Rendering can hide your content

It is important to avoid conditional rendering because it relies on javascript and Googlebot might not be able to read the content of your website since javascript is not executed in the first crawling pass. If you can remove conditional rendering from your website, you avoid a lot of SEO drama.

import React from 'react'
import { getCoffeeDescription } from '@/api/api';
import { sleep } from '@/utils/index'
import { NextPage } from 'next';
import { useState, useEffect } from 'react'
import sleepingTime from '@/common/constants'

const ClientSideRendering: NextPage = () => {
	const [coffeeData, setCoffeeData] = useState<string>()


	const getCoffeeData = async () => {
		const coffeeDescription = await getCoffeeDescription();
		const coffeeDescriptionText = JSON.stringify(coffeeDescription, null, 2)
		await sleep(sleepingTime);

		setCoffeeData(coffeeDescriptionText)
	}

	useEffect(() => {
		getCoffeeData()
	}, [])


	return (
		<>
			{coffeeData ? <--------- CONDITIONAL RENDERING
				<div>
					<h1>Client Side Rendering</h1>
					<p>Loads the data after the page was rendered.</p>
					<pre>{coffeeData}</pre>
				</div>
				:
				<div>Loading...</div>
			}
		</>

	)
}

export default ClientSideRendering

Conditional rendering can cause layout shifts

Here, we go again: Conditional rendering. It often causes layout shifts. Cumulative layout shifts happen when after the first render, elements move position on the screen. For example, a placeholder ‘loading’ is put on the page until the loading of the image is complete. Then with the new render, the image appears on the website and pushes existing content down. In a nutshell, CLS is when elements change position after the first render. In our experience, google heavily penalises CLS (read more about core web vitals here). If you avoid conditional rendering, you likely avoid a lot of layout shifts.

Building a responsive website

Your website needs to work both on desktop and mobile. Period. There exist a lot of grid layouts for React which can help you to make the website mobile-friendly. When it comes to responsiveness, it is important to avoid CLS. Some layouts check the device type and then change the layout causing CLS. It’s important to check the CLS score for both desktop and mobile on pagespeed.web.dev.

Complex strings

Please avoid using javascript in headings (H1, H2, …), canonicals, links, basically everywhere it’s important. Javascript might not be successfully rendered and your string will not be able to be parsed. This can lead to very serious issues. If your internal links, canonicals or headings are broken, your ranking on search engines is likely affected.

<h1>The current month is: {new Date().getMonth()}</h1>

Build a backend for complex operations

It is not uncommon for (new) react developers to perform a lot of data manipulation and complex business logic operations on the frontend. For the sake of a fast website and a pleasant user experience, computations and data manipulation should mostly be done on the backend.

Client-side rendering

Your pages might all be built using Client Side or Server Side rendered. That means they are only built once a request hits that page. If possible, statically generate your pages or use a solution like prerender.io. The latter will help you to serve a static HTML for the user.

Using clear URL paths

It is important to have a clear subfolder structure and the main keyword needs to be in the URL. For example, you are offering same-day cleaning services in Boston. The following URL would be great:

• www.cleaningservices.com/boston/same-day-cleaning-service

When it comes to URL structure, there exist a few rules of thumb. URLs should generally be short, contain relevant keywords and also should not contain hashtags. If you run an international website, it’s best to preface URLs with the respective country. For example:

• www.cleaningservices.com/canada/toronto/same-day-cleaning-service

Optimise Core Web Vitals (CWV)

When building a website in React, it is important to optimise for all core web vitals. For an in-depth discussion and a practical guide on how to optimise your CWV, read here.