Семантика HTML: как теги влияют на SEO сайта

Что такое семантика HTML и при чём тут поиск

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

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

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

H1 — главная тема страницы, H2 — разделы, H3 — подразделы внутри разделов. По этому оглавлению ориентируются и люди, и роботы. Например, на странице «Доставка цветов по Ташкенту» H1 — название услуги, а H2 — «Условия доставки», «Оплата через Click и Payme», «Частые вопросы».

Типичные ошибки, которые мы встречаем на сайтах малого бизнеса:

• вместо заголовка стоит жирный абзац, и структура пропадает
• H2 или H3 использованы ради крупного шрифта, например в подвале или боковой колонке
• уровни перепрыгивают: после H1 сразу H4
• H1 нет совсем или их несколько с разным смыслом

Области страницы, ссылки и кнопки

HTML5 даёт теги для крупных областей. Бонуса в ранжировании за них нет, но они отделяют основной текст от элементов, которые повторяются на каждой странице.

• header — шапка сайта или раздела
• nav — меню и хлебные крошки
• main — основное содержимое, одно на страницу
• article — самостоятельный материал: статья, карточка товара
• section — тематический раздел, обычно со своим заголовком
• aside — боковая колонка, связанные материалы
• footer — подвал с контактами и юридической информацией

Ссылки и кнопки: не путать

Ссылка ведёт на другой адрес, и для неё нужен тег a с атрибутом href. Кнопка выполняет действие на странице: отправить заявку, открыть окно. Если переходы по разделам сделаны через элемент с JavaScript-обработчиком без href, робот не воспринимает их как ссылки и может не найти страницы за ними, например категории каталога.

Для бизнеса это прямая потеря: страница, которую поиск не нашёл, не приведёт клиента из Google или Яндекса.

Списки, таблицы, изображения и формы

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

Содержательные изображения вставляйте тегом img с понятным alt, а подпись к фото делайте через figure и figcaption. Если фото товара задано только фоном в стилях, поиск по картинкам его не увидит. Декоративные элементы, наоборот, лучше убрать в CSS.

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

Как проверить свою вёрстку

Для проверки не нужно разбираться в коде. Достаточно нескольких простых действий:

• отключите стили или включите режим чтения: страница должна читаться как логичный документ
• поставьте расширение для браузера, которое показывает структуру H1–H6
• запустите аудит доступности в Lighthouse
• выгрузите заголовки всех страниц краулером и найдите дубли и пропуски

С чего начать на готовом сайте

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

Если хотите понять, что именно мешает вашему сайту в поиске, команда markdev проведёт технический разбор и подскажет, какие правки дадут результат быстрее. Обсудить задачу можно в Telegram или через форму на сайте.