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.

SMX Munich 2018 - Current State of JavaScript SEO

1,929 views

Published on

The current state of JavaScript SEO. JS crawling and indexing across different frameworks and Search Engines.

Published in: Marketing

SMX Munich 2018 - Current State of JavaScript SEO

  1. 1. Current State of JavaScript: Chaos is the New Normal
  2. 2. Let’s assume you are about to launch a new website
  3. 3. ? ? ? ? ? ? ? THE QUESTION
  4. 4. Which framework should I use?
  5. 5. I get asked this too often. Please don’t do that!
  6. 6. There is only 1 framework that is good for SEO! 1 framework
  7. 7. SEOs and Googlers hate him! He knows the perfect setup for JS websites Findoutsoon!
  8. 8. With exponential growth of JavaScript frameworks...
  9. 9. With exponential growth of JavaScript frameworks...
  10. 10. artoszCoin barti How to be cool in 2018
  11. 11. The Big Three Source: https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/
  12. 12. Notable frameworks
  13. 13. Rest of the pack
  14. 14. Are they OK for SEO?
  15. 15. ? ? ? ?? ?? ?? ? ? ? ? ? ?? ?? ? ?? ? ??? ? ? ? ? ? ? Let’s hear framework creators talk about JavaScript & SEO
  16. 16. ...if you care about SEO, you still need to have server-rendered content. Jeff Whelpley Angular U conference, June 22-25, 2015, Hyatt Regency, San Francisco Airport “Angular 2 Server Rendering” ele.ph/angularU
  17. 17. ...we are generally able to render and understand your web pages like modern browsers.
  18. 18. Chaos?
  19. 19. Indexing vs. Ranking
  20. 20. Can you rank with a JS website?
  21. 21. As Googlers would say “there are factors at play here”
  22. 22. client rendered JS
  23. 23. Let’s search for Hulu’s exclusive shows.
  24. 24. Ctrl+C
  25. 25. Ctrl+V
  26. 26. Everyone hates him for telling the truth! Here’s why you’re wasting your time on client-rendered JS websites… Findoutnow!
  27. 27. SEO – where the giants fight!
  28. 28. YouTube vs. Vimeo
  29. 29. Why is their visibility declining?
  30. 30. Vimeo’s homepage without JS!
  31. 31. I’m about to reveal the YouTube secret no one ever told you.
  32. 32. YouTube is a client-rendered JS website…
  33. 33. YouTube with JS disabled
  34. 34. …and they are prerendering for Googlebot
  35. 35. Why would YouTube prerender for Googlebot? Doesn’t Google render JS just fine?
  36. 36. SEO – it’s where the giants fight
  37. 37. Rewriting JavaScript
  38. 38. What did they need React for? Language switcher Buttons on the bottom of the page Client side login library
  39. 39. ~300 lines of code written ~200 kB removed
  40. 40. 50% performance improvement
  41. 41. Key problems with JavaScript
  42. 42. Where JavaScript lives? Real world problems. HARDWARE NETWORK
  43. 43. Where JavaScript lives? Real world problems.
  44. 44. How many of you own ?
  45. 45. ~200 KB to process 4 seconds 0.065 seconds
  46. 46. JavaScript vs. Crawler budget (crawl demand)
  47. 47. JavaScript vs. Crawler budget (crawl demand) Oh no! ele.ph/budget
  48. 48. JavaScript vs. Crawler budget (crawl demand) Oh no! (…) Also, crawling & indexing is currently a bit slower than static HTML (...) ele.ph/crawldemand
  49. 49. Crawling and indexing JavaScript is not a 0/1 thing
  50. 50. GSC fetch URL Indexed? Content Indexed? Test URL External Ajax callInline
  51. 51. JavaScript dozens of different frameworks their different configurations transpiling inline vs. external
  52. 52. On top of that, there are hundreds of factors affecting crawling and indexing
  53. 53. ?How about Search Engines other than
  54. 54. Let’s start embracing chaos
  55. 55. Search Engines
  56. 56. SEO
  57. 57. statements reality guy @ Pubcon our experiment
  58. 58. THE BING THING Fabrice Canel of Bing said that Bing processes JS. True story! Patrick Stox @ DTD Conference 2018
  59. 59. Rich media cautions don’t bury links to content inside JavaScript
  60. 60. Rich media cautions Graceful degradation enable a clean down- level experience so crawlers can see your content
  61. 61. Rich media cautions Graceful degradation Down-level experience enhances discoverability avoid housing content inside Flash or JavaScript – these block crawlers form finding the content
  62. 62. It can process JS vs. It DOES process JS
  63. 63. Proof
  64. 64. 1. Go to Angular.io
  65. 65. 2. Copy any text from the website CTRL+C
  66. 66. 3. Try to find it in Bing.com CTRL+V 4. Find everything BUT the angular.io website
  67. 67. Or search for any content from jsseo.expert
  68. 68. Google vs. Bing
  69. 69. Thanks, Dan Petrovic!
  70. 70. ele.ph/beyondgoogle
  71. 71. 63.4% 22.8% 11.7% 1.3% 0.8% Google Bing Yahoo! Ask AOL Search Engine market share Source: https://www.statista.com/statistics/267161/market-share-of-search-engines-in-the-united-states/
  72. 72. 83.5% 11.1% 3.8% 0.8% 0.6% Google Bing Yahoo! MSN DuckDuckGo Search Engine market share Source: https://www.statista.com/statistics/280269/market-share-held-by-search-engines-in-the-united-kingdom/
  73. 73. 94.5% 4.2% 1.0% 0.1% 0.1% Google Bing Yahoo! T-Online Ask.com Search Engine market share Source: https://www.statista.com/statistics/445002/market-shares-leading-search-engines-germany/
  74. 74. ele.ph/beyondgoogle
  75. 75. Let’s take a closer look at Google
  76. 76. JavaScript is REALLY easy to break
  77. 77. It’s all very shaky, based on duct tape rather than…
  78. 78. Let’s start from Angular.io and their GitHub issue
  79. 79. https://angular.io/guide/language-service https://angular.io/guide/security https://angular.io/guide/architecture https://angular.io/api/animations/group https://angular.io/guide/quickstart
  80. 80. https://angular.io/guide/language-service https://angular.io/guide/security https://angular.io/guide/architecture https://angular.io/api/animations/group https://angular.io/guide/quickstart https://angular.io https://angular.io/events https://angular.io/api https://angular.io/resources https://angular.io/about?group=Angular
  81. 81. https://angular.io/guide/language-service https://angular.io/guide/security https://angular.io/guide/architecture https://angular.io/api/animations/group https://angular.io/guide/quickstart https://angular.io https://angular.io/events https://angular.io/api https://angular.io/resources https://angular.io/about?group=Angular url / / url /
  82. 82. UPSIDE DOWN The only thing that pages (…) have in common is the number of path segments in the url. Igor Minar
  83. 83. SEO Visibility
  84. 84. http://yourdomain.com/category/shoes/ url / / url / How much would that cost you? http://yourdomain.com/category/
  85. 85. Prerender.io – is partial indexing in Google possible?
  86. 86. Visibility
  87. 87. vs. Developers SEOs vs. Search Engines vs. Framework’s creators
  88. 88. Developers are confused af…
  89. 89. …We’ve created what will be remembered as the world’s most confusing JavaScript survey ever.
  90. 90. …it contained only 1 question…
  91. 91. …but proved to be the most difficult question you can ask your developer.
  92. 92. ARE YOU READY TO HEAR IT? ? ?
  93. 93. Can client-side rendered JavaScript websites rank high in Google?
  94. 94. Node.js developers group 35 7
  95. 95. ReactJS group 6 21
  96. 96. Angular2+ group 4 9
  97. 97. JavaScript group 2 34
  98. 98. TAKEAWAYS!!! Google is too close to their technology to see its flaws (they are still #1 in JS rendering tho). Developers are confused af… SEO is the only way to look at the Big Picture. Facebook surveys are useless ☺ Eat vegetables!
  99. 99. Solution? SEO team
  100. 100. Solution? SEO team
  101. 101. Can you rank well with a Client Rendered JavaScript Website?
  102. 102. Quick check
  103. 103. JavaScript Enabled
  104. 104. JavaScript Disabled
  105. 105. React Native
  106. 106. How about their rankings?
  107. 107. .com
  108. 108. #1 for
  109. 109. #1 for
  110. 110. Is there hope for client-rendered JS websites?
  111. 111. Well…
  112. 112. .No
  113. 113. Ranking with a CSR JavaScript website Ranking without it
  114. 114. Google Flights ele.ph/flights
  115. 115. Google Flights ele.ph/flights
  116. 116. Wrapping up
  117. 117. How can we summarize chaos?
  118. 118. Life is meaningless. What’s the point? Death is inevitable. If can’t find you, do you even exist?
  119. 119. The REAL wrap up JS
  120. 120. The REAL wrap up JS 1 JS can kill crawler budget
  121. 121. The REAL wrap up JS 1 JS can kill crawler budget 2 JS websites have ranking problems
  122. 122. Ranking well with CSR JavaScript websites is very hard if not impossible.
  123. 123. Going back to the original question…
  124. 124. , really?
  125. 125. Which framework should I use?
  126. 126. 2 yet …one that is Server Side Rendered?
  127. 127. We are still looking for a pioneer!
  128. 128. Bartosz@Goralewicz.com @bart_Goralewicz

×