React CRA and SEO

Posted by Rob Sturcke31-8-2019

I found React's CRA (Create React App) to be interesting when it comes to SEO/SMO and getting it to work with Search Console and Analytics for individual pages. For a starting point you'll want to make sure you're using the create-react-app setup for the following guide, Parcel and Webpack have similar ways of accomplishing the following, however for the sake of time we will use create-react-app.


If you haven't done so already, check out NFL's react-helmet package for getting the DOM to recognize your individual page title, description tags etc.

import { Helmet } from 'react-helmet';
  <title>ABOUT PAGE</title>

Now we need to install react-snap to enable SEO and SMO for our React app:

npm i --dev react-snap

While that's installing, go into your package.json and add the following to your scripts:

"scripts": {
  "postbuild": "react-snap"

Then change your scr/index.js imports for react-dom and add the following for React 16+:

import { hydrate, render } from "react-dom";
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else {
  render(<App />, rootElement);

Adding React Snap will prep your app for SEO and SMO, along with performance optimizations on loading times.

Assuming you have your Analytics tags in your public/index.html, you can move on to installing a few polyfills to help get your pages indexed. But first you need to install 2 packages:

npm i --s babel-polyfill whatwg-fetch

Once you've installed those packages, create a file in your config directory called polyfill.js, and fill in the following:


if (process.env.NODE_ENV === 'test') {

This polyfill from WoWAnalyzer uses babel-polyfill and whatwg-fetch and has tons of comments to give a great explanation for the polyfill service. [Reference to the source in comments of this Reddit thread.]

Now add the polyfill imports to the top of your index.js to continue on.

import 'babel-polyfill';
import './config/polyfills';

For the next step you could install yet another package, however I found that just writing out a sitemap.xml file to put in the public directory is simple enough to not require more dependencies.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="" xmlns:news="" xmlns:xhtml="" xmlns:mobile="" xmlns:image="" xmlns:video="">
  <url> <loc></loc> </url>
  <url> <loc></loc> </url>
  <url> <loc></loc> </url>
  <url> <loc></loc> </url>


If you're still having issues with your Analytics tags, try deleting property then re-creating the property. Don't forget to add the new analytics ID to your public/index.html and run build a fresh build.

If Search Console isn't recognizing anything still, try installing react-app-polyfill.

I've also created a Github repo example for your reference.

Return Home