В HTML документе эти два заголовка живут в разных местах и встречают разного читателя. Тег title спрятан в блоке head, на самой странице его не видно, зато его читают поисковые роботы, вкладка браузера и список закладок. Заголовок h1 стоит в теле страницы и адресован человеку, который уже пришёл и листает контент. Из-за этой разницы у владельцев сайтов постоянно всплывает вопрос, копировать ли один заголовок в другой или писать их по-разному. Дальше разобраны реальные сценарии работы поисковых алгоритмов, числовые рамки длины, готовые примеры разметки для магазина и блога, а также ошибки, из-за которых страницы теряют клики даже на приличных позициях.
Разные адресаты у тега title и заголовка h1
Разницу проще всего почувствовать через витрину магазина. Вывеска на улице обещает скидку и зовёт прохожего зайти, она соревнуется за внимание с десятком соседних вывесок. Табличка внутри помещения спокойнее, она подтверждает, что человек попал по адресу, и называет отдел. Тег title работает как вывеска, заголовок h1 как табличка внутри.
Практические места появления тега хорошо известны каждому, кто хоть раз открывал поисковую выдачу. Строка title показывается в сниппете как кликабельная ссылка, в заголовке вкладки браузера, в закладках и в истории посещений. Когда человек сохраняет страницу в закладки, система подписывает её именно тегом title, и через полгода по одному этому названию решается судьба возвращения. На вкладку браузера помещается всего два-три десятка символов, поэтому самое важное слово обязано стоять в начале строки.
Заголовок h1 виден только внутри страницы. Это первый крупный текст после перехода, опора структуры документа и ориентир для программ чтения с экрана. Человек за пару секунд решает по нему, на месте ли он, и если заголовок не совпадает с ожиданием из сниппета хотя бы по смыслу, вкладка закрывается быстрее, чем загрузился второй экран.
Метрики успеха у пары тоже разные. Title оценивают по кликабельности сниппета, то есть по доле увидевших строку и кликнувших на неё. Заголовок h1 судят по поведению на странице, по дочитыванию и по отказам. Один тег отвечает за вход, второй за удержание, и требовать от них одного и того же всё равно что мерить глубину бассейна линейкой.
Отсюда вытекает первое рабочее правило. Title конкурирует с девятью соседями по выдаче, поэтому в нём уместна яркая приманка, цена или выгода. Заголовок соперничает только с терпением читателя, поэтому в нём важнее точность и спокойствие.
Поведение поисковой системы, когда title слабый или отсутствует
Алгоритмы не мирятся с пустым или неудачным тегом, они достраивают заголовок сами. Поисковые системы прямо перечисляют источники замены в рекомендациях для вебмастеров: главный визуальный заголовок страницы, чаще всего это h1, заметные фрагменты текста, анкеры ссылок, ведущих на страницу. Если тег не заполнен, система почти всегда собирает строку из этих материалов без всякого предупреждения.
Замена случается и с заполненным тегом, если он написан плохо. Поводы типовые и легко проверяемые. Строка длиннее безопасной зоны и обрезается с многоточием, теряя самый ценный хвост, ведь ширину сниппета меряют не только в символах, но и в пикселях, обычно укладываясь примерно в 580 пикселей. Ключ повторён подряд несколько раз, и переспам заметен невооружённым глазом. Один шаблон стоит на всех страницах раздела, и робот не может отличить одну карточку от другой. Строка из одного слова не описывает содержание, и системе проще собрать свою версию. Наконец, текст тега не отвечает на запрос, например по фразе про ремонт холодильника на дому система видит строку "Главная страница".
По наблюдениям SEO-специалистов, доля страниц с переписанным тайтлом в выдаче доходит до половины, а среди перегруженных и шаблонных заголовков замены случаются почти поголовно. Яндекс ведёт себя похожим образом и при пустом теге собирает строку из содержимого страницы. Полагаться на удачу невыгодно: система складывает свою версию из того, что найдёт, и не спрашивает разрешения.
Вывод здесь состоит из двух частей. Писать title нужно так, чтобы переписывать было нечего: уникально, без повторов слов, с главным запросом в начале. И качественный h1 страхует сниппет: даже когда систему не устраивает тег, замену она возьмёт с заголовка страницы, и тот останется вразумительным.
Сценарии, когда title и h1 должны совпадать по смыслу
Совпадение по смыслу уместно на узких страницах, где интент запроса очевиден и вариаций почти нет. Классические примеры это страница контактов, страница доставки и оплаты, карточка товара с точной моделью. Интрига здесь не нужна, а расхождение между обещанием из сниппета и текстом на странице читается как мелкий обман, после которого человек уходит с ощущением, что его заманили.
Пример со страницей доставки показывает естественную пару. В теге title строка "Доставка и оплата в интернет-магазине ТехноДом", в заголовке h1 строка "Доставка и оплата". Ядро одно, к нему добавлена обвязка с названием магазина. Человек по запросу про доставку кликает на сниппет и первым же заголовком на странице видит подтверждение, что попал куда хотел.
То же правило держит карточку конкретной модели. Если запрос звучит как кресло SL 500 цена, эта модель обязана стоять в начале и тега, и заголовка. Различие допустимо в хвосте: тег добавляет цену и срок доставки для приманки, заголовок остаётся чистым именем товара. Совпадает главное, сама суть страницы, а служебные добавки живут только в сниппете.
У совпадения есть и технический смысл. Поисковая система сверяет заголовки между собой и с текстом страницы, чтобы уверенно определить тему. Когда title и h1 говорят об одном, сигнал получается чётким, и страница быстрее закрепляется за запросом. Когда тег обещает одно, заголовок второе, а текст третье, роботу приходится гадать, и страницу могут отдать менее подходящему запросу.
Ситуации, когда title и h1 полезно развести по формулировкам
На статьях, обзорах и категориях магазина разведение формулировок приносит прямой выигрыш в охвате. Механика простая. Тег title держит одну ключевую фразу и приманку для клика. Заголовок h1 берёт вторую близкую формулировку, более широкую и спокойную. Текст страницы подхватывает третий вариант. Вместе они покрывают заметно больше синонимов, чем один продублированный заголовок, и страница начинает собирать трафик с соседних запросов кластера.
Пример из блога. В теге title строка "Как выбрать велосипед для города, сравнение 5 типов рамы", она отвечает на частую формулировку вопроса и укладывается в 56 символов. В заголовке h1 строка "Городской велосипед, критерии выбора и сравнение типов рамы", она шире, спокойнее и не повторяет тег слово в слово. Ищущий сравнение и ищущий критерии находят в сниппете и на странице свои слова, и оба остаются.
Второй аргумент за разведение лежит в психологии клика. Title может позволить себе приманку: цену, скидку, срок доставки, пометку в наличии. Когда пользователь переходит на страницу, обещание уже сработало, и повторять его в заголовке второй раз незачем. Заголовок спокойно описывает суть, и страница не выглядит навязчивой рекламой. Тон меняется с зазывания на объяснение, а это читается как уверенность.
Третий аргумент касается контраста до и после перехода. Сниппет торгует, страница рассказывает. Ожидание из выдачи подтверждается по смыслу, но без агрессивного повтора, и доверие растёт. Легко проверить на любом блоге: у материалов, которые дочитывают, пара обычно разведена, а у страниц, которые закрывают через десять секунд, заголовки часто скопированы дословно.
Примеры HTML разметки для интернет-магазина и блога
Разметку удобнее всего разбирать на готовых фрагментах. Ниже пара для карточки товара, собранная с учётом числовых рамок.
<head>
<title>Офисное кресло SL 500 из экокожи, цена 12 490 р.</title>
</head>
<body>
<h1>Офисное кресло SL 500 с поясничной поддержкой</h1>
<p>Механизм качания, регулировка высоты, нагрузка до 120 кг, доставка за 2 дня.</p>
</body>
Тег здесь занимает 48 символов, заголовок 45. Модель SL 500 стоит в начале обеих строк, приманка с ценой живёт только в теге, а заголовок добавляет характеристику, которой в сниппете нет. Стоит вписать ещё город и доставку, и строка растёт: вариант "Офисное кресло из экокожи SL 500, цена 12 490 р., доставка за 2 дня" тянет уже 67 символов, и хвост с доставкой в выдаче скорее всего обрежется. Город и сроки доставки правильнее отдать тексту описания и держать тег коротким.
Категория магазина собирается по тому же принципу. В теге строка "Купить паркетную доску в Казани, цены от 1 890 р. за м2" длиной 55 символов, в заголовке строка "Паркетная доска, каталог с ценами и характеристиками" длиной 51. Ядро общее, коммерческие детали только в сниппете, а заголовок обещает навигацию по каталогу.
Для статьи блога пара выглядит так.
<head>
<title>Как выбрать велосипед для города, сравнение 5 типов рамы</title>
</head>
<body>
<h1>Городской велосипед, критерии выбора и сравнение типов рамы</h1>
</body>
Тег вмещает 56 символов и держится в безопасной зоне, заголовок укладывается в 59. Формулировки разные, но интент общий, поэтому синонимы про сравнение и про критерии выбора работают вместе, а не спорят между собой.
Отдельного упоминания заслуживает шаблон, который часто расползается по каталогам.
<title>Купить с доставкой, интернет магазин</title>
Строка без названия товара на всех карточках раздела лишает робота возможности различить страницы. Система начнёт собирать тайтлы из названий товаров и кусков текста, и в выдаче появится лотерея вместо продуманных сниппетов.
Типовые ошибки в работе с парой заголовков
Первая ошибка касается отсутствия h1. Шаблоны без главного заголовка встречаются чаще, чем кажется, особенно на посадочных страницах, собранных из блоков. Без h1 система ищет самый заметный текст, хватает логотип, слоган или первую строку параграфа, и структура страницы для робота размывается. Исправление стоит минуты: один заголовок в начало основного контента, и страница получает опору.
Вторая ошибка это несколько h1 на одной странице. Под главный уровень порой оформляют и название раздела, и название товара, и слоган в подвале. Сигнал о главной теме дробится, и ни один заголовок не работает в полную силу. Выход простой: один h1 на страницу, остальные уровни остаются h2 и h3.
Третья ошибка самая коварная. title равен h1 буква в букву на всех страницах сайта, включая служебные. Со стороны кажется, что раз тексты совпадают, всё логично. На деле система получает шаблон, не отличает одну страницу от другой и переписывает тайтлы по своему усмотрению. Сниппеты превращаются в лотерею, а кликабельность проседает. Расчёт на условных цифрах показывает масштаб: страница с 8 000 показов в месяц и кликабельностью 3 процента приносит 240 переходов, та же страница с разводкой формулировок и ценой в теге при кликабельности 5 процентов приносит 400. Разница в два пункта кликабельности прибавляет две трети переходов без единой новой ссылки.
Четвёртая ошибка это тег из одного слова. Строка "Контакты" или "Каталог" оставляет системе простор для творчества, и в сниппет попадает произвольный кусок текста. Пятая ошибка обратная, переспам: ключ повторён три и больше раз, и вместо помощи получается повод для замены. Между этими крайностями лежит рабочая зона: одна ключевая фраза, чуть конкретики и ни одного лишнего повтора.
Чек-лист проверки заголовков перед публикацией
Любая теория приносит пользу только после превращения в привычку. Перед выпуском страницы достаточно пройтись по короткому перечню, вся проверка занимает несколько минут:
- Проверить, что title описывает содержание именно этой страницы и держит главный запрос ближе к началу строки;
- Убедиться, что h1 на странице один, стоит выше основного текста и читается как спокойное имя материала;
- Сверить длины: тег держать в пределах 50-60 символов, заголовок до 70, чтобы обе строки не обрезались в выдаче и на вкладке;
- Убрать повторы слов из тега, оставив ключ один раз, и убрать рекламный шум из заголовка;
- На узких страницах согласовать ядро тега и заголовка почти дословно, на статьях и категориях развести формулировки ради охвата синонимов;
- Открыть вкладку браузера и сниппет глазами постороннего человека и спросить, понятно ли без чтения страницы, о чём она.
Хорошая пара заголовков работает тихо и без правок годами. Один раз договорившись о правилах и записав шаблоны для карточек и статей, владелец сайта получает продуманный сниппет и внятный заголовок на каждой новой странице по умолчанию. Дисциплина в такой мелочи оборачивается стабильными кликами, которые не отнять ни обновлением алгоритма, ни соседями по выдаче.