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?
One thing you can do is to provide a sitemap and display the actual content in a static manner when the visitor is a crawler.
Edit: I think Google is starting to learn to crawl React sites, but I’m not entirely sure how well it works.
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
Yeah, I love Netlify! Just started using it 2 months ago, and it makes things amazingly simple to deploy.