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 Tips & Tricks 2018 - SMX East

863 views

Published on

JavaScript SEO - current status and best practices for JS SEO in 2018.

Published in: Technology
  • Be the first to comment

JavaScript Tips & Tricks 2018 - SMX East

  1. 1. #SMX #XXA @BartoszGoralewicz With Bartosz Goralewicz JavaScript SEOTips&Tricks
  2. 2. #SMX #XXA @BartoszGoralewicz Best Small SEO Agency Best SEO Campaign
  3. 3. #SMX #XXA @BartoszGoralewicz History of JavaScript
  4. 4. #SMX #XXA @BartoszGoralewicz The last time we checked, almost 70% of the websites we know about use JavaScript in some form or another. 2009 https://webmasters.googleblog.com/2009/10/proposal-for-making-ajax-crawlable.html
  5. 5. #SMX #XXA @BartoszGoralewicz We are pretty good in executing JavaScript. Matt Cutts 2014 ele.ph/js2014
  6. 6. #SMX #XXA @BartoszGoralewicz CSS&JS Your Block Don’t
  7. 7. #SMX #XXA @BartoszGoralewicz May 2014 „In 1998 when our servers were running inSusanWojcicki’sgarage,wedidn'treally have to worry about JavaScript or CSS. They weren’t used much, or, JavaScript was Used to make page elements... A lot has changed since then...” blink!
  8. 8. #SMX #XXA @BartoszGoralewicz „We decided to try to understand pages by executing JavaScript. HTML PHP CSS MySQL May 2014 It’s hard to do that at the scale of the current web, but we decided that it’s worth it. We have been gradually improving how we do this for some time...”
  9. 9. #SMX #XXA @BartoszGoralewicz May 2014 „... In the past few months, our indexing system has been rendering a substantial number of web pages more like an average user’s browser with JavaScript turned on."
  10. 10. #SMX #XXA @BartoszGoralewicz ele.ph/angularU Also…Regardless of what your developers say, Angular 2 always has to be server rendered… according to the Angular JS 2 community.
  11. 11. #SMX #XXA @BartoszGoralewicz ele.ph/angularU If you search for any competitive keyword terms, it’s always going to be server rendered sites. And the reason is because although Google does index client-side rendered HTML it’s not perfect yet and other search engines don’t do it as well. So if you care about SEO, you still need to have server-rendered content. Jeff Whelpley “Angular 2 Server Rendering” Angular U conference, June 22-25, 2015,
  12. 12. #SMX #XXA @BartoszGoralewicz 12 October 2015 - Eric Wu’s presentation about JavaScript @ Pubcon
  13. 13. #SMX #XXA @BartoszGoralewicz 2015 THE FIRST PIONEER ele.ph/ajax Eric Wu, the first SEO to notice JS as an SEO challenge.
  14. 14. #SMX #XXA @BartoszGoralewicz 14 October 2015 Deprecating AJAX crawling Scheme ele.ph/ajax
  15. 15. #SMX #XXA @BartoszGoralewicz … but I think Eric was too early to the game. The interest around the JavaScript SEO topic almost disappeared
  16. 16. #SMX #XXA @BartoszGoralewicz Let’s call this time: THE DARK AGES
  17. 17. #SMX #XXA @BartoszGoralewicz May 8th 2017 OUR JS SEO EXPERIMENT is presented for the 1st time v.2 GSC fetch URL indexed ? Content indexed ? Test URL
  18. 18. #SMX #XXA @BartoszGoralewicz Googleacknowledged the problem quickly and replied within a few days
  19. 19. #SMX #XXA @BartoszGoralewicz May 12th 2017 Google’s JS group
  20. 20. #SMX #XXA @BartoszGoralewicz 2017 JavaScript SEO Golden Age
  21. 21. #SMX #XXA @BartoszGoralewicz Fast forward to 2018
  22. 22. #SMX #XXA @BartoszGoralewicz JavaScript Hype
  23. 23. #SMX #XXA @BartoszGoralewicz May 2018 Google IO Deliver search-friendly JavaScript-powered websites (Google I/O ‚18) Google allows everyone to peak behind the curtain and explains the 2 waves of indexing.
  24. 24. #SMX #XXA @BartoszGoralewicz Where are we now with JS SEO?
  25. 25. #SMX #XXA @BartoszGoralewicz Almost all large websites deal pretty well with JavaScript SEO! IT IS 2018
  26. 26. #SMX #XXA @BartoszGoralewicz JavaScript madness
  27. 27. #SMX #XXA @BartoszGoralewicz
  28. 28. #SMX #XXA @BartoszGoralewicz
  29. 29. #SMX #XXA @BartoszGoralewicz Alibaba.com Yet Alibaba & AliExpress were one of the leaders regarding client side rendered JavaScript websites. Amazon’s biggest threat
  30. 30. #SMX #XXA @BartoszGoralewicz "I'm not a tech guy, I'm looking at theTECHNOLOGY with the eyes of my CUSTOMERS Normal People's Eye.” Aliababa’s founder Jack Ma Alibaba.com Amazon’s biggest threat
  31. 31. #SMX #XXA @BartoszGoralewicz
  32. 32. #SMX #XXA @BartoszGoralewicz Alibaba.com
  33. 33. #SMX #XXA @BartoszGoralewicz Aliexpress.com
  34. 34. #SMX #XXA @BartoszGoralewicz SEOs be like: JS complicated?
  35. 35. #SMX #XXA @BartoszGoralewicz Creative towards approach JS SEO
  36. 36. #SMX #XXA @BartoszGoralewicz Flipkart
  37. 37. #SMX #XXA @BartoszGoralewicz Flipkart With JavaScript turned OFF
  38. 38. #SMX #XXA @BartoszGoralewicz Myntra One of the biggest ecommerce stores in India #72 most popular website in India
  39. 39. #SMX #XXA @BartoszGoralewicz Myntra One of the biggest ecommerce stores in India #72 most popular website in India
  40. 40. #SMX #XXA @BartoszGoralewicz And Myntra.com is ranking like crazy* *However only for short tail keywords
  41. 41. #SMX #XXA @BartoszGoralewicz But it gets much easier once you start learning from the best. E.g. Google!
  42. 42. #SMX #XXA @BartoszGoralewicz
  43. 43. #SMX #XXA @BartoszGoralewicz
  44. 44. #SMX #XXA @BartoszGoralewicz April 2018 – the new version of Google Flights
  45. 45. #SMX #XXA @BartoszGoralewicz 20,000+ visibility down to 48 (!)
  46. 46. #SMX #XXA @BartoszGoralewicz Is it indexed ?
  47. 47. #SMX #XXA @BartoszGoralewicz Only 1 page indexed in Google
  48. 48. #SMX #XXA @BartoszGoralewicz Let’s analyze this complex issue
  49. 49. #SMX #XXA @BartoszGoralewicz Let’s analyze this complex issue
  50. 50. #SMX #XXA @BartoszGoralewicz
  51. 51. #SMX #XXA @BartoszGoralewicz
  52. 52. #SMX #XXA @BartoszGoralewicz Fun fact works fine in Chrome 41
  53. 53. #SMX #XXA @BartoszGoralewicz Fun fact You can also see the footer content with JavaScript disabled
  54. 54. #SMX #XXA @BartoszGoralewicz THE PROBLEM
  55. 55. #SMX #XXA @BartoszGoralewicz Angular conference 2015
  56. 56. #SMX #XXA @BartoszGoralewicz ele.ph/angularU If you search for any competitive keyword terms, it’s always going to be server rendered sites. And the reason is because although Google does index client-side rendered HTML it’s not perfect yet and other search engines don’t do it as well. So if you care about SEO, you still need to have server-rendered content. Jeff Whelpley “Angular 2 Server Rendering” Angular U conference, June 22-25, 2015,
  57. 57. #SMX #XXA @BartoszGoralewicz v.2 Not indexed
  58. 58. #SMX #XXA @BartoszGoralewicz HTML JS + = =
  59. 59. #SMX #XXA @BartoszGoralewicz This is exactly why we have 2 waves of JavaScript indexing
  60. 60. #SMX #XXA @BartoszGoralewicz
  61. 61. #SMX #XXA @BartoszGoralewicz Source: Google I/O 2018
  62. 62. #SMX #XXA @BartoszGoralewicz
  63. 63. #SMX #XXA @BartoszGoralewicz Isomorphic, universal, dynamic, hybrid, hydrating with JavaScript, etc. Latest nomenclature and solution to make JavaScript SEO friendly.
  64. 64. #SMX #XXA @BartoszGoralewicz Client Side Rendering
  65. 65. #SMX #XXA @BartoszGoralewicz Prerendering Aka Dynamic Rendering an elephant (Elephate) in the room
  66. 66. #SMX #XXA @BartoszGoralewicz prerendering (the 8th step will shock you) How works in 7 steps
  67. 67. #SMX #XXA @BartoszGoralewicz Prerendering
  68. 68. #SMX #XXA @BartoszGoralewicz
  69. 69. #SMX #XXA @BartoszGoralewicz prerender static JÄVASCRIPT HTML
  70. 70. #SMX #XXA @BartoszGoralewicz BLACK FRIDAY SCENARIO
  71. 71. #SMX #XXA @BartoszGoralewicz JÄVASCRIPT JÄVASCRIPTJÄVASCRIPTJÄVASCRIPTJÄVASCRIPT JÄVJÄVASCRIPTJÄVASCRIPTJÄVASCRIPTCRIPT JÄVASCRIPTJÄVASCRIPTJÄVASCRIPTJÄVASCRIPT
  72. 72. #SMX #XXA @BartoszGoralewicz
  73. 73. #SMX #XXA @BartoszGoralewicz
  74. 74. #SMX #XXA @BartoszGoralewicz What are your options?
  75. 75. #SMX #XXA @BartoszGoralewicz JÄVASCRIPT On-the-fly rendering Outdated HTML
  76. 76. #SMX #XXA @BartoszGoralewicz Serve stale/outdated HTML1. Serve JavaScript and let Google (try to) handle it 2. Prerender on the fly3.
  77. 77. #SMX #XXA @BartoszGoralewicz What if you HAVE TO do prerendering
  78. 78. #SMX #XXA @BartoszGoralewicz What if you HAVE TO do prerendering Plan your updates and deployments1. Make sure that your prerendering setup is efficient2. Remember that you need to crawl and optimize both HTML and JavaScript versions of your website 3.
  79. 79. #SMX #XXA @BartoszGoralewicz Most popular Prerendering solutions Chrome Headless/Phantom JS Chrome Headless Chrome Headless Prerender.io Puppeteer Rendertron Service/Free Free Free
  80. 80. #SMX #XXA @BartoszGoralewicz Failed prerendering case study
  81. 81. #SMX #XXA @BartoszGoralewicz The Source Code vs. DOM Source code DOM
  82. 82. #SMX #XXA @BartoszGoralewicz Source Code (before JavaScript): Disqus -The #1 way to build your audience Rendered website: (before JavaScript): Disqus -The #1 way to build an audience on your website
  83. 83. #SMX #XXA @BartoszGoralewicz Enter prerendering
  84. 84. #SMX #XXA @BartoszGoralewicz What went WRONG?
  85. 85. #SMX #XXA @BartoszGoralewicz <html> </head> <body> </body> </html> <head>
  86. 86. #SMX #XXA @BartoszGoralewicz (better)Alternatives to prerendering
  87. 87. #SMX #XXA @BartoszGoralewicz Server site rendering All of the rendering work is done by your servers. Google gets HTML. SEO = OK
  88. 88. #SMX #XXA @BartoszGoralewicz Alternatives to prerendering
  89. 89. #SMX #XXA @BartoszGoralewicz Server Side Rendering You push JavaScript to bots and users and they need to render JavaScript to HTML to see the content
  90. 90. #SMX #XXA @BartoszGoralewicz https://www.searchenginejournal.com/javascript-seo- like-peanut-butter-and-jelly-thanks-to-isomorphic- js/183337/ https://www.searchenginejournal.com/javascript-seo-like-peanut- butter-and-jelly-thanks-to-isomorphic-js/183337/
  91. 91. #SMX #XXA @BartoszGoralewicz HYBRID rendering Pre-rendered HTML is sent to users and the search engine. Then, the server adds JavaScript on top of that.
  92. 92. #SMX #XXA @BartoszGoralewicz Hybrid Rendering
  93. 93. #SMX #XXA @BartoszGoralewicz Which brands use HYBRID rendering?
  94. 94. #SMX #XXA @BartoszGoralewicz All the HTML files are built with data BEFORE they are uploaded to a server Static Sites Source: https://www.youtube.com/watch?v=3jeznGJHenI GatsbyJS NextJS
  95. 95. #SMX #XXA @BartoszGoralewicz Pros of Source: https://www.youtube.com/watch?v=3jeznGJHenI static sites 1.Very fast (even during traffic surge) 2. Increased security 3.Version control 4. Cheap to host
  96. 96. #SMX #XXA @BartoszGoralewicz Limitations
  97. 97. #SMX #XXA @BartoszGoralewicz
  98. 98. #SMX #XXA @BartoszGoralewicz What if we just keep CSR JavaScript ? *Client Side Rendered *
  99. 99. #SMX #XXA @BartoszGoralewicz
  100. 100. #SMX #XXA @BartoszGoralewicz Is No, it is way worse. JavaScript Evil?It is complex ☺
  101. 101. #SMX #XXA @BartoszGoralewicz JavaScript SEO best practices
  102. 102. #SMX #XXA @BartoszGoralewicz JavaScript taming the beast in 3 easy steps
  103. 103. #SMX #XXA @BartoszGoralewicz Step 1. V.2 Choosing the right framework
  104. 104. #SMX #XXA @BartoszGoralewicz Step 2. Rendering JavaScript Prerendering Server Side Rendering Universal/Isomorphic Static site generators (Gatsby.js)
  105. 105. #SMX #XXA @BartoszGoralewicz Step 3. Enjoy your traffic!
  106. 106. #SMX #XXA @BartoszGoralewicz Extra Tip Resist your urge to publish Client Side Rendered JavaScript
  107. 107. #SMX #XXA @BartoszGoralewicz ele.ph/smxeast Download my deck
  108. 108. #SMX #XXA @BartoszGoralewicz THANK YOU! SEE YOU AT THE NEXT #SMX bartosz@goralewicz.com @bart_Goralewicz
  109. 109. #SMX #XXA @BartoszGoralewicz Bizarre SEO s**t caused by the 2 waves
  110. 110. #SMX #XXA @BartoszGoralewicz Partial Indexing
  111. 111. #SMX #XXA @BartoszGoralewicz
  112. 112. #SMX #XXA @BartoszGoralewiczSource: Google I/O 2018
  113. 113. #SMX #XXA @BartoszGoralewicz
  114. 114. #SMX #XXA @BartoszGoralewicz MobileGooglebot ChromeScreenshot
  115. 115. #SMX #XXA @BartoszGoralewicz Mobile Googlebot Chrome Screenshot
  116. 116. #SMX #XXA @BartoszGoralewicz Mobile Googlebot Chrome Screenshot
  117. 117. #SMX #XXA @BartoszGoralewicz Mobile Googlebot Chrome Screenshot

×