How does an immersive WebGL hero stay SEO-friendly?
Keep the wow on the client GPU, put brand and answers in SSR HTML, and lazy-load the canvas after text LCP so crawlers and humans both win.
By Théo Marini · webgl, seo, nextjs
How does an immersive WebGL hero stay SEO-friendly?
An immersive WebGL hero stays SEO-friendly when the brand, headline, and primary answers live in server-rendered HTML, while the canvas loads as a deferred client component. Search bots and generative engines read text; visitor GPUs render the sensation.
Why is SSR required for a 3D portfolio?
Most crawlers execute little or no WebGL. If your only copy sits inside a React Three Fiber scene, you risk a blank index. Next.js App Router metadata, About, and MDX posts provide extractable passages; the hero remains a progressive enhancement.
What belongs above the fold?
Limit the first viewport to the brand name, one headline, one scroll CTA, and the canvas. Move skills, stats, and case lists below the fold so the composition stays studio-grade and the HTML outline stays clean.
How should assets be delivered?
Compress GLBs with Draco or meshopt and KTX2 textures via gltf-transform on an authoring machine (for example Shadow PC). Cap device pixel ratio around 1.5–1.75 and ship a poster fallback for prefers-reduced-motion.
FAQ
Does WebGPU replace SSR? No. WebGPU improves client rendering; SSR still carries the words engines cite.
Is GitHub Pages enough? Static SPA hosting works for demos but blocks true SSR. Self-hosting Next.js (or similar) unlocks metadata, sitemaps, and JSON-LD at request time.