SEO-оптимизация вёрстки: чтобы робот видел то же, что человек

Заниматься SEO-оптимизацией сайта стоит с понимания простой вещи: поисковый робот не видит дизайн. Он получает код страницы и читает его сверху вниз, как текст. Красивый макет, в котором главный заголовок свёрстан картинкой, а описание услуги появляется после щелчка, для робота — почти пустая страница. Ниже — что именно робот читает в вёрстке и как сделать, чтобы он прочитал то же, что видит человек.

Тридцать страниц про «что такое» и две про код

Я выписал заголовки и описания тридцати страниц, которые поиск показывает по запросу «seo оптимизацией сайта». Четырнадцать из них отвечают на вопрос «что такое SEO». Семь — статьи на Хабре. «Простыми словами» и «для новичков» обещают восемь. А код страницы упоминают две: статья для веб-разработчиков и справочник по HTML.

Это объяснимо: писать про «комплекс мер» проще, чем про теги. Но половина ключевых запросов кластера — как раз про устройство страницы: SEO-оптимизация вёрстки сайта, оптимизация страницы под запросы, SEO-оптимизация адреса страниц, целевой страницы. Люди спрашивают, что делать с кодом, а им отвечают, зачем SEO нужно бизнесу.

Два взгляда на одну страницу

Человек видит страницу целиком: шапку, большой заголовок, фотографию, три колонки с преимуществами, кнопку. Глаз сам находит главное, потому что оно крупное и в центре.

Робот видит последовательность тегов. Для него «главное» — не то, что крупнее, а то, что помечено как заголовок, стоит ближе к началу и написано текстом. Размер шрифта, цвет и положение на экране он учитывает слабо или не учитывает вовсе.

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

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

Заголовки: скелет страницы

Теги от H1 до H6 — оглавление, по которому робот понимает, о чём страница и как она устроена. Правил немного.

• H1 один. Это название страницы. Два H1 — как две обложки у одной книги.
• H1 идёт первым среди заголовков и стоит в основной части, а не в шапке сайта.
• Уровни не пропускаются. После H2 идёт H3, а не H4. Пропуск говорит роботу, что структура случайна.
• Заголовок — текстом. Не картинкой и не фоном блока.
• Заголовками не оформляют. «Позвоните нам» в подвале, свёрстанное как H2 ради крупного шрифта, засоряет оглавление.

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

<div class="title-big">Ремонт стиральных машин</div>
<h3>Почему мы</h3>
<h1>Звоните!</h1>

<h1>Ремонт стиральных машин в Москве</h1>
<h2>Цены на ремонт</h2>
<h2>Как проходит выезд мастера</h2>

На экране оба варианта могут выглядеть одинаково. Для робота первая страница называется «Звоните!».

Проверьте свои заголовки

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

Порядок в коде: главное — выше

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

Два приёма, которые здесь помогают. Первый — семантические теги: header, nav, main, footer. Они прямо говорят роботу, где навигация, а где основное содержание, независимо от порядка. Второй — порядок блоков в самом коде: основная часть может стоять в документе раньше бокового меню, а на экране оставаться справа от него; расположением управляют стили.

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

Скрытый текст: вкладки, аккордеоны, «читать далее»

Самый частый вопрос, когда речь заходит про SEO-оптимизацию страниц: учитывает ли поиск текст, который спрятан под вкладкой? Ответ зависит от того, как он спрятан.

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

Страницы на скриптах: когда в коде пусто

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

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

Картинки, ссылки и кнопки

Картинки. Изображение, значимое для содержания, вставляется тегом img с описанием в атрибуте alt — тогда оно попадает в поиск по картинкам и поясняет страницу. Фотография товара, заданная фоном блока через стили, для поиска не существует. В теге стоит указать ширину и высоту: браузер заранее оставит место, и страница не будет прыгать при загрузке.

Ссылки. Робот переходит по ссылкам, оформленным тегом a с адресом в атрибуте href. Переход, сделанный через обработчик щелчка на блоке или кнопке, он не видит. Если карточки товаров в каталоге кликабельны только так, робот может не добраться до самих товаров.

<!-- робот не пройдёт -->
<div onclick="location.href='/divany/'">Диваны</div>

<!-- робот пройдёт -->
<a href="/divany/">Диваны</a>

Отложенная загрузка. Картинки ниже первого экрана разумно загружать по мере прокрутки — для этого у тега есть штатный атрибут loading. Самодельные скрипты с той же целью иногда прячут картинки от робота совсем.

Адрес страницы

SEO-оптимизация адреса страниц — короткая тема, но ошибаются в ней постоянно. Адрес должен читаться: /remont-stiralnyh-mashin/zamena-podshipnika/, а не /catalog/item?id=3841. Слова в адресе — небольшой, но бесплатный сигнал, и в результатах поиска такой адрес выглядит понятнее.

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

Мобильная вёрстка

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

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

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

Вес страницы: что грузится и сколько

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

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

Сайт-визитка и одностраничник

SEO-оптимизация сайтов-визиток и целевых страниц имеет свой потолок, и о нём стоит знать заранее.

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

SEO-оптимизация целевой страницы — одностраничника под рекламу — задача ещё более узкая. Одна страница может хорошо стоять по одному-двум запросам, не больше. Что можно сделать: один H1 с главным запросом, разделы с H2 под смежные вопросы, текст в коде, а не в картинках, быстрая загрузка. Чего ждать нельзя: что лендинг соберёт весь спрос темы.

Случай: каталог, которого не было в коде

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

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

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

Микроразметка: подписи для робота

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

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

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

С чего начать SEO-оптимизацию своего сайта

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

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

Что передать верстальщику: десять пунктов

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

1. Один H1 на странице, текстом, в основной части.
2. Заголовки H2–H4 по порядку, без пропуска уровней и не для оформления.
3. Основное содержание — в теге main, навигация — в nav.
4. Весь значимый текст присутствует в исходном коде без выполнения скриптов.
5. Вкладки и аккордеоны скрывают текст, а не подгружают его.
6. Значимые картинки — тегом img с alt, шириной и высотой.
7. Все переходы — ссылками с адресом, а не обработчиками щелчка.
8. Title и Description редактируются отдельно для каждой страницы.
9. Мобильная версия содержит то же, что и полная.
10. Адреса страниц читаемые и после запуска не меняются.

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

О терминах: web, optimization и «оптимизация аккаунта»

В запросах тема называется по-разному: SEO-оптимизация веб-сайта, оптимизация web-ресурсов, оптимизация сайта по поисковым системам, SEO optimization сайта или, в британском написании, SEO optimisation. Всё это одно и то же. В англоязычных материалах то, о чём эта статья, называют technical SEO и on-page SEO — по этим словам удобно искать справку о конкретном теге.

Особняком стоит «SEO-оптимизация аккаунта». Это уже не про сайт: так называют настройку профиля компании на картах, страницы продавца на маркетплейсе или сообщества в соцсети, чтобы их находили во внутреннем поиске этих площадок. Принцип тот же — название, описание и рубрика словами, которыми ищут, — но правила у каждой площадки свои, и вёрстка там от вас не зависит.

Итог

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

Александр Рожков

SEO-специалист · Вебмастер · 15+ лет · 200+ проектов

Частный SEO-специалист в Москве. 200+ сайтов в продвижении и разработке, 15+ лет опыта. Настраиваю SEO, создаю сайты и рекламу лично — без субподрядчиков.

О себе