How do you implement SEO optimization for modern single-page applications?

SPAs face SEO challenges because content is rendered client-side. Solutions: Server-Side Rendering (SSR with Next.js, Nuxt, SvelteKit) renders pages on the server for search engine crawlers, Static Site Generation (SSG) pre-builds HTML pages at build time, and Hybrid rendering (ISR in Next.js) regenerates static pages on a schedule. For React apps without SSR: implement dynamic rendering (serve pre-rendered HTML to crawlers, SPA to users) using Prerender.io or rendertora, implement critical metadata in the HTML template, and ensure Google can crawl your SPA (test with Google Search Console URL Inspection). Technical SEO: implement canonical URLs for every page, create and submit a sitemap.xml with all important URLs, implement proper robots.txt, use semantic HTML (h1, h2, nav, main, article, section), implement structured data (JSON-LD schema for Organization, FAQ, Product, Article), and implement hreflang tags for multilingual content. Metadata: use React Helmet or react-helmet-async to manage title, description, and Open Graph meta tags per page. Each page should have a unique title (60 characters) and description (155 characters). Performance: Core Web Vitals directly impact search rankings. Optimize LCP (server-side render above-fold content, optimize images), INP (minimize JavaScript execution), and CLS (set explicit dimensions for images and dynamic content). Content: implement proper heading hierarchy (single h1 per page), use descriptive alt text for images, implement internal linking between related pages, and create content that answers user search intent. Monitoring: Google Search Console for indexing status and search performance, track keyword rankings, monitor Core Web Vitals in the field, and implement structured data testing with Google Rich Results Test.