Поисковая система не оценивает красоту макета, но многое из того, что делает дизайнер, она видит и учитывает: скорость появления содержания, устойчивость вёрстки, удобство на телефоне, структуру заголовков, доступность текста без выполнения скриптов. Поэтому решения по интерфейсу и работа над поиском связаны теснее, чем принято думать: неудачный редизайн способен обрушить трафик, а аккуратный — снять часть проблем без отдельного бюджета на оптимизацию. Разбираем, какие элементы интерфейса влияют на поиск и что мы проверяем, когда делаем или переделываем сайт.
Что поисковая система видит в интерфейсе
Робот загружает страницу, разбирает разметку, выполняет часть скриптов и оценивает результат примерно так же, как посетитель на мобильном устройстве. Из интерфейса он получает:
- Текст и его структуру: заголовки, списки, порядок блоков в разметке.
- Ссылки, по которым можно перейти дальше, и то, доступны ли они без нажатий и скриптов.
- Скорость: сколько времени проходит до появления основного содержания.
- Устойчивость: не смещаются ли блоки во время загрузки.
- Пригодность для мобильного просмотра: помещается ли содержание, читается ли текст без увеличения.
Всё это результат работы дизайнера и верстальщика, а не отдельной услуги по оптимизации.
Скорость и стабильность страницы
Основные показатели удобства страницы измеряют три вещи: за какое время появляется главный элемент содержания, насколько быстро страница отвечает на первое действие и не прыгает ли вёрстка при загрузке. Дизайн влияет на все три.
Что мы делаем на этапе макета и вёрстки:
- Ограничиваем вес первого экрана: одна крупная иллюстрация вместо слайдера с десятью изображениями.
- Отдаём изображения в современных форматах и в нужном размере, а не масштабируем средствами браузера.
- Задаём размеры изображений и рекламных блоков заранее, чтобы содержание не смещалось при подгрузке.
- Ограничиваем число шрифтовых начертаний и подключаем их так, чтобы текст был виден сразу.
- Считаем сторонние скрипты: каждый виджет добавляет задержку, и не каждый из них нужен.
Навигация, структура и заголовки
Навигация решает две задачи сразу: помогает человеку найти раздел и показывает поисковой системе, как устроен сайт. Практические правила простые. Ссылки должны быть настоящими ссылками, а не элементами, которые обрабатываются скриптом. Важные разделы не должны быть глубже двух-трёх переходов от главной. Хлебные крошки дают понятный путь и одновременно дополнительную разметку.
Заголовки — это структура текста, а не размер шрифта. Один заголовок первого уровня на страницу, дальше вложенность по смыслу. Мы часто встречаем обратное: заголовком первого уровня оформлен логотип, а настоящий заголовок страницы набран обычным текстом с крупным кеглем. Для человека разницы нет, для разбора страницы — есть.
Мобильная версия
Поисковые системы оценивают сайт в первую очередь по мобильной версии. Из этого следует правило, которое часто нарушают: содержание мобильной версии должно совпадать с десктопной. Если часть текста, характеристик или ссылок на узком экране скрыта совсем, поисковая система работает с урезанной страницей.
Скрывать текст в раскрывающихся блоках при этом можно: содержание есть в разметке, а человек раскрывает его по желанию. Разница принципиальная — между «спрятано в аккордеон» и «не выведено вовсе».
Решения интерфейса и их последствия для поиска
| Решение в интерфейсе | Риск для поиска | Как делаем мы |
|---|---|---|
| Текст внутри изображения | Содержание не читается и не индексируется | Текст выводим текстом, изображение оставляем иллюстрацией |
| Слайдер на весь первый экран | Тяжёлая загрузка, содержание появляется поздно | Статичный первый экран с заголовком и одним изображением |
| Бесконечная прокрутка в каталоге | Часть товаров недоступна без скриптов, нет постраничных адресов | Дополняем постраничной навигацией с обычными ссылками |
| Фильтры, меняющие выдачу без адреса | Полезные подборки не попадают в индекс | Важным сочетаниям фильтров даём свои адреса и заголовки |
| Содержание, собираемое скриптом | Робот может не дождаться и увидеть пустую страницу | Основной текст отдаём сразу в разметке |
| Смена адресов при редизайне | Потеря позиций и переходов на старые страницы | Составляем карту соответствия и настраиваем постоянные переадресации |
| Всплывающее окно поверх содержания | Страница признаётся неудобной на мобильном | Показываем по действию, оставляем крупную кнопку закрытия |
Содержание страницы и её оформление
Текст, который читают, и текст, который индексируется, — один и тот же. Поэтому оформление напрямую влияет на результат: длинные абзацы без подзаголовков люди не читают, а поисковая система не находит в них ответа на конкретный вопрос. Мы разбиваем материал на смысловые блоки с подзаголовками, выносим условия и цифры в списки и таблицы, а ключевые сведения ставим выше, а не в конце страницы.
Отдельно про изображения: описание в атрибуте alt нужно не ради оптимизации, а ради тех, кто пользуется программами чтения экрана, и на случай, когда изображение не загрузилось. Осмысленное описание попутно помогает попадать в поиск по картинкам.
Редизайн без потери трафика
Самая частая причина падения после обновления сайта — не дизайн, а потерянные адреса и исчезнувший текст. Наш порядок работ перед запуском нового интерфейса:
- Выгружаем список всех адресов старого сайта и отмечаем те, что дают переходы из поиска.
- Сверяем содержание: какие тексты, характеристики и блоки переносятся, что исчезает и почему.
- Составляем карту соответствия старых и новых адресов, настраиваем постоянные переадресации.
- Проверяем метатеги, заголовки и разметку на новом шаблоне до переключения.
- Замеряем скорость на типовых страницах и сравниваем со старым сайтом.
- После запуска следим за индексацией и ошибками в панелях вебмастеров и держим возможность отката.
Поведение посетителей
Поисковые системы учитывают, как люди ведут себя после перехода: возвращаются ли сразу обратно, изучают ли сайт дальше. Прямо управлять этим нельзя, но интерфейс на это влияет. Если человек попал на страницу и не нашёл цену, условия или способ связаться, он вернётся в выдачу. Поэтому мы стараемся давать ответ на запрос в первом экране, а не после трёх прокруток.
Короткий вывод
Интерфейс не заменяет работу над поиском, но задаёт её потолок. Медленная страница, пропавшие адреса, содержание, которое собирается скриптами, и мобильная версия с урезанным текстом ограничивают результат независимо от качества оптимизации. Обратное тоже верно: аккуратная структура, быстрый первый экран и честная мобильная версия снимают значительную часть технических замечаний ещё до начала продвижения.
Если планируете обновление сайта
Мы проектируем интерфейс с оглядкой на требования поиска и заранее оговариваем, что нельзя терять при переносе. Посмотрите, как устроено проектирование веб-интерфейсов, и расскажите, что вы собираетесь менять на сайте.
Если интерфейс уже мешает продажам, разбираем его по шагам: проектирование интерфейсов с прототипом и тестированием.
