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.
@badams
JavaScript & SEO
What You Need To Know
Barry Adams
#SMXParis
@badams
How Search EnginesWork
@badams
Web Search Engines
Crawler Indexer Ranker
@badams
@badams
1. Crawler (Googlebot)
Crawler Indexer Ranker
@badams
Web Crawler (Googlebot)
• Spiders the web;
➢ Starts with list of pages from previous crawls and XML sitemaps
• Ext...
@badams
@badams
URL Importance
More important URLs are crawled more often
@badams
HTML Parser
@badams
2. Indexer (Caffeine)
Crawler Indexer Ranker
@badams
Indexer (Caffeine)
• Analyses content
• Analyses links
• Analyses webpage layout
• Can be controlled (to an extent...
@badams
Two-Stage Indexing
Crawler
Indexer
Ranker
1
2
@badams
1st Stage: HTML Source
@badams
2nd Stage:Web Rendering Service
https://developers.google.com/search/docs/guides/rendering
Chrome 41
@badams
PageRanker
@badams
@badams
3. Ranker (Query Engine)
Crawler Indexer Ranker
@badams
Ranker (Query Engine)
• Interprets search intent
• Retrieves relevant pages
• Ranks pages based on;
➢ Content rele...
@badams
JavaScript
@badams
Two Types of JS*
1. JavaScript that enhances HTML and CSS;
➢ Adds functionality, improves user experience
➢ Little...
@badams
Client-side JavaScript
Runs the code in the browser after the page is sent from the server
@badams
JavaScript & Crawling
@badams
JavaScript & Crawling
No Hyperlinks!
@badams
Google Search Console: Fetch as Google
@badams
Crawler doesn’t see any links
Crawler
Indexer
Ranker
1
2
@badams
First-pass Indexer can’t do anything
Crawler Ranker
1
2
Indexer
@badams
Web Rendering Service indexes the page
Crawler Ranker
1
2
Indexer
@badams
Links are sent back to the Crawler
Crawler Ranker
1
2
Indexer
@badams
JavaScript & Indexing
https://developers.google.com/search/docs/guides/rendering
@badams
Chrome 41 vs Chrome 66
https://caniuse.com/
@badams
Fetch & Render
@badams
Computed DOM
Your browser’s version
@badams
Computed DOM – Chrome 41
https://search.google.com/test/rich-results
@badams
HTML Source vs Computed DOM
https://www.diffchecker.com/
@badams
Sitebulb
https://sitebulb.com/
@aleyda
@badams
Two-Stage Indexing
?
1
2
Delay?
1
2
HTML Source
Computed DOM
@badams
Rendering is deferred
https://www.youtube.com/watch?v=PFwUbgvpdaQ
@badams
PageRanker & URL Importance
@badams
@badams https://goralewicz.com/blog/javascript-seo-experiment/
@badams https://moz.com/blog/search-engines-ready-for-javascript-crawling
@badams
JavaScript & Ranking
• PageRanker runs periodically (not real-time)
• Incomplete link graph = incomplete view of a...
@badams
Fixing JavaScript
@badams
JavaScript On/Off
@badams
Progressive Enhancement
@badams
Progressive Enhancement
@badams
Server-Side Rendering
https://medium.com/walmartlabs/the-benefits-of-server-
side-rendering-over-client-side-rende...
@badams
Server-Side Rendering Solutions
• Prerender.io
https://prerender.io
• Universal
https://angular.io/guide/universal...
@badams
Dynamic Rendering
@badams
SSR
@badams
Log File Analysis & JavaScript
@badams
Log File Analysis & JavaScript
• Find pages that are rarely/never crawled;
➢ Improve internal linking with plain <...
@badams
Summarised…
@badams
JavaScript & SEO
• Client-side JavaScript = extra work for Google;
➢ Slower crawling
➢ Delayed Indexing
• Optimal ...
@badams http://www.stateofdigital.com/javascript-seo-the-definitive-resource-list/
@badams
Barry Adams
➢ Doing SEO since 1998
➢ Specialist in Technical SEO & News SEO
➢ Co-Chief Editor at State of Digital
...
@badams
Fin.
Upcoming SlideShare
Loading in …5
×

JavaScript & SEO - What You Need To Know #SMXParis

2,065 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.

×