3D websites and SEO: what Google can and can't see

There is a persistent belief that 3D websites cannot rank. It is half right, for a reason that is easy to fix and usually is not fixed. This is the half that is right, the half that is wrong, and the checklist we run before a 3D site goes live.

The half that is right: a canvas is a black box

WebGL renders into a <canvas> element. To Google, and to a screen reader, a canvas is a rectangle with nothing inside it. Every word drawn into the scene — a headline rendered as 3D text, a product name floating in space, a menu made of geometry — does not exist as far as search is concerned. A site that puts its content in the scene has, from Google’s point of view, no content.

That is the whole problem. It is also the whole solution: keep the words out of the canvas.

The half that is wrong: the scene doesn’t have to hurt

A 3D scene is a layer. If the page underneath it is a normal, fast HTML document — headings, paragraphs, links, images with alt text — Google indexes that document exactly as it would without the scene. The scene is decoration on top, and Google is indifferent to decoration it cannot see, as long as it does not slow the page down.

So the two questions that decide whether a 3D site ranks are: is every word in plain HTML, and does the scene cost the page its speed? Both are engineering choices. Neither is inherent to 3D.

What still has to be plain HTML

• Every heading. Your H1 is not a 3D object. It can sit over a 3D object, styled however you like, but it is text in the document.
• Every paragraph and link. Navigation built from geometry is unindexable and unusable by keyboard. Build it as a <nav> and lay the scene behind it.
• Product names, prices, specifications. If a visitor can rotate a product in 3D, the name and price are beside it in HTML — or, for a configurator, in a live region that updates as they change options.
• Alt text and a fallback image. The still frame a phone sees is an image, and it needs alt text if it carries meaning. Ours is decorative and marked empty.
• Structured data. Product, Organization, Breadcrumb — all JSON-LD, all independent of the scene.

If you can turn the renderer off and the page still says everything it needs to say, you have done this right. That is our test.

Speed: the metric a 3D site usually fails

Core Web Vitals do not care what a page looks like. They care when the largest element painted, how much the layout shifted, and how quickly the page responded to a tap. A scene that loads before the content, or that blocks the main thread while it initialises, fails all three, and a page that fails them ranks lower than the same page without the scene.

The fix is ordering. The document paints first. The renderer is loaded afterwards, on idle, once the canvas is on screen. Phones and low-power devices are given a still frame instead of a live scene. Done that way, the metrics measure a fast page and the scene arrives after the measurement. The method is written up here.

Two more things people miss

Reduced motion is an accessibility requirement, and Google notices accessibility indirectly. A visitor who has asked their operating system for less motion must get a still page, and the still page must be complete. Sites that ignore this tend to have other problems Google can measure.

Client-side routing can hide your pages. Some 3D sites are built as a single page where “navigation” moves the camera. There is then only one URL, one title and one description for the whole site. Every page you want to rank needs its own URL and its own document, even if the transition between them is a camera move.

The checklist

Before a 3D site goes live, we check:

1. Renderer disabled — does the page still contain every heading, paragraph, link and price?
2. One H1 per page, in HTML, and it is the page’s actual subject.
3. Navigation is a <nav> with real links, reachable by keyboard.
4. Every page has its own URL, title, description and canonical.
5. Structured data validates and does not depend on the scene.
6. Lighthouse mobile on a throttled profile passes Core Web Vitals with the scene enabled.
7. prefers-reduced-motion produces a complete, readable page.
8. The still-frame fallback has correct dimensions and alt text.
9. Fonts and the fallback image are preloaded or lazy-loaded appropriately; nothing shifts when they land.
10. Search Console is set up before launch so the first crawl is watched, not assumed.

None of this is exotic. It is the same discipline a fast flat site needs, applied to a site that also has a scene in it. That is what 3D website development means when we say it.

Sources and further reading

• JavaScript SEO basics — Google Search Central
• : The Graphics Canvas element — MDN
• Web Vitals — web.dev