We’ve built a site with Three.js and React. Most of the content that we want search engines to crawl is displayed via a CSS3Renderer on a plane inside our WebGL scene. We’re using raycasting to navigate through the the site. Our nav buttons are gltf models. When a button is clicked a React component is displayed on the plane via CSS3DRenderer. So we do not have page links. So far, it appears that search engines do not see any of the CSS3Rendered content, or any content beyond our WebGlRendered landing page. Any advice on how to make Three.js sites SEO friendly?
I think most search engines read your raw HTML document without executing any JavaScript. React performs a lot of client-side updates to the HTML via JavaScript, so the search-engine crawler can’t see them. Have you looked at server-side rendering?
Edit: I think Google is starting to learn to crawl React sites, but I’m not entirely sure how well it works.
These days Googlebot will evaluate basic Javascript, but it won’t render WebGL and it definitely won’t click through objects in your scene.
It is generally best practice to provide static, no-JS content for Googlebot to crawl. Besides building an entire separate static website, one approach is to use the History pushState API to update the URL when the user clicks on an object in your scene.
On the server side, you’d need some special handling for these deeplinks that sets up your scene with the right state and also displays some static content in a <noscript> tag or perhaps in a div that’s only shown to search engines.
Google is indeed able to crawl single page applications to some extent, but if SEO is key to the success of your website because, for example, it’s an ecommerce website, then server side rendering is arguably a must. Cool thing, though, is that with frameworks like Gatsby and Next, server side rendering is fairly straight forward, especially if you use Gatsby, which is a static site generator, which means you can deploy your site pretty much anywhere, although my preference would be netlify since it integrates awesomely well with Git and makes the whole business of making deployments no more of an issue than a push to the master branch of your repository
