Что такое heatmap
Heatmap (тепловая карта) — визуализация поведения пользователей:
- Где кликают
- Куда скроллят
- Куда смотрят (eye-tracking, редко)
Поверх скриншота страницы — цветовая шкала: красное = много активности, синее = мало.
Зачем для SEO
1. Понять реальное поведение
GA4 покажет «3 минуты на странице». Heatmap покажет что 3 минуты делал пользователь.
2. Найти UX-проблемы
- Кликают на не-кликабельные элементы
- Не кликают на главные CTA
- Скроллят мимо важного
3. Оптимизировать конверсию
Знаете, где взгляд → ставите там CTA.
4. Улучшить engagement
Высокий engagement = поведенческий фактор → выше в Яндексе.
Поведенческие факторы Яндекса →.
5. A/B-тесты обоснованнее
До А/В-теста смотрите heatmap → понимаете гипотезу → тестируете.
Типы heatmaps
1. Click heatmap (карта кликов)
Где пользователи кликают.
Что искать:
- Тёмно-красные зоны кликов на не-кликабельных элементах (картинки, текст) → их надо сделать кликабельными
- Холодные CTA-кнопки → переработать дизайн / расположение
- Клики вне видимой области → проблема UX
2. Scroll heatmap (карта скролла)
Сколько % пользователей доскроллило до каждой точки страницы.
Что искать:
- Где «обрыв» (резкий красный → синий) — там пользователь устал
- Скроллят до 90%+ → длинный контент работает
- 60% не скроллит ниже 1-го экрана → CTA слишком далеко
3. Move heatmap (карта движений мыши)
Куда двигают мышь. Часто коррелирует со взглядом.
Что искать:
- Зоны интереса
- Где задерживается курсор → важная информация
4. Attention heatmap
Сколько времени смотрят на каждую часть.
5. Frustration heatmap
Где раздражение (быстрые многократные клики, rage clicks).
Топ-сервисы для heatmaps
1. Hotjar
Плюсы:
- Лидер рынка
- Heatmaps + recordings + surveys
- Хорошая интеграция
Цена: $0-389/мес (бесплатный план до 35 ежедневных сессий)
2. Microsoft Clarity
Плюсы:
- Полностью бесплатно без лимитов
- Heatmaps + session recordings
- Поддержка GDPR
Минусы:
- Меньше функций
- Микрософт может в будущем добавить лимиты
Лучший бесплатный вариант 2026.
3. Я.Метрика
Плюсы:
- Бесплатно, встроено
- Карта кликов + прокрутки + ссылок
- Связь с поведением
Минусы:
- Меньше функций, чем у Hotjar/Clarity
4. Crazy Egg
Платный с большой историей. Хорош для A/B-тестов.
5. FullStory
Корпоративный уровень. Глубокая аналитика поведения.
Сценарии использования
Сценарий 1. Низкая конверсия CTA
Проблема: CR из посетителя в лид = 0.5% при 5000 сессий/мес.
Heatmap-анализ:
- Карта кликов: главная CTA-кнопка в холодной зоне
- Карта скролла: 60% не доходят до неё
Действия:
- Перенесли CTA выше
- Добавили вторую CTA на середине страницы
- Уменьшили текст до CTA
Результат: CR вырос до 1.8%.
Сценарий 2. Высокий bounce rate
Проблема: Bounce 75% на главной странице блога.
Heatmap-анализ:
- Карта скролла: 80% не скроллят ниже первого экрана
- Click heatmap: кликают по картинкам статей, но они не кликабельные (фон, не ссылка)
Действия:
- Превью картинок сделали кликабельными
- Контент выше складки переработали (больше визуальной информации)
Результат: Bounce упал до 55%, время на сайте +40%.
Сценарий 3. Мобильный UX
Проблема: Mobile конверсия в 3 раза ниже desktop.
Heatmap-анализ:
- Карта кликов на мобильном: rage clicks в области CTA (промахи)
- Карта скролла: пользователи останавливаются на сложной форме
Действия:
- Увеличили кнопки до 48×48 px
- Упростили мобильную форму (3 поля вместо 8)
Результат: Mobile конверсия выросла до 80% от desktop.
Сценарий 4. Длинная статья vs короткая
Гипотеза: Длинные статьи лучше для SEO.
Heatmap-анализ:
- Длинная статья 5000 слов: 30% доходит до конца
- Скролл-карта: «обрыв» на 2000 слов
Действия:
- Добавили оглавление вверху
- Добавили внутренние якори между разделами
- Сократили вступление с 500 до 200 слов
Результат: 60% теперь доходит до конца. Среднее время на сайте +50%.
Что смотреть на каждом типе страницы
Главная
- Куда смотрят первым делом
- На какие CTA кликают
- Скроллят ли ниже первого экрана
- Хитмап навигации
Блог-статья
- Длина прочтения (карта скролла)
- Клики на встроенные ссылки
- Клики на CTA в тексте и в конце
- Поведение на FAQ-блоке
Карточка товара
- Клики на фото
- Клики на «купить»
- Поведение на разделе «характеристики»
- Скролл до отзывов
Лендинг
- CR ключевого CTA
- Где скролл «умирает»
- Какие секции пропускают
Каталог
- Клики по фильтрам
- Клики на товары
- Поведение с сортировкой
Workflow аудита через heatmap
Шаг 1. Выбрать топ-страницы
В GA4 или Я.Метрике — топ-10 по входному трафику из органики.
Шаг 2. Собрать данные
Подождать 1-2 недели, чтобы накопилось 1000+ сессий на страницу.
Шаг 3. Анализ карты кликов
- Куда кликают vs куда хотите чтобы кликали
- Не-кликабельные элементы с кликами
- Низкая активность на главных CTA
Шаг 4. Анализ карты скролла
- На каком % страницы «обрыв»
- Достигает ли скролл главных секций
- Различия mobile vs desktop
Шаг 5. Session recordings
Просмотреть 10-20 записей реальных пользователей.
Что искать:
- Где задерживаются
- Где раздражаются
- Что не находят
Шаг 6. Гипотезы и тесты
Сформулировать гипотезы → A/B-тест → измерить эффект.
Анти-паттерны
❌ Heatmap без выборки
Если у страницы 50 посещений/мес — данных мало для выводов.
❌ Только одна страница
Heatmap топ-5 страниц, не одной.
❌ Без сегментации
Смотрите отдельно для органического трафика, не для всех источников.
❌ Без сравнения mobile/desktop
Поведение часто радикально разное.
❌ Игнор session recordings
Heatmap = агрегация. Recordings = частные случаи. Используйте оба.
❌ Действия без тестов
«Я думаю, CTA нужно ниже» — без A/B не знаете эффекта.
Чек-лист использования heatmap
- [ ] Сервис установлен (Clarity / Hotjar / Я.Метрика)
- [ ] Достаточно данных (1000+ сессий на страницу)
- [ ] Топ-10 страниц анализированы
- [ ] Анализ mobile + desktop отдельно
- [ ] Сегмент Organic выделен
- [ ] Session recordings просмотрены
- [ ] Гипотезы сформулированы
- [ ] A/B-тесты запущены
- [ ] Результаты измерены
Итог
Heatmaps — окно в реальное поведение пользователей. Невидимое в GA4 становится очевидным.
Для рунета бесплатные: Я.Метрика + Microsoft Clarity. Этого достаточно для качественного UX-аудита SEO-страниц.