Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Rise of JavaScript and What it Means for SEO

3,594 views

Published on

Over the last few years we have seen JavaScript usage in websites increase significantly, everything from cool scroll effects to fully fledged JavaScript frameworks that build entire web pages within the browser.

However, JavaScript can cause problems from an SEO perspective, so SEOs and developers need to understand how rendering changes page content, and the SEO risks this has associated with it.

Published in: Marketing
  • Be the first to comment

The Rise of JavaScript and What it Means for SEO

  1. 1. The Rise of JavaScript and What it Means for SEO Patrick Hathaway @HathawayP
  2. 2. @HathawayP JavaScript usage is growing…
  3. 3. @HathawayP WHY???
  4. 4. @HathawayP Because developers want to do cool shit • Infinite scroll • Popups • Animation • Parallax effects • Fancy menus • Lightboxes • Etc…
  5. 5. @HathawayP Because developers want to do cool shit • Infinite scroll • Popups • Animation • Parallax effects • Fancy menus • Lightboxes • Etc… CHANGE THE PAGE CONTENT IN YOUR BROWSER
  6. 6. @HathawayP JavaScript frameworks • AngularJS • ReactJS • Meteor • EmberJS • Polymer • Vue • Etc…
  7. 7. @HathawayP JavaScript frameworks • AngularJS • ReactJS • Meteor • EmberJS • Polymer • Vue • Etc… CHANGE ALL THE PAGE CONTENT
  8. 8. @HathawayP View Source goes from this:
  9. 9. @HathawayP To this:
  10. 10. @HathawayP Missing everything we need for SEO: • Meta tags • Content • Links!
  11. 11. @HathawayP You need to render the content first
  12. 12. @HathawayP Google CAN render JavaScript
  13. 13. @HathawayP Web rendering service (WRS)
  14. 14. @HathawayP Chrome 41 is 3 years old!
  15. 15. @HathawayP The problem with rendering 1. It takes a LOT longer 2. It’s more resource intensive 3. It adds an extra step when crawling
  16. 16. @HathawayP Crawling HTML 1. Download URL content (= View Source) 2. Parse HTML 3. Extract content and links 4. Add href link URLs to crawl scheduler 5. Add URL data to index
  17. 17. @HathawayP Crawling JavaScript 1. Download URL content 2. Render content (= Inspect Element) 3. Parse HTML 4. Extract content and links 5. Add href link URLs to crawl scheduler 6. Add URL data to index
  18. 18. @HathawayP Rendering takes ~ 5X longer*
  19. 19. @HathawayP This causes problems • Websites not crawled as deeply or regularly • Pages not getting indexed -> Less search traffic
  20. 20. @HathawayP Example: JavaScript experiment Split Testing JavaScript for SEO: bit.ly/js-seo-test Before: After:
  21. 21. @HathawayP Remove JS -> 6% uplift in organic visits Split Testing JavaScript for SEO: bit.ly/js-seo-test
  22. 22. @HathawayP Currently, Google do not rely on rendering SEO best practices and requirements for modern sites: bit.ly/angular-seo
  23. 23. @HathawayP Same presentation (Sep, 2016) SEO best practices and requirements for modern sites: bit.ly/angular-seo
  24. 24. @HathawayP What’s the point? We don’t currently live in a render-first world
  25. 25. @HathawayP BUT… mobile-first is coming Mobile first = render-first
  26. 26. @HathawayP Mobile-first relies on rendering Mobile-first means that Google will render your page content using the mobile version of the page, and use that to determine indexing and ranking on EVERY device.
  27. 27. @HathawayP Mobile first has started rolling out 15 MONTHS AGO!
  28. 28. @HathawayP Why is it taking so long? (Guesses) Two big reasons: 1. They can’t afford for it to not work properly on the BIG sites. 2. They need to upgrade from Chrome 41 (not good enough at rendering).
  29. 29. @HathawayP But… they will get there eventually And you need to be ready
  30. 30. @HathawayP What changes when you render? • Navigation? • Internal links? • Page content? (Hidden content?) • Robots directives?
  31. 31. @HathawayP You need to test rendering to find out 1. Crawl your website with a crawler that renders JavaScript – Sitebulb and Screaming Frog can both do this. 2. Compare Source HTML vs the rendered HTML – excellent guide here: bit.ly/compare-source
  32. 32. @HathawayP And finally, from John Mueller himself:
  33. 33. Thanks! Get a free 14 day trial of Sitebulb: https://sitebulb.com Patrick Hathaway @HathawayP

×