SEO and React
Search Engine Optimization (SEO) involves structuring your website in a way that increases your ranking in search engine results. Search engines use crawlers to read pages on the web and try to provide more accurate search results. These crawlers will look at keywords, domain name, page load speed, mobile friendliness, title, meta tags, image alt tags, and many other aspects of your site. Search engine crawlers generally read static content, however Google scrappers are now capable of reading Javascript and dynamic content of pages.
The Problem With React
Single Page Applications built with javascript(and react) run into issues with search engine crawlers. Google’s crawlers are smart, however they still run into issues with Single Page Applications and you probably want your website to appear on more search engines than just Google’s. Due to the very dynamic nature of react web pages, crawlers will often index the website as a mostly empty page, will simply miss large portions of your website, and sometimes will not execute any javascript on your site at all.
How to Solve the Issue
Isomorphic React
Isomorphic React web pages will detect if the client has javascript enabled, if they do not the javascript will be run on the server-side and display the final version to the client. Your website will still function without the client(or crawler) having javascript enabled. Creating an Isomorphic React application is not always the best solution, but will work for most sites.
Prerender
Using third party services, like Prerender.io, you can wait for your page to finish loading and then deliver the content in HTML. This is similar to Isomorphic rendering however can be easier to set up because you won’t have to refactor for server-side rendering, and it can help alleviate server load.
React Router
React Router is a library used for handling the routing of your web application. This uses two tools: HashRouter and BrowserRouter. HashRouter is more backwards compatible, BrowserRouter works better. Using React Router you can make your website have a Search Engine compatible URL structure with relevant URL’s for each view in your application.
React Helmet
React Helmet is a library that allows developers to set the HTML metadata in the header of any component. React by default does not include a way for you to change the metadata in the header so all your search engine results will appear the same regardless of the URL/Route. Using React Helmet each of your search engine results can display accurate information for both crawlers and people.
How to Check Your SEO
Google has developed a helpful tool for you to see how your website is displayed to search engine crawlers. Fetch as Google, lets you know if google’s crawler can access your site, how your site is rendered, and if any resources such as images or scripts are blocked. In order to use the tool you will need a deployed application on a publicly accessible URL, Heroku works for this. Once your website is up and running, head over to Google Search Console, add your website, and use Fetch as Google from the crawl section.
