How to create a SEO friendly sites using ReactJS — 2023

Occasionally, there is a question about whether a website built with ReactJS can be made SEO friendly and if it is the optimal choice compared to other libraries.

Additionally, deciding which React framework to use, such as NextJS, Create React App, or others, can be a complex decision. To answer these questions, it is essential to understand:

• Single Page Applications (SPAs)
• React and Server-Side Rendering (SSR)
• SEO fundamentals.
• React Server Component

Let’s dive deeper into these topics to gain a better understanding:

What is Single Page Application (SPA)

In the old web, sites worked in such a way that the browser needed to request each page of the website separately, forcing the server to generate HTML pages and send them back. Therefore each new request to the server was followed by the endless reload of pages.

As the technologies evolved, Single Page application with the goal of giving user experience similar to desktop applications emerged. In SPA The pages UI and its data can be changed without requiring a server roundtrip to retrieve HTML . Gmail or social nets where switching between pages happen instantly are example of this technology.

Can I depend on google to run my javascript?

The problem of using SPA is base on an old SEO concern which occur by create a page data using Javascript. Historically data that depends on ajax call and executing javascript was not accessible to search engines. While at the moment there are existing methods for dealing with this problem.

Google will run your sites Javascript but you can not depend on it. Google may or may not decide to run your JavaScript, and you don’t want your business to depend on its particular inclination of the day. check this great and simple example: “Does Google execute JavaScript”.

What is Server Side Rendering (SSR)

The best solution to have a SEO friendly website using react is to use Server rendering. but what is server rendering?

When a website is first opened, all operations are carried out on the server and the browser gets an HTML with all information (same as with typical websites with static pages which search engines can index). After JS is loaded the web turns into a “single page app” and works respectively.

React Server Component

Server Components is an upcoming feature Since React 18, that allows developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. Server Components is expect to be released as an initial version in a minor 18.x release.

React Frameworks and SSR

When it comes to server-side rendering (SSR) in React, there are react framework available that have this feature out of the box. React documents suggest for SSR to use frameworks like Next.js, Hydrogen, and Remix until server components get ready. Let’s compare them:

• Next.js: it is a popular framework that provides SSR support out of the box. It is built on top of React and provides several features, including automatic code splitting, server-side rendering, and easy client-side routing. Next.js also supports static site generation and API routes, making it a versatile choice for building a wide range of web applications.
• Gatsby: Gatsby is a static site generator that uses React to build performant, optimized, and SEO-friendly websites. It provides SSR support through a plugin called gatsby-plugin-react-helmet, which renders the app on the server and provides metadata for SEO.
• Hydrogen is a relatively new framework that aims to provide a modern approach to server-side rendering in React applications. It is built on top of the React Suspense API and leverages the power of the experimental React Server Components feature. Hydrogen allows developers to write server-rendered React applications using a familiar component-based approach.
• Remix is another framework for building server-rendered React applications. It provides a set of tools and libraries for building fast and scalable applications. Remix offers features such as automatic code splitting, optimized performance, easy deployment, and server-side rendering. It provides a built-in server for server-side rendering and allows developers to easily manage data fetching and routing.

Note that, Create React App (CRA) is another popular framework, but by default it is, CRA and does not provide built-in support for server-side rendering (SSR). However, you can add SSR support to it, which need to setup by setting up a Node.js server and using a library like React Router to handle routing on the server-side

How Do I create important SEO element's, such as “title”, “meta description”, etc?

You can use “react helmet” which is “A document head manager for React” and support document title, meta, link, style, script, no-script, and base tags

What Element are Important to consider?

• h1, h2, h3, … — consider your webpage as and article and make sure it has its heading like and article using h1, h2, h3 , … tags
• title — use helmet to give a related title to your page
• meta description — use helmet to describe your pageOpen Graph Protocol — The Open Graph protocol enables any web page to become a rich object in a social graph. the most important ones are og:title og:url og:image og:type
• So your helmet could be something like

<Helmet 
 title= "Page title"
 meta={[
  {"name": "description", "content": "Description of page"},
  {property: "og:type", content: "article"}
  {property: "og:title", content: "Example title"}
  {property: "og:image", content: "http://example.com/article.jpg"}
  {property: "og:url", content: "http://example.com/example"}
 ]}
/>