AuthorDaniel Cartland
LinkedIn
The Ultmate Guide to React SEO for eCommerce
React is one of the frontrunners in JavaScript frameworks being used on website, particularly in ecommerce. React websites are built as Single Page Applications (SPAs), and have certain aspects to consider to ensure that it is set up correctly for SEO.
In this article, we run through some of the pros and cons of React SEO for eCommerce sites.
React benefits for eCommerce
React can be a fantastic experience for users, as because the content is served on the client-side it creates a smooth and seamless experience. As pages don’t have to refresh a visitor can easily navigate around a site.
React is also one of the easiest frameworks to use when making Progressive Web Apps.
How does a search engine crawler see React websites?
Google identifies websites and website content in two phases:
- Crawling the HTML (Source code)
- Rendering the Domain Object Model (DOM) including JavaScript (Inspect in Chrome Dev Tools)
React is a JavaScript framework that by default is client-side rendered. This means that in it’s default state, it does not send requests to a server. As such, Google cannot receive information about a React site which can cause huge issues in identifying pages.
If your React site uses server side rendering of pre-rendering solutions, Googlebot still does not render JavaScript files & associated resources from a server when navigating through the site. THis happens during the second stage (rendering using Google Caffeine). This requires additional resource which can potentially cause some SEO issues if not set up correctly.
SEO Issues with React
- Content can take longer to be discovered
As all pages on the site require rendering before all the content can be discovered, content can take a longer time to be found (as Google has a render-budget for each site). As this is quite resource heavy for Google, less pages may be rendered, resulting in new content potentially taking longer to be discovered and indexed.
Server side rendering or pre-rendering can help to alleviate this issue.
- Updated content can take longer to get noticed
By the same reasoning, if you update your content it may take longer to get noticed (compared to if most of your content is HTML based), as the page must be rendered again for Google to notice then changes and apply them in the search results.
- Content deep in the site may not be crawled as frequently (if at all).
If your pages are linked too deeply in a site, Google may struggle to frequently reach those pages, (as it can struggle to crawl the site initially using HTML, then requires lots of resources to render the site).
Optimising React eCommerce sites
Ensure every page has its own URL
One of the main things to ensure is that every different page on your websites has its own URL. This is so that your page content is associated with an individual location and that search engines can find and rank that URL in the SERPs.
With React websites this can be achieved with React Router. With React Router you can ensure that every page has its own URL and the user interface is aligned with a particular URL – a great guide on this can be found here.
Server Side Rendering with Isomorphic React
Isomorphic React serves a server side rendered version of the HTML to crawlers (by detecting when JavaScript is disabled on the client side). However, when JavaScript is enabled on the clients side (for example from user in a browser) it will serve the client-side rendered SPA.
This means that crawlers have full access to the site for crawling and website discoverability, however, visitors have the smooth functionality of the React application.
Prerendering
If your site does not, or cannot utilise Isomorphic React technologies, pre-rendering is another solution. Pre-rendering caches a rendered HTML version and serves this to crawlers. Visitors are served the client side rendered version of the React site. Common prerendering services include:
Meta Data Optimisation
Ensuring that each page has a unique page title and meta data is another crucial consideration to differentiate pages and ensure they can rank for the relevant keywords. Websites using React can achieve this by using React Helmet.
Found this guide useful? If you have any questions, feel free to reach out to the author, Dan, on Twitter, @danielcartland
