Анимация сама по себе не вредит SEO. Google не понижает позиции за движение на странице. Он читает HTML и измеряет скорость и стабильность у реальных пользователей. Проблемы начинаются, когда анимация скрывает контент от поискового робота или настолько нагружает страницу, что Core Web Vitals попадают в красную зону.
Поэтому главный вопрос: сможет ли Google прочитать страницу до запуска анимации?
Что на самом деле оценивает Google
Для сайта с большим количеством анимации важны две вещи.
1. Содержимое HTML после рендеринга. Googlebot ставит страницы в очередь на обработку. Когда доступны ресурсы, Chromium без графического интерфейса отрисовывает страницу и выполняет JavaScript. Google индексирует то, что находит в полученном HTML. А переходить по ссылкам может только через элементы <a> с атрибутом href.
2. Удобство страницы, включая Core Web Vitals. Google сообщает, что его системы ранжирования используют Core Web Vitals. При этом «единого сигнала нет», а поиск «всегда стремится показывать наиболее релевантный контент, даже если удобство страницы ниже должного уровня».
То есть медленный сайт с анимацией и отличным контентом всё ещё может занимать хорошие позиции. Быстрый сайт, контент которого Google прочитать не может, - нет.
Четыре реальных риска для SEO сайтов с анимацией
1. Контент появляется только после прокрутки
В руководстве Google по отложенной загрузке сказано прямо: «Google Search не взаимодействует с вашей страницей». Если текст раздела загружается или добавляется только после того, как пользователь прокрутит до него, Google может его вообще не увидеть.
Разделите содержание и анимацию. Текст должен быть в HTML с самого начала; анимация меняет только способ его появления. Заголовок, который проявляется из состояния opacity: 0, уже находится в DOM. Заголовок, который обработчик прокрутки запрашивает через API, - ещё нет.
Это главное правило SEO для сайтов с повествованием при прокрутке: каждый этап истории уже присутствует на странице в виде текста, а прокрутка лишь открывает его.
2. Контент существует только в JavaScript
Приложения, которые формируют всё содержимое в браузере, отдают в исходном HTML пустую оболочку. Google умеет выполнять JavaScript, но делает это позже. Сам Google по-прежнему рекомендует серверный рендеринг или предварительную генерацию страниц, потому что не все роботы умеют запускать JavaScript. Это часто касается и роботов, создающих превью ссылок.
Next.js, Astro и похожие фреймворки решают эту задачу: сформируйте страницу на сервере, а после загрузки добавьте эффекты GSAP и Three.js.
3. Текст нарисован внутри canvas
Результат работы WebGL и canvas - пиксели. Как объясняет Utsubo, в элементе <canvas> нет текста, который можно проиндексировать. Если заголовок сделан трёхмерным текстом внутри сцены, Google его не видит.
Разместите заголовок, подзаголовок и призыв к действию в виде текста DOM поверх canvas. Трёхмерную версию можно оставить для визуального эффекта, а обычную - для поискового робота и программ экранного доступа. Подробнее - в статье «SEO для WebGL-сайтов».
4. Навигация и состояния без отдельных URL
Переходы через <div onClick> вместо настоящих ссылок мешают обходу сайта. То же происходит с цветовыми вариантами товаров или состояниями квартир, которые меняются только в JavaScript. Правило Utsubo: отдельный индексируемый URL для каждого значимого состояния, например /product/x?color=black. Используйте настоящие ссылки <a href> и добавляйте анимацию к переходу.
Риски и решения: краткий обзор
| Приём | Что может увидеть Google | Решение |
|---|---|---|
| Текст проявляется при прокрутке | Текст есть, проблем нет | Оставить текст в HTML, анимировать opacity/transform |
| Текст загружается при прокрутке | Ничего | Отдавать текст в исходном HTML |
| React-приложение только с клиентским рендерингом | Пустая оболочка до рендеринга | Серверный рендеринг или предварительная генерация |
| 3D-заголовок внутри canvas | Текста нет | Текст DOM поверх canvas |
| Переходы между страницами только через JS | Ссылок нет | Настоящие ссылки <a href> с анимированным переходом |
| Тяжёлая вступительная анимация | Поздний LCP | Сначала показать первый экран, затем запустить анимацию |
Скорость по-прежнему важна
Анимация влияет на позиции через Core Web Vitals, прежде всего LCP. Если первый экран ждёт окончания вступительной анимации, самый крупный элемент появляется поздно. Такой же эффект даёт 3D-модуль, который приходится загружать до отображения страницы. Подробности разбираем в статье «Замедляет ли анимация сайт?». Основные правила: первый экран формируйте в HTML, тяжёлую анимацию загружайте отложенно, анимируйте только transform и opacity.
Как проверить сайт с анимацией за 15 минут
- Проверка URL в Search Console. Запустите проверку URL в реальном времени и откройте HTML после рендеринга. Найдите свой H1, предложение из середины страницы и навигационные ссылки.
- Отключите JavaScript. В Chrome DevTools выключите JS и перезагрузите страницу. Оставшееся содержимое примерно соответствует тому, что видит робот, который не выполняет рендеринг.
- Проверьте данные реальных посетителей. Отчёт Core Web Vitals в Search Console показывает, находятся ли LCP, INP и CLS у реальных пользователей смартфонов в «хорошем» диапазоне.
- Переключите все состояния. Если цвет товара, вкладка или сцена меняется, а URL остаётся прежним, отдельно проиндексировать это состояние нельзя.
