- 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
Did you like this deck? Why not share it:
