SEO with React & prismic.io

Many people are interested in taking advantage of the benefits of React.js with their prismic.io websites, but are concerned with the SEO issues that come along with React. This page discusses these concerns and offers a couple of possible solutions to this problem.

The concern of SEO with React.js

The main SEO issue that comes with React.js has to do with search engine crawlers.

The issue is that the bulk of a page's content is often rendered in the user's browser. A search engine crawler will only see the bare bones HTML code delivered from the backend and assume the page basically blank. And this will lead to a poor SEO ranking.

The good news

The good news about this issue is that it seems to be going away on its own. Google is getting better and better every day at crawling content that is rendered in the user's browser. This means that for many sites using React.js with prismic.io, you won't take a hit for SEO with Google because their crawlers wait for your content to load. Here's what Google itself had to say on the subject:

"Times have changed. Today, as long as you're not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers."

This seems to be the trend with the other major search engines as well, but most aren't as far along as Google.

So what do I do?

If you aren't concerned about the other search engines (Yahoo, Bing, etc.) then you can probably get by without having to do anything. Though even with Google, not everyone has seen perfect results.

There are a few options you have when faced with this issue, but we recommend the following options: convert your project to a Universal React project or use a prerendering service (we suggest hosting your site on Netlify).

Both options are discussed below.

Universal React

Also know as Isomorphic React, this refers to the fact that a page can be rendered fully from the server as well as from the client using the same code.

How does it work?

The first time anyone accesses the website, the server responds with a fully-rendered page which includes all the page's content. At that point forward, the site is loaded on the client-side as it would with a regular React.js website.

This means that a crawler won't encounter a the bare bones HTML, but the full page. And it works for all search engine crawlers as it doesn't rely on the crawler's ability to wait for javascript loaded content.

Advantages

There are certain advantages when going with the Universal React approach.

  • It allows you to take advantage of the power of react's client-side speed without taking a hit on SEO
  • Better performance & user experience
  • Easier to maintain than a separate codebase for the back-end and the front-end
  • Site can run even if the user has Javascript disabled

Disadvantages

It's important to keep in mind that Universal React is not the perfect solution for everyone. This approach comes with one very important downside: It can be very complicated to set up.

It is not a simple task to convert a normal React.js app to a Universal app, especially if your app needs to wait for a promise to return (as it does when fetching content from prismic.io's API endpoint). The time required for this conversion turns many developers away from this approach.

How to get started with Universal React

This page isn't going to go into the details of how to convert a React application to a Universal app, as that is very complicated and beyond the scope of this article.

If you're interested in this approach, though, we have put together a sample Universal React project that retrieves content from prismic.io.

Explore the Project

We encourage you to explore the project and use it as the base for your own Universal React project!

Prerendering

The other approach we suggest to the SEO issue is to use a prerendering service.

How does prerendering work?

Prerendering works by creating cached HTML versions of your website pages.

The prerender service will intercept a page request and check if it's a search engine bot that is crawling your site. If so, then the static pre-rendered HTML versions are served to ensure that the crawler sees all your content.

If a regular user visits your site, then everything will be loaded as normal with React.js.

Advantages

Here are the benefits of this approach:

  • It is typically very easy to set up, with many services available to make it even easier
  • You don't have to convert your react application to a Universal app. It can remain as a regular React.js project and save you time & energy

Disadvantages

Here are the disadvantages of this approach:

  • Your cached HTML versions might not be the most up-to-date content. Depending on how often the pre-rendering cache is updated, it might be a while before new content is crawled and made available on search engines.
  • This approach might become obsolete. Google has announced that it is growing beyond this solution, but it still accepts it, for now. The hope is that by the time this approach is obsolete, search engines will fully be able to crawl a React.js website, but time will tell for this.

How to get started with prerendering?

This page won't go into the details of setting up prerendering, but there are a number of prerendering services available.

We suggest deploying your React.js website to Netlify. It's really easy to use and just takes a single click to activate the prerendering service. Netlify even has a free plan that includes the prerendering, so if you just use the basic service, it doesn't cost anything.

Another popular prerendering service is Prerender.io, which also has a free plan that you can take advantage of.

Conclusion

This appears to be an issue that will hopefully just disappear on its own in the near future. For now we hope we've given you enough information to start investigating which approach is best for you and your site.

And if we missed something, let us know! Reach out via the in-website chat to tell us about any another method that we can add to this page.