ReactJS is a popular JavaScript library used for a growing number of websites. In fact, 5.6% of the top 10,000 websites now use React, according to digital technology trending site BuiltWith.
Building websites and mobile web apps in React can help create a modern user experience, however, like many JavaScript technologies, there are search engine challenges to account for. Fortunately, React allows for either client-side or server-side rendering of JavaScript (making it “isomorphic”), which means that a React site can compete for organic traffic.
Some of the areas to watch for retaining and growing organic traffic when moving to a React JS site are listed below.
1. URLs need to be “Google-friendly” and load independently
URLs should look like static URLs with directories as much as possible (http://www.alicesbooks.com/fiction/sci-fi/). Even better, make sure you use words that describe the content so that anyone can understand it.
Some JavaScript-heavy sites or single-page apps have a hashtag in the URL, which Google likely would not crawl (e.g. https://www.alicesbooks.com/#scifi).
Users should be able to view and share a URL specific to their current page. This will help search engines and users. Nobody likes sending a link to someone, only to discover that the link doesn’t lead to the right page!
Developer Note: One method to develop these types of unique URLs is a navigational component for React, such as React Router https://github.com/ReactTraining/react-router. PMG utilizes React Router with some our own tools.
2. Utilize the standard <a href> links in your HTML
Ensure consequential content is linked by <a href> links to ensure search engine discovery.
Avoid placing important content behind a JavaScript event. Google may not follow a site’s “onclick” events at all. As stated on Moz last year, simply, “don’t use JavaScript’s onclick events as a replacement for internal linking.”
3. Server-side JavaScript
Why use server-side rendering? Server-side rendering will ensure there is plain HTML for Googlebot to easily read. Yes, Google definitely can crawl and render client-side JavaScript. In competitive spaces, it’s too costly to rely only on Google’s rendering of complicated JavaScript.
- Google is very advanced in its ability to render client-side JavaScript. However, search engines and other platforms such as Bing, Baidu, Yandex, Apple, and Facebook that regularly crawl sites are usually less advanced and can result in significant traffic reductions.
- Heavy client-side rendering seems to result in Google crawling fewer pages for a site – meaning newer pages would get less traffic. Google does not always render the client-side JavaScript to fully understand a page. This is likely because of the time involved slows down crawling significantly.
- Google can simply misunderstand what a human wouldn’t have an issue with when dealing with JavaScript. Sometimes minor JavaScript errors can lead to Google missing content.
- Even when a search engine crawls and renders client-side JavaScript, this can still result in behavior that is unexpected, such as crawling tons of irrelevant JSON files. Pre-rendered HTML is simply easier for search engines (and marketers) to fully understand.
What to render server-side? Content and links should be available in HTML and must be crawlable for Google to reliably read the page. JavaScript and CSS files should also be made crawlable by keeping them unblocked by the robots.txt file. The initial content that loads before a user interacts should all be done server-side. After that, client-side rendering is OK.
Developer Notes on Implementation
- Server-side rendering of the HTML can be done by using “ReactDOM.renderToString” instead of “ReactDOM.render.” React Helmet can be useful to render head section elements such as meta tags.
- Take a look at the Next JS framework for React. Next JS is built specifically for server-side rendering and comes with its own internal routing library. Building from the ground up is easier than retrofitting code to do the server-side rendering.
Interested in working with us? See our open engineering roles here.