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
630

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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Owned domains: Google’s URL inspection tool

    View full-size slide

  13. Owned domains: Google’s URL inspection tool

    View full-size slide

  14. Non owned URLs: Google Rich Result tester

    View full-size slide

  15. #3
    MINIMAL REQUIREMENTS
    FOR THE INITIAL HTML

    View full-size slide

  16. Lazy loading can be tricky

    View full-size slide

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

    View full-size slide

  18. COOKIES LOCAL STORAGE SESSION DATA

    View full-size slide

  19. #5
    UNIT TEST SSR
    THINGS CAN BRAKE

    View full-size slide

  20. Oops, SSR didn’t work anymore…

    View full-size slide

  21. #6
    THIRD PARTY RENDERING?
    THINGS CAN BRAKE

    View full-size slide

  22. Setup monitoring

    View full-size slide

  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

    View full-size slide

  24. #7
    PERFORMANCE
    REDUCE JS

    View full-size slide

  25. Think about real users’ performance

    View full-size slide

  26. Reduce load for
    slow connections

    View full-size slide

  27. Reduce processes

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  30. Botify my friend

    View full-size slide

  31. #9
    ANALYTICS ISSUES
    SSR CAN LOG DOUBLE PAGEVIEWS

    View full-size slide

  32. Prevent SSR pageviews to load GA

    View full-size slide

  33. #10
    SSR SEO RISKS
    THINK ABOUT THE EFFECTS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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/

    View full-size slide