Slide 1
Slide 1 text
What I learned about SEO
from using the 10 most used
JS frameworks
Jan-Willem Bobbink // Notprovided.eu
SLIDESHARE.NET/11INTERNET
@JBOBBINK
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
72%
28%
2016: My clients’ web stacks
No JS framework JS Framework
Slide 4
Slide 4 text
35%
65%
2019: My clients’ web stacks
No JS framework JS Framework
Slide 5
Slide 5 text
Source: https://insights.stackoverflow.com/survey/2018#most-popular-technologies
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
#1
PREVENT RISKS? GO SSR!
100% SERVER SIDE RENDERING
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Google:
Rendering on
the Web
Source:
https://developers.googl
e.com/web/updates/201
9/02/rendering-on-the-
web
Slide 10
Slide 10 text
Rendering on
the Web – The
SEO Version
Source:
https://www.notprovide
d.eu/rendering-on-the-
web-the-seo-version/
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
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.”
Slide 13
Slide 13 text
#2
TOOLS TO CHECK
WHAT GOOGLE RENDERS & WHAT NOT
Slide 14
Slide 14 text
Quickest way: Chrome -> select user agent
Chrome: https://developers.google.com/web/tools/chrome-devtools/device-mode/override-user-agent
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Quickest way: plugin “View Rendered Source”
Chrome: https://chrome.google.com/webstore/detail/view-rendered-source/ejgngohbdedoabanmclafpkoogegdpob/
Slide 17
Slide 17 text
Owned domains: Google’s URL inspection tool
Slide 18
Slide 18 text
Owned domains: Google’s URL inspection tool
Slide 19
Slide 19 text
Non owned URLs: Google Rich Result tester
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
#3
MINIMAL REQUIREMENTS
FOR THE INITIAL HTML
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Lazy loading can be tricky
Slide 28
Slide 28 text
#4
DATA PERSISTENCE RISKS
GOOGLEBOT IS NOT A REAL USER
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
COOKIES LOCAL STORAGE SESSION DATA
Slide 31
Slide 31 text
#5
UNIT TEST SSR
THINGS CAN BRAKE
Slide 32
Slide 32 text
Oops, SSR didn’t work anymore…
Slide 33
Slide 33 text
#6
THIRD PARTY RENDERING?
THINGS CAN BRAKE
Slide 34
Slide 34 text
Setup monitoring
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
#7
PERFORMANCE
REDUCE JS
Slide 37
Slide 37 text
Think about real users’ performance
Slide 38
Slide 38 text
Reduce load for
slow connections
Slide 39
Slide 39 text
Reduce processes
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
#8
CAN GOOGLE GET TO ALL JS?
MONITOR LOG FILES
Slide 42
Slide 42 text
Botify my friend
Slide 43
Slide 43 text
#9
ANALYTICS ISSUES
SSR CAN LOG DOUBLE PAGEVIEWS
Slide 44
Slide 44 text
Prevent SSR pageviews to load GA
Slide 45
Slide 45 text
#10
SSR SEO RISKS
THINK ABOUT THE EFFECTS
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Caching
• Rich snippets and other
structured markup Google
uses can be outdated.
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Use a tool like SEORadar.com
Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
Slide 50
Slide 50 text
Use a tool like SEORadar.com
Tool: https://app.seoradar.com/seo_diff_urls?type=fvr
Slide 51
Slide 51 text
Thanks! See you at the bar :)
Jan-Willem Bobbink // Notprovided.eu
SLIDESHARE.NET/11INTERNET
@JBOBBINK
Slide 52
Slide 52 text
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/