Статья
Заголовок H1: что это и как его правильно задать
H1 — главный заголовок страницы в её коде. По нему поисковики и программы экранного доступа понимают, о чём страница, а посетитель — туда ли он попал. Разбираем, чем H1 отличается от title, сколько их может быть на странице, как выстроить заголовки H2 и H3 и как проверить, что всё размечено правильно.
Что такое H1
В HTML у заголовков шесть уровней — от <h1> до <h6>. H1 — главный: тема всей страницы. На странице статьи это её название, на странице услуги — название услуги, на главной — главное предложение компании.
В коде он выглядит так: <h1>Ремонт ванной под ключ</h1>. А на экране — как зададут стили: обычно это самый крупный текст первого экрана. Но размер — не признак: крупная надпись может быть обычным текстом, а заголовок H1 — небольшим.
H1 и title
| Что сравниваем | H1 | Title |
|---|---|---|
| Где виден | На самой странице | Во вкладке браузера и в поисковой выдаче |
| Для кого | Для того, кто уже открыл страницу | Для того, кто выбирает в выдаче |
| Как писать | Сколько нужно для смысла | Коротко, чтобы не обрезали в выдаче |
Они могут совпадать, но чаще title немного длиннее: в нём добавляют название компании или уточнение. Как писать title, разобрано в статье «Title и description», а как сформулировать сам заголовок — в статье «Как написать заголовок для сайта».
Сколько H1 на странице
Google прямо пишет, что идеального числа заголовков нет, и несколько H1 на странице ему не мешают. Яндекс в справке просит выделять заголовки тегами по иерархии документа, а число H1 не называет.
На практике правило простое: один H1 — главная тема страницы. Так страницу одинаково понимают поисковики и программы экранного доступа, которыми пользуются незрячие, а у самой страницы получается понятное оглавление.
Как выстроить H2 и H3
Заголовки — это оглавление страницы. Для страницы услуги оно может выглядеть так:
H1Ремонт ванной под ключH2Что входитH2ЦеныH3Ванная до 4 м²H3Совмещённый санузелH2Как проходит работаH2Вопросы и ответы
Правила простые:
- Уровни не перескакивают: после H2 идёт H3, а не сразу H4.
- Заголовок выбирают по смыслу, а не по размеру шрифта — размер задают стили.
- Каждый заголовок говорит, что в разделе: «Цены», а не «Наше предложение».
Частые ошибки
- H1 нет вовсе — крупный текст оформлен как обычный абзац. Особенно часто так бывает на конструкторах.
- H1 — логотип или название компании на каждой странице вместо темы страницы.
- Одинаковый H1 на разных страницах — поисковику сложнее понять, чем они отличаются.
- Заголовок картинкой — текст на изображении поисковик не прочитает как заголовок.
- Ключевые слова через запятую: «Ремонт ванной Киров недорого под ключ» читается как спам.
На Тильде
В настройках блока есть список «SEO: тег для заголовка» — выберите в нём H1 для самого важного заголовка страницы. В Zero Block тег задают в настройках текстового элемента. Проверить, задан ли H1, можно в отчёте «SEO-рекомендации» в настройках сайта: Тильда предупредит, если тега нет.
Как проверить
- В браузере: нажмите правой кнопкой на заголовок и выберите «Просмотреть код» — будет видно, какой это тег.
- В коде страницы: откройте его сочетанием
Ctrl + U, на Mac —Cmd + Option + U, и найдите<h1поиском по странице. - Расширения для SEO показывают всю структуру заголовков списком.
Как это делаем мы
На каждой странице нашего сайта ровно один H1 — на главной, на страницах услуг и в каждой статье блога. У статей H1 — их название, разделы — H2, подразделы — H3: так их собирает движок блога.
В сайт компании входят Яндекс Метрика, цели и базовая подготовка к поиску. Структуру заголовков, скорость и разметку мы закладываем во время разработки: дешевле сделать правильно сразу, чем переделывать после запуска.