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
   

   View Slide

2. View Slide

3. 72%
   28%
   2016: My clients’ web stacks
   No JS framework JS Framework
   

   View Slide

4. 35%
   65%
   2019: My clients’ web stacks
   No JS framework JS Framework
   

   View Slide

5. Source: https://insights.stackoverflow.com/survey/2018#most-popular-technologies
   

   View Slide

6. View Slide

7. #1
   PREVENT RISKS? GO SSR!
   100% SERVER SIDE RENDERING
   

   View Slide

8. View Slide

9. Google:
   Rendering on
   the Web
   Source:
   https://developers.googl
   e.com/web/updates/201
   9/02/rendering-on-the-
   web
   

   View Slide

10. Rendering on
    the Web – The
    SEO Version
    Source:
    https://www.notprovide
    d.eu/rendering-on-the-
    web-the-seo-version/
    

    View Slide

11. View Slide

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.”
    

    View Slide

13. #2
    TOOLS TO CHECK
    WHAT GOOGLE RENDERS & WHAT NOT
    

    View Slide

14. Quickest way: Chrome -> select user agent
    Chrome: https://developers.google.com/web/tools/chrome-devtools/device-mode/override-user-agent
    

    View Slide

15. View Slide

16. Quickest way: plugin “View Rendered Source”
    Chrome: https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/
    

    View Slide

17. Owned domains: Google’s URL inspection tool
    

    View Slide

18. Owned domains: Google’s URL inspection tool
    

    View Slide

19. Non owned URLs: Google Rich Result tester
    

    View Slide

20. View Slide

21. #3
    MINIMAL REQUIREMENTS
    FOR THE INITIAL HTML
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. Lazy loading can be tricky
    

    View Slide

28. #4
    DATA PERSISTENCE RISKS
    GOOGLEBOT IS NOT A REAL USER
    

    View Slide

29. View Slide

30. COOKIES LOCAL STORAGE SESSION DATA
    

    View Slide

31. #5
    UNIT TEST SSR
    THINGS CAN BRAKE
    

    View Slide

32. Oops, SSR didn’t work anymore…
    

    View Slide

33. #6
    THIRD PARTY RENDERING?
    THINGS CAN BRAKE
    

    View Slide

34. Setup monitoring
    

    View Slide

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
    

    View Slide

36. #7
    PERFORMANCE
    REDUCE JS
    

    View Slide

37. Think about real users’ performance
    

    View Slide

38. Reduce load for
    slow connections
    

    View Slide

39. Reduce processes
    

    View Slide

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
    

    View Slide

41. #8
    CAN GOOGLE GET TO ALL JS?
    MONITOR LOG FILES
    

    View Slide

42. Botify my friend
    

    View Slide

43. #9
    ANALYTICS ISSUES
    SSR CAN LOG DOUBLE PAGEVIEWS
    

    View Slide

44. Prevent SSR pageviews to load GA
    

    View Slide

45. #10
    SSR SEO RISKS
    THINK ABOUT THE EFFECTS
    

    View Slide

46. View Slide

47. Caching
    • Rich snippets and other
    structured markup Google
    uses can be outdated.
    

    View Slide

48. View Slide

49. Use a tool like SEORadar.com
    Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
    

    View Slide

50. Use a tool like SEORadar.com
    Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
    

    View Slide

51. Thanks! See you at the bar :)
    Jan-Willem Bobbink // Notprovided.eu
    SLIDESHARE.NET/11INTERNET
    @JBOBBINK
    

    View Slide

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/
    

    View Slide