React CRA and SEO 2020
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';
<Helmet><title>ABOUT PAGE</title></Helmet>
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:
require('babel-polyfill');require('whatwg-fetch');if (process.env.NODE_ENV === 'test') {require('raf').polyfill(global);}
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="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url> <loc>https://www.some-react-example.com/</loc> </url><url> <loc>https://www.some-react-example.com/about</loc> </url><url> <loc>https://www.some-react-example.com/random</loc> </url><url> <loc>https://www.some-react-example.com/404</loc> </url></urlset>
Troubleshooting:
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.