AR, 3D-модели и SEO: когда интерактив помогает сайту

• мебель и интерьер;
• техника;
• одежда и аксессуары с виртуальной примеркой;
• автомобили;
• оборудование;
• архитектура и недвижимость;
• музейные объекты;
• сложные B2B-продукты.

Если пользователь не получает дополнительной информации по сравнению с фотографией, тяжёлая 3D-сцена может ухудшить опыт без пользы.

Не помещайте название, цену и характеристики только внутрь canvas/WebGL. Они должны существовать как обычный текст. Тогда страница остаётся понятной при отключённом JavaScript и доступной для вспомогательных технологий.

Для товарной страницы Product structured data может содержать subjectOf с типом 3DModel. Модель связывается через MediaObject/contentUrl и должна быть в поддерживаемом формате glTF или GLB.

Цена, наличие и другие свойства Product должны совпадать с видимыми данными.

Файл 3D должен быть доступен для загрузки и не требовать авторизации, если он используется публично. Следите за корректным MIME type, CORS и стабильным URL.

3D-файл может весить десятки мегабайт и нагружать GPU/CPU. Не загружайте полный viewer до того, как пользователь проявил интерес, если это не критично первому экрану.

• показывайте poster/preview;
• лениво загружайте viewer;
• сжимайте текстуры;
• используйте LOD;
• ограничивайте poly count;
• тестируйте слабые мобильные устройства.

AR/3D может ухудшать LCP из-за тяжёлого hero, INP из-за блокировки main thread и CLS при поздней инициализации контейнера. Резервируйте размеры и выносите тяжёлые вычисления из критического пути.

Пользователь без WebGL или с экономией трафика должен получить качественные фотографии, видео или статичные ракурсы. Не делайте покупку невозможной без 3D.

Canvas не объясняет содержимое скринридеру. Добавляйте текстовое описание объекта, доступные кнопки управления и альтернативные изображения. Управление не должно зависеть только от drag жеста.

Дополненная реальность часто открывается на мобильном устройстве через отдельный viewer. Ясно объясните требования и дайте обычную альтернативу.

Не заставляйте пользователя устанавливать приложение, если веб-сценарий может выполнить задачу.

Даже при наличии 3D используйте качественные Product images. Они нужны для категории, соцсетей, поиска по изображениям и пользователей, которые не запускают интерактив.

Покажите масштаб, материалы, размеры и ограничения. В 3D легко создать неверное впечатление о цвете или размере, поэтому визуализацию нужно сопровождать точными характеристиками.

Если цвет или размер меняют модель, синхронизируйте выбранный вариант с ценой, SKU, availability и structured data. Не позволяйте viewer показывать чёрный диван, когда форма покупки выбрала белый.

Основная SEO-страница — товар или объект, а не URL .glb. Не нужно создавать отдельную текстовую посадочную под каждый технический файл без пользовательской ценности.

• запуски viewer;
• доля пользователей, взаимодействовавших с моделью;
• add-to-cart после 3D;
• конверсия;
• возвраты товара;
• ошибки viewer;
• performance по устройствам.

A/B-тест особенно полезен: интерактив может повышать уверенность в покупке, но одновременно замедлять страницу.

• весь контент внутри canvas;
• автозагрузка тяжёлой модели;
• нет fallback;
• модель не совпадает с вариантом;
• schema содержит невидимые данные;
• нет мобильного тестирования;
• 3D добавлено только ради «SEO-инновации».

1. Определить пользовательскую задачу.
2. Подготовить оптимизированную модель.
3. Сохранить полноценную HTML-карточку.
4. Добавить fallback.
5. Настроить lazy load.
6. При необходимости разметить Product/3DModel.
7. Проверить accessibility.
8. Измерить Core Web Vitals и конверсию.

AR и 3D полезны, когда помогают принять решение и не ломают базовую страницу. SEO-стратегия здесь проста: сначала качественный индексируемый продуктовый контент, затем интерактив как дополнительный интерфейс.

Храните оптимизированный web-вариант отдельно от исходника для производства. Текстуры можно сжимать, модели — упрощать, а тяжёлые ассеты отдавать через CDN. Следите за cache headers: 3D-файлы меняются реже HTML, поэтому могут эффективно кэшироваться при versioned URL.

Тестируйте не только новый iPhone и мощный desktop. Старые Android-устройства могут перегреваться, закрывать вкладку или не поддерживать нужный API. Если viewer падает, пользователь должен продолжить покупку по фотографиям и характеристикам.

События аналитики должны различать запуск 3D, смену варианта, AR, add-to-cart и покупку. Это помогает понять, действительно ли интерактив влияет на решение. Сравнивайте не только конверсию: для мебели или одежды полезно смотреть возвраты и обращения по несоответствию ожиданиям.

3D-модель — тоже контент. При изменении товара она может устареть раньше текста. В workflow карточки добавьте проверку соответствия цвета, геометрии, размеров и комплектации. Не оставляйте старый viewer после обновления SKU.

После запуска назначьте владельца 3D-ассетов. Когда меняется SKU, материал, упаковка или геометрия, модель должна обновляться вместе с карточкой. Проверяйте broken URLs моделей, ошибки загрузки и совместимость после обновлений viewer-библиотеки. Для крупного каталога полезен автоматический мониторинг размера файлов и наличия fallback-изображений.

Не забывайте про резервный сценарий при недоступности CDN или стороннего AR-сервиса. Ошибка интерактива не должна блокировать цену, корзину или форму заявки. Это критично для ecommerce: дополнительная функция не может быть единственной точкой отказа.

Все критичные товарные данные должны оставаться доступными и без запуска 3D.