Migration to a JS Framework without Losing Your Rankings and Mind
- 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
- 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
- 15. #1 How you will serve the content to search engines?
- 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
- 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”
- 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