Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

What I learned about SEO
from using the 10 most used
JS frameworks
Jan-Willem Bobbink // Notprovided.eu
SLIDESHARE.NET/11I...

Ad

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

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 52 Ad
1 of 52 Ad

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

Download to read offline

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.

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.

More Related Content

Slideshows for you (19)

Similar to What I learned about SEO from using the 10 most used JS frameworks #BrightonSEO (20)

More from Jan-Willem Bobbink - Freelance SEO Consultant (20)

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/

Editor's Notes

  • Developer Survey Results 2018: JS is by far the most popular programming language used.

    https://news.codecademy.com/javascript-history-popularity/
    https://medium.com/javascript-scene/how-popular-is-javascript-in-2019-823712f7c4b1
    https://medium.com/@paulheintzelman/so-why-is-javascript-so-popular-f35bd6cfeb39
    https://news.codecademy.com/javascript-history-popularity/
  • https://web.dev/javascript-and-google-search-io-2019

    Googlebot queues URLs for crawling.
    It then fetches the URLs with an HTTP request based on the crawl budget.
    Googlebot scans the HTML for links and queues the discovered links for crawling.
    Googlebot then queues the page for rendering.
    As soon as possible, a headless Chromium instance renders the page, which includes JavaScript execution.
    Googlebot uses the rendered HTML to index the page.
  • Xoogler: do not go down the Client Side Rendering path…
  • Be aware of rendering differences!
  • Officially Updated to latest Chrome version at the 7th of August
  • Officially Updated to latest Chrome version at the 7th of August
  • Title & Meta tags & directives: also relevant for social
  • Title & Meta tags & directives: also relevant for social
  • All relevant SEO content: text and headings.
  • Structured data: if it is injected in a later stage you need to wait on the second round in the renderer to be included.
  • Load at least one image directly via a traditional <img> tag, do not lazy load everything. Also see https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
  • Load at least one image directly via a traditional <img> tag, do not lazy load everything. Also see https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
  • https://lvivity.com/top-web-development-frameworks
  • Point zero: Googlebot is browsing every page without any history
  • Absolute no go’s!
  • Documentation Prerender testing

    Angular & React testing: https://jestjs.io/
    Vue testing https://github.com/vuejs/vue-test-utils
  • Use third party (haha!) tools like Contentking, Little Warden or PageModified
    Use search engine bot User Agents
  • Be sure until you are 100% sure: 503 HEADER -> 200 HEADER
  • Cloaking issue, content and links not matching
  • Caching datapoints
  • Be aware that we have mobile first indexing but Google sometimes still uses desktop crawlers. Make sure they are similar and prevent accidental cloaking.

×