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.

SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the Hype When the Dust Finally Settles

1,405 views

Published on

Thanks to his numerous experiments and viral articles, Elephate’s Bartosz Góralewicz has become an authoritative and trusted voice when it comes to JavaScript SEO. At SearchLove Boston, Bartosz is ready to unveil never-before-seen experiments and research to reveal whether or not you can rank with a JS website, if JavaScript crawling and indexing is as good as Google claims, and more. This eye-opening session will change your perception on the state of JavaScript today.

  • Be the first to comment

SearchLove Boston 2018 - Bartosz Goralewicz - JavaScript: Looking Past the Hype When the Dust Finally Settles

  1. 1. JavaScript SEO: Looking Past the Hype When the Dust Finally Settles.
  2. 2. problems and solutions case studies best practices JavaScript SEO
  3. 3. With the great power of JavaScript frameworks, comes great responsibility.
  4. 4. It seems that most webmasters aren’t ready to handle it yet.
  5. 5. 97.6%* of JavaScript powered websites have no clue about JavaScript SEO *not based on any calculations.
  6. 6. Let’s go back in time to 2016 The giant panda is no longer endangered North Korea says it tested a nuclear warhead Britain votes to leave the European Union BREXIT
  7. 7. Let’s go back in time to 2016 Donald Trump winspanda is no longer ndangered Hulu is losing 56% of their visibility
  8. 8. Statement I am sick and tired of Hulu as an example but it’s hard to find another website this bad. If you work @ Hulu, please contact me, I’ll help you guys out for free! 
  9. 9. Hulu.com
  10. 10. Hulu.com
  11. 11. Hulu.com
  12. 12. Hulu.com
  13. 13. Ctrl+C
  14. 14. Ctrl+V
  15. 15. Google mobile-friendly test g.co/MobileFriendly
  16. 16. Google mobile-friendly test ele.ph/hulu-test
  17. 17. Netflix vs. Hulu – JavaScript SEO battlefield
  18. 18. The Source Code vs. DOM Source code DOM
  19. 19. Source Code (before JavaScript): Rendered website: Disqus - The #1 way to build your audience Disqus - The #1 way to build an audience on your website
  20. 20. How about frameworks’ websites?
  21. 21. noindex meta tag?
  22. 22. 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
  23. 23. 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
  24. 24. 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 /
  25. 25. UPSIDE DOWN The only thing [those] pages (…) have in common is the number of path segments in the url. Igor Minar
  26. 26. http://yourdomain.com/category/shoes/ url / / url / How much would that cost you? http://yourdomain.com/category/
  27. 27. View source: <title>Meteor</title> Rendered HTML: <title>Build Apps with JavaScript | Meteor</title>
  28. 28. Top Publishers?
  29. 29. How about websites that specialize in prerendering?
  30. 30. Prerender.io – is partial indexing in Google possible?
  31. 31. Cool San Francisco based startups?
  32. 32. 1. Go to delivery.com & copy any content from their homepage
  33. 33. 2. Find everything BUT their homepage.
  34. 34. World’s biggest eCommerce stores?
  35. 35. Indexing JavaScript seems to be the problem of every possible niche…
  36. 36. Solutions How is Google handling Client- side JavaScript?
  37. 37. Google Flights ele.ph/fl
  38. 38. ele.ph/fl Google Flights
  39. 39. Time for a very bad joke.
  40. 40. You have to enable JavaScript to download flash A JavaScript joke.
  41. 41. (this is how I found Adobe’s page) Even more examples? Search for: "please enable javascript in your browser”
  42. 42. Why is this happening to them?
  43. 43. JavaScript is not a geeky SEO option anymore!
  44. 44. S**t you have to know about JavaScript SEO
  45. 45. THE REAL COST of JavaScript
  46. 46. JavaScript vs. HTML
  47. 47. HTML JS
  48. 48. JavaScript HTML
  49. 49. Enter JavaScript 1 100
  50. 50. ~200 KB to process 4 seconds 0.065 seconds
  51. 51. How about ~400KB?
  52. 52. Indexing of modern JavaScript websites is a challenge. John Mueller
  53. 53. USA TODAY Case Study
  54. 54. Go to Chrome Dev Tools  Performance CMD + OPT + I CTRL + ALT + I
  55. 55. 11 seconds
  56. 56. “The European Union Experience”
  57. 57. 0.5 second
  58. 58. USA Today without JavaScript
  59. 59. 1.3 second
  60. 60. JavaScript “lives” in your CPU
  61. 61. accuweather.com
  62. 62. SECONDS TO FIRST MEANINGFUL PAINT (HIGH END CPU)
  63. 63. 6sec
  64. 64. SECONDS TO FIRST MEANINGFUL PAINT (Moto G4’s CPU)
  65. 65. 13 SECOND DIFFERENCE BETWEEN A HIGH END CPU AND A SLOW CPU (!)
  66. 66. CPUs 1-on-1
  67. 67. Source: https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
  68. 68. Why is JavaScript so expensive?
  69. 69. JavaScript SEO
  70. 70. JavaScript Frameworks grow exponentially
  71. 71. artoszCoin Barti How to be cool in 2018
  72. 72. The Big Three Source: https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/
  73. 73. Notable frameworks
  74. 74. Rest of the pack
  75. 75. JS frameworks vs. SEO
  76. 76. JavaScript dozens of different frameworks their different configurations transpiling inline vs. external
  77. 77. GSC fetch URL Indexed? Content Indexed? Test URL External Ajax callInline
  78. 78. GSC fetch URL Indexed? Content Indexed? Test URL Inline External
  79. 79. GSC fetch URL Indexed? Content Indexed? Test URL Inline External
  80. 80. JavaScript SEO best practices
  81. 81. A look behind the curtain
  82. 82. Source: Google I/O 2018
  83. 83. A quick guide to JavaScript rendering
  84. 84. Client Side rendering Source: Google I/O 2018
  85. 85. Server-side rendering Source: Google I/O 2018
  86. 86. 2 yet Frameworks vs. Server Side Rendering
  87. 87. Hybrid Rendering* *Google’s Long-Term recommendation Source: Google I/O 2018
  88. 88. Google’s policy change?
  89. 89. Dynamic Rendering (AKA prerendering)
  90. 90. Is prerendering a silver bullet?
  91. 91. Prerendering/Dynamic Rendering issues 1. Computing power – A LOT of servers 2. Prone to issues (often load related) 3. Downtime = ranking loss 4. More complex and difficult from an SEO perspective (crawls, 2 sets of code, etc.) 5. Requires a lot of SEO knowledge 6. Requires a great dev team to make it run smoothly
  92. 92. How about “JavaScript hacks”?
  93. 93. Quick check
  94. 94. JavaScript Enabled
  95. 95. Disabled JavaScript
  96. 96. React Native
  97. 97. How about their rankings?
  98. 98. .com
  99. 99. #1 for
  100. 100. #1 for
  101. 101. Troubleshooting JavaScript indexing
  102. 102. Google Search Console – fetch and render
  103. 103. Google Search Console – fetch and render
  104. 104. Google mobile-friendly test g.co/MobileFriendly
  105. 105. Google mobile-friendly test ele.ph/hulu-test
  106. 106. Google mobile-friendly test ele.ph/hulu-test COPY THIS CODE
  107. 107. Diff Checker
  108. 108. Google mobile-friendly test
  109. 109. Google mobile- friendly test
  110. 110. What is partial indexing?
  111. 111. And this effectively means that if your site is using a heavy amount of client-side JavaScript for rendering, you could be tripped up at times when your content is being indexed due to the nature of this two phase indexing process. …it’s possible some details might be missed. Tom Greenaway
  112. 112. 2 waves WAVE 1 WAVE 2 • JS dependent content only • HTML content • Canonicals • Meta data • HTTP Codes
  113. 113. Partial Indexing
  114. 114. Mobile Googlebot Chrome Screenshot
  115. 115. Mobile Googlebot Chrome Screenshot
  116. 116. Mobile Googlebot Chrome Screenshot
  117. 117. Mobile Googlebot Chrome Screenshot
  118. 118. First Mobile First SEO problems* *spoiler alert – they are often JavaScript related
  119. 119. Chrome 41 check ele.ph/chrome41check
  120. 120. Chrome 41 - desktop Chrome 41 - mobile
  121. 121. Mobile Chrome 41 Desktop Chrome 41
  122. 122. Homework
  123. 123. 1. The Source Code vs. DOM Source code DOM
  124. 124. GSC fetch URL Indexed? Content Indexed? Test URL InlineInlineV2 Inline 2. Crawling - server log
  125. 125. Make sure your content is indexed ctrl+c ctrl+v hulu.com/casual
  126. 126. Under the right URL https://angular.io/features
  127. 127. To Do: 1. Diff Check is your new best friend 2. Experiment and make sure to monitor your server logs 3. Compare your setup with Chrome 41 4. Make sure that your content is indexed in Google 5. Under the right URL
  128. 128. Excited about JavaScript SEO already? ele.ph/learn-js-seo
  129. 129. Can’t you just ask your dev team to sort this out?
  130. 130. Developers are confused af…
  131. 131. …but proved to be the most difficult question you can ask your developer. …it contained only 1 question… …We’ve created what will be remembered as the world’s most confusing JavaScript survey ever.
  132. 132. Can client-side rendered JavaScript websites rank high in Google?
  133. 133. Node.js developers group 35 7
  134. 134. ReactJS group 6 21
  135. 135. Angular2+ group 4 9
  136. 136. JavaScript group 2 34
  137. 137. Is there hope for Client-side rendered JavaScript?
  138. 138. Let’s ask
  139. 139. Enabled
  140. 140. Disabled
  141. 141. Is there hope for Client-side rendered JavaScript?
  142. 142. JAVASCRIPT = THE FUTURE
  143. 143. Right now Google isn’t perfect with client rendered Single Page Apps. This means they will crawl and index all JavaScript pages even better and faster. According to Ilya Grigorik, this should happen sometime in 2018 (most likely). Google is working on a new WRS engine – most likely headless Chrome 59.
  144. 144. Word of advice
  145. 145. ele.ph/learn-js-seo Getting started with JavaScript SEO
  146. 146. rtosz@Goralewicz.com @bart_Goralewicz
  147. 147. Enabled
  148. 148. Disabled
  149. 149. Mobile-Friendly Tool – word of caution - timeouts
  150. 150. It loads OK in Chrome 41 though...
  151. 151. rtosz@Goralewicz.com @bart_Goralewicz

×