JavaScript Tips & Tricks 2018 - SMX East
•
6 likes•3,155 views
The document discusses the history and evolution of JavaScript and its impact on search engine optimization (SEO). It describes how JavaScript was not widely used in the late 1990s but became common on 70% of websites by 2009. It outlines the challenges of indexing JavaScript-rendered pages and solutions developed like JavaScript rendering and pre-rendering. Major topics covered include the "dark ages" of limited JavaScript support, pioneers in the field, and how techniques and best practices have advanced to make JavaScript-powered sites more search engine-friendly.
Report
Share
JavaScript Tips & Tricks 2018 - SMX East
- 1. #SMX #XXA @BartoszGoralewicz With Bartosz Goralewicz JavaScript SEOTips&Tricks
- 2. #SMX #XXA @BartoszGoralewicz Best Small SEO Agency Best SEO Campaign
- 3. #SMX #XXA @BartoszGoralewicz History of JavaScript
- 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. #SMX #XXA @BartoszGoralewicz We are pretty good in executing JavaScript. Matt Cutts 2014 ele.ph/js2014
- 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. #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. #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. #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. #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. #SMX #XXA @BartoszGoralewicz 12 October 2015 - Eric Wu’s presentation about JavaScript @ Pubcon
- 13. #SMX #XXA @BartoszGoralewicz 2015 THE FIRST PIONEER ele.ph/ajax Eric Wu, the first SEO to notice JS as an SEO challenge.
- 14. #SMX #XXA @BartoszGoralewicz 14 October 2015 Deprecating AJAX crawling Scheme ele.ph/ajax
- 15. #SMX #XXA @BartoszGoralewicz … but I think Eric was too early to the game. The interest around the JavaScript SEO topic almost disappeared
- 16. #SMX #XXA @BartoszGoralewicz Let’s call this time: THE DARK AGES
- 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. #SMX #XXA @BartoszGoralewicz Googleacknowledged the problem quickly and replied within a few days
- 19. #SMX #XXA @BartoszGoralewicz May 12th 2017 Google’s JS group
- 20. #SMX #XXA @BartoszGoralewicz 2017 JavaScript SEO Golden Age
- 21. #SMX #XXA @BartoszGoralewicz Fast forward to 2018
- 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. #SMX #XXA @BartoszGoralewicz Where are we now with JS SEO?
- 25. #SMX #XXA @BartoszGoralewicz Almost all large websites deal pretty well with JavaScript SEO! IT IS 2018
- 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. #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
- 34. #SMX #XXA @BartoszGoralewicz SEOs be like: JS complicated?
- 37. #SMX #XXA @BartoszGoralewicz Flipkart With JavaScript turned OFF
- 38. #SMX #XXA @BartoszGoralewicz Myntra One of the biggest ecommerce stores in India #72 most popular website in India
- 39. #SMX #XXA @BartoszGoralewicz Myntra One of the biggest ecommerce stores in India #72 most popular website in India
- 40. #SMX #XXA @BartoszGoralewicz And Myntra.com is ranking like crazy* *However only for short tail keywords
- 41. #SMX #XXA @BartoszGoralewicz But it gets much easier once you start learning from the best. E.g. Google!
- 44. #SMX #XXA @BartoszGoralewicz April 2018 – the new version of Google Flights
- 45. #SMX #XXA @BartoszGoralewicz 20,000+ visibility down to 48 (!)
- 46. #SMX #XXA @BartoszGoralewicz Is it indexed ?
- 47. #SMX #XXA @BartoszGoralewicz Only 1 page indexed in Google
- 52. #SMX #XXA @BartoszGoralewicz Fun fact works fine in Chrome 41
- 53. #SMX #XXA @BartoszGoralewicz Fun fact You can also see the footer content with JavaScript disabled
- 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. #SMX #XXA @BartoszGoralewicz v.2 Not indexed
- 59. #SMX #XXA @BartoszGoralewicz This is exactly why we have 2 waves of JavaScript indexing
- 61. #SMX #XXA @BartoszGoralewicz Source: Google I/O 2018
- 63. #SMX #XXA @BartoszGoralewicz Isomorphic, universal, dynamic, hybrid, hydrating with JavaScript, etc. Latest nomenclature and solution to make JavaScript SEO friendly.
- 64. #SMX #XXA @BartoszGoralewicz Client Side Rendering
- 65. #SMX #XXA @BartoszGoralewicz Prerendering Aka Dynamic Rendering an elephant (Elephate) in the room
- 66. #SMX #XXA @BartoszGoralewicz prerendering (the 8th step will shock you) How works in 7 steps
- 74. #SMX #XXA @BartoszGoralewicz What are your options?
- 75. #SMX #XXA @BartoszGoralewicz JÄVASCRIPT On-the-fly rendering Outdated HTML
- 76. #SMX #XXA @BartoszGoralewicz Serve stale/outdated HTML1. Serve JavaScript and let Google (try to) handle it 2. Prerender on the fly3.
- 77. #SMX #XXA @BartoszGoralewicz What if you HAVE TO do prerendering
- 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. #SMX #XXA @BartoszGoralewicz Most popular Prerendering solutions Chrome Headless/Phantom JS Chrome Headless Chrome Headless Prerender.io Puppeteer Rendertron Service/Free Free Free
- 80. #SMX #XXA @BartoszGoralewicz Failed prerendering case study
- 81. #SMX #XXA @BartoszGoralewicz The Source Code vs. DOM Source code DOM
- 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. #SMX #XXA @BartoszGoralewicz Enter prerendering
- 84. #SMX #XXA @BartoszGoralewicz What went WRONG?
- 86. #SMX #XXA @BartoszGoralewicz (better)Alternatives to prerendering
- 87. #SMX #XXA @BartoszGoralewicz Server site rendering All of the rendering work is done by your servers. Google gets HTML. SEO = OK
- 88. #SMX #XXA @BartoszGoralewicz Alternatives to prerendering
- 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
- 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. #SMX #XXA @BartoszGoralewicz Hybrid Rendering
- 93. #SMX #XXA @BartoszGoralewicz Which brands use HYBRID rendering?
- 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. #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
- 98. #SMX #XXA @BartoszGoralewicz What if we just keep CSR JavaScript ? *Client Side Rendered *
- 100. #SMX #XXA @BartoszGoralewicz Is No, it is way worse. JavaScript Evil?It is complex ☺
- 101. #SMX #XXA @BartoszGoralewicz JavaScript SEO best practices
- 102. #SMX #XXA @BartoszGoralewicz JavaScript taming the beast in 3 easy steps
- 103. #SMX #XXA @BartoszGoralewicz Step 1. V.2 Choosing the right framework
- 104. #SMX #XXA @BartoszGoralewicz Step 2. Rendering JavaScript Prerendering Server Side Rendering Universal/Isomorphic Static site generators (Gatsby.js)
- 105. #SMX #XXA @BartoszGoralewicz Step 3. Enjoy your traffic!
- 106. #SMX #XXA @BartoszGoralewicz Extra Tip Resist your urge to publish Client Side Rendered JavaScript
- 108. #SMX #XXA @BartoszGoralewicz THANK YOU! SEE YOU AT THE NEXT #SMX bartosz@goralewicz.com @bart_Goralewicz
- 109. #SMX #XXA @BartoszGoralewicz Bizarre SEO s**t caused by the 2 waves
- 112. #SMX #XXA @BartoszGoralewiczSource: Google I/O 2018
- 115. #SMX #XXA @BartoszGoralewicz Mobile Googlebot Chrome Screenshot
- 116. #SMX #XXA @BartoszGoralewicz Mobile Googlebot Chrome Screenshot
- 117. #SMX #XXA @BartoszGoralewicz Mobile Googlebot Chrome Screenshot