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.

What I learned about SEO from using the 10 most used JS frameworks #BrightonSEO

7,109 views

Published on

The web is rapidly evolving towards using more and more Single Page Applications / JavaScript driven websites and understanding the effects on SEO performance is key to be a successful technical SEO. Instead of depending on clients issues with SEO and debugging those, I used the 10 most popular JS frameworks myself and setup 10 websites. During the sessions I will share the expected and unexpected things that happened.

Published in: Internet
  • Be the first to comment

What I learned about SEO from using the 10 most used JS frameworks #BrightonSEO

  1. 1. What I learned about SEO from using the 10 most used JS frameworks Jan-Willem Bobbink // Notprovided.eu SLIDESHARE.NET/11INTERNET @JBOBBINK
  2. 2. 72% 28% 2016: My clients’ web stacks No JS framework JS Framework
  3. 3. 35% 65% 2019: My clients’ web stacks No JS framework JS Framework
  4. 4. Source: https://insights.stackoverflow.com/survey/2018#most-popular-technologies
  5. 5. #1 PREVENT RISKS? GO SSR! 100% SERVER SIDE RENDERING
  6. 6. Google: Rendering on the Web Source: https://developers.googl e.com/web/updates/201 9/02/rendering-on-the- web
  7. 7. Rendering on the Web – The SEO Version Source: https://www.notprovide d.eu/rendering-on-the- web-the-seo-version/
  8. 8. Source: https://ja.dev/entry/blog/nagayama/render-budget-en Kazushi Nagayama -7th of August 2019 “tl;dr: full client-side rendering can still hinder the searchability of a site, especially for large-scale web services.”
  9. 9. #2 TOOLS TO CHECK WHAT GOOGLE RENDERS & WHAT NOT
  10. 10. Quickest way: Chrome -> select user agent Chrome: https://developers.google.com/web/tools/chrome-devtools/device-mode/override-user-agent
  11. 11. Quickest way: plugin “View Rendered Source” Chrome: https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/
  12. 12. Owned domains: Google’s URL inspection tool
  13. 13. Owned domains: Google’s URL inspection tool
  14. 14. Non owned URLs: Google Rich Result tester
  15. 15. #3 MINIMAL REQUIREMENTS FOR THE INITIAL HTML
  16. 16. Lazy loading can be tricky
  17. 17. #4 DATA PERSISTENCE RISKS GOOGLEBOT IS NOT A REAL USER
  18. 18. COOKIES LOCAL STORAGE SESSION DATA
  19. 19. #5 UNIT TEST SSR THINGS CAN BRAKE
  20. 20. Oops, SSR didn’t work anymore…
  21. 21. #6 THIRD PARTY RENDERING? THINGS CAN BRAKE
  22. 22. Setup monitoring
  23. 23. HTTP request Sends a request for a page 503 header Serve a header in the meanwhile 200 header When 100% sure Update headers once ready
  24. 24. #7 PERFORMANCE REDUCE JS
  25. 25. Think about real users’ performance
  26. 26. Reduce load for slow connections
  27. 27. Reduce processes
  28. 28. https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjZrrSh0vXjAhU B-aQKHTQ9Dn4QjRx6BAgBEAQ&url=https%3A%2F%2Ffullscale.io%2Fangular-8-new- release-ivy- rollout%2F&psig=AOvVaw2YXpQDRYAID7cTqWIs8Ocr&ust=1565435071081938
  29. 29. #8 CAN GOOGLE GET TO ALL JS? MONITOR LOG FILES
  30. 30. Botify my friend
  31. 31. #9 ANALYTICS ISSUES SSR CAN LOG DOUBLE PAGEVIEWS
  32. 32. Prevent SSR pageviews to load GA
  33. 33. #10 SSR SEO RISKS THINK ABOUT THE EFFECTS
  34. 34. Caching • Rich snippets and other structured markup Google uses can be outdated.
  35. 35. Use a tool like SEORadar.com Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
  36. 36. Use a tool like SEORadar.com Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
  37. 37. Thanks! See you at the bar :) Jan-Willem Bobbink // Notprovided.eu SLIDESHARE.NET/11INTERNET @JBOBBINK
  38. 38. Photo credits • JS Framework logos https://hackernoon.com/how-it-feels-to-learn- javascript-in-2016-d3a717dd577f • Taking a risk http://www.bbc.co.uk/learningenglish/features/6- minute-english/ep-151217 • Spot the differences:https://www.rd.com/culture/spot-10- differences-picture/ • Robot differences: https://www.youtube.com/watch?v=DEnjZijXlvA • Point zero: https://99percentinvisible.org/article/point-zero-circling- globe-central-city-zero-stones/ • Headings: https://imu.nl/assets/img/comp/imu.nl/heading-tags- gebruiken-voor-seo-h1-h2-h3-20075-w800.jpg • Mobile phones: https://fineartamerica.com/featured/old-mobile- phones-public-health-england.html • Angular Ivy: https://fullscale.io/angular-8-new-release-ivy-rollout/

×