Building a 3D website that Google can still read

A 3D or animated website can still be read by Google, as long as the words live in the page’s HTML and the animation sits on top of them. Most animated sites that rank badly are built the other way round: the headlines and copy exist only inside the animation, or only appear after JavaScript runs. A 3D scene is drawn onto a canvas, and to a search engine a canvas is a blank rectangle. When we rebuilt our own site in 2026 with a particle animation on the homepage, we made sure the page works as a plain document first. This article explains why that matters and exactly what we did.

Why animated sites often rank badly

Google reads the text, headings and links in the HTML a page sends. Headings tell it what the page is about. Links tell it what other pages exist and how they relate. Text drawn by a 3D engine gives it none of that.

WebGL (the browser technology that draws 3D graphics) paints pixels onto a <canvas> element. The visitor sees a picture. The HTML contains one empty tag. If your company name, your services and your city only exist inside that picture, a search engine has nothing to index.

The second problem is quieter. Many modern sites send an almost empty HTML file and use JavaScript to build the page in the visitor’s browser. Google can run JavaScript, but it treats that as an extra step that may happen later, and many other tools that read your page, such as the link previews in messaging apps, do not run it at all. If anything goes wrong in that step, the search engine may see an empty page.

Our previous site, built in 2019, had exactly this problem. It was a React single-page app: the HTML it sent was an empty container that JavaScript filled in afterwards. It looked fine to a visitor. To anything that read the raw page, there was almost nothing there.

The third problem is weight. Animation libraries, 3D models and textures are large. On a mid-range phone they can make a page slow to load and slow to respond. Google uses page speed as a ranking signal, and visitors leave slow pages whatever Google thinks.

Start with a normal page

The new site is built with Astro, a framework that produces finished HTML for every page at build time. When a browser or a search engine asks for a page, the text is already in it before any script runs.

The homepage animation is a layer on top of that normal page. Every headline the animation shows as you scroll (“Websites”, “Apps”, “Search” and so on) is a real heading in the HTML. The first is the page’s main heading, and the rest are subheadings beneath it. The canvas that draws the particles is marked as decorative, so screen readers skip it. Someone using a screen reader hears the headings instead of a description of floating dots.

Below the animation are ordinary sections for services, work and contact, with real links to a separate page for each service and each case study. Those links are how Google finds the rest of the site. They are also how a visitor who does not want to scroll through an animation gets straight to what they came for.

Plan for when the animation cannot run

Some browsers cannot run WebGL, and some visitors have JavaScript turned off. On our homepage, if either is the case, the animation layer is removed and the page reads as a normal document. Nothing sits behind a loading screen waiting for a script that will never run.

This is worth asking about on any animated site. A fallback that shows a spinner forever, or a black box, is common and easy to miss, because the developer’s own computer runs everything without complaint.

Keep the animation light

The animation script loads after the text is readable, so it never holds up the words. It is 12 KB compressed, which is small for a script that draws a full 3D scene.

Phones get a lighter version:

• 16,000 particles instead of the 70,000 used on a desktop.
• Shapes sized to the screen, so a word formed from particles does not spill off the edge.
• The scene does not resize when the phone’s address bar slides away as you scroll, which would otherwise make the animation jump and redraw.

Visitors who have asked their device for reduced motion (a setting on phones and computers for people who find movement on screen uncomfortable) get a slower, calmer version.

A search engine does not see any of this directly. It matters because a page that stutters on a phone is a page people leave, and because speed is one of the things Google takes into account.

The ordinary SEO work still applies

An animation does not replace the basics. Each page on our site has:

• Its own title and description, which is what shows up in search results.
• A canonical address, which tells Google the one official URL for the page so near-duplicates do not compete with each other.
• A place in the sitemap, a file that lists every page for search engines.
• Structured data, a block of code that tells Google what the business is, where it is and what it offers.

We also serve our fonts from our own site instead of loading them from a third party, so the browser does not have to connect to another server before it can show the text in the right typeface.

The most important decision was how many pages to have. One animated homepage cannot rank for many different searches. Someone looking for an app developer and someone looking for a web designer in Miami want different things, so each service and each location has its own page with its own words. The homepage introduces the studio. Service pages such as web design and development and SEO do most of the work of being found.

This approach is designed to give search engines everything they need from the first request, and to keep the animation from getting in the way. The site has only just launched, so we are not going to claim results for it here.

How to test an animated site you are being sold

You do not need to be technical to check this. Before you approve an animated or 3D site, try these four things:

1. Turn off JavaScript and reload the page. In Chrome this is under Settings, then Privacy and security, then Site settings, then JavaScript. If the words disappear, search engines may not see them either.
2. View the page source and look for your headline. Right-click the page and choose “View page source” (Ctrl+U on Windows, Cmd+Option+U on a Mac). Search for your main headline with Ctrl+F or Cmd+F. If it is not there, a script is drawing or adding it.
3. Check it on a mid-range phone. Use an ordinary phone a couple of years old, the kind many of your customers carry, and scroll through the whole page. If it stutters or takes a long time to show anything, your visitors will feel it too.
4. Ask what happens for visitors who cannot run the animation. A good answer describes a specific fallback that someone has tested. A vague answer usually means nobody has.

What to do next

If your site already passes those four checks, the animation is probably not what is holding it back in search, and you may not need to change anything. If it fails the first two, the fix is usually structural: the text has to move into the HTML. That is much easier to plan into a build from the start than to patch in afterwards, so it is worth raising before any design work begins.

If you want an animated site and are worried about search, we are happy to look at what you have or what you are being offered. Get in touch.