Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

DDavydoff
September 20, 2019
540

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

DDavydoff

September 20, 2019
Tweet

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