For those of us who've written and deployed ReactJS SPAs (single page applications) only to find that they don't have the best SEO, this article is for you.
There is a really simple fix that doesn't involve turning on server-side rendering.
First of all, if you haven't tried Netlify, I encourage you to do so. It's a free service to get running on, and it integrates directly with Github - you can even login using your Github credentials.
My pal James Vidler has a really good article that describes getting your site deployed to netlify from the command line using the cli.
It's basically as simple as this - assuming your build output is in the /build directory:
> npm run build
> npm install -g netlify-cli
> netlify login
> netlify deploy --dir=build --open
I encourage you to read Vidler’s article on this to get running in netlify. Once you have that going, if you actually login to Netlify itself, you’ll see some additional Settings once you click on Settings > Build & Deploy
Scroll down until you see the section on Prerendering.
This service is documented here on Netlify, but the long and short of it is that whenever a bot is detected trying to hit your site, it gets served a prerendered version of the site.
As an example, here is the source of my test SPA normally:
It’s not very SEO-friendly, to say the least.
Now let’s use Chrome’s developer tools to set my user-agent and we can pretend to be the Google search bot. You’ll have to turn on the “Network Conditions” tab to do this.
Now, you can set your user agent easily.
Let’s refresh the same page and see what we get.
Looks much better in terms of SEO.
Now, as long as you are rendering decent
tags and content, you should be good to go!FYI - I work for Agility CMS - use it for free with React + Netlify!
Top comments (6)
Great tut. Thanks for insights.
PS. Agility CMS looks very nice. Will try it :)
Didn't know that ! Thx for sharing !
My website is made with Angular. (chandujs.dev) Does netlify prerender also work with Angular websites?
That’s a good question! Easiest way to find out would be to do a deployment to netlify and find out. Let me know what you discover!
I enabled the pre rendering option in netlify and it worked! 😃 For testing, change you user agent to Googlebot in chrome dev tools and check the source code.
Neat feature!