Inbound Marekting 2.0 - The Paradigm Shift in Marketing | Axon Garside
Javascript SEO - Leicester Digital May 2018
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…
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
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
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.
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.
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
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
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