Let me start off by saying that this article addresses a specific use-case that we don’t often encounter in the day-to-day work we do for our clients: making a React web app play well with SEO. The majority of our clients’ websites run on WordPress, which has great built in SEO functionality, and even better SEO plugins like Yoast.
Obviously we believe SEO is integral to running any kind of business that requires an online presence to reach customers. But you shouldn’t have to sacrifice SEO best practices that can increase your bottom line in order to enjoy the benefits of a single page web app. This article gives a high level overview of how you can make SEO a top priority while still getting the most out of your React site. But first…
What is React?
Per their website, React is a Javascript library for building single page web applications. It was developed by a Facebook engineer to power their newsfeed. When it was made open source it spread like wildfire among the web development community. Some of the biggest sites on the web now use React, including Airbnb and Netflix.
Add More Funds, a pet project of ours that provides predictive tools to the fantasy sports community, runs on a 100% homegrown CMS built with React. We built Add More Funds using REACT because the information we display to our users is dynamic and changes frequently. (For a more static, content-heavy site, using a CMS like WordPress would have been more appropriate.)
But when it came to implementing an effective SEO strategy for the site, we encountered some unique challenges. I want to share some of those struggles, and what we did to overcome them.
How Do I Make My React App SEO Friendly?
Like other single page web apps, a React site is great at seamlessly refreshing dynamic content that is tied to a complex database or multiple data sources. But from an SEO standpoint there is one big downside. A single page web app gets refreshed dynamically, but the URL doesn’t change. Ever. From an SEO standpoint, having only one URL is a big problem. It makes it difficult for search engines to crawl and index your site, both of which are critical for ranking. Fortunately, there is a workaround: enter React Router.
What is React Router?
React Router is a tool that allows you to build links to pages within your single page web app by using dynamic routing. I’ll spare you the technical explanation; in a nutshell, dynamic routing allows your web app to have URLs you can bookmark and link to directly.
Creating routes for search engines to find specific content on your site is a great first step, but you’re still technically serving up the same page, which means users see the same title and description metadata regardless of the content. That’s another lost optimization opportunity. Once again, the React community has created an add-on to save the day. It’s called React Helmet.
What is React Helmet?
React Helmet is so named because it manages what’s in the “head” section of your page, which is where titles and meta descriptions reside. Integrating Helmet with your web application gives you the ability to dynamically set all identifying information for a page and set friendly URLs with React Router. Helmet and Router work together to achieve what appear to be individual pages, so that you can optimize title tags and meta descriptions for SEO.
But there is still one missing piece of the SEO puzzle: sitemaps. How do you create a sitemap for a dynamic web application where links can change frequently? Again, the React community has you covered.
React Router Sitemap
Using your already implemented React Router, you can generate sitemaps using Router Sitemap. (A note to the technical folks: you can also filter paths and replace parameters in dynamic paths.) If you’ve set up your site in Google Search Console, Router Sitemap is particularly useful, because you’re now able to submit a sitemap to Google. The benefits of having an accessible sitemap are often overlooked, so let’s take a moment to go over them.
Even if your site is properly linked and can be crawled, a sitemap can make it easier for search engines to crawl larger sites, or sites with more complex content. A sitemap can also be useful if your site is newer or has many content-heavy pages that are not internally linked yet. But that’s a whole ‘nother subject.
Pre-Rendering React for SEO
Something else to consider for your React app is pre-rendering. Because javascript can take time to load and your page is first seen as just js to Googlebot, there can be drawbacks for some of the static pages you have.
For pages with lots of dynamic and changing content, pre-rendering can be an issue because you’re taking a snapshot of your page and serving it up in a HTML format. This is a potential solution for those that have relatively static pages that don’t change frequently or landing pages built out within React to help sell your product or service. We’ll cover more on this in a separate article later.
Conclusion
Integrating Router, Helmet and Sitemap into your single page web app will vastly improve SEO, and if paired with an effectively implemented optimization strategy, you’ll start seeing more organic traffic to your site.
In a future article we’ll discuss how you can use serverless integrations, such as Butter CMS, to get the SEO benefits of a content-management system, helping your React site rank even better in search.
Have any other tips for digital marketers looking for advice on how to deal with SEO for React applications? Drop a comment below.