Как найти заголовок h1 в коде

Как прописать h1 на сайте

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

Что означает h1-h6?

Начать в любом случае нужно с теории, потому что без этого невозможно двигаться дальше. Итак, это html-теги, в которые помещают текст, который должен стать заголовком. H1 – это главный заголовок страницы, он должен быть единственным, h2 – подзаголовок статьи или раздела главы (если речь идет о книге), h3 – заголовок в разделе и т.д.

В сайтостроении, как правило, чаще всего используются h1-h3, последние три тега используются крайне редко, так как нет необходимости в разбивке текста на такие мелкие части, если только речь не идет об огромной по объему текстовой публикации.

По умолчанию заголовки уже имеют некоторое стилевое оформление. Например, буквы в заголовках выделены жирным шрифтом, а их размер в 1,5 – 3 раза больше обыкновенного текста на странице.

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и
дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и
дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

Основные правила работы с заголовками

Сколько h1 может быть на сайте? Сколько угодно, ведь интернет-ресурс может состоять из множества страниц. Тут гораздо важнее придерживаться другого правила – на каждой отдельной странице вашего сайта должен быть ОДИН h1. Все потому, что это главный заголовок, а главным всегда должен быть один.

Но что будет, если проигнорировать это правило? Как показывает реальная практика, ничего катастрофического, вероятно, не случится. Я бы не писал об этом, но мне известно несколько случаев, когда у веб-мастеров было несколько h1 на странице, при этом все их статьи сохраняли свои позиции в поисковых системах.

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

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

Очевидно, что h1 должен быть в самом начале статьи. Это не то же самое, что мета-тег title. Title виден при поисковой выдаче и в названии вкладки браузера, а h1 – непосредственно на странице. Остальных заголовков (h2-h6) может быть сколько угодно, в любом количестве.

Как проверить наличие h1 на странице?

Теперь мы переходим к самому главному. Как же определить, нормально ли у вас все на сайте с заголовком? Есть как минимум несколько вариантов, как вы это можете сделать.

Во-первых, открыть исходный код и произвести в нем поиск. Исходный код открывается с помощью комбинации клавиш Ctrl + U. Далее вам понадобится комбинация Ctrl + F, чтобы открыть поиск. Введите в нем название нужного тега, а именно – h1.

Правильно будет, если вам найдет два результата – открывающий и закрывающий тег соответственно. Если результатов больше, нужно вносить правки в код шаблона сайта. Если h1 вообще отсутствует, тоже нужно принимать меры, чтобы он появился.

Во-вторых, вы можете воспользоваться каким-нибудь сервисом, который анализирует сайт на показатели его поисковой оптимизации и выдает отчет. Таких сервисов очень много, я приведу лишь некоторые: pr-cy.ru, audit.megaindex.ru/

В сервисе “Мегаиндекс” есть возможность проверить релевантность страницы, то есть то, насколько она оптимизирована под определенную ключевую фразу. Введите адрес одной из страниц вашего сайта и основную ключевую фразу. В случае проверки лишь h1 эта ключевая фраза может быть любой.

Как видите, проверка показала, что на странице всего 1 h1 – это хорошо. Если бы было больше, проверка бы обязательно это определила. Как видите, это важный фактор, хотя и не критический. Его несоблюдение не приведет к чему-то катастрофическому, но при поисковой оптимизации подобные проблемы должны быть убраны в первую очередь.

Если проблема найдена, как ее решать?

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

Например, в WordPress вам нужно будет редактировать файлы page.php (шаблон страницы) и single.php (шаблон записи). Также полезно будет просмотреть файлы index.php (главная страница) и archive.php (архивы по дате и автору), а иногда в темах есть еще category.php (записи отдельной рубрики).

Ну, допустим, нашли и открыли вы нужный файл, что делать дальше? Дальше воспользуйтесь все тем же поиском (Ctrl + F). Вновь введите туда название тега. Если кода в файле немного, то вы и сами можете просмотреть его и найти нужные строчки. Тут ваши действия зависят от того, что именно нужно исправить.

Например, в одном шаблоне название поста выводилось в h2. Возможно, его разработчик не разбирается в SEO, поэтому и допустил такую ошибку. Но это легко исправляется. Редактируем single.php и меняем в нем h2 на h1. Это можно сделать как вручную, так и с помощью функции автоматической замены.

Возможно, так же понадобится редактирование боковой колонки (sidebar.php). Собственно, лишние h1 могут быть где угодно: в заголовках виджетов, в меню и даже в футере (footer.php). Все это нужно найти и убрать.

Ну а что делать, если в самой статье несколько h1? Тогда проблема решается еще легче – редактированием самой статьи. Уберите все лишние h1, оставив только один главный верхний заголовок.

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

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и
дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и
дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

Узнать подробнее

До 10 проектов в портфолио для старта карьеры

Подходит для новичков без опыта в программировании

Практика на вебинарах с разработчиками из крупных компаний

Что ж, теперь вы знаете, как проверить заголовок h1 на странице и правильно настроить шаблон. Конечно, это всего лишь одна из множества настроек, которые помогут вам раскрутить и монетизировать сайт. Намного больше информации вы можете найти, если изучите курс по раскрутке личного блога и его выводе на доход от 20 тысяч рублей в месяц в самое кратчайшее время. Успехов вам во всем и хороших позиций в поиске!

Важная статья про использование тегов H1.

Ошибки в заголовках H1 — большая проблема при продвижении сайта. Не допускайте их!

В статье я разберу:

  1. Что это за заголовок такой и для чего он нужен.
  2. Как проверить есть ли на странице тег H1
  3. 11 главных правил формирования тегов Н1
  4. Как проверить корректность абсолютно всех заголовков Н1 на вашем сайте,
  5. а в конце статьи, я поделюсь своими фишками при формировании тегов Н1.

Поехали.

Что такое тег заголовока Н1 и для чего он нужен

Представьте, что вы заходите в книжный магазин и на полке у вас десятки разных книг, как вам понять, о чем каждая книга, при этом не читая ее содержимое?

Вы станете обращаетесь к названию книги и пытаться из названия понять, о чем же пойдет речь в самой книжке.

Так вот, заголовок Н1 в случае с сайтами — это название страницы, ее главное ключевое слово (для книг – название книги).

Существует несколько уровней тегов заголовка:

H1, H2, H3, H4, H5, H6 / H1 – это заголовок первого уровня (самый главный))

У них есть иерархия, они могут быть включены друг в друга:

<h1> Главное ключевое слово </h1>

<h2> Подзаголовок – дает больше информации </h2>

<h3> Углубляемся в тему основного запроса </h3>

<h3> Углубляемся в тему основного запроса </h3>

<h2> Подзаголовок – дает больше информации </h2>

По тегу H1 — поисковые системы (и люди) пытаются сориентироваться, о чем пойдет речь ниже на этой странице.

Если заголовка H1 нет – то это все равно, что вы увидите книгу без названия. Вот в таком недоумении пребывают и поисковые системы, если вы не позаботились о выводе заголовка (тега) H1.

Подзаголовки H2-H6 – используются для логического разделения текста, на инфо блоки.

Все названия глав книги будут находиться в теге H2.

Каждая глава, может быть разделена на под главы – H3, и т.д.

Вот, что пишет Yandex по этому поводу:

Цитата Яндекса про H1

«Правильное оформление заголовков помогает пользователю и роботу Яндекса проще разобраться со структурой документа»

То есть прямым текстом Яндекс говорит — ребята используйте заголовки первого уровня (Н1), это облегчит жизнь и яндекс боту, и людям, попадающим на ваш сайт.»

Проверяем наличие тега H1 в HTML коде страницы

Визуально определить наличие тега H1 не получится.

Что бы проверить наличие заголовка на странице, нужно:

  1. Открыть исходный код страницы.
  2. Через CTRL+F найти вхождение тега: h1

Если заголовок присутствует – то вы увидите текст заголовка страницы между тегами <h1>_</h1>

Пример тега H1 в коде страницы

Иногда, тег <h1> может содержать стили и выглядеть немного иначе, например так:

Тег H1 со стилями в HTML

Но пусть вас это не смущает)

Теперь, когда мы знаем для чего нужен тег H1, и знаем, как проверить его наличие в HTML коде, — пришло время узнать, как же правильно формировать H1.

11 правил формирования тега H1

1. Чем меньше в заголовке не нужных слов, тем лучше

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

2. Старайтесь ставить основной продвигаемый ключ в начало заголовка

Если вы продаёте кроссовки «Найк», то в вашем заголовке Н1 первым словом должно быть «кроссовки», вторым «Найк». Не нужно ставить перед основным ключом какие-то дополнительные слова. Ставьте главное продвигаемое ключевое слово в самое начало заголовка 1

3. Оптимальный размер для заголовка: 60-70 символов

Если вам не хватает места, и вы хотите напихать каких-то прилагательных, то используйте подзаголовочный текст для этого.

4. Не каждый визуально отличимый заголовок помещен в тег Н1

Нужно проверять, не допустил ли верстальщик ошибку и не забыл ли он про тег Н1. Чуть выше – мы уже рассмотрели, как проверять наличие заголовка 1 в коде страницы. Даже если вам кажется, что тег 1 точно присутствует в коде – не поленитесь проверить это!

5. Ваша страница должна начинаться с заголовка Н1

Это важный пункт! Обращаюсь к справке Яндекс вебмастера — сам поисковик пишет то, что заголовок Н1 должен быть реализован в соответствии с иерархией документа. Не нужно засовывать заголовок Н1 где-то в середину страницы.

6. На главной странице часто забывают про использования тега Н1

По статистике, при проведении аудита у 3х сайтов из 10 – отсутствует заголовок Н1 на главной странице! Про него просто забывают…

7. На сайте не должно быть одинаковых тегов Н1 (дублирование заголовков)

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

8. Тег H1 может употребляться на странице только один раз

Следите, что бы не было 2х и более заголовков. Проверить можно точно так же через код. Если заметили 2 и более заголовка – значит у вас проблемы. Тут можно провести аналогию с книгами – у книги только одно название, так же, и у вашей странице должно быть только 1 название (один заголовок 1).

9. Тег H1 должен быть на всех страницах сайта

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

10. Заголовок H1 не должен являться ссылкой (пересечение тегов h1/a href)

Если вы заходите на страницу и заголовок 1 содержит в себе ссылку (уводит вас на другую страницу) – то это косяк. Я такое вижу не часто, но тут главное прийти к пониманию, что заголовок должен быть самостоятельным элементом. Не являться ссылкой, не содержать кучу прилагательных… У этого элемента всего 1 цель: дать пользователю четкое понимание, о чем пойдет речь на текущей странице сайта.

11. Тег H1 должен визуально выделяться среди других заголовков

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

12. Тег H1 не должен быть копией тега Title

У мета-тега как правило более длинное описание, и плотность ключевых слов там отличается. Проверьте, не дублируются ли ваши заголовки в мета-тегах . Если ошибка обнаружилась – надо ее срочно править. Дублирование в воспринимается поисковиками плохо.

Что бы проверить тег TItle — нужно заглянуть в код страницы, и через поиск по слову «Title» — найти соответствующий тег, и сравнить его с нашим заголовком.

Теперь давайте разберемся как нам проверить все теги H1 на нашем сайте

Как проверить теги H1 на всем сайте

Что будем проверять:

  • Наличие дублей по тегу H1 на сайте
  • Найдем страницы с отсутствующими тегами H1
  • Найдем страницы с слишком длинными тегами H1

Для того, чтобы нам не делать это вручную, воспользуемся уже знакомой нам программой, (надеюсь, что знакомой) SEO Screaming Frog.

Откроем программу, отдадим ей адрес нашего сайта и нажмем на кнопку старт.

Программа обратиться к сайту, пройдет по всем его страницам и соберет нам заголовки H1.

Ищем страницы с дублями тега H1

Ищем теги H1 длиной более 70 символов

Чуть выше, во вкладке «Missing» — будут отображаться страницы без тегов H1.

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

Как я формирую теги H1

При формировании тегов H1 я пытаюсь разбить сайты на три разных группы, это:

  • информационные сайты
  • сайты услуг
  • интернет – магазины

Если у нас информационный сайт, то при формировании тегов H1 – будет недостаточным просто напихать в них ключевые слова! Тут важно вовлечь нашего посетителя в прочтение статьи (это идет в разрез с 1м пунктом из рекомендаций, и тут важно найти золотую середину).

Если вы наберете какое-нибудь ключевое слово, к примеру:

«Как перебрать двигатель» или «Как сварить рис», то увидите сотни статей, которые похожи друг на друга как две капли воды, и задача заголовка, привлечь внимание и заставить посетителя прочитать всю статью от начала до конца

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

Прописываем теги H1 для инфо сайтов

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

Цифры – это как анонс структуры, как превью плана. Заголовки с цифрами помогают читателю почувствовать себя комфортнее на нашей странице, и увеличить время пребывания на сайте (проверено сотню раз).

Прописываем теги H1 для сайтов услуг

Если же у вас сайт услуг, к примеру: онлайн школа, то используйте УТП прямо в заголовке (но не забывайте про 11 правил, которые мы разобрали ранее).

Начальный заголовок страницы:

<h1>Обучение веб дизайну</h1>

Заголовок с УТП:

<h1>Обучение дизайну с гарантией трудоустройства</h1>

Мы и не наспамили в тег, и при этом добавили усиление!

У нас появился оффер прямо в заголовке. Это привлекает внимание, и у человека появляется желание изучить нашу страницу.

Тут главное попасть оффером в цель, а для этого, нужно четко понимать аудиторию страницы.

  • См. Анализ ЦА (для определения аудитории страницы)
  • См. Как написать качественный текст (готовим контент с упором на ЦА)

Прописываем теги H1 для интернет-магазинов

В интернет-магазинах название товара обычно длинное, очень длинное)

Мы точно вылазим за лимиты в 60-70 символов.

Так что никаких прилагательных добавлять не нужно.

Вместо них, нужно к концу заголовка добавить артикул товара (но не всегда! Рекомендация работает только для ниш, где распространен поиск по артикулам)

Например, если у вас интернет – магазин светильников, или ноутбуков.

Один и тот же ноутбук может отличаться видеокартой, объемом памяти и у него будет меняться только артикул (название будет одно и тоже) и человек, будет искать свою модель по артикулу.

Толпы людей идут из оффлайна в сеть и ищут по артикулу:

Выбрали в магазине модель, хотят найти подешевле в интернете, и вбивают в поисковик НЕ НАЗВАНИЕ товара, они вбивают АРТИКУЛ!

И соответственно, если вы учтете это у себя в теги H1 — то получите бонус при ранжировании по запросам с артикулами. Если не учтете – не получите))

  • Категории: Потоковое содержимое, Заголовочное содержимое

  • Контекст:

    Где ожидается потоковое содержимое.

  • Модель:

    Фразовое содержимое.

Тег <h1> (сокращение от «heading» — заголовок) представляет из себя заголовок первого уровня. В идеале он должен присутствовать на каждой странице, но только один раз. Второго заголовка <h1> на странице быть не должно.

Как правило, заголовок <h1> задается в начале основного содержимого и кратко описывает ее суть.

Атрибуты

  • Глобальные атрибуты
  • Все заголовки

    Всего в HTML предусмотрено 6 уровней заголовков от <h1> до <h6> соответственно. Уровень заголовка определяет его важность и место в иерархии: заголовок, подзаголовок и т.д. Заголовок каждого уровня имеет в браузере собственный размер, однако, это не то, на что следует обращать внимание. При выборе уровня заголовка вы должны соблюдать их иерархию от 1 до 6:

  • Иерархия заголовков

    Семантически каждый заголовок подразумевает наличие родительского секционного элемента. Уровень заголовка при этом должен соответствовать уровню вложенности раздела:

  • Без разделов

    Разделы можно опускать, тогда браузер будет иметь ввиду их по умолчанию:

  • С разделами

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

HTML-тег H1 по своей значимости можно сравнить с названием книги, фильма или даже плавсредства. «Как вы яхту назовете, так она и поплывет», — это про H1. Любому автору знакомы муки рождения заголовка: нужно как-то емко, но коротко выразить главную мысль, при этом заинтересовать будущего читателя.

Толстой, например, хотел назвать свою эпопею в духе Островского «Все хорошо, что хорошо кончается», но вовремя передумал и остановился на «Войне и мире». Вместо булгаковских «Мастера и Маргариты» мы могли бы читать роман под странным названием «Копыто инженера», а Джонатан Свифт в духе своего времени пытался впихнуть в заголовок краткое содержание книги: «Путешествия в некоторые отдаленные места мира, в четырех частях. От Лемуэля Гулливера, первого хирурга, а потом капитана нескольких кораблей».

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

H1 и структура текста

H1 и структура текста - картинка

Важный компонент SEO — грамотное прописывание HTML-тегов, передающих краулерам информацию о странице. Теги серии «H» отвечают за структуру контента. Они видны не только ботам, но и пользователям в виде заголовков и подзаголовков, поэтому к их составлению нужно отнестись с максимальным вниманием.

Структура качественного текста всегда работает на последовательное раскрытие темы. Это каркас, на котором держится весь текст. Пользователь, сканируя заголовки и подзаголовки H1–H6 на странице, вычленяет суть, понимает, стоит ли читать статью, и быстро находит полезную для себя информацию.

Но не только пользователи ценят структурированные тексты. Поисковики научились оценивать качество контента, и один из факторов, указывающих на хороший текст, это прописанные в HTML-коде сайта теги H1, H2, H3. Чем ниже тег в иерархии, тем меньшее влияние он оказывает на ранжирование.

Грамотный ТЗ-мейкер сразу формирует структуру, составляет иерархию заголовков, на которые впоследствии ориентируется автор.

Роль заголовка H1 для продвижения

Роль заголовка H1 для SEO-продвижения - картинка

H1 — это главный заголовок на странице. «H» — это сокращение от англ. «header» (заглавие, заголовок). Визуально он выделен наиболее крупным кеглем шрифта и находится в начале страницы над основным текстом. Какое действие выполняет тег H1 и следующие за ним теги H2–H6?

  • Играют роль визуальных маркеров, разделяющих полотно текста на смысловые части. Это облегчает чтение, поэтому улучшает поведенческие факторы —приоритетные для ранжирования в Яндексе.
  • Помогают поисковым ботам просканировать структуру текста, проанализировать семантику и правильно оценить релевантность страницы запросам пользователей.

Как заполнить тег H1 в HTML

Как заполнить тег H1 в HTML - картинка

В HTML-разметке всего 6 уровней тегов Header, где H-1 — наиболее, а H-6 — наименее значимый. Прописываются они в блоке body, в начале страницы. Все иерархические теги «H» парные, текст заголовка оборачивается тегами по формуле:

<h1>Заголовок первого уровня</h1>
Для тега H1 можно прописать универсальные атрибуты типа style, задающего стиль элемента по правилам CSS, и атрибут align, задающий выравнивание заголовка:
<h1 align=»left (по левому краю) | center (по центру) | right (по правому краю) | justify (по ширине)»>…</h1>

Для примера заполнения тега H1 в HTML возьмем код одной из статей нашего блога:

Пример заполнения тега H1 в HTML - скриншот

Иерархия заголовков

Иерархия заголовков - картинка

Самое сложное в тегах иерархии не нарушить уровни вложенности. В коде не может быть тега H3, если перед ним нет H2. За этим нужно следить, т.к. это наиболее популярная ошибка в структурировании. Здесь все, как в сказке «Репка»: дедка за репку, бабка за дедку, внучка за бабку, а Жучка за внучку. Нельзя поставить мышку между бабкой и дедкой — это нарушит логическую структуру.

Еще одна сложность: в нашей «Репке» каждой твари должно быть по паре. Если есть один подзаголовок второго уровня, должен быть, как минимум, второй. То есть, репа одна, а дедов, бабок и прочей живности, включая мышей, не меньше двух. Чтобы не запутаться, предлагаем наглядную схему.

H1
H2 H2
H3 H3 H3 H3
H4 H4 H4 H4    

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

Поисковики, индексируя страницу, отдают приоритет тегам H1–H3, если в структурной части текста обнаружатся ошибки, это негативно скажется на ранжировании.

Правила составления тега H1

Правила составления тега H1 - картинка

Содержание

H1 должен отражать основную тему текста и вызывать интерес аудитории.

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

Игра слов, перифразы, оксюмороны и прочие литературные изыски не годятся для заголовков первого уровня web-документов: поисковые роботы этого не понимают. Здесь все должно быть четко, по делу и с гармонично вписанным ключом.

Длина

Длина тега заголовка H1 не должна превышать 50–60 символов. Это обусловлено тремя факторами:

  • короткий заголовок удобен для визуального восприятия: идеально, если он вписывается в одну строку на экране десктопной версии сайта;
  • поисковые алгоритмы учитывают ограниченное количество символов в теге;
  • поисковик может подтянуть содержимое тега H1 в сниппет, и, если превысить лимит в 60 символов, фразу обрежут на полуслове.

Если в 60 знаков тема статьи не умещается, можно нарушить это правило — ничего страшного не случится, но основной ключ все же лучше поставить в начало.

Взаимосвязь с Title

Title — это мета тег, адресованный поисковому роботу, H1 — это тег, адресованный людям, и, хоть оба этих элемента языка программирования HTML означают заголовок, они должны различаться.

Дублирование Title и H1 не приводит к фатальным последствиям, но и никак не способствует продвижению. Уникальные теги, напротив, сообщают поисковому боту больше информации о вашей странице, позволяют более точно определять ее релевантность запросу.

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

Наполнение ключами

В теге H1 нужно прописать наиболее высокочастотный запрос кластера, которому будет соответствовать контент на странице: если вы продвигаетесь по ключу «как открыть кофейню в Москве», то его и надо ставить заголовком. Главное, чтобы содержимое страницы было релевантно запросу в названии.

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

В тегах H2–H6 можно ставить низко- или среднечастотные запросы, но главное, чтобы подзаголовки отражали суть идущих за ними текстовых блоков. Если прописывать ключи во все теги иерархии, нужно избегать переспама: используйте синонимы, разбивайте фразы.

Количество заголовков H1 на сайте

Количество заголовков H1 на сайте - картинка

На вопрос, сколько может быть заголовков H1 на сайте, у официальных представителей поисковиков нет однозначного ответа. Яндекс просто говорит о соблюдении иерархии: «…следует выделять этими тегами заголовки в соответствии с иерархией документа». Вебмастер. Справка.

Google в лице Джона Мюллера считает, что несколько H1 в одном документе сайта — это не такое уж грубое нарушение, главное, чтобы иерархия не нарушалась.

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

Где не нужен H1

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

Визуальные особенности H1

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

Главный заголовок:

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

Чтобы изменить оформление заголовка (шрифт, кегль, цвет, фоновую картинку), нужно вносить правки в стили CSS.

Дополнительные рекомендации

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

Частые ошибки в составлении тега H1

Частые ошибки в составлении тега H1 - картинка

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

  • переспам или, наоборот, полное игнорирование ключей;
  • копирование Title;
  • нарушение правил русского языка;
  • слишком длинные заголовки;
  • в документе нет H1;
  • несколько главных заголовков на одну страницу;
  • нарушение иерархии;
  • изменение стиля тегов H1–H6 не в CSS, а с помощью других тегов, типа <strong> или <b>.

Как привлечь пользователя заголовком H1

Как привлечь пользователя заголовком H1 - картинка

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

Проблема — решение

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

Сравните:

  • «Как не ошибиться с выбором вуза: советы преподавателей столичных университетов» — обозначили насущную проблему, предложили авторитетное решение.
  • «Советы по выбору вуза» — нет акцента на проблеме, нет ссылки на авторитет.

Интрига

Люди любопытны, интригующий заголовок может разбудить интерес и заставить прочитать материал.

  • «Какое сливочное пиво пил Гарри Поттер? 3 рецепта из разных времен» — есть интрига и обещание полезной информации.
  • «Рецепты сливочного пива из Гарри Поттера» — стандартный заголовок без интриги.

Цифры

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

Сравните:

  • «10 лучших провинциальных вузов России» — точная цифра задает структуру текста.
  • «Лучшие вузы за пределами двух столиц» — посыл заголовка слишком размыт.

Позиционирование

Маркеры типа «для чайников», «для профи», «своими руками», «в домашних условиях» недаром так популярны — благодаря позиционированию, вы привлекаете заинтересованных пользователей, на которых рассчитан ваш контент.

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

Экзамен

Человек — существо азартное, его легко зацепить, кинув вызов, или взять «на слабо».

  • «Вы уверены, что правильно считаете калории? 5 главных ошибок худеющих» — есть и вызов, и цифры, и интрига.
  • «Ошибки при подсчете калорий» — скучный заголовок без искры.

Проверка H1 в коде

Проверка H1 в коде - картинка

Быстро проверить тег H1(как и любой другой) на сайте можно тремя способами:

  1. Нажмите правую клавишу мыши на исследуемом участке документа, выберите в выпадающем меню пункт «Посмотреть код», «Исследовать», «Проверить объект» — название пункта зависит от браузера. Внизу появится окно с HTML-кодом, где можно изучить свойства выбранного элемента.
  2. То же окно с кодом вызывается комбинацией Ctrl+Shift+C. В строке поиска на панели web-мастера нужно вбить h1 и, если тег прописан, он подсветится синим.
  3. Самый простой способ вызвать панель с кодом — нажать кнопку F12 на клавиатуре. Нужные теги также ищем через поисковую строку.

Теги H1 в CMS

Теги H1 в CMS - картинка

В любой CMS есть инструменты для формирования заголовков. Посмотрим, как прописать H1 в популярных движках.

WordPress

На WordPress основной заголовок прописывается в панели редактирования записей в отдельной верхней строке. Ниже располагается окно для ввода основного текста, там есть панель инструментов для его форматирования, где можно структурировать статью с помощью заголовков 2–6 уровней. Выделите фразу, перейдите во вкладку с заголовками в панели инструментов, выберите нужный уровень. Для тех, кто знаком с Вордом и Гугл доками, процедура не вызовет вопросов.

Чтобы проверить теги в HTML, можно переключиться с текстового редактора на редактор кода.

Bitrix

В Bitrix заголовок H1 можно прописать в визуальном редакторе, так же, как это делается при форматировании в программе Word или в Гугл доках.

Менять метатеги, включая H1, можно в разделе SEO во вкладке «Управление» — «Базовый заголовок страницы (<H1>)».

Joomla

Самый простой способ прописать иерархические заголовки в Joomla — отформатировать их в текстовом редакторе движка или прописать вручную в редакторе HTML-кода в соответствии со стандартным синтаксисом тега.

Вывод

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

Грамотное составление тегов H1—H3 не только улучшает поведенческие факторы, но и сообщает дополнительную информацию поисковым системам, помогая им более точно определять релевантность страниц.

Что такое заголовок, знает абсолютно каждый. Это емкое, привлекательное название, в котором при всей лаконичности заключается суть целой публикации, статьи и т. д. Но заголовок на странице сайта – это не совсем то, что мы привыкли видеть в газетах, журналах или книгах. Почему? Попробуем разобраться.

Что такое H1?

H1 – это главный заголовок в статье, заголовок первого уровня. Каждая страница в интернете имеет свою структуру. Заголовки H1-H6 как раз и позволяют правильно структурировать материалы, причем как для поисковиков, так и для пользователей. H1 – главный заголовок, H2-H6 второстепенные, вложенные подзаголовки. В коде заголовки выглядят так: <h1>сам заголовок</h1>, цифра как раз и обозначает уровень заголовка.

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

Условие 1. Ключевые слова в заголовках

Для этого у вас должно быть разработано качественное семантическое ядро – отнеситесь к нему крайне ответственно и помните, что один и тот же ключ вставлять на все страницы сайта нельзя. Релевантность всему голова: нужно соответствовать ожиданиям клиентов и поисковиков. В заголовках главной страницы можно брать среднечастотные и высокочастотные запросы. А на товарных страницах (карточка товара) вполне допустимы заголовки с низкочастотными ключами. Ключ должен вести на конкретную позицию или единицу, быть точным, а не обобщенным.

Размещая ключевые слова, делайте это аккуратно: не злоупотребляйте ключами и не составляйте спамные заголовки (например, купить квартиру Москва, купить сумка холодильник, купить мотоцикл Красноярск цена, моя твоя не понимать и т. д.). Сохраняйте красоту фразы и ее логичность. В великом и могучем русском языке слова спрягаются и склоняются, а роботы сейчас понимают смыл, разбираются в языке не хуже нас с вами! И не частите – спам очевиден всем, а так и до Баден-Бадена рукой подать, ну и не забывайте про Панду от Google.

Пример, где количество ключей зашкаливает, перебор.

переоптимизация текста

Из главного заголовка понятно, о каком товаре пойдет речь. Конечно, в первом абзаце без ключа не обойтись, но делайте это ненавязчиво, а не так открыто и агрессивно.

Ну и надеюсь, что никому и никогда не придет в голову затолкать в заголовок все ключевые слова, предназначенные для одной страницы. Ничего хорошего явно не получится. =)

Помните, что текст создается не только для поисковых машин, но и для людей. И вообще роботам нравятся человечные, простые и понятные тексты. Если в заголовке ключевые слова органично встанут в начало предложения, то сработает чуточку лучше. Т.е. с точки зрения оптимизации страницы под ключевое слово «гостиницы Москвы» лучше отработает заголовок «Гостиницы Москвы – официальные сайты, обзоры, фото»,  чем «Обзоры, фото и официальные сайты гостиниц Москвы».

Условие 2. Теги <h1>-<h6>

Размещая тексты на сайте, не забудьте правильно расставить теги. Теги для заголовков текста определяются следующим HTML-кодом: <h1>-<h6>. По нашим наблюдениям, вполне хватает двух тегов — <h1>-<h2>. Сейчас большие тексты люди не читают, и даже исходя из логики вещей, вложенность такого количество заголовков не нужна. Исключение могут составлять страницы, где много видео, картинок, интерактивных элементов и т.д. Но это все же исключение, а не правило.

Поисковики также учитывают размерность и значимость тегов <h1>-<h2>. При верстке стоит обратить внимание, чтобы заголовки визуально выделялись из общего текста.

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

Допустимо ссылаться с заголовков уровня <h2> и ниже, но тоже если это оправдано и логично.

Поисковые роботы придают заголовкам большое значение, поскольку они используются, чтобы обозначить важную информацию. Так машинам будет легче читать текст и понимать его структуру, логику; видеть, что есть самое весомое. Не стоит пытаться схитрить и применять теги <h1>-<h6> для всего текста на странице, ведь толку от этого не будет. Роботы не дураки, и вообще очень ранимые – могут отомстить за это чем-нибудь малоприятными для вашего сайта. Поэтому предварительно подумайте семь раз, последствия страшны. Прописывая заголовки в тексте, придерживайтесь следующих правил:

  1. Наводим порядок. Теги <h1>-<h6> расставляются по принципу иерархии: тег <h1> важнее тега <h2>. На деле это выглядит вот так:

    правильная иерархия тегов

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

    неправильная иерархия тегов

    Кроме того, тег <h1> играет важную роль при формировании быстрых ссылок в поисковой выдаче Яндекс.

    Быстрые ссылки – это короткий путь из результатов выдачи к важной информации на вашем сайте. Чтобы сформировать такие ссылки, должно быть вхождение ключа и ссылка с ключевым словом на самом сайте на эту страницу. Быстрые ссылки:

    1. Сокращают путь до целевого действия.
    2. Распределяют трафик и по внутренним страницам сайта.
    3. Делают сниппет ресурса более привлекательным в выдаче.

      пример формирования быстрых ссылок

    Согласно общим рекомендациям тег <h1> должен включать те же ключевые слова, что и Title этой страницы, но при этом теги не должны полностью дублировать друг друга.

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

    В идеале, чтобы этот текст совпадал с текстами ссылок, ведущих на эту страницу.

    Быстрые ссылки Яндекс позволяет редактировать. Например, убрать один из разделов либо выбрать ему другое имя, более привлекательное для ваших потенциальных клиентов. Сделать это можно в разделе Яндекс.Вебмастер → Информация о сайте → Быстрые ссылки.

    управление сформированными быстрыми ссылками

  2. Расставляем приоритеты. Никаких километровых заголовков <h1>-<h6>: включаем максимально важное. Это некрасиво, сложно и неудобно читается. Маркетинговую составляющую, если она длинная, можно обыграть в качестве подзаголовка.

    Длинно-сложно-плохо:

    длинный заголовок h1

    Коротко-ясно-понятно: ключевое слово на первом месте, УТП (уникальное торговое предложение) вынесли за пределы главного заголовка, но оставили его вначале для привлечения внимания.

    правильная длина заголовка h1

  3. Не частим. Главный заголовок <h1> – самый крупный и значимый – его достаточно будет употребить только один раз, не нужно проставлять этот тег для каждого заголовка.

    Бытует мнение, что на странице H1 можно использовать только один раз! Но это не так. Гипотетически <h1> может встречаться несколько раз, если это оправдано. Но в этом случае текста на странице должно быть очень много,  в нем должны быть абсолютно не взаимосвязанные по логике блоки. Такое сейчас можно встретить в огромных мануалах или инфостатьях. На среднестатистическом сайте и в текстах на нем несколько <h1> употреблять не нужно.

    Не шутите с этим, ведь этот тег в плане оптимизации занимает второе место после <title>. Он должен быть самым интересным – ярким и привлекательным (лучше в этом месте использовать оффер) и содержать самое частотное ключевое слово. Ставим его в начало текста – перед ним ничего не пишем, и желательно в начале заголовка использовать ключ – плюсик к оптимизации. Еще примеры неправильного и корректного использования:

    повтор заголовка h1

    правильная иерархия заголовков

    И еще пример, как это выглядит в коде страницы. Запомните, что так делать не рекомендуется. Два H1 без веских на то причин:

    два h1 на одной странице

  4. Проверяем написание. Ошибки отпугивают людей, сразу возникает мысль: и какой школьник это писал? Проверяли ли текст? Гораздо опаснее, если роботы вас не поймут и ваш сайт в заветный топ не выведут. Так его никто и не увидит и ошибок не найдет. Вот пример с опечаткой.

    опечатка в заголовке h1

  5. Обходимся без сложной структуры. Не стоит вкладывать в теги <h1>-<h6> какие-то другие теги (например, так <h1><img src=»https://makets.vsemayki.ru/catalog_img/447092/peoples/front/womanshort/yellow/8_500.jpg» alt=»Купить футболки с надписями» width=»200″></h1>), поскольку ВЕСЬ текст внутри <h1></h1> может расцениваться поисковиком как ЗАГОЛОВОК.

    Еще нежелательно вкладывать стили (как здесь: <h1 style=»font-color: #fff; font-size: 15 px;»>Текст<h1>), так как код становится более объемным, сложным и длинным. Следовательно, увеличивается время чтения кода роботом, это может затруднить индексацию.

    В данном случае стили лучше добавлять в классы. Классы позволяют задавать одному тегу различные стилевые правила. Нужно создать класс в подключеном файле css (или создать и подключить его), в него внести необходимые стили, тем самым упрощая и облегчая код страницы.

Важное дополнение: в целевое действие тоже добавляем ключевые слова. Выделяем его тегами <strong> для пользователя, привлекаем к нему внимание. Но тут помним об умеренности: ЦД не должно быть много и тег <strong> часто использовать не нужно. 

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

Если все получится, то эффект от такой вроде бы незначительной и легкой работы не заставит себя ждать.

А если у вас возникнут сложности – обращайтесь к нашим специалистам, мы готовы проверить, правильно ли прописаны заголовки у вашего сайта, корректно прописать в случае ошибок и ответить на любые вопросы. Составление заголовков для 1 страницы (+подбор 3-х релевантных ключей) – от 450 рублей.

Понравилась статья? Поделить с друзьями:

Не пропустите также:

  • Экстремум фнп как найти
  • Как найти песню по первой строчке
  • Как найти потери продукции
  • Как найти банковский счет умершего родственника
  • Как найти в томске гадалок

  • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии