This document discusses the relationship between JavaScript and SEO. It describes how Googlebot crawls and renders pages with JavaScript differently than regular HTML pages, taking more time. This can lead to issues like incomplete indexing if the JavaScript is not optimized for search engines. The document provides examples of companies that experienced drops in organic traffic and keyword rankings due to JavaScript rendering problems. It also offers suggestions on approaches like server-side rendering, prerendering, and isomorphic JavaScript to help search engines properly crawl and index JavaScript-heavy sites.

1. hello@impression.co.uk
The Javascript & SEO
Landscape

2. hello@impression.co.uk
Edd Wilson
SEO Strategist
● 9 years in SEO
● Agency & In House experience
● 4 years at Impression

3. @impressiontalk
hello@impression.co.uk
Javascript in 2019

4. @impressiontalk
hello@impression.co.uk
What SEOs saw

5. @impressiontalk
hello@impression.co.uk
What SEOs need to do

6. @impressiontalk
hello@impression.co.uk
2014
“..sometimes things don't go perfectly
during rendering, which may
negatively impact search results for
your site.”

7. @impressiontalk
2016

8. @impressiontalk
2016
@impressiontalk

9. @impressiontalk
2016

10. @impressiontalk
Hulu saw a 4 million organic
visitor drop off

11. @impressiontalk
How does Javascript impact
search?

12. @impressiontalk
Three Factors
Crawlability
Rendering
Crawl Budget
@impressiontalk

13. @impressiontalk
hello@impression.co.uk
Crawling HTML
1. Googlebot downloads the HTML
1. Googlebot extracts the links from the source code
1. Googlebot downloads the CSS Files
1. Googlebot sends all the downloaded resources to the
indexer
1. The indexer then indexes the page

14. @impressiontalk
hello@impression.co.uk
Crawling JS vs HTML
1. Googlebot downloads the HTML
1. Googlebot downloads the CSS and Javascript.
1. Googlebot uses their Web Rendering Service to parse, compile and
execute Javascript code.
1. The WRS fetches data from external APIs
1. The Indexer can now index the content
1. Google can discover new links and add it to Googlebot’s crawling
queue

15. @impressiontalk
Two waves of Indexing
@impressiontalk

16. @impressiontalk
This process highlights how
time consuming it is for
Google
@impressiontalk

17. hello@impression.co.uk
Googlebot uses Chrome 41 for
rendering websites

18. @impressiontalk
Our experiences with Javascript & SEO
@impressiontalk

19. @impressiontalk
@impressiontalk
Cromwell were just seeing a
quarter of their 200,000 pages
being indexed by Google

20. @impressiontalk
Their website was built on
React and it was nearly
impossible to crawl and render
@impressiontalk

21. @impressiontalk
Organic Traffic - 40k organic monthly
visitors lost!
@impressiontalk

22. @impressiontalk
Organic Keywords: 1,866 keywords in
position 1-3 dropped
@impressiontalk

23. @impressiontalk
Core Issues
@impressiontalk
No server side rendering
solution

24. @impressiontalk
Core Issues
@impressiontalk
Internal links & pagination
injected through Javascript

25. @impressiontalk
Core Issues
@impressiontalk
Major page elements &
canonical tags injected
through Javascript

26. @impressiontalk
Core Issues
@impressiontalk
Certain links used onClick rather
than HREF

27. @impressiontalk
Results - Organic Traffic
@impressiontalk

28. @impressiontalk
Weekly Organic Revenue - £10,240 to
£31,774 - 210% increase
@impressiontalk

29. @impressiontalk
Eventopedia migrated to a
SPA and saw issues with
indexing
@impressiontalk

30. @impressiontalk
@impressiontalk

31. @impressiontalk
Initial Index Coverage
@impressiontalk

32. @impressiontalk
1
Initial tasks
@impressiontalk

33. @impressiontalk
2
A change in the environment
@impressiontalk

34. @impressiontalk
3
Back on track
@impressiontalk

35. @impressiontalk
Sitemap being supplied to
pre-rendering service was
incorrect
@impressiontalk
Core Issues

36. @impressiontalk
Breadcrumb structure not
included in rendered version
@impressiontalk
Core Issues

37. @impressiontalk
Redirects implemented
through Javascript
@impressiontalk
Core Issues

38. @impressiontalk
Canonical tags all set to the
homepage in rendered version
@impressiontalk
Core Issues

39. @impressiontalk
“No exact timeout is specified, but it’s said that
Google can’t wait for a script longer than 5
seconds. Our experiments confirm this rule”
- Elephate
@impressiontalk
Crawl Rate

40. @impressiontalk
A slow website will impact Google
rendering your content and also slow
down the crawling process
@impressiontalk
Crawl Rate

41. @impressiontalk
@impressiontalk
Crawl rate - Pagespeed Insights
https://www.eventopedia.com/?escaped_fragment=

42. @impressiontalk
@impressiontalk
Initial Index Coverage

43. @impressiontalk
@impressiontalk
Recent Index Coverage

44. @impressiontalk
@impressiontalk
First Page Performance

45. @impressiontalk
@impressiontalk
What can you do?

46. @impressiontalk
@impressiontalk
Server Side vs Client Side
SSR
Googlebot receives the HTML that
describes the page
CSR
Initial load can lead to blank pages
which will be served to Googlebot

47. @impressiontalk
@impressiontalk
Client Side Rendering
Prerendering
● This serves a HTML snapshot
to Googlebot
● Pre-render.io
● PhantomJS & Chrome
Headless
Isomorphic Javascript
● Both user and search engine
receive full page of content
then JS features are loaded.
● Recommended by Google
● Can be difficult to implement

48. @impressiontalk
@impressiontalk
Use Inspect to view the DOM

49. @impressiontalk
@eddjtw
View Rendered Source

50. @impressiontalk
@eddjtw
Javascript Switcher

51. @impressiontalk
@impressiontalk
Download Chrome 41

52. @impressiontalk
@impressiontalk
Crawl your website

53. @impressiontalk
@impressiontalk
Optimise your scripts

54. @impressiontalk
@impressiontalk
Recommended Reading
The Ultimate Guide to Javascript SEO - Elephate
Javascript & SEO: The Definitive Resource List - State of Digital
How to get 250k pages indexed by Google - Devsnap

55. hello@impression.co.uk
Thank you!
@EddJTW
@impressiontalk
www.impression.co.uk