SEO for React eCommerce SPA

React is super popular for eCommerce these days. Single page applications (SPA) is typically the starting point due it its awesomeness. React SPA is however not awesome for SEO and time to first meaningful render. This is where server side rendering (SSR) with Next.JS comes in. Frontend performance super-important according to the ecommerce SEO checklist so you need to have fast apis. GraphQL done properly could help your performance that you should verify with profiling and benchmarking. For eCommerce SEO the good old best practice still applies like title and h1 tag usage.

A single page application (SPA) is good for many things, but it is not great for SEO. Mainly React SPA does not have the concept of pages or different URLs. As each page URL is dynamically loaded with Javascript voodoo. It is gives a very fast user experience, but search engines typically do not understand anything. The result is typically that the pages will simply not be indexed - i.e. invisible to Google.

SPA in React typically also have a larger overhead on the first load as there are many packages and dependencies to be loaded before any content is rendered. This is mostly a user experience issue with long initial time to meaningful render. They have to wait to see the products - loading... Google penalises webshops that are slow - but in this case it would not be indexed anyway.

From a user experience perspective the super-fast loading of ecommerce pages that you typically get from SPA is something we want. Very much actually. But we do not like the potential slow time to first meaningful render and we need our webshop to be indexed by search engines.

The solution to this is surprisingly simple: lets render the first request on the server. Next.JS is a great framework to hook up with your React eCommerce SPA. With Next.JS and SSR you basically render the first page on the server and send plain HTML to the browser. Normal SPA mode takes over after this. But you get super fast time to first meaningful render and search engines love it as they can understand the HTML and index it.

Oh, the bonus: search engines can index all products and pages. This is because SSR also renders any incoming URL request as static HTML. Yay.

Product information management is core of any eCommerce application. You want the shop managers to easily create and modify rich product descriptions in their PIM interface and have their webshop automagically being always up to date. The rich product information is typically delivered to your webshop via an API - this is what we call headless ecommerce.

In my experience a REST API slows your ecommerce application down. This is due to architectural design limitation mainly. With a REST API you typically have to send one request to fetch a list of resources, i.e. products. Then send one request for each of the product resources to fetch the product information. Worst case a list of 10 products could lead to 11 API calls! This is horrible in terms of performance.

GraphQL is designed to solve exactly this. One query to fetch the product data you need and only this. With GraphQL you have a simple to understand query language to fetch a deep tree of content. Since you can choose exactly what data to transfer in each query you also optimize data transfer time.

It is no secret that Google is favouring eCommerce, or any website, if they are fast. Since the API performance is directly linked to you SERP ranking (your placement in the search engine result page) you need a fast ecommerce API. This is where benchmarking and profiling comes in. Remember always to keep an eye on your application performance including the API layer. A good tool to check your website speed is the Google Pagespeed Insight. That gives you a good indication of how Google sees your webshop in terms of performance when indexing. Of course this is not a benchmark or scaleout testing tool, but delivers what we need to check here for SEO and performance.

Of course building a webshop on React means that you still have to comply with the good old and ever evolving SEO best practice. In the end you are sending HTML pages to the browser and the search engine indexing bots.

There are plenty of resources out there on this topic, but remember things like:

• Title tags with main keywords first
• H1 tags for titles, h2 for subtitles etc with main keywords first
• URLs in plain text with keywords
• Canonical link tag
• Meta tags including OG share tags that uses real content like product title, image, description and price
• Paragraph text that repeats your keywords
• Link text with keywords of the page it links to
• Image need alt text with good keywords
• Image and file names should be descriptive and include main keyword(s)

That should get you started with some proper SEO for your eCommerce. Check out our ecommerce SEO checklist for more tips.

You can check out our React eCommerce boilerplate for an example of how we do this. Don´t worry it is fully open source and MIT licensed.