JavaScript Doesn't Have to be Evil | Digital Olympus
0 likes93 views
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.
JavaScript Doesn't Have to be Evil | Digital Olympus
- 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