SEO на WebGL-сайте работает, когда canvas используется для оформления, а контент размещён в HTML. Google выполняет JavaScript, но <canvas> содержит лишь пиксели: по выражению Utsubo, в нём «нет текста, доступного для индексации». Поэтому заголовки, сведения о товаре, ссылки и все значимые варианты страницы должны присутствовать в серверной HTML-разметке ещё до запуска 3D. При таком подходе сайт на Three.js может продвигаться в поиске наравне с другими.
Почему SEO не работает, если всё находится в canvas
У большинства 3D-сайтов, которые не появляются в поиске, встречается одна из четырёх проблем:
- Текст внутри сцены. Заголовки в виде 3D-букв или части текстуры невидимы для поисковиков и программ экранного доступа.
- Контент появляется только после выполнения JavaScript. Google действительно обрабатывает JavaScript, но делает это в порядке очереди, «когда позволяют ресурсы Google». Серверный или предварительный рендеринг Google по-прежнему называет «отличной идеей», в том числе потому, что не все роботы выполняют JavaScript.
- Кликабельный объект вместо ссылки. Google указывает, что «может находить ссылки, только если это HTML-элементы
<a>с атрибутомhref». Обработчик нажатия на 3D-объект ссылкой не является. - Один URL для разных вариантов страницы. Если каждый цвет товара или квартира открывается внутри одного canvas, а адрес не меняется, Google видит одну страницу.
SEO для Three.js: сначала HTML
Создавайте страницу так, будто 3D никогда не загрузится. Затем добавляйте его поверх готовой основы.
На практике разметка первого экрана выглядит так:
<section class="hero">
<h1>Кроссовки Ridge 40 для трейлраннинга</h1>
<p>Карбоновая пластина, три цвета, конструкция для затяжных спусков.</p>
<a href="/shop/ridge-40">Купить Ridge 40</a>
<div class="hero-3d" aria-hidden="true" style="aspect-ratio:16/9">
<img src="/img/ridge-40-poster.webp" alt="" width="1600" height="900">
<canvas></canvas>
</div>
</section>H1, текст и ссылка находятся в обычном HTML. 3D-контейнер отмечен атрибутом aria-hidden, поскольку служит только для визуального оформления. Статичное изображение заранее занимает нужное место, поэтому при появлении canvas вёрстка не скачет. Если какой-то текст существует только внутри 3D-сцены, Utsubo рекомендует добавить запасной вариант в <noscript> с теми же заголовком, кратким описанием и призывом к действию.
Чек-лист SEO для 3D-сайта
| Позиция | Что сделать | Как проверить |
|---|---|---|
| Рендеринг | Готовить HTML каждого маршрута на сервере или заранее (Next.js, Astro и аналогичные инструменты) | Открыть исходный код страницы: есть ли в нём H1? |
| Отдельный URL для каждого варианта | Каждому значимому варианту страницы нужен индексируемый URL, например /product/x-pro?color=black |
Каждый вариант открывается напрямую в новой вкладке |
| Ссылки | Обычные <a href> для всех переходов; History API вместо фрагментов с # |
Обойти сайт любым SEO-краулером |
| Метаданные | Уникальные title, description и изображение Open Graph для каждого URL | Вставить URL в сервис проверки предпросмотра для соцсетей |
| Структурированные данные | Organization, Product, FAQPage в формате JSON-LD, соответствующие видимому контенту | Rich Results Test |
| Alt-тексты | Описательные alt у заставок и изображений, несущих смысл | Аудит доступности |
| Скорость | LCP ≤ 2,5 с, INP ≤ 200 мс, CLS ≤ 0,1 (web.dev) | PageSpeed Insights, данные реальных посещений |
Отдельные URL особенно важны для конфигураторов и сайтов недвижимости. В нашем демонстрационном проекте жилого дома в Таллине квартиру можно выбрать, наведя курсор на подсвеченное окно. В рабочей версии у каждой квартиры была бы собственная страница, сформированная на сервере, с комнатами, площадью, ценой и статусом в обычном HTML. Фасад помогает людям выбирать, а Google индексирует страницы квартир.
О структурированных данных стоит сказать отдельно. Utsubo называет разметку FAQPage «самым действенным инструментом GEO в 2026 году». Под GEO имеется в виду видимость в ответах ИИ-поиска. Это мнение Utsubo, а не заявление Google. Но отвечать на реальные вопросы в видимом HTML-контенте полезно в любом случае.
Скорость тоже влияет на SEO. Допустимый объём загрузки и её порядок разбираем в руководстве по производительности 3D-сайтов.
Как проверить страницу в Search Console через URL Inspection
Не полагайтесь на предположения. Посмотрите, что именно видит Google.
- Откройте Search Console и вставьте адрес страницы в URL Inspection (проверка URL).
- Нажмите Test live URL (проверка опубликованной страницы). Google загрузит страницу в реальном времени.
- Нажмите View tested page (просмотр проверенной страницы). На вкладке HTML показана обработанная разметка: найдите в ней H1, основной текст и ссылки.
- Откройте Screenshot, чтобы увидеть, как Google отобразил страницу. Снимок появляется только после успешной проверки опубликованной страницы.
- В разделе More info проверьте ошибки JavaScript в консоли и заблокированные ресурсы, например модель или скрипт, закрытые в robots.txt.
- Если всё на месте, нажмите Request indexing (запрос индексации). URL попадёт в очередь, но, по данным Google, это не гарантирует индексацию. Для большого числа страниц лучше использовать sitemap.
Если на вкладке HTML есть только индикатор загрузки, вы нашли причину проблемы.
Частые ошибки на 3D-сайтах
- Вместо контента только экран загрузки. «Загрузка 0%» - не лучший заголовок страницы.
- Переходы между разделами без изменения URL. Красивые эффекты, но для поисковика всё ещё одна страница.
- Текст встроен в GLB-модели. Оставляйте его в HTML и размещайте поверх canvas с помощью CSS.
- Весь контент скрыт до завершения движения камеры. Его можно показывать с анимацией, но в DOM он должен быть с самого начала.
Большинство этих правил относится и к сайтам с большим количеством анимации без 3D; подробнее - в статье «SEO для анимированных сайтов». Если вы ещё выбираете технологии, руководство «Как создают сайт на Three.js» объяснит, где в этом процессе нужен серверный рендеринг.
