As you may or may not be aware NPM and React have caused a Cambrian explosion in the number of Awesome React Boilerplates out there. But did you know many of those boilerplates and the web apps that build upon them aren’t SEO friendly, and possibly even invisible to Google? Sites experiencing SEO issues are more likely to be buried deeper in Search results and unlikely to see the Organic traffic they’d otherwise enjoy sans marketing efforts.
In this post we’ll explore some of the telltale signs your React app isn’t SEO friendly and what you can do about it.
Identify SEO Issues
First off, identifying issues with site search indexability doesn’t require an SEO expert. In fact, anyone can do it. Simply try any of the following methods to determine if your React site is experiencing potential issues with SEO.
Fetch as Google
From Google Search Console run Fetch as Google tool against a verified site and choose the Fetch and Render option. This will cause Googlebot to crawl the specified page and show you what it sees. Once finished, if you see a blank or partially rendered page your app website may be invisible to Google.
Browse with elinks
Otherwise your React site will take the form of a black hole as shown on slide 6 of my Isomorphic Rendering with React talk.
All Is Not Lost
Google and Bing both crawl Ajax pages. But when they crawl Ajax pages, they have to spend more time doing it, meaning your site will not be crawled as quickly. And that’s pretty much where it ends. There are thousands of other crawlers out there which will not be able to access your site any longer, and that’s not necessarily a good thing for your site or the Web.
Once you start building a React app without SEO in mind it’s almost impossible to go back without some clever workarounds or a significant investment of time and energy. So be sure you start out on the right foot if you ever plan for your React app to be SEO friendly. Or double your budget a second time.