Migration to a JS Framework without Losing Your Rankings and Mind

JavaScript doesn’t have to be evil Migrating to a JS Framework without Losing Your Rankings and Mind
A migration is always a big move
For better…
… or for worse.
Move to a JS Framework V.2
Bad reputation of JavaScript
Google is the only search engine that can deal with JavaScript at scale
Chrome41 is used for rendering
Users’ browser
Google: Mobile Friendly Tester
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
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
SEOs Bridge Devs Search engines
14. #1 How you will serve the content to search engines?
JS Client-Side Rendering (CSR)
Server-Side Rendering (CSR) HTML
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
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
Prerender. SAAS Model. Relatively Small Websites Cheaper option
Both options are created only for SEO purpose
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!
There is no universal solution
Source of the traffic. NO CSR.
Source of the traffic. NO CSR. $288,094.88
Static website you can try CSR Dynamic website Hybrid Rendering or Dynamic Rendering Type of content. Static vs dynamic content.
Small Prerender.io Huge Hybrid or Dynamic Rendering Size of website. Small/Medium/Huge.
Skills & budget Prerender.io cheaper option Hybrid Rendering more expensive but long lasting solution
# 2 Three must-haves Staging site Covering technical SEO basics Coffee
Standard migration Redirect Matrix Internal linking to 301 Internal linking to 404s Canonical tag Meta directives Indexing & crawling strategy
Can Google see important elements on my website? _ Mobile Friendly Test _ Inspect URL in GSC _ Chrome41
ContentParity mobile
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>
Pagination
Migration! JS SEO + Technical SEO Basics
You must check it again just after the migration!
Is my content indexed? Use site:domain.com“a few lines of content”
Is my content indexed? Use site:domain.com“a few lines of content”
Performance. Did you know?
Performance SOURCE | Chrome User Experience Report
Do I really need a JS application? Watch out for caveats! Pick the best option Yes? Don’t blindly follow the trends! Takeaways
[email protected] Maria Cieślak www.onely.com