• About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
  • About Us
    • New York
  • Work
  • Capabilities
  • Careers
  • Technology
  • Blog
  • Contact Us
April 11, 2018

SEO For ReactJS Websites

Posted by John Greer

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.number one number 2number fournumber four

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.

Google+htmljavascriptreactjssearch engine optimizationSEO strategies
Previous
Next

Latest White Papers

  • Shifting Plans for 2020 & Beyond
  • Game On: How Brands Can Log Into A Diverse Multi-Billion Dollar Industry
  • What CCPA Means For Brands
  • How Google is Improving Consumer Data Privacy
  • Ways to Prepare for the Cookieless Future
  • See all White Papers

Featured Posts

  • Ad Age Names PMG #1 Best Place to Work in 2021
  • MediaPost Names PMG Independent Agency of the Year
  • PMG Client Portfolio Trends During Amazon Prime Day 2020
  • A Closer Look at the Congressional Big Tech Market Power Report
  • What to Know About Reddit

Categories

  • Consumer Insights
  • Content
  • Creative Design
  • Data Analytics
  • Development
  • Digital TV & Video
  • Ecommerce
  • Industry News
  • Local
  • Mobile
  • Paid Search
  • PMG Culture
  • Programmatic & Display
  • SEO
  • Social Media
  • Structured Data
Fort Worth

2845 West 7th Street
Fort Worth, TX 76107

Dallas

3102 Oak Lawn Avenue
Suite 650
Dallas, TX 75219

Austin

823 Congress Avenue
Suite 800
Austin, TX 78701

London

33 Broadwick Street
London
W1F 0DQ

New York

120 East 23rd Street
New York, NY 10010

Get in touch

(817) 420 9970
info@pmg.com

Subscribe to the PMG Newsletter
© 2021 PMG Worldwide, LLC, All Rights Reserved
  • Contact
  • Privacy Policy
 Tweet
 Share
 Tweet
 Share
 Tweet
 Share
 LinkedIn
We and our partners use cookies to personalize content, analyze traffic, and deliver ads. By using our website, you agree to the use of cookies as described in our Cookie Policy.