Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
What I learned about SEO from using the 10 most used JS frameworks
DDavydoff
September 20, 2019
0
420
What I learned about SEO from using the 10 most used JS frameworks
DDavydoff
September 20, 2019
Tweet
Share
More Decks by DDavydoff
See All by DDavydoff
artikshaman
0
410
artikshaman
0
410
artikshaman
0
280
artikshaman
0
420
artikshaman
0
270
artikshaman
0
220
artikshaman
0
14
artikshaman
0
1k
artikshaman
0
960
Featured
See All Featured
colly
187
14k
frogandcode
127
20k
jensimmons
207
10k
pauljervisheath
195
15k
scottboms
251
11k
akmur
252
19k
bkeepers
52
4.2k
geeforr
332
29k
philnash
8
500
reverentgeek
168
7.2k
tenderlove
52
3.4k
tanoku
86
8.5k
Transcript
What I learned about SEO from using the 10 most
used JS frameworks Jan-Willem Bobbink // Notprovided.eu SLIDESHARE.NET/11INTERNET @JBOBBINK
None
72% 28% 2016: My clients’ web stacks No JS framework
JS Framework
35% 65% 2019: My clients’ web stacks No JS framework
JS Framework
Source: https://insights.stackoverflow.com/survey/2018#most-popular-technologies
None
#1 PREVENT RISKS? GO SSR! 100% SERVER SIDE RENDERING
None
Google: Rendering on the Web Source: https://developers.googl e.com/web/updates/201 9/02/rendering-on-the- web
Rendering on the Web – The SEO Version Source: https://www.notprovide
d.eu/rendering-on-the- web-the-seo-version/
None
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.”
#2 TOOLS TO CHECK WHAT GOOGLE RENDERS & WHAT NOT
Quickest way: Chrome -> select user agent Chrome: https://developers.google.com/web/tools/chrome-devtools/device-mode/override-user-agent
None
Quickest way: plugin “View Rendered Source” Chrome: https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/
Owned domains: Google’s URL inspection tool
Owned domains: Google’s URL inspection tool
Non owned URLs: Google Rich Result tester
None
#3 MINIMAL REQUIREMENTS FOR THE INITIAL HTML
None
None
None
None
None
Lazy loading can be tricky
#4 DATA PERSISTENCE RISKS GOOGLEBOT IS NOT A REAL USER
None
COOKIES LOCAL STORAGE SESSION DATA
#5 UNIT TEST SSR THINGS CAN BRAKE
Oops, SSR didn’t work anymore…
#6 THIRD PARTY RENDERING? THINGS CAN BRAKE
Setup monitoring
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
#7 PERFORMANCE REDUCE JS
Think about real users’ performance
Reduce load for slow connections
Reduce processes
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
#8 CAN GOOGLE GET TO ALL JS? MONITOR LOG FILES
Botify my friend
#9 ANALYTICS ISSUES SSR CAN LOG DOUBLE PAGEVIEWS
Prevent SSR pageviews to load GA
#10 SSR SEO RISKS THINK ABOUT THE EFFECTS
None
Caching • Rich snippets and other structured markup Google uses
can be outdated.
None
Use a tool like SEORadar.com Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
Use a tool like SEORadar.com Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
Thanks! See you at the bar :) Jan-Willem Bobbink //
Notprovided.eu SLIDESHARE.NET/11INTERNET @JBOBBINK
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/