Верстка сайта

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

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

Что происходит между макетом и рабочей страницей

Дизайнер отдаёт картинку: расположение блоков, цвета, шрифты, отступы, состояния кнопок. Верстальщик превращает картинку в набор файлов, которые браузер умеет показывать: разметку HTML, оформление CSS и поведение на JavaScript. Со стороны это выглядит как механический перенос, но именно здесь принимается десяток решений, которые потом определяют скорость, индексируемость и удобство.

Первое решение — из каких тегов собрана страница. Одну и ту же карточку товара можно сложить из двадцати одинаковых блоков div, а можно из article, h2, p и button. Браузер покажет одинаково, а поиск и программа чтения с экрана прочитают по-разному.

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

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

Виды вёрстки: что из этого сегодня реально применяют

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

Название	Что означает	Статус сегодня
Табличная	Раскладка построена на тегах таблиц	Не применяется, кроме вёрстки писем
Блочная	Страница из блоков, раскладка через CSS	База, на ней всё построено
Фиксированная	Жёсткая ширина в пикселях	Только для узких служебных страниц
Резиновая	Ширина в процентах, тянется за окном	Часть современного подхода
Адаптивная	Разные раскладки под разные ширины экрана	Обязательное требование
Отзывчивая	Резиновая плюс адаптивная с медиазапросами	Фактический стандарт
Mobile-first	Сначала пишется мобильная раскладка, затем расширения	Рекомендуемый порядок работы

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

Семантика и заголовки: что робот читает как смысл

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

Смежный материал по теме — «Бесплатное продвижение сайта в поисковиках».

• header, nav, main, aside, footer — разметка зон страницы. Позволяет отделить основное содержимое от повторяющегося обвеса.
• article — самостоятельный материал: статья, карточка новости, отзыв.
• h1–h6 — уровни заголовков, задающие структуру. Не средство сделать текст крупным.
• ul, ol, table — списки и таблицы там, где по смыслу список и таблица, а не набор абзацев с дефисами.
• button и a — кнопка выполняет действие, ссылка ведёт на адрес. Ссылка, сделанная из div с обработчиком клика, для поиска не существует.
• label у полей формы — без него поле не подписано ни для робота, ни для пользователя с ограничениями по зрению.

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

Теперь про заголовки, потому что они и есть скелет страницы. Заголовок первого уровня на странице должен быть один и описывать её содержание. Дальше идут h2 по разделам, внутри них при необходимости h3. Пропускать уровни и ставить h4 сразу после h1 не стоит: структура читается как оглавление, и в оглавлении не бывает подпунктов без пунктов.

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

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

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

8:14

Скорость: где вёрстка отвечает за метрики загрузки

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

Метрика	Что измеряет	Типичная причина в вёрстке	Что делать
LCP	Появление самого крупного элемента первого экрана	Тяжёлая картинка героя, шрифты и стили блокируют отрисовку	Сжать и подготовить изображение заранее, критические стили встроить, остальное отложить
CLS	Смещение содержимого во время загрузки	У картинок и блоков не заданы размеры, баннеры вставляются после отрисовки	Задать ширину и высоту, зарезервировать место под подгружаемые блоки
INP	Задержку отклика на действие пользователя	Тяжёлые скрипты выполняются в основном потоке	Убрать лишние библиотеки, разбить обработчики, грузить скрипты отложенно
TTFB	Время ответа сервера	Не вёрстка, а хостинг и движок	Кэширование, настройка сервера, оптимизация запросов

Строку про CLS выделю отдельно, потому что её последствия видно без всяких инструментов. Когда содержимое прыгает, человек промахивается мимо кнопки и попадает в баннер. На мобильном это происходит постоянно, и часть отказов на сайтах объясняется именно этим, а не качеством предложения.

Про шрифты. Три-четыре начертания одного шрифта в разных форматах — это сотни килобайт, которые грузятся до появления текста. Разумный набор — одно семейство, два начертания, современный формат и явное указание показывать запасной шрифт, пока грузится основной.

Если нужны детали, смотрите «Самостоятельное SEO продвижение сайта».

Изображения: половина веса страницы решается здесь

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

• Размер файла соответствует размеру на экране. Фотография шириной 4000 пикселей, выведенная в блоке шириной 400, — самая частая находка при аудите.
• Современные форматы. WebP и AVIF дают тот же вид при существенно меньшем весе; для старых браузеров оставляют запасной вариант.
• Отложенная загрузка для всего, что ниже первого экрана. Картинку первого экрана откладывать нельзя — это прямо ухудшает LCP.
• Явные ширина и высота у каждого изображения, иначе страница прыгает при загрузке.
• Атрибут alt с описанием того, что изображено. Не набор ключевых слов и не пустая строка на содержательной картинке.
• Иконки — не картинки. Мелкие элементы интерфейса собирают в один векторный набор, а не тянут двадцатью файлами.

Вёрстка и мобильные посетители: что проверять руками

Автоматические проверки ловят не всё. Список того, что смотрят на реальном телефоне, а не в эмуляторе.

1. Нет горизонтальной прокрутки ни на одной странице — самый частый дефект, обычно из-за таблицы или широкой картинки.
2. Кнопки и ссылки достаточно крупные, чтобы попасть пальцем, и не стоят вплотную друг к другу.
3. Телефон и адрес кликабельны: нажатие на номер открывает звонок.
4. Форма заполняется без масштабирования, клавиатура не перекрывает поле ввода и кнопку отправки.
5. Для полей заданы правильные типы, чтобы для телефона открывалась цифровая клавиатура, а для почты — с собакой.
6. Всплывающие окна закрываются одним нажатием, крестик не уезжает за край экрана.
7. Плавающие кнопки и виджеты не закрывают содержимое и не наслаиваются друг на друга.
8. Длинные таблицы прокручиваются внутри своего блока, а не растягивают страницу.

Восьмой пункт стоит проверять специально на страницах с ценами и характеристиками: именно там таблицы шире экрана, и именно там теряются клиенты, которые не смогли сравнить варианты.

Конструкторы и готовые шаблоны: где обычно теряют

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

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

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

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

Как принимать вёрстку, если вы не читаете код

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

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

Проверка	Чем	Что считается нормой
Мобильная раскладка	Свой телефон, три-четыре разные страницы	Нет горизонтальной прокрутки, кнопки нажимаются
Скорость первого экрана	Публичные сервисы измерения скорости	Мобильная оценка не в красной зоне, LCP до 2,5 секунды
Структура заголовков	Расширение-анализатор или просмотр кода	Один h1, уровни без пропусков
Порядок содержимого	Отключить стили в браузере	Основной текст идёт до служебных блоков
Ссылки и навигация	Открыть пункт меню в новой вкладке	Каждый пункт — обычная ссылка с адресом
Формы	Отправить заявку с телефона	Приходит письмо, видно подтверждение, поля подписаны
Отображение в поиске	Проверка страницы в Вебмастере	Робот видит тот же текст, что и вы
Печать и копирование	Скопировать телефон и адрес	Текст копируется, а не является картинкой

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

Ошибки вёрстки, которые всплывают в отчётах поиска

Часть дефектов вёрстки прямо превращается в строки отчётов Вебмастера, и по ним удобно ставить диагноз.

• «Страница не оптимизирована для мобильных» — отсутствует или неверно задан метатег viewport, либо содержимое шире экрана.
• Дубли страниц — один и тот же материал доступен по нескольким адресам из-за параметров, слешей или версий с www и без.
• Отсутствующий или пустой заголовок страницы — шаблон не подставляет title на части типов страниц.
• Много страниц с одинаковым описанием — description жёстко зашит в шаблон.
• Ошибки в микроразметке — разметка скопирована с примера и не соответствует реальному содержимому.
• Медленный ответ и низкая скорость загрузки — сочетание тяжёлых картинок, лишних скриптов и незакэшированной статики.

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

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

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

Влияет ли объём кода на позиции? Напрямую — нет, косвенно — да. Лишний код замедляет загрузку, а скорость на поведение посетителей влияет заметно. Гнаться за красотой исходников не нужно, добиваться быстрого первого экрана — нужно.

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

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

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

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

Коротко

• Вёрстка задаёт то, что потом невозможно исправить контентом: порядок содержимого в коде, структуру заголовков, скорость первого экрана и поведение на телефоне.
• Актуальный стандарт — отзывчивая вёрстка по принципу mobile-first: оба поисковика оценивают сайт по мобильной версии.
• Семантические теги нужны не для красоты: навигация на скриптах вместо обычных ссылок приводит к тому, что разделы сайта не обходятся роботом.
• Три метрики загрузки упираются в решения вёрстки: тяжёлый первый экран, незаданные размеры картинок и лишние скрипты.
• Изображения дают основную часть веса страницы: соответствие размеров, современные форматы, отложенная загрузка и осмысленный alt.
• Приёмка делается без чтения кода: телефон, сервис измерения скорости, отключение стилей и проверка страницы в Вебмастере.

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