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

Transcript

1. What I learned about SEO from using the 10 most used JS frameworks Jan-Willem Bobbink // Notprovided.eu SLIDESHARE.NET/11INTERNET @JBOBBINK
3. 72% 28% 2016: My clients’ web stacks No JS framework JS Framework
4. 35% 65% 2019: My clients’ web stacks No JS framework JS Framework
5. Source: https://insights.stackoverflow.com/survey/2018#most-popular-technologies
7. #1 PREVENT RISKS? GO SSR! 100% SERVER SIDE RENDERING
9. Google: Rendering on the Web Source: https://developers.googl e.com/web/updates/201 9/02/rendering-on-the- web
10. Rendering on the Web – The SEO Version Source: https://www.notprovide d.eu/rendering-on-the- web-the-seo-version/
12. 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.”
13. #2 TOOLS TO CHECK WHAT GOOGLE RENDERS & WHAT NOT
14. Quickest way: Chrome -> select user agent Chrome: https://developers.google.com/web/tools/chrome-devtools/device-mode/override-user-agent
16. Quickest way: plugin “View Rendered Source” Chrome: https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/
17. Owned domains: Google’s URL inspection tool
18. Owned domains: Google’s URL inspection tool
19. Non owned URLs: Google Rich Result tester
21. #3 MINIMAL REQUIREMENTS FOR THE INITIAL HTML
27. Lazy loading can be tricky
28. #4 DATA PERSISTENCE RISKS GOOGLEBOT IS NOT A REAL USER
30. COOKIES LOCAL STORAGE SESSION DATA
31. #5 UNIT TEST SSR THINGS CAN BRAKE
32. Oops, SSR didn’t work anymore…
33. #6 THIRD PARTY RENDERING? THINGS CAN BRAKE
34. Setup monitoring
35. 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
36. #7 PERFORMANCE REDUCE JS
37. Think about real users’ performance
38. Reduce load for slow connections
39. Reduce processes
40. 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
41. #8 CAN GOOGLE GET TO ALL JS? MONITOR LOG FILES
42. Botify my friend
43. #9 ANALYTICS ISSUES SSR CAN LOG DOUBLE PAGEVIEWS
44. Prevent SSR pageviews to load GA
45. #10 SSR SEO RISKS THINK ABOUT THE EFFECTS
47. Caching • Rich snippets and other structured markup Google uses can be outdated.
49. Use a tool like SEORadar.com Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
50. Use a tool like SEORadar.com Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
51. Thanks! See you at the bar :) Jan-Willem Bobbink // Notprovided.eu SLIDESHARE.NET/11INTERNET @JBOBBINK
52. 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/