The Rise of JavaScript and What it Means for SEO
Download as PPTX, PDF4 likes4,712 views
The rise of JavaScript is causing challenges for SEO, particularly due to rendering issues that can hinder website indexing and traffic. Modern JavaScript frameworks are altering the way content is presented, resulting in metadata and links missing from the source, which can delay content rendering for search engines like Google. As mobile-first indexing becomes more prevalent, it's crucial for developers to test their site rendering to ensure proper SEO performance.
The Rise of JavaScript and What it Means for SEO
- 1. The Rise of JavaScript and What it Means for SEO Patrick Hathaway @HathawayP
- 2. @HathawayP JavaScript usage is growing…
- 4. @HathawayP Because developers want to do cool shit • Infinite scroll • Popups • Animation • Parallax effects • Fancy menus • Lightboxes • Etc…
- 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. @HathawayP JavaScript frameworks • AngularJS • ReactJS • Meteor • EmberJS • Polymer • Vue • Etc…
- 7. @HathawayP JavaScript frameworks • AngularJS • ReactJS • Meteor • EmberJS • Polymer • Vue • Etc… CHANGE ALL THE PAGE CONTENT
- 8. @HathawayP View Source goes from this:
- 10. @HathawayP Missing everything we need for SEO: • Meta tags • Content • Links!
- 11. @HathawayP You need to render the content first
- 12. @HathawayP Google CAN render JavaScript
- 13. @HathawayP Web rendering service (WRS)
- 14. @HathawayP Chrome 41 is 3 years old!
- 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. @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. @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. @HathawayP Rendering takes ~ 5X longer*
- 19. @HathawayP This causes problems • Websites not crawled as deeply or regularly • Pages not getting indexed -> Less search traffic
- 20. @HathawayP Example: JavaScript experiment Split Testing JavaScript for SEO: bit.ly/js-seo-test Before: After:
- 21. @HathawayP Remove JS -> 6% uplift in organic visits Split Testing JavaScript for SEO: bit.ly/js-seo-test
- 22. @HathawayP Currently, Google do not rely on rendering SEO best practices and requirements for modern sites: bit.ly/angular-seo
- 23. @HathawayP Same presentation (Sep, 2016) SEO best practices and requirements for modern sites: bit.ly/angular-seo
- 24. @HathawayP What’s the point? We don’t currently live in a render-first world
- 25. @HathawayP BUT… mobile-first is coming Mobile first = render-first
- 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. @HathawayP Mobile first has started rolling out 15 MONTHS AGO!
- 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. @HathawayP But… they will get there eventually And you need to be ready
- 30. @HathawayP What changes when you render? • Navigation? • Internal links? • Page content? (Hidden content?) • Robots directives?
- 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. @HathawayP And finally, from John Mueller himself:
- 33. Thanks! Get a free 14 day trial of Sitebulb: https://sitebulb.com Patrick Hathaway @HathawayP