Three.js SEO and WebGL SEO for product pages: prerender, captions, model metadata, LCP with canvases, and crawlable HTML so Google and AI search can index 3D experiences. This is the playbook I use on Three.js product work, including jewelry rendering flows similar to RenderMyJewelry, where the demo sells and the HTML still has to rank.
Short answer
A WebGL site ranks when the 3D scene is a presentation layer and the document carries the product story. Prerender money URLs, put specs and captions in HTML, reserve space for the canvas to protect CLS, use a poster or static hero for LCP, compress models, and never rely on the GPU framebuffer for indexable text. Google and AI search cite what they can read, not what they can orbit. Ship the same facts in Product schema that you show beside the viewer.
Why WebGL SEO is a different problem than SPA SEO
SEO for JavaScript SPAs covers titles, sitemaps, and prerender. Three.js pages add a harder constraint: the canvas is opaque. Raycasted menus, CSS3D planes inside the scene, and text textures are invisible to crawlers.
Treat every interactive 3D product page as two products:
- Human product: orbit, materials, configurator, embed
- Crawler product: H1, short answer, specs, FAQ, images, links
If either is missing, you either lose conversion or lose discovery.
HTML layer requirements for 3D product pages
Minimum crawlable surface for a product showcase:
- Unique title and meta description per product or collection URL
- H1 with the product name, not only “Viewer”
- Short answer: what it is, materials, who it is for
- Spec list: formats supported, metals, gem options, dimensions
- FAQ for buyer objections (shipping, file types, embed rights)
- Related case studies and docs with real
hreflinks
For AI search (GEO/AEO), that short answer and FAQ are what get cited when someone asks “best web jewelry configurator” or “GLB product viewer for ecommerce.”
Prerender and routing for Three.js SPAs
Vite + React + drei stacks often ship as SPAs. That is fine for the app shell. Money URLs need HTML at request time:
- Prerender product detail routes at build time, or SSR them
- Update history with real paths when the scene changes SKU
- Ensure soft 404s do not return HTTP 200 with an empty shell
- Include product URLs in the sitemap with lastmod
On zaneone.one the blog uses static HTML for crawlers for the same reason: interactive UI, crawlable document.
Captions, posters, and model metadata
Crawlers and users both need a non-WebGL fallback story:
- Poster image: high-quality still of the default camera angle for LCP and social
- Figcaptions / aria: describe what the viewer shows when JS fails
- Alt text on stills and 360 frame previews
- Model metadata: file format, poly budget class, material names in HTML lists
- Product schema: name, image, description, brand, offers when commercial
glTF extras and custom properties help your app. They do not replace HTML. Put buyer-facing facts in the document.
LCP, INP, and CLS when the hero is a canvas
Core Web Vitals break WebGL marketing pages more often than keyword issues.
- LCP: Do not make a late-booting canvas the LCP element. Use a compressed poster
<img>(or CSS background with reserved aspect ratio) as the first meaningful paint, then fade into WebGL. - CLS: Reserve width/height or aspect-ratio for the viewer container before the renderer mounts. Avoid injecting the canvas into an empty collapsing div.
- INP: Keep pointer handlers light. Debounce orbit updates, avoid main-thread GLB parse on first click, and move heavy decode off the critical path.
Practical budgets I use on product heroes: poster under ~150KB, initial JS chunk disciplined, first GLB progressive (Draco/meshopt), pixel ratio capped on mobile. More in performance budgets for WebGL apps and Core Web Vitals for interactive pages.
RenderMyJewelry-style product SEO in practice
Jewelry and CAD-to-web platforms are a stress test for this pattern. On work in the spirit of RenderMyJewelry (see zaneone.one/portfolio), the selling moments are photoreal stills, 360 spins, and interactive metal/gem viewers. The indexable layer still has to say:
- What file formats upload (3DM, FBX, OBJ, STL, GLTF/GLB)
- What outputs you get (stills, 360, embeddable viewer)
- Who it is for (designers, manufacturers, ecommerce)
- How self-serve the pipeline is
Humans orbit the ring. Crawlers read the pipeline. Both need intentional design.
When the product supports embeds, give the embed a thin chrome with a title, a “powered by” or product link, and a fallback still. Third-party host pages will not rewrite your SEO for you. Your canonical product URL must remain the place with the full answer, schema, and FAQ.
Content clusters around a 3D product
One hero viewer rarely ranks alone. Support it with guides that answer adjacent prompts: format pipelines, material performance, embedding, and CWV. Cross-link those guides with real hrefs from the product page and from each other. That is how a Vite portfolio and a 3D SaaS both build topical depth without stuffing keywords into the canvas UI.
Useful cluster partners on this site include glTF optimization, photoreal materials, and embedding viewers. Each should mention the product category in prose so entity language stays consistent for AI retrieval.
Internal links and embeds without orphaning the scene
Common failure: the only way to change products is a mesh click with no URL. Fix it:
- Every product state that should rank gets a URL
- UI chips and thumbnails are
<a>tags styled as controls - Embeds on third-party sites link back to the canonical product page
- Blog guides like embedding interactive 3D viewers and glTF optimization reinforce the cluster
Accessibility overlaps with SEO more than teams expect
Screen-reader text, captions, and keyboard-reachable controls are not only compliance work. They force you to express scene meaning outside the framebuffer, which is exactly what crawlers need. If a material swatch is only a colored mesh with no accessible name, neither assistive tech nor AI retrieval can describe the option. Pair visual pickers with HTML labels and update the short answer when defaults change.
Reduced-motion preferences should disable auto-orbit without removing the poster or specs. A still that remains when motion stops is also a better LCP candidate.
Launch checklist for Three.js product SEO
- curl the URL: is the product story in the HTML?
- Lighthouse + field CWV: poster LCP, stable viewer box, sane INP
- Rich results test for Product / FAQ where applicable
- Sitemap includes every SKU or collection you care about
- Mobile: pixel ratio cap, compressed GLB, quality toggle
- AI prompt test: ask ChatGPT/Perplexity the buyer question and see if your facts are quotable
- Confirm embeds link back to the canonical product URL
- Verify internal nav uses hrefs, not mesh-only hit targets
How this maps to my studio work
Through services I build React + WebGL product experiences where SEO is part of the architecture review, not a week-twelve patch. Portfolio pieces in 3D/SaaS follow the same split: interactive proof for buyers, static meaning for Google and AI search.
Related reading: SEO for JavaScript SPAs, Three.js performance optimization, image optimization for 3D product pages, GEO for product sites, and React + WebGL integration.
FAQ
Can Google index content inside a WebGL canvas?
No. Google and AI crawlers do not read text painted inside a WebGL or Three.js canvas. Anything you want indexed or cited must exist as HTML (headings, paragraphs, captions, alt text, and links) outside or beside the canvas. Treat the scene as presentation, not as the document.
How do you SEO a Three.js product configurator?
Prerender each important state or product URL with real HTML copy, keep navigation as href links, add Product schema and visible specs, provide a poster image for LCP, and lazy-init the WebGL scene after the text layer is ready. Mirror buyer FAQs in HTML and schema for AI citations.
What hurts rankings most on WebGL sites?
Canvas-only content, missing prerender on SPAs, huge GLB downloads blocking LCP, layout shifts when the canvas mounts, and internal navigation that uses click handlers without crawlable links. Autoplaying heavy heroes on mobile compounds CWV failures.
Is this different from general SPA SEO?
Yes. SPA SEO covers meta, routers, and prerender. WebGL SEO adds canvas invisibility, 3D asset budgets, poster/LCP strategy, model captions, and product metadata for interactive showcases like jewelry or configurators such as RenderMyJewelry-style pipelines.
Next step
Add a poster + HTML short answer beside your main canvas, prerender the product URL, and re-test LCP on mobile. If you need a Three.js product page built to rank and convert, contact Zane.
Want this built for your product? Start a project with Zane, or explore shipped work, services, and more guides.