Макет страницы сайта и его оптимизация

Макет страницы сайта решает судьбу визита за первые секунды: человек либо видит то, за чем пришёл, либо возвращается в выдачу и открывает конкурента. Тексты, ссылки и метатеги начинают работать только после того, как посетитель остался. Поэтому расположение блоков, порядок подачи и поведение страницы на телефоне — это не задача дизайнера отдельно от продвижения, а часть оптимизации, влияющая на позиции через поведение и скорость.

В SEO я с 2005 года и в аудитах регулярно вижу одну и ту же картину: страница написана хорошо, но главный ответ спрятан во втором экране под слайдером с абстрактными картинками. Ниже — как устроен рабочий макет, в каком порядке выстраивать блоки для разных типов страниц, что ломается на мобильных и как проверить собственную страницу за вечер, не привлекая разработчика.

Почему макет — это SEO-задача, а не вкусовщина

Связь макета с позициями идёт по трём измеримым линиям, и ни одна из них не требует верить на слово.

Первая линия — возвраты в выдачу. Человек пришёл по запросу, за пару секунд оценил страницу и решил, оставаться или нет. Если главный ответ не виден, он нажимает назад. Такой возврат поиск фиксирует и трактует как сигнал о том, что страница не решила задачу. Массовые возвраты по конкретному запросу опускают страницу вниз даже при идеальном тексте.

Вторая линия — скорость и стабильность отрисовки. Макет определяет, что грузится первым, что можно отложить и прыгает ли содержимое при загрузке. Тяжёлый слайдер во всю ширину, шрифты, которые подгружаются с задержкой, и баннеры без заданных размеров портят метрики отрисовки напрямую, а они входят в оценку страницы.

Третья линия — доступность содержания для робота. Порядок блоков в коде и в визуальном отображении сегодня могут расходиться благодаря современным способам вёрстки, и этим злоупотребляют. Если основное содержание попадает в код после трёх экранов служебных блоков либо появляется только после выполнения скриптов, часть его может быть считана хуже, чем вы рассчитываете.

Отсюда практический вывод: макет проектируют не от красоты, а от вопроса «что человек должен увидеть первым, чтобы понять, что попал по адресу».

Первый экран: что должно быть видно без прокрутки

Первый экран — самая дорогая часть страницы. Он определяет, продолжится визит или закончится. При этом на нём почти всегда стоит то, что приносит меньше всего пользы: огромное фоновое изображение, слоган без конкретики и слайдер, который никто не листает.

Что должно быть	Зачем	Частая ошибка
Заголовок, отвечающий запросу	Подтверждает, что человек попал по адресу	Слоган вместо заголовка: «Мы создаём будущее»
Уточнение в одну строку	Снимает главный вопрос: что, кому, где	Абзац текста, который никто не читает стоя
Цена или диапазон	Первое, что ищут в коммерческой нише	Цена спрятана в конце страницы или отсутствует
Телефон и способ связи	Часть людей звонит сразу, не изучая страницу	Контакты только в подвале
Одно понятное действие	Даёт следующий шаг тем, кто уже готов	Пять кнопок одинакового веса
Ориентир в структуре	Показывает, где человек находится	Нет крошек и заголовка раздела

Проверить свой первый экран проще всего так: откройте страницу на ноутбуке и на телефоне, не прокручивая, и попросите человека со стороны сказать вслух, что здесь предлагают, кому и сколько это стоит. Если он не отвечает за пять секунд, макет требует переделки, и никакой текст ниже эту проблему не компенсирует.

Отдельно про большие изображения. Фоновая картинка на весь экран не запрещена, но она обязана быть подложкой под содержимым, а не вместо него. И она обязана быть лёгкой: именно такие изображения чаще всего становятся самым медленным элементом первого экрана.

Подробнее об этом — в статье «Оптимизация главной страницы сайта».

Порядок блоков: как выстраивать подачу

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

Позиция	Коммерческая страница услуги	Карточка товара	Информационная статья
1	Что предлагаем, кому, сколько стоит	Фото, название, цена, наличие	Заголовок и суть ответа в первых абзацах
2	Состав работ или что входит	Ключевые характеристики	Оглавление на длинном материале
3	Как проходит работа по шагам	Доставка, оплата, гарантия	Основные разделы по логике вопроса
4	Цены подробно или калькулятор	Полное описание и применение	Таблицы, списки, сравнения
5	Примеры работ и подтверждения	Отзывы с деталями	Ответы на смежные вопросы
6	Ответы на возражения	Похожие и сопутствующие товары	Выводы и следующий шаг
7	Форма и контакты	Вопросы по товару	Связанные материалы

Три ошибки в порядке встречаются чаще остальных. Первая — блок «о компании» сразу после первого экрана: человек ещё не решил, интересно ли ему предложение, а ему уже рассказывают историю фирмы с двухтысячных. Второй — отзывы раньше сути услуги: хвалебные слова о том, чего человек ещё не понял, не работают. Третья — форма заявки в самом низу и больше нигде: тот, кто принял решение на третьем экране, вынужден прокручивать всё остальное.

Помогу с продвижением: продвижение сайта в поиске — вывожу сайты в топ Яндекса белыми методами.

Если интересно направление с сайтами — базу даю в своём курсе:

8:14

Полезный приём — повторять целевое действие через каждые два-три экрана, но ненавязчиво: короткая строка с кнопкой, а не всплывающее окно. Люди принимают решение в разных местах страницы, и возможность действовать должна быть рядом с тем местом, где решение созрело.

Мобильный макет: не уменьшенный десктоп

Большинство визитов сегодня приходит с телефонов, а проектируют по-прежнему от широкого экрана. Отсюда типичный результат: на мониторе всё аккуратно, на телефоне главный ответ уезжает на третий экран, потому что колонки перестроились в столбик и то, что было справа, оказалось внизу.

Проблема на мобильном	Как заметить	Что делать
Главное уехало вниз при перестроении колонок	Открыть страницу на реальном телефоне, не в эмуляторе	Задать порядок блоков отдельно для узких экранов
Горизонтальная прокрутка	Страница едет вбок при касании	Найти элемент шире экрана: чаще всего таблица или широкое фото
Мелкие кнопки рядом друг с другом	Промахи при нажатии пальцем	Область нажатия не меньше 44 пикселей, отступы между ссылками
Липкие панели съедают экран	Шапка, кнопка чата и баннер закрывают половину	Оставить одну липкую панель, остальное убрать при прокрутке
Таблицы обрезаются	Крайние столбцы не видны	Горизонтальная прокрутка внутри таблицы или перестроение в карточки
Формы неудобны	Клавиатура закрывает поля, тип клавиатуры не тот	Правильные типы полей, автозаполнение, минимум полей
Всплывающее окно на входе	Появляется до того, как человек что-то увидел	Убрать совсем или показывать при попытке ухода

Проверять мобильный макет нужно на живом телефоне, а не в режиме эмуляции браузера. Эмулятор показывает ширину, но не показывает главного: как ведут себя липкие элементы при прокрутке, как всплывает клавиатура, что происходит при повороте экрана и насколько удобно тянуться пальцем до кнопки в верхнем углу.

Отдельно про приоритет. На узком экране места мало, и в него не помещается всё, что было на широком. Значит, часть блоков придётся спрятать под раскрывающиеся заголовки или перенести ниже. Прятать нужно второстепенное — историю компании, длинные юридические тексты, обширные списки сертификатов. Прятать цену, состав услуги или характеристики товара нельзя: именно за ними человек и пришёл.

Тему разбирал отдельно: «Оптимизация сайта под мобильные устройства».

Приоритет содержания в коде и в отрисовке

Современные способы вёрстки позволяют отобразить блок в любом месте экрана независимо от того, где он стоит в коде. Это удобно, но создаёт две ловушки.

Первая ловушка — расхождение визуального порядка и порядка в коде. Если в коде сначала идут три меню, боковая колонка и блок баннеров, а основной текст начинается ближе к концу документа, вы усложняете задачу и роботу, и программам чтения с экрана. Разумное правило: в коде основное содержание идёт как можно раньше, а перестановки применяются для второстепенных блоков.

Вторая ловушка — содержание, которое появляется только после выполнения скриптов. Характеристики, подгружаемые по нажатию, отзывы, приходящие отдельным запросом, описание, которое собирается на стороне браузера, — всё это в лучшем случае обрабатывается с задержкой, в худшем не попадает в индекс. Проверка простая: отключите скрипты в браузере и посмотрите, что осталось на странице. То, что исчезло, для поиска существует под вопросом.

Третий момент — что грузится первым. Изображение первого экрана должно загружаться сразу, всё остальное — по мере прокрутки. Обратная ситуация, когда отложенная загрузка навешена на все изображения подряд, включая главное, ухудшает метрику отрисовки крупнейшего элемента и встречается на сайтах с плагинами оптимизации чаще, чем без них.

Что разрушает даже правильный макет

Есть набор элементов, которые аккуратно спроектированную страницу превращают в полосу препятствий. Перечислю по убыванию вреда.

• Всплывающее окно сразу после входа. Человек ещё ничего не увидел, а ему уже предлагают подписку или скидку. Самый быстрый способ получить возврат в выдачу.
• Согласие на обработку данных во весь экран. Обязательные уведомления делают компактной полосой внизу, а не модальным окном, перекрывающим содержание.
• Три липкие панели сразу. Шапка сверху, панель действий снизу, виджет чата в углу — и на телефоне остаётся треть экрана под содержание.
• Виджет чата, открывающийся сам. Особенно с приветствием и звуком. Он закрывает содержимое и требует действия, чтобы его убрать.
• Слайдер на первом экране. Люди редко досматривают его дальше первого кадра, а весит он как несколько страниц текста.
• Реклама между абзацами. Смещает содержание при подгрузке и обрывает чтение.
• Бесконечная прокрутка без подгрузки в адресную строку. Человек теряет место, а робот не видит содержимого глубоких уровней.
• Анимация появления блоков при прокрутке. На медленных устройствах текст просто не показывается, пока не отработает скрипт.
• Что должно быть на главной странице сайта

Если нужна помощь по теме — курсы SEO-оптимизации.

Общий критерий: любой элемент, который требует от посетителя действия, не связанного с его задачей, должен быть либо убран, либо отложен до момента, когда человек уже получил, за чем пришёл.

Стабильность и скорость макета

Отдельная беда — прыгающая вёрстка. Страница загрузилась, человек начал читать, и тут подгрузился баннер, содержимое уехало вниз, палец попал не туда, куда целился. Это раздражает сильнее, чем медленная загрузка, и учитывается как отдельный показатель качества страницы.

Смежный материал по теме — «Внутренняя SEO оптимизация сайта».

Причины смещений почти всегда одни и те же, и все устраняются на стороне вёрстки.

1. Изображения без указанных размеров. Браузер не знает, сколько места отвести, и резервирует ноль, пока файл не пришёл. Лечится атрибутами ширины и высоты или заданными пропорциями контейнера.
2. Рекламные блоки и виджеты переменной высоты. Лечится резервированием места под них заранее.
3. Шрифты, подгружаемые с задержкой. Текст сначала рисуется системным шрифтом, потом заменяется, и строки смещаются. Лечится параметрами загрузки шрифта и близким по метрикам запасным вариантом.
4. Блоки, вставляемые скриптом сверху страницы: уведомления, полосы акций, панели согласия. Лечится размещением их так, чтобы вставка не сдвигала уже отрисованное.
5. Раскрывающиеся блоки, которые открываются автоматически после загрузки. Лечится тем, что состояние определяется до отрисовки, а не после.

Проверять смещения удобно на медленном соединении: в инструментах разработчика включите ограничение скорости и перезагрузите страницу, наблюдая, что и куда прыгает. На быстром канале большинство проблем не видны, а у части посетителей они происходят каждый визит.

Как проверить макет своей страницы за вечер

Порядок, который я использую в аудитах. Он не требует инструментов дороже браузера.

1. Откройте страницу на телефоне и засеките пять секунд. Понятно ли, что предлагается и сколько стоит.
2. Прокрутите до конца и запишите порядок блоков списком. Сравните его с логикой вопросов клиента.
3. Посчитайте, на каком экране появляется первая возможность оставить заявку или позвонить.
4. Отключите скрипты и посмотрите, что осталось. Всё исчезнувшее — под вопросом для поиска.
5. Отключите стили и посмотрите на голую структуру. Читается ли документ как связный текст с понятной иерархией.
6. Включите ограничение скорости и перезагрузите: отметьте все смещения содержимого.
7. Проверьте горизонтальную прокрутку на узком экране: страница не должна ехать вбок.
8. Пройдите по странице только клавиатурой: фокус должен идти в логичном порядке и быть видимым.
9. Откройте ту же страницу конкурента из топа и сравните порядок блоков. Разница в первых трёх экранах обычно и есть план правок.

Пункт проверки	Норма	Что означает нарушение
Понимание за 5 секунд	Человек называет предмет и примерную цену	Первый экран занят декорацией
Первая возможность действия	Не ниже второго экрана	Готовые к обращению уходят на полпути
Работа без скриптов	Основной текст на месте	Риск неполной индексации содержания
Смещения при загрузке	Содержимое не прыгает	Потеря показателя стабильности и раздражение
Горизонтальная прокрутка	Отсутствует	Элемент шире экрана, обычно таблица или фото
Липкие панели	Не более одной	Экран телефона занят интерфейсом, а не содержанием

Частые вопросы

Влияет ли макет на позиции напрямую? Отдельного фактора «удачный макет» в алгоритме нет. Влияние идёт через возвраты в выдачу, глубину просмотра, скорость и стабильность отрисовки — то есть через показатели, которые поиск измеряет и учитывает.

Сколько экранов должно быть на коммерческой странице? Столько, сколько нужно, чтобы закрыть вопросы клиента, и ни одним больше. Практически это обычно пять-восемь экранов на телефоне. Если страница длиннее, проверьте, не повторяются ли блоки и не превратилась ли она в презентацию компании вместо ответа на запрос.

Нужен ли отдельный мобильный сайт? Нет, отдельная мобильная версия на поддомене — устаревший подход, который порождает дубли и расхождение содержания. Адаптивный макет с разным порядком блоков для разной ширины решает задачу без этих проблем.

Можно ли прятать текст под раскрывающиеся блоки? Можно, если содержимое присутствует в коде сразу, а не подгружается по нажатию. Скрытый таким образом текст индексируется, но воспринимается как менее значимый, поэтому главное под спойлер не убирают.

Что делать с длинными таблицами на телефоне? Обернуть в контейнер с горизонтальной прокруткой или перестроить в набор карточек, где каждая строка становится блоком. Обрезанная таблица без прокрутки — потерянная информация.

Слайдер на главной вредит? Чаще вредит, чем помогает: весит много, отвлекает, дальше первого кадра его почти не листают. Если он нужен по маркетинговым причинам, оставьте один статичный первый кадр с содержательным заголовком, а остальные предложения разместите блоками ниже.

С чего начинать, если переделывать весь макет нет ресурса? С первого экрана самых посещаемых страниц. Это самая дешёвая правка с самой заметной отдачей: часто достаточно заменить слоган на заголовок с запросом, добавить цену и поднять контакты.

Коротко

• Макет влияет на позиции через возвраты в выдачу, скорость и стабильность отрисовки — прямого фактора нет, но все три показателя измеримы и учитываются.
• Первый экран обязан отвечать на три вопроса — что, кому, за сколько; слоган, слайдер и фоновое изображение вместо ответа дают возврат в выдачу за секунды.
• Порядок блоков строится по логике вопросов клиента, а не по структуре компании: блок «о нас» и отзывы раньше сути предложения не работают.
• Мобильный макет проектируется отдельно, а не получается сжатием десктопного; проверять его нужно на живом телефоне, потому что эмулятор не показывает липкие панели и клавиатуру.
• Содержание, которое исчезает при отключённых скриптах, для поиска существует под вопросом — проверка занимает минуту и делается в любом браузере.
• Смещения вёрстки при загрузке устраняются заданными размерами изображений, резервированием места под виджеты и правильной загрузкой шрифтов; видны они только на медленном соединении.
• Что должно быть на главной странице сайта

Если хотите понять, где именно ваш макет теряет посетителей и какие правки дадут результат быстрее всего, приходите на SEO-консультацию — разберём страницу по экранам вместе и сравним с теми, кто стоит выше вас в выдаче.