This document summarizes a presentation on SEO tactics for modern JavaScript frameworks. It discusses using application shells for initial HTML rendering, adding SEO meta tags, handling client-side navigation and redirects, and testing search bot capabilities. Examples are provided using ReactJS, NextJS, VueJS and NuxtJS for application shells, meta tags, navigation and redirects. The document also describes experiments conducted to evaluate features supported in Googlebot and Bingbot.

1. @SPEAKERNAME/#SMX
A Deep Dive Into SEO Tactics For
Modern JavaScript Frameworks
Hamlet Batista
CEO at RankSense
@hamletbatista

2. @SPEAKERNAME/#SMX
I believe amazing
SEO results should
take 6 weeks, not 6
months!
Hamlet Batista
CEO and Founder, RankSense
@hamletbatista
slideshare.net/hamletbatista
I’m a mentor at the speaker accelerator for
underrepresented groups, United Search. Check us out at
unitedsearch.org or @search_united on
www.ranksense.com

3. @SPEAKERNAME/#SMX
‘The developer
insisted they knew
what they were doing
and that "Google
can index the
content” ’
How Often Have You Heard This One?
https://bit.ly/2KaCtgG

4. @SPEAKERNAME/#SMX
• Doing it yourself
• Teaching others
The Best Way to Learn JavaScript
SEO (or Anything)
@hamletbatista

5. @SPEAKERNAME/#SMX
• We are going to review critical JavaScript SEO
concepts using example apps in ReactJs, NextJs,
VueJs and NuxtJs:
• Optimal application shells
• SEO meta tags
• Rendering options
• Client-side navigations and soft 404s
• Schema markup
• And more!
Agenda
@hamletbatista

6. @SPEAKERNAME/#SMX
• Google Colab has a
built-in Linux
environment with
Node support
• Ngrok helps expose
the local web server
• Notebooks are great
for learning and
documentation
Setting Up the Examples in Google Colab Notebooks
@hamletbatista

7. @SPEAKERNAME/#SMX
• Useful for getting
some initial HTML
to the screen fast
• This HTML can
include SEO meta
data
• PWAs can cache
locally for offline
use
The Application Shell Model
https://bit.ly/3puiauE

8. @SPEAKERNAME/#SMX
• Disable/enable
JavaScript to see
the App Shell
• Open Chrome
Developer Tools
• Command +
Shift + P(opens
command list)
The Application Shell in an Example ReactJS App
@hamletbatista

9. @SPEAKERNAME/#SMX
• Disable/enable
JavaScript to see
the App Shell
• Open Chrome
Developer Tools
• Command +
Shift + P(opens
command list)
The Application Shell in an Example NextJs App
@hamletbatista

10. @SPEAKERNAME/#SMX
• Disable/enable
JavaScript to see
the App Shell
• Open Chrome
Developer Tools
• Command +
Shift + P(opens
command list)
The Application Shell in an Example VueJs App
@hamletbatista

11. @SPEAKERNAME/#SMX
• Disable/enable
JavaScript to see
the App Shell
• Open Chrome
Developer Tools
• Command + Shift
+ P(opens
command list)
The Application Shell in an Example NuxtJs App
@hamletbatista

12. @SPEAKERNAME/#SMX
• We will add meta tags to
examples apps built
using:
• ReactJs
• NextJs (Universal)
• VueJs
• NuxtJs (Universal)
SEO Meta Tags in the Application Shell
ReactJs NextJs
VueJs NuxtJs
@hamletbatista

13. @SPEAKERNAME/#SMX
• ReactJs apps
use React
Helmet to add
SEO meta tags
• Simple to use
• But doesn’t
keep meta
tags in the
app shell
SEO Meta Tags in an Example ReactJS App
@hamletbatista

14. @SPEAKERNAME/#SMX
• NextJs has built-in
support for meta
tags
• Simple to use
• It keeps meta
tags in the app
shell thanks to
server-side
rendering
SEO Meta Tags in an Example NextJs App
@hamletbatista

15. @SPEAKERNAME/#SMX
• VueJs apps use
Vue Meta to
add SEO meta
tags
• Simple to use
• But doesn’t
keep meta
tags in the
app shell
SEO Meta Tags in an Example VueJs App
@hamletbatista

16. @SPEAKERNAME/#SMX
• NuxtJs has built-
in support for
meta tags
• Simple to use
• It keeps meta
tags in the
app shell
thanks to
server-side
rendering
SEO Meta Tags in an Example NuxtJs App
@hamletbatista

17. @SPEAKERNAME/#SMX
• We are going to test
how pages, redirects
and 404s operate in:
• Client-side JavaScript
• Server-side JavaScript
Page Navigation, Redirects and Soft 404s
Page 3Page 2Page 1
Link 1
Link 2
Link 4
Link 5
Link 3 Link 6
@hamletbatista

18. @SPEAKERNAME/#SMX
• Client-side
navigation
• No HTTP
requests
• CSS
background
color trick
• Server-side
navigation
• Check HTTP
requests in the
Network tab
Server-side vs Client-side Navigation
@hamletbatista

19. @SPEAKERNAME/#SMX
Server-side Redirects
• Server-side
redirects
• Check HTTP
requests
• Should work
with JavaScript
disabled
@hamletbatista

20. @SPEAKERNAME/#SMX
• NextJs and
NuxtJs handle
404s correctly
out of the box
• ReactJs and
VueJs require
additional
configuration
Soft 404s
@hamletbatista

21. @SPEAKERNAME/#SMX
How Pre-rendering and Server-side Rendering Work
https://nextjs.org/learn/basics/data-fetching

22. @SPEAKERNAME/#SMX
Structured Data in an Example NextJs App
@hamletbatista
• The Next SEO
plugin simplifies
adding structured
data and other
SEO meta tags to
NextJs and
ReactJs
applications
• There are similar
plugins for other
frameworks

23. @SPEAKERNAME/#SMX
• How many and what
advanced browser features
are supported by the
evergreen search bots?
• We will run some clever
experiments to find out!
Evaluating Features in Evergreen Search Bots
@hamletbatista

24. @SPEAKERNAME/#SMX
• This page
executes a
series of test to
report which
capabilities
the browser
has
Modern Browser Features
https://browserleaks.com/features@hamletbatista

25. @SPEAKERNAME/#SMX
• We want to run
Google and
Bing URL
Inspectors to
learn what
features each
search bot
supports
Reverse Proxying to Run URL Inspections
https://bit.ly/36DbzFJ
• From: Browser
Leaks
• To: Localhost
MITMProxy
• From: Localhost
• To: Public URL
Ngrok
• Fetch and render
public URL
• Save HTML report
URL Inspection
Tool
@hamletbatista

26. @SPEAKERNAME/#SMX
• pip install
mitmproxy
• mitmproxy -p 8081
--mode
reverse:https://bro
wserleaks.com/
• ./ngrok http -
hostname=rnd.ran
ksense.com 8081
Reverse Proxying to Run URL Inspections
https://searchengineland.com/how-to-audit-sites-inside-corporate-networks-341195
@hamletbatista

27. @SPEAKERNAME/#SMX
• Here is what
we learned
about
Evergreen
Googlebot
capabilities
Googlebot Browser Features
https://bit.ly/2Uvbcre@hamletbatista

28. @SPEAKERNAME/#SMX
• Here is what
we learned
about
Evergreen
Bingbot
capabilities
Bingbot Browser Features
https://bit.ly/3kxyJ5l@hamletbatista

29. @SPEAKERNAME/#SMX
• https://github.com/
hamletbatista/smx
• ReactJs notebook
• NextJs notebook
• VueJs notebook
• NuxtJs notebook
• Next SEO plugin
https://www.npmjs.
com/package/next
-seo
Github Repository
@hamletbatista

30. @SPEAKERNAME/#SMX
I believe amazing
SEO results should
take 6 weeks, not 6
months!
• Learn from
other SEOs
writing code in
Python and
JavaScript
• Tune in each
Thursday to our
#RSTwittorial
series in Twitter
to get
practical SEO
automation
scripts 🐍 🔥
https://bit.ly/35yuwtZ
@RankSense

31. @SPEAKERNAME/#SMX
SEE YOU AT THE NEXT SMX!