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.

1. The Rise of JavaScript and
What it Means for SEO
Patrick Hathaway
@HathawayP

2. @HathawayP
JavaScript usage is growing…

3. @HathawayP
WHY???

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:

9. @HathawayP
To 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