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)
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
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.
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