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

2,350 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
  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I can advise you this service - ⇒ www.WritePaper.info ⇐ Bought essay here. No problem.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You can get paid up to $25 per hour to be on Facebook? ●●● http://t.cn/AieXipTS
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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.

×