Migration to a JS Framework without Losing Your Rankings and Mind

08 Apr 2019

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


Give us 15 minutes of your time and find out why big brands trust Onely with their major technical SEO issues.