Теги HTML: за что отвечают заголовки, мета-теги и разметка в поиске

Что такое теги HTML?

Тег HTML это метка в угловых скобках: по ней браузер понимает, как показать фрагмент страницы. По разбору проекта «База по вёрстке» код на HTML состоит из тегов, то есть специальных конструкций в угловых скобках, а сам HTML остаётся языком разметки. Он описывает, где на странице заголовок, картинка, форма и что за чем идёт.

Устройство тега простое. Открывающий тег, например p, показывает начало абзаца, закрывающий с косой чертой его завершает, а между ними лежит текст. Внутри открывающего тега бывают атрибуты: у ссылки это адрес в href, у картинки путь в src и описание в alt. Теги вместе с содержимым называют элементами, но на практике оба слова употребляют как синонимы.

В том же материале сказано, что большинство тегов парные, но есть и одиночные, которым закрытие не требуется. К одиночным относят br, который переносит строку, и img, который вставляет картинку. Если забыть закрыть парный тег, браузер пробует восстановить разметку сам, и результат непредсказуем: блок съезжает, а текст теряет оформление.

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

Не путайте теги HTML с тегами в блоге или в интернет-магазине. В WordPress и других движках тегами служат метки для группировки записей: «ремонт», «кейсы», «скидки». Это рубрикатор для посетителей, и в разметке он выводится отдельными страницами со своими адресами.

Как теги устроены на странице: head и body

Любая страница начинается с объявления типа документа, дальше идёт корневой тег html, а внутри него два раздела. В head лежит служебная информация: название вкладки, кодировка, ссылки на файлы стилей, мета-теги для поисковиков. Посетитель её не видит. В body находится всё, что отображается: текст, картинки, кнопки, формы.

Каждая строка минимального каркаса несёт работу. Кодировка защищает русские буквы от «кракозябр», viewport подстраивает страницу под экран телефона.

• doctype сообщает браузеру, по каким правилам разбирать документ;
• html с атрибутом lang задаёт язык, и от него зависит произношение в программах чтения с экрана;
• head хранит title, description, canonical, viewport и подключение стилей;
• body содержит видимое наполнение страницы: текст, картинки, кнопки и формы.
• meta с кодировкой защищает русские буквы от «кракозябр».

Регистр букв в названиях тегов не влияет на результат, так что p и P браузер читает одинаково. Договорённость в командах обычно простая: пишут строчными, потому что так короче и единообразнее.

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

Какие бывают теги и что проверить в каждой группе?

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

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

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

Устаревшие теги вроде font и center в современных шаблонах не нужны: оформление вынесли в CSS. Если разработчик или подрядчик предлагает управлять цветом и размером текста тегами, это повод попросить переделать разметку.

Как люди и роботы читают заголовки и семантические теги?

Оглавление страницы строят теги h1-h6. MDN советует держать один h1 на страницу и вкладывать заголовки без пропуска уровней, а размер шрифта задавать стилями. Посетитель пробегает страницу глазами и по заголовкам решает, стоит ли читать раздел, а робот по ним понимает иерархию тем.

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

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

Цена пропущенной разметки может оказаться высокой. В иске слепого пользователя Гильермо Роблеса к сети Domino's барьерами назвали отсутствие альтернативного текста у графики и пустые ссылки без текста, которые программе чтения не с чем озвучить. Дело тянулось около шести лет: суд первой инстанции иск отклонил, апелляционный суд Девятого округа США счёл, что закон о правах людей с инвалидностью применим к сайтам и приложениям, Верховный суд отказался пересматривать это решение, а спор закончился мировым соглашением. Для российского владельца сайта вывод практический: alt у картинок и осмысленный текст ссылок остаются дешёвой гигиеной, которая заодно помогает поиску.

Какие теги влияют на SEO и клики из поиска?

Главная пара для сниппета это title и description. Справка Яндекса называет их основными элементами сниппета и прямо связывает их качество с CTR: при хорошо составленных тегах пользователи охотнее переходят на сайт. Заголовок и описание Яндекс строит по содержимому title, мета-тега description и тексту страницы, включая разметку Schema.org, а иногда добавляет тексты ссылок с других сайтов.

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

• Задайте уникальный title каждой странице, шаблонные названия вроде «Главная» не помогают пользователю.
• Ставьте главные слова в начало title и описания, чтобы они не потерялись при обрезке.
• Не повторяйте ключевые слова несколько раз: переспам вредит и читателю, и роботу.
• Оставляйте title коротким: длинный заголовок поисковик обрежет.
• Пусть title отражает содержимое страницы и перекликается с её заголовком.

Google подтверждает эти правила. Его справка просит присвоить тег title каждой странице, не набивать его ключевыми словами и не использовать повторяющийся шаблонный текст. Там же сказано, что ссылка-заголовок обрезается под ширину экрана, а при создании использует не только title, но и заголовок h1 и содержимое og:title.

Ошибку в цифрах видно на примере проекта alejandrorioja.com: его владелец разобрал 90 дней данных Search Console. Страница с позицией 8.9 собрала 141 тысячу показов, но кликов получила всего 103, то есть CTR 0.07%. Другая страница с худшей средней позицией превращала в клики больше 9% показов. По его выводу, разница была в том, что написано в теге title. Для вашего проекта задача та же: выгрузите страницы с большим числом показов и низким CTR и перепишите их заголовки.

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

Из технических тегов стоит знать canonical. По справке Google, ссылка rel=canonical помогает сгруппировать сигналы похожих страниц под одним адресом, например когда товар открывается с метками и без них. При этом для нормализации не стоит использовать robots.txt, а закрывать дубль директивой noindex рискованно: страница может полностью пропасть из поиска. Тег viewport отвечает за мобильную версию, а hreflang связывает языковые версии одной страницы. Подробнее о том, как эти настройки укладываются в общую работу с поиском, рассказано в материале про основы SEO-продвижения.

Микроразметка и Open Graph: как расширить сниппет и превью

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

Open Graph решает смежную задачу: теги og:title, og:description и og:image задают превью ссылки в мессенджерах и соцсетях. Без них мессенджер подставит случайный фрагмент текста и первую попавшуюся картинку, и ссылка в рассылке или посте выглядит небрежно. В CMS эти поля обычно заполняют в карточке страницы.

Эффект разметки измеряют цифрами. В истории японской платформы рецептов Rakuten Recipe команда разместила структурированные данные через CMS за две недели, а затем следила за ошибками в инструменте проверки. Итог по данным компании: трафик из поиска на все страницы вырос в 2,7 раза, а длительность сеанса в 1,5 раза. Менеджер сервиса Юки Утида отметила, что проверка разметки для команды рабочий инструмент: «Этот инструмент очень помогает нам в работе».

Этот инструмент очень помогает нам в работе.

Юки Утида, менеджер Rakuten Recipe, о проверке структурированных данных, в том же материале Google

В той же справке Google приведены другие результаты: Rotten Tomatoes внедрил разметку на 100 000 страниц и поднял CTR на 25%, а у страниц Nestlé с расширенными результатами CTR выше на 82%. Эти цифры называют сами компании, поэтому переносить их на свой проект как обещание нельзя. Ориентир другой: разметка даёт поисковику больше материала для сниппета, а вы получаете шанс выделиться в выдаче.

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

Типичные ошибки с тегами и чек-лист проверки

Большинство проблем с тегами повторяется от проекта к проекту. Чаще всего встречается один и тот же title у десятков карточек товара, пустой или дублирующий description, несколько h1 или ни одного, пропуски в уровнях заголовков и картинки без alt. Реже, но дороже всего обходятся закрытые от индексации разделы: noindex остаётся после тестового периода и месяцами скрывает страницы от поиска.

Пример документированной ошибки есть в том же материале Google о ссылках-заголовках. Если у страницы title заполнен только хвостом вроде «| Название сайта», поисковая система собирает ссылку-заголовок из блока header и других крупных фрагментов текста, и в выдаче появляется название, которое вы не писали. С шаблонным заголовком похоже: Google оценивает, насколько он точен, и может заменить его. Вывод простой: за формулу title отвечает человек, а не движок по умолчанию.

Вторая группа ошибок касается связей между тегами. Canonical указывает на другой адрес, чем sitemap, hreflang ссылается на несуществующую страницу, а в разметке Schema.org цена не совпадает с ценой в тексте.

Допустим, в магазине триста карточек, и у всех title начинается с одной и той же фразы. Для поисковика это триста почти одинаковых заголовков, а для покупателя в выдаче неразличимые ссылки. Достаточно поменять формулу в шаблоне на название товара, категорию и бренд, и у каждой карточки появится свой заголовок. Проверку удобно провести за вечер. Откройте исходный код страницы сочетанием Ctrl+U, найдите нужные теги поиском по слову и пройдите список по шагам.

1. Откройте главную, карточку услуги и статью и выпишите заголовок вкладки, описание и главный заголовок каждой.
2. Сравните их: формулировки различаются, а смысл совпадает.
3. Проверьте, что у содержательных картинок заполнен alt, а у декоративных он пустой.
4. Найдите canonical и сравните его с адресом страницы и sitemap.
5. Проверьте robots и noindex: нет ли их у страниц, которые должны быть в поиске.
6. Протестируйте разметку Schema.org и превью ссылки в мессенджере.

Правки вносите партиями и записывайте дату изменения в рабочую таблицу, чтобы потом сравнить клики и показы в Вебмастере и Search Console. Если в шаблоне теги задаются автоматически, договоритесь с разработчиком о формуле для title и description, иначе ручные правки сломаются при ближайшем обновлении.

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