Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript SEO - Leicester Digital May 2018

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.

  • Be the first to comment

Javascript SEO - Leicester Digital May 2018

  1. 1. When Google looks at your website, what does it see? Kieran Headley theWebShed Javascript SEO Leicester Digital
  2. 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. 3. Javascript SEO Leicester Digital The Google process… Crawl Googlebot Index Caffeine Query Search
  4. 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. 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. 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. 7. Javascript SEO Leicester Digital There is more than one Googlebot
  8. 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. 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. 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. 11. Javascript SEO Leicester Digital So we did some tests…
  12. 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. 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. 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. 15. Javascript SEO Leicester Digital A couple of notes… Rendering JavaScript is very time-consuming and resource heavy.
  16. 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. 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. 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. 19. Javascript SEO Leicester Digital But the speed is improving…
  20. 20. Javascript SEO Leicester Digital Indexing speed… https://strategiq.co/javascript-indexing-drag-race/ Our friends at did a test
  21. 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. 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. 23. How do you know if JavaScript has changed the page? Javascript SEO Leicester Digital
  24. 24. Javascript SEO Leicester Digital The source code and the Dom…
  25. 25. Javascript SEO Leicester Digital Source code and the Dom are not the same… Source Code (Pre-rendered)
  26. 26. Javascript SEO Leicester Digital Source code and the Dom are not the same… Rendered Dom
  27. 27. So how do you find errors?? Javascript SEO Leicester Digital
  28. 28. Javascript SEO Leicester Digital Chrome developer tools is your friend… Check for Console Errors!
  29. 29. Javascript SEO Leicester Digital Chrome developer tools is your friend… Check for load events for Google snapshot
  30. 30. How do I see my website through Google’s eyes? Javascript SEO Leicester Digital
  31. 31. What we thought would work Javascript SEO Leicester Digital
  32. 32. Javascript SEO Leicester Digital Search Console fetch and render… Does not show the rendered source code, but does show the rendered screenshot
  33. 33. Javascript SEO Leicester Digital Google’s cache… Google’s cached version of the page will not show the rendered page
  34. 34. What actually works Javascript SEO Leicester Digital
  35. 35. Javascript SEO Leicester Digital Google Rich Results Testing… https://search.google.com/test/rich-results
  36. 36. Javascript SEO Leicester Digital Google Rich Results Testing… https://search.google.com/test/rich-results
  37. 37. Javascript SEO Leicester Digital Chrome 41… http://goo.gl/hWrwrz
  38. 38. Javascript SEO Leicester Digital For the developers out there… https://caniuse.com/#compare=chrome+41,chrome+66
  39. 39. Why would I make changes? Javascript SEO Leicester Digital
  40. 40. Javascript SEO Leicester Digital • Tricky CMS systems. • Difficult development teams. • Test SEO changes before rolling them out. Why would I make changes…
  41. 41. So how can I make changes? Javascript SEO Leicester Digital
  42. 42. Javascript SEO Leicester Digital Google Tag Manager…
  43. 43. Javascript SEO Leicester Digital Google Tag Manager…
  44. 44. Javascript SEO Leicester Digital Free tool… https://my.webshed.co/js-tool
  45. 45. Javascript SEO Leicester Digital Step 1 – add your pages… https://my.webshed.co/js-tool
  46. 46. Javascript SEO Leicester Digital Step 2 – Get your code… https://my.webshed.co/js-tool
  47. 47. Javascript SEO Leicester Digital Step 3 – Paste in Google Tag Manager… https://my.webshed.co/js-tool
  48. 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. 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. 50. Javascript SEO Leicester Digital kieran@thewebshed.co https://thewebshed.co Any Questions? Twitter: kieranheadley LinkedIn: kieranheadley

×