The document discusses the complexities of migrating to a JavaScript framework while maintaining SEO rankings. It outlines the differences between client-side rendering, server-side rendering, and hybrid rendering, emphasizing the importance of an initial HTML setup for search engines. Additionally, it highlights essential migration strategies and technical SEO practices to ensure content indexing and performance post-migration.

2. JavaScript
doesn’t have to be evil
Migrating to a JS Framework
without Losing Your Rankings and Mind

3. A migration is always
a big move

4. For better…

5. … or for worse.

6. Move to
a JS Framework
V.2

7. Bad reputation
of JavaScript

8. Google is the only search engine
that can deal with JavaScript at scale

9. Chrome41 is used for rendering

10. Users’ browser

11. Google: Mobile Friendly Tester

12. Two waves of indexing
Crawl
Index
Render
INSTANT, FIRST WAVE
OF INDEXING
SECOND WAVE
OF INDEXING
New links to be
crawled
A rendering resources
become available

13. SOURCE | Google I/O 2018
The rendering of JavaScript powered websites in
Google Search is deferred until Googlebot has
resources available to process that content.
Delays, delays, delays

14. SEOs
Bridge
Devs Search engines

15. #1 How you will
serve the content
to search engines?

16. JS
Client-Side Rendering (CSR)

17. Server-Side Rendering (CSR)
HTML

18. CSR & SEO
When will Google be able to read a CSR website in the
first crawl?
We can render Single Page Applications
We have delays in rendering
Google
„I think your website has a lot of content; you should
really be using dynamic rendering or server-side
rendering.”
John Mueller

19. Workaround solutions
Dynamic Rendering.
Web Server
Dynamic Renderer
Users Googlebot &
others
Initial HTML required to
render client-side version
SERVER INFRASTRUCTURE
Complete
“Dynamically
Rendered” HTML
Initial HTML required to
render client-side
version

20. Prerender.
SAAS Model.
Relatively Small Websites
Cheaper option

21. Both options are created only for
SEO purpose

22. Hybrid Rendering
Pre-rendered HTML Display
JS update Display
SERVER
BROWSER &
CRAWLER
BROWSER ONLY
HYBRID
RENDERING
INDEXED
ON
INTERACTION
React : Next.js
Vue.js : Nuxt.js
Angular : Angular Universal
PERFORMANCE!

23. There is no
universal solution

24. Source of the traffic.
NO CSR.

25. Source of the traffic.
NO CSR.
$288,094.88

26. Static website
you can try CSR
Dynamic website
Hybrid Rendering
or Dynamic Rendering
Type of content.
Static vs dynamic content.

27. Small
Prerender.io
Huge
Hybrid or
Dynamic Rendering
Size of website.
Small/Medium/Huge.

28. Skills & budget
Prerender.io
cheaper option
Hybrid Rendering
more expensive
but long lasting solution

29. # 2 Three must-haves
Staging site Covering technical
SEO basics
Coffee

30. Standard migration
Redirect
Matrix
Internal linking to
301
Internal linking to
404s
Canonical tag Meta directives Indexing & crawling
strategy

31. Can Google see important elements
on my website?
_ Mobile Friendly Test
_ Inspect URL in GSC
_ Chrome41

32. ContentParity
mobile

33. Navigation
Anchors & HREF’s
<a href=“/good-link”>correct</a>
<span onclick=“changePage(‘bad-link’)”>incorrect</a>
<a href=“/good-link” onclick=“changePage(‘good-link’)”>
correct</a>

34. Pagination

35. Migration!
JS SEO + Technical SEO Basics

36. You must check it
again just after
the migration!

37. Is my content indexed?
Use site:domain.com“a few lines of content”

38. Is my content indexed?
Use site:domain.com“a few lines of content”

39. Performance.
Did you know?

40. Performance
SOURCE | Chrome User Experience Report

41. Do I really need a JS application?
Watch out for caveats!
Pick the best option
Yes?
Don’t blindly follow the trends!
Takeaways

42. maria@onely.com
Maria Cieślak
www.onely.com