Schilazzi P. Towe
Start a conversation

Note · 6 min

Is a 3D/WebGL website bad for SEO?

Not by itself. A WebGL site hurts search when its words live only inside the canvas, when every section shares one URL, or when the 3D code delays the first paint. Keep all text and links in server-rendered HTML, give each section its own route and heading, and load the 3D layer after the content.

The canvas is a picture. Search engines and AI assistants read text. Most of the SEO problems blamed on 3D come from forgetting that.

How do search engines see a 3D site?

Google processes a JavaScript site in three phases: crawl, render and index. It fetches the HTML, queues the page for rendering in a headless Chromium, then indexes the rendered HTML. That queue can add delay, and Google still recommends server-side rendering or pre-rendering because it is faster for users and crawlers.

Two consequences matter for WebGL:

  1. Text painted into a canvas isn't in the HTML. Google's guidance is plain that content missing from the rendered HTML can't be indexed. A headline drawn with a shader is invisible to search.
  2. Links must be real links. Google discovers pages through <a> elements with an href. A 3D scene where you click floating objects to navigate gives a crawler nowhere to go.

Google itself notes that not every bot can run JavaScript. For those bots, the first HTML response is the whole site.

What actually goes wrong on immersive sites?

The common pattern is a single-page experience with one URL, one title and a loading screen. The crawler sees a few words and a script tag. Every scene in the experience shares the same title and description, so nothing can rank for a specific question. Heavy scenes push the largest visible element well past the first few seconds on a phone.

None of this is required by WebGL. It comes from building the canvas first and treating content as decoration on top.

How this site is built

This site is my worked example. It is a horizontal track of seven sections over a particle world, and it is being built so that search engines and assistants can read all of it. These are the design rules, not measured results:

  • HTML first, canvas behind. Every heading, paragraph and link is server-rendered HTML. The React Three Fiber canvas sits behind the content as a progressive layer. If WebGL never loads, the page still reads completely.
  • One route per section, one H1 per route. The track lives at /, and each section also has its own server-rendered route (/journey, /frontiers, /work, /lab, /principles, /contact) that opens the track at that point. Each route has its own title, meta description, canonical URL and a single H1. On the combined page, each section uses an H2.
  • Shaders load last. three.js, the scene code and the shaders are split out and loaded after the content is on screen, so they don't compete with the first paint.
  • Adaptive quality. Particle counts and render resolution scale to the device. WebGL is switched off when the visitor has asked for reduced motion and on low-power devices.
  • Visible controls. Motion on or off, quality (auto, low, high) and a reset are shown on screen. They are accessibility features and a signal that the motion is optional.
  • Machine-readable layers. A sitemap, structured data per page type, Markdown versions of the Notes, and /llms.txt with /llms-full.txt as a curated map for AI assistants. The robots file allows the major AI crawlers.

The target is a largest contentful paint under 2.5 seconds on a mid-range phone. I'll publish real numbers once the site is live and measured.

What about accessibility and motion?

The CSS media feature prefers-reduced-motion reports whether a visitor has asked their device to minimize non-essential motion, and JavaScript can read the same setting through matchMedia. WCAG 2.2 asks that motion triggered by interaction can be turned off unless it is essential (success criterion 2.3.3, level AAA), and that animation that starts on its own can be paused (2.2.2). A WebGL site meets these more easily when the content never depended on the animation in the first place.

Does llms.txt help?

llms.txt is a proposal, first published in 2024, for a Markdown file at a site's root that gives AI agents a short, curated guide with links to clean versions of the key pages. It isn't a formal standard. Google states that no special files or schema are needed to appear in its AI Overviews or AI Mode; normal indexing is what counts there. I add llms.txt because it is cheap and helps the tools that read it. It does nothing for content that isn't in HTML.

Checklist for a 3D site that can be found

Check Pass looks like
View source on any page All headings and body copy are present in the first HTML response
Each section or story beat Has its own URL, title, meta description and one H1
Navigation Real <a href> links, also reachable by keyboard
First paint Text appears before three.js and shaders download
Core Web Vitals on a mid-range phone LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 at the 75th percentile
Reduced motion prefers-reduced-motion respected; WebGL off or calmed
Controls Visible motion toggle and quality setting
Low-power and no-WebGL devices A complete, readable fallback
Machine layers Sitemap, structured data matching visible text, optional llms.txt

How I'd approach it for you

If you want a site that feels alive and still gets found, I'd start from the content and the questions your customers search for, then design the 3D layer as atmosphere around that. I'd build the HTML routes first, add the scene as a lazy-loaded layer with visible controls, and test it against the checklist above on real devices. You'd see the measurements before launch.

If you already have a 3D site that search can't see, the Site X-ray shows what a crawler gets from it. Then Start a conversation.

Sources

Frequently asked

Is WebGL bad for SEO?

Not by itself. Search engines index HTML text, and a WebGL canvas contains pixels with no text. A 3D site ranks fine when every word is in the server-rendered HTML, each section has its own URL and heading, and the 3D layer loads after the content.

Can Google index content drawn in a three.js canvas?

Treat the answer as no. Google indexes what appears in the rendered HTML, and text painted onto a canvas isn't HTML. Put headings, copy and links in real elements, and use the canvas for atmosphere and illustration.

Will a 3D website be slow on mobile?

It can be, if the 3D code blocks the first paint. Send real HTML first, load three.js and shaders afterward, scale particle counts and resolution to the device, and switch WebGL off for reduced-motion or low-power cases. Then measure Core Web Vitals on a mid-range phone.

How do you make a WebGL site accessible?

Keep all content and navigation in HTML so screen readers and keyboards work. Respect the prefers-reduced-motion setting, add a visible motion toggle and quality control, and never put essential information only inside the animation.

Do I need llms.txt for AI search?

Google says no special files are needed to appear in its AI features. llms.txt is an open proposal that some assistants and tools read as a curated map of a site. It is cheap to add, and it helps agents that read it, but it won't fix content that isn't in HTML.