Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

31.600 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet
  • Did you know some people make ➽➽ https://t.cn/A6ybK1ra
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Businesses pay you up to $25 per hour to be on Twitter? ◆◆◆ http://t.cn/AieX6y8B
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Earn Up To $316/day! Easy Writing Jobs from the comfort of home! ◆◆◆ http://t.cn/AieXS5j0
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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/

×