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 - What You Need To Know #SMXParis

1,692 views

Published on

Slides from my talk at SMX Paris in June 2018 about JavaScript & SEO: what the problems are, how to identify them, and what you can do to fix your JavaScript issues for optimally crawlable & indexable websites.

Published in: Internet

JavaScript & SEO - What You Need To Know #SMXParis

  1. 1. @badams JavaScript & SEO What You Need To Know Barry Adams #SMXParis
  2. 2. @badams How Search EnginesWork
  3. 3. @badams Web Search Engines Crawler Indexer Ranker
  4. 4. @badams
  5. 5. @badams 1. Crawler (Googlebot) Crawler Indexer Ranker
  6. 6. @badams Web Crawler (Googlebot) • Spiders the web; ➢ Starts with list of pages from previous crawls and XML sitemaps • Extracts hyperlinks and adds to crawl queue • Retrieves new and changed content • Access can be restricted with robots.txt
  7. 7. @badams
  8. 8. @badams URL Importance More important URLs are crawled more often
  9. 9. @badams HTML Parser
  10. 10. @badams 2. Indexer (Caffeine) Crawler Indexer Ranker
  11. 11. @badams Indexer (Caffeine) • Analyses content • Analyses links • Analyses webpage layout • Can be controlled (to an extent) with robots meta tags
  12. 12. @badams Two-Stage Indexing Crawler Indexer Ranker 1 2
  13. 13. @badams 1st Stage: HTML Source
  14. 14. @badams 2nd Stage:Web Rendering Service https://developers.google.com/search/docs/guides/rendering Chrome 41
  15. 15. @badams PageRanker
  16. 16. @badams
  17. 17. @badams 3. Ranker (Query Engine) Crawler Indexer Ranker
  18. 18. @badams Ranker (Query Engine) • Interprets search intent • Retrieves relevant pages • Ranks pages based on; ➢ Content relevance ➢ Authority signals ➢ Freshness
  19. 19. @badams JavaScript
  20. 20. @badams Two Types of JS* 1. JavaScript that enhances HTML and CSS; ➢ Adds functionality, improves user experience ➢ Little to no impact on SEO 2. JavaScript that replaces HTML and CSS; ➢ Turns webpages in to web apps ➢ Destructive for SEO *According to me
  21. 21. @badams Client-side JavaScript Runs the code in the browser after the page is sent from the server
  22. 22. @badams JavaScript & Crawling
  23. 23. @badams JavaScript & Crawling No Hyperlinks!
  24. 24. @badams Google Search Console: Fetch as Google
  25. 25. @badams Crawler doesn’t see any links Crawler Indexer Ranker 1 2
  26. 26. @badams First-pass Indexer can’t do anything Crawler Ranker 1 2 Indexer
  27. 27. @badams Web Rendering Service indexes the page Crawler Ranker 1 2 Indexer
  28. 28. @badams Links are sent back to the Crawler Crawler Ranker 1 2 Indexer
  29. 29. @badams JavaScript & Indexing https://developers.google.com/search/docs/guides/rendering
  30. 30. @badams Chrome 41 vs Chrome 66 https://caniuse.com/
  31. 31. @badams Fetch & Render
  32. 32. @badams Computed DOM Your browser’s version
  33. 33. @badams Computed DOM – Chrome 41 https://search.google.com/test/rich-results
  34. 34. @badams HTML Source vs Computed DOM https://www.diffchecker.com/
  35. 35. @badams Sitebulb https://sitebulb.com/ @aleyda
  36. 36. @badams Two-Stage Indexing ? 1 2 Delay? 1 2 HTML Source Computed DOM
  37. 37. @badams Rendering is deferred https://www.youtube.com/watch?v=PFwUbgvpdaQ
  38. 38. @badams PageRanker & URL Importance
  39. 39. @badams
  40. 40. @badams https://goralewicz.com/blog/javascript-seo-experiment/
  41. 41. @badams https://moz.com/blog/search-engines-ready-for-javascript-crawling
  42. 42. @badams JavaScript & Ranking • PageRanker runs periodically (not real-time) • Incomplete link graph = incomplete view of a page’s value • JavaScript-powered websites don’t always rank well
  43. 43. @badams Fixing JavaScript
  44. 44. @badams JavaScript On/Off
  45. 45. @badams Progressive Enhancement
  46. 46. @badams Progressive Enhancement
  47. 47. @badams Server-Side Rendering https://medium.com/walmartlabs/the-benefits-of-server- side-rendering-over-client-side-rendering-5d07ff2cefe8
  48. 48. @badams Server-Side Rendering Solutions • Prerender.io https://prerender.io • Universal https://angular.io/guide/universal • Headless Chrome https://developers.google.com/web/tools/puppeteer • Rendertron https://github.com/GoogleChrome/rendertron
  49. 49. @badams Dynamic Rendering
  50. 50. @badams SSR
  51. 51. @badams Log File Analysis & JavaScript
  52. 52. @badams Log File Analysis & JavaScript • Find pages that are rarely/never crawled; ➢ Improve internal linking with plain <a href> links • Compare URLs crawled by Googlebot vs Bingbot; ➢ Bingbot doesn’t render JavaScript (much)
  53. 53. @badams Summarised…
  54. 54. @badams JavaScript & SEO • Client-side JavaScript = extra work for Google; ➢ Slower crawling ➢ Delayed Indexing • Optimal Scenario; ➢ Main content & crawlable links in HTML source ➢ Include rel=canonical & rel=amphtml in HTML source • JavaScript should enhance a page’s functionality -not replace it!
  55. 55. @badams http://www.stateofdigital.com/javascript-seo-the-definitive-resource-list/
  56. 56. @badams Barry Adams ➢ Doing SEO since 1998 ➢ Specialist in Technical SEO & News SEO ➢ Co-Chief Editor at State of Digital ➢ Columnist for Search Engine Land
  57. 57. @badams Fin.

×