Search and Javascript Sites

on YouTube ↗20m

" summary

Google Search indexes URLs that are crawlable, unique and linkable and renders pages with a Chrome 41–era engine, so expect Chrome 41 limitations: stateless rendering (no IndexedDB, service worker ignored), no user interactions, and blocked JS/CSS prevents rendering. Use clean canonical URLs and History API instead of hash fragments, version assets (file-hash) to avoid caching, and provide server-side or hybrid HTML where possible. Debug with Search Console, Fetch as Google, and capture client-side render errors to a logging endpoint; reproduce rendering with Puppeteer to validate what Googlebot actually sees.

AI-written summary · about

" chapters (20)

1. 0:00Start
2. 0:18How Does Google Search Index a Web Application
3. 1:22Single Page App
4. 3:02Bad Url
5. 3:27Canonical Url
6. 4:01Fragment Identifiers
7. 5:44Limitations
8. 8:06Failure for Rendering Client-Side Client-Side Javascript
9. 9:36Hidden Content
10. 10:21Rendering Performance
11. 11:09Rendering
12. 11:51Client-Side Server-Side Rendering
13. 12:10Hybrid Model
14. 14:04Redirects
15. 14:47Monitoring and Debugging
16. 15:39Fetch as Google
17. 17:07Sample Code
18. 17:26Sitemaps
19. 17:58Single Page Architecture
20. 18:42Recap

" related talks

• 39mSearch and JavaScript SitesMartin Splitt, Zoe Clifford · Google I/O 2019
• 50mTechnical SEO for JS developersMartin Splitt · RS Conf 2019
• 38mNo BS SEO for web developersMartin Splitt · revo.js 2023
• 36mSemantic, Searchable Webapps with AngularMartin Splitt · AngularUP 2018
• 25mMaking Modern Web Content Discoverable for SearchMartin Splitt, Tom Greenaway · Chrome Dev Summit 2018
• 35mTechnical SEO DemystifiedMartin Splitt · AngularUP 2019
• 41mTechnical SEO for JavaScript developersMartin Splitt · JavaScript fwdays'19
• 55mTechnical SEO 101 for web developersMartin Splitt · HolyJS Piter 2019