Find out how Google renders and indexes Javascript on your website and how you can easily make changes to a website using Google Tag Manager.

1. When Google looks at your
website, what does it see?
Kieran Headley
theWebShed
Javascript SEO
Leicester Digital

2. Javascript SEO
Leicester Digital
• The Google process.
• More than one Googlebot.
• How to test your website.
• How to implement changes.
• Some resources you might like.
• Any questions?
What we will cover…

3. Javascript SEO
Leicester Digital
The Google process…
Crawl
Googlebot
Index
Caffeine
Query
Search

4. Javascript SEO
Leicester Digital
Website crawling process…
1. Googlebot receives a website URL.
2. It then sets about crawling the URL.
3. Extracts all URL’s that it finds within <a> tags.
4. When the crawler sees URLs that are new or changed since its last visit, it sends them to the indexer.
Crawl
Googlebot

5. Javascript SEO
Leicester Digital
Website crawling process…
1. Googlebot receives a website URL.
2. It then sets about crawling the URL.
3. Extracts all URL’s that it finds within <a> tags.
4. When the crawler sees URLs that are new or changed since its last visit, it sends them to the indexer.
5. Indexer then takes all the information from the page to analyse content and relevancy.
6. The indexer also renders the page and executes the JavaScript.
7. Any additional URL’s found when the page is rendered are then sent to the indexer.
Crawl
Googlebot
Index
Caffeine

6. Javascript SEO
Leicester Digital
Website crawling process…
1. Googlebot receives a website URL.
2. It then sets about crawling the URL.
3. Extracts all URL’s that it finds within <a> tags.
4. When the crawler sees URLs that are new or changed since its last visit, it sends them to the indexer.
5. Indexer then takes all the information from the page to analyse content and relevancy.
6. The indexer also renders the page and executes the JavaScript.
7. Any additional URL’s found when the page is rendered are then sent to the indexer.
8. A user can then find the website when querying Google.
Crawl
Googlebot
Index
Caffeine
Query
Search

7. Javascript SEO
Leicester Digital
There is more than one Googlebot

8. Javascript SEO
Leicester Digital
Googlebot 2.1…
• The original Googlebot.
• Downloads HTML, CSS and image files when crawling a
website.
• Checks for changes in the page and sends to the
indexer.

9. Javascript SEO
Leicester Digital
Googlebot WRS…
• Runs in addition to Googlebot 2.1 during the indexing
process.
• Renders the page using Google’s WRS based on Chrome 41.
• Any additional links found within the rendered page are
added to the crawl queue.

10. Javascript SEO
Leicester Digital
Google’s Web Render Service…
• Web Render Service (WRS) is a sub system of Caffeine (Indexer).
• Is based on Chrome 41.
• Is used to fully render pages.
• Google WRS is limited, advise you using fall backs. Service workers (PWA), IndexedDB and
WebSQL interfaces are all disabled.
• More info: https://developers.google.com/search/docs/guides/rendering

11. Javascript SEO
Leicester Digital
So we did some tests…

12. Javascript SEO
Leicester Digital
Test 1 - Page with no JS-made changes…
We’ve made no changes to this page using JS before submitting this page to fetch & render (‘F+R’) and
requesting indexing (‘I’) on the 20th December.

13. Javascript SEO
Leicester Digital
Test 2 - Page with JS-made change but not updated…
There is an update to the page title of this page made via JS, but this was done (and indexed)
before this test on the 20th December.

14. Javascript SEO
Leicester Digital
Test 3 - Page with first ever JS-made change…
We updated the page title and H1 via JS just before submitting this page on 27th December.

15. Javascript SEO
Leicester Digital
A couple of notes…
Rendering JavaScript is very time-consuming and resource heavy.

16. Javascript SEO
Leicester Digital
A couple of notes…
This does not happen on every crawl, and can happen 2/3 days later at times.

17. Javascript SEO
Leicester Digital
A couple of notes…
Rendering JavaScript pages is not as forgiving as rendering HTML pages, a
single error in your JavaScript code can cause Google to be unable to render
your page.

18. Javascript SEO
Leicester Digital
A couple of notes…
If the website is JavaScript-rich Google will not index the content until the
page has been rendered.
This can slow down the indexing process.

19. Javascript SEO
Leicester Digital
But the speed is improving…

20. Javascript SEO
Leicester Digital
Indexing speed…
https://strategiq.co/javascript-indexing-drag-race/
Our friends at
did a test

21. Javascript SEO
Leicester Digital
Indexing speed…
https://strategiq.co/javascript-indexing-drag-race/
• Create two identical new pages.
• Each containing 250-300 words of unique copy, 1x H1, 1x <h2> +
optimised title.
• Page #1 has the content in the source – visible on page load
• Page #2 has the content added via JavaScript – no presence in the source
(including title)
• Both pages published (but orphaned from main navigation) at the same
time
• Both pages fetched and rendered by Googlebot (and crawl requested) at
the same time.
• Monitor both keywords hourly and observe the time-difference between
the two.

22. Javascript SEO
Leicester Digital
Indexing speed…
JavaScript implemented content appears to be crawled & indexed in the
same time as content loaded in the source; assuming optimal conditions.
https://strategiq.co/javascript-indexing-drag-race/

23. How do you know if JavaScript
has changed the page?
Javascript SEO
Leicester Digital

24. Javascript SEO
Leicester Digital
The source code and the Dom…

25. Javascript SEO
Leicester Digital
Source code and the Dom are not the same…
Source Code (Pre-rendered)

26. Javascript SEO
Leicester Digital
Source code and the Dom are not the same…
Rendered Dom

27. So how do you find errors??
Javascript SEO
Leicester Digital

28. Javascript SEO
Leicester Digital
Chrome developer tools is your friend…
Check for Console Errors!

29. Javascript SEO
Leicester Digital
Chrome developer tools is your friend…
Check for load events for Google snapshot

30. How do I see my website
through Google’s eyes?
Javascript SEO
Leicester Digital

31. What we thought would
work
Javascript SEO
Leicester Digital

32. Javascript SEO
Leicester Digital
Search Console fetch and render…
Does not show the rendered
source code, but does show the
rendered screenshot

33. Javascript SEO
Leicester Digital
Google’s cache…
Google’s cached version of the
page will not show the
rendered page

34. What actually works
Javascript SEO
Leicester Digital

35. Javascript SEO
Leicester Digital
Google Rich Results Testing…
https://search.google.com/test/rich-results

36. Javascript SEO
Leicester Digital
Google Rich Results Testing…
https://search.google.com/test/rich-results

37. Javascript SEO
Leicester Digital
Chrome 41…
http://goo.gl/hWrwrz

38. Javascript SEO
Leicester Digital
For the developers out there…
https://caniuse.com/#compare=chrome+41,chrome+66

39. Why would I make changes?
Javascript SEO
Leicester Digital

40. Javascript SEO
Leicester Digital
• Tricky CMS systems.
• Difficult development teams.
• Test SEO changes before rolling them out.
Why would I make changes…

41. So how can I make changes?
Javascript SEO
Leicester Digital

42. Javascript SEO
Leicester Digital
Google Tag Manager…

43. Javascript SEO
Leicester Digital
Google Tag Manager…

44. Javascript SEO
Leicester Digital
Free tool…
https://my.webshed.co/js-tool

45. Javascript SEO
Leicester Digital
Step 1 – add your pages…
https://my.webshed.co/js-tool

46. Javascript SEO
Leicester Digital
Step 2 – Get your code…
https://my.webshed.co/js-tool

47. Javascript SEO
Leicester Digital
Step 3 – Paste in Google Tag Manager…
https://my.webshed.co/js-tool

48. Javascript SEO
Leicester Digital
Some other great resources
http://www.stateofdigital.com/javascript-seo-the-definitive-resource-list/
https://www.elephate.com/blog/ultimate-guide-javascript-seo/
https://thewebshed.co/weve-learnt-far-using-javascript-seo/
https://www.searchviu.com/en/javascript-seo-experiments-google-tag-manager/
https://groups.google.com/forum/#!forum/js-sites-wg

49. Javascript SEO
Leicester Digital
theWebShed
The Onsite Optimiser is theWebShed’s CMS solution for Javascript SEO
Special Offers for BrightonSEO
(https://thewebshed.co/brighton-seo/)

50. Javascript SEO
Leicester Digital
kieran@thewebshed.co
https://thewebshed.co
Any Questions?
Twitter: kieranheadley
LinkedIn: kieranheadley