Исчерпывающие правила создания заголовка (тега) h2 для страниц сайта
Что такое тег h2?
h2 – это HTML-тег , указывающий на заголовок страницы сайта.
Давайте по порядку.
- HTML расшифровывается как Hyper text mark-up language – «Язык разметки гипертекста». Большинство сайтов используют этот язык, чтобы создавать веб-страницы.
- Тег – это тег HTML, который является частью кода. Он посылает браузеру сигнал о том, как отображать ваш контент.
- Заголовок – в системе HTML есть шесть разных тегов заголовка — h2, h3 и так далее. Тег h2 считается самым важным, а тег h6 наименее значимым. Теги часто отличается друг от друга по размеру – самый большой тег является самым важным, а самый маленький наименее значимым.
Рис. 1. Теги часто отличаются по размеру
Если бы Вы хотели создать h2 в HTML, он бы выглядел примерно вот так:
<h2> Привет, меня зовут Заголовок номер один! </h2>
Для примера. Откройте любую веб-страницу и выполните следующие шаги.
1. Убедитесь в том, что Вы находитесь на веб-странице.
Есть? Отлично.
Рис. 2. Пример веб-страницы
2. Посмотрите на источник кода.
Чтобы это сделать, используем правую кнопку мышки (кликаем по пустой области страницы сайта) и выбираем пункт «Исходный код страницы» (инструкция для Firefox).
Рис. 3. Как просмотреть источник кода на веб-странице
Вот что Вы увидите, просматривая источник кода:
Рис. 4. Пример источника кода
3. Найдите тег h2.
Нажмите CTRL + F и откройте строку поиска в своем браузере. После нажатия CTRL + F, появляется маленькое окошко поиска в верхнем правом углу окна браузера.
Введите «h2», затем нажмите кнопку «Enter». Браузер выделит h2 на странице.
Рис. 5. Тег h2 на странице исходного кода
Текст между тегом h2 «SEO-продвижение сайта» и есть Заголовок h2.
Почему тег h2 так важен?
Тег h2 всегда был очень важным фактором ранжирования.
Было немало трендов в сфере SEO, которые становились популярными, а затем исчезали, но теги h2 всегда имели большое значение.
В недавнем обзоре факторов ранжирования от «Moz», теги являются третьим самым весомым фактором ранжирования.
h2 – это, как правило, визуально самый заметный контент на странице.
Это, возможно, самая важная SEO-функция тега h2. Хотя поначалу, Вы можете не осознавать всю значимость тегов h2.
Почему нет? Потому, что они скорее ориентированы на пользователя, чем на техническую оптимизацию страницы, да?
Да! Именно в этом направлении движется SEO-оптимизация в последние годы. В наши дни SEO в большей степени ориентируется на пользовательскую оптимизацию, чем на оптимизацию в поисковой системе.
Не забывайте о том, что пользователи должны замечать h2. Этот тег имеет значение!
Тег h2 является одной из наиболее мощных стратегий SEO и ключевым пользовательским элементом в Вашем арсенале.
Теперь давайте обсудим, как это работает.
Как создать убийственный тег h2?
Тег h2 – это не какая-то секретная стратегия. На самом деле, практически все знают что-то о SEO-оптимизации или HTML и используют теги h2.
80 % сайтов в топе результатов Google используют тег h2.
Рис. 6. 80 % сайтов в топе результатов Googleиспользуют тег h2
Вот правила создания тегов h2. Следуйте моим советам, и у вас будут идеальные теги h2.
1. Используйте только один тег h2.
На каждой странице должен быть только один тег h2. Нет причин для использования более одного тега h2.
Почему так? Если один тег так хорош, почему бы не использовать два или даже шестнадцать?
Это неправильный ход мысли.
Поисковые системы будут сканировать множественные теги h2 на странице, но намного логичней сосредоточить все свои усилия в сфере SEO на одной ключевой фразе или предложении, а не на многих.
Наличие более одного тега h2 не обязательно собьет поисковую систему с толку, но может рассеять ту силу SEO, которая концентрируется вокруг одного h2.
2. Ваш тег h2 должен описывать тему вашей страницы.
На самом базовом уровне, тег h2 должен описывать ваш контент.
- Часто тег h2 похож на тег оглавления.
- Обычно тег h2 является заголовком статьи в Вашем блоге.
- Как правило, тег h2 дает читателю представление о том, что он будет читать.
3. Длина тега h2 должна составлять 20-70 символов.
Единственная причина, по которой я об этом говорю – это желание Вас предостеречь. Если тег слишком короткий, Вы теряете ценное пространство. Но если он слишком длинный, мощность тега рассеивается.
Оптимальная средняя длина тега – 20-70 символов.
4. Ваш тег h2 должен выделяться.
Тег h2 должен быть самым важным визуальным элементом на странице.
- Он должен быть большим.
- Он должен быть заметным.
- Нужно использовать такие визуальные элементы, форматирование и стиль, которые заставят Ваш тег выделяться.
Почему это важно?
Как я уже говорил ранее в статье, пользовательский опыт – это самое важное.
Блог SmartPassiveIncome – это отличный пример правильного форматирования. Теги h2 Пэта Флинна очень мощные.
Я взглянул на исходный код и вот, что я увидел:
Вот еще один пример из блога Рамита Сетхи.
Можете угадать, где его тег h2?
Да. Тегом h2 в данном случае является предложение: «А знаете, сколько вы могли бы зарабатывать?».
То, что я пытаюсь вам сказать, связано с пользовательским опытом. Я остановлюсь на этом подробнее в следующем разделе.
5. Создавайте такие теги h2, которые обеспечивают хороший пользовательский опыт.
За последние несколько лет SEO-оптимизация сильно изменилась. Главное изменение связано с огромным влиянием пользовательского опыта на SEO.
Чтобы лучше понимать соотношение SEO и пользовательского опыта, давайте рассмотрим диаграмму Венна.
Эта диаграмма была опубликована в 2012 году.
В 2017 году SEO, вероятно, займет еще меньший круг в сравнении с дизайном и юзабилити.
Дело в том, что поисковые системы развиваются настолько быстро, что они предсказывают, чего именно хотят пользователи, когда они ищут или просматривают что-то.
Имейте в виду, что благодаря машинному обучению поисковые системы постоянно меняются. Изменения алгоритма предотвращают массовые сбои в работе поисковых систем и в результатах поиска.
Поисковые системы постоянно вносят изменения в алгоритм построения факторов ранжирования, основываясь на привычках миллионов пользователей.
Другими словами, то, как пользователи взаимодействуют с Вашей страницей, непосредственно влияет на то, как будет оцениваться Ваша страница.
Тег h2 является одним из самых важных элементов на Вашей странице. Он влияет на взаимодействие с пользователем.
Почему так? Потому что он заметен. Благодаря тегу пользователи получают определенное сообщение. В нем скрыт определенный посыл. И обещание.
Тег h2 должен напрямую общаться с пользователем!
В 2015 году компания «Searchmetrics» провела масштабное исследование факторов ранжирования. Согласно исследованию, наибольшее влияние на пользователя имеет не сам тег h2, а способ форматирования тега!
Вот самое важное предложение из их исследования:
«Наличие тегов h2 и h3 обеспечивают правильную структуру статьи и разбивают ее на части – эти элементы улучшают пользовательский опыт».
Это увлекательная часть познаний о теге h2. Имеет значение не просто само наличие тега h2 на странице – это отправная точка.
Самое главное – это способ форматирования и размещения тега h2!
6. Тег h2 должен соответствовать пользовательскому намерению.
Фраза «пользовательское намерение» смущает некоторых людей, но на самом деле это довольно просто.
Когда Вы создаете контент, обязательно задайте себе вопрос: «Чего хочет пользователь, открывая мою статью? Какие у него намерения?»
Ваш тег h2 должен удовлетворить это намерение.
Если кто-то ищет «рискованные тактики в сфере SEO», я могу предположить, что человеку нужны быстрые и действенные методы поисковой оптимизации, которые могли бы повысить его рейтинг.
Если бы я писал статью на эту тему (ой, подождите, я же уже ее написал!), я попытался бы ответить на вопросы пользователей с помощью своего тега h2.
Вот как работает пользовательское намерение.
Во-первых, пользователь понимает, о чем статья. Именно ради этого они используют Google.
Рис. 7. Пример запроса в Google«Рискованные и действенные тактики в сфере SEO»
И вот многообещающие результаты.
Рис. 8. Результаты поискового запроса
Пользователи щелкают на одну из ссылок! А вот и статья из моего блога на эту тему.
Рис. 9. Статья о рискованных тактиках в сфере SEO
Моя цель состоит в том, чтобы мой тег h2 дал пользователю именно то, что ему нужно, – они ведь пришли за простыми, но рискованными тактиками в сфере SEO и хотят увеличить свой трафик.
Задача тега h2 – удовлетворять пользовательское намерение.
Вот как это объясняет Марк Плетель из «SEJ»:
«Чтобы у Вас были отличные теги h2, оптимизированные под алгоритм Hummingbird, попытайтесь понять, кто же такой пользователь».
Позвольте мне кратко изложить основные правила создания потрясающих тегов h2.
- Используйте только один тег h2.
- Тег h2 должен описывать тему страницы.
- Тег h2 должен выделяться.
- Тег h2 должен обеспечивать хороший пользовательский опыт.
- Используйте ключевые слова в теге h
- Соответствуйте пользовательскому намерению в своем h
Как быстро определить и изменить теги h2 на сайте?
Проведите аудит тегов h2. Вот в чем сила тега h2 – это быстро и это просто. И это дает невероятные результаты в рекордные сроки.
Если у Вас небольшой сайт или блог, выполните следующие шаги.
Загрузите приложение ScreamingFrog
Это можно сделать на сайте https://www.screamingfrog.co.uk/.
Нажмите на кнопку «SEO Spider Tool».
Затем нажмите на кнопку «Загрузить».
Приобретать лицензию на использование программного обеспечения не обязательно. Однако если Ваш веб-сайт содержит более 500 страниц, то рекомендуется все таки приобрести лицензию.
Откройте приложение ScreamingFrog.
После того, как Вы успешно загрузили Screaming Frog, откройте его.
Введите свой URL-адрес.
Нажмите «Начать» и подождите, пока закончится процесс сканирования.
В зависимости от размера Вашего сайта, на это уйдет от нескольких минут до нескольких часов.
У приложения Screaming Frog уходит примерно меньше минуты, чтобы отсканировать 500 страниц.
Щелкните на тег h2 в панели меню.
Таким образом, вы увидите весь список тегов h2 на вашем сайте.
Проверьте, не отсутствуют ли какие-либо теги h2.
Проверьте меню фильтра.
Выберите вкладку «Отсутствуют»
Вы увидите все страницы на сайте, которым не хватает тега h2.
Рис. 10. Страницы на сайте, которым не хватает тега h2
Ваша первая задача – создать тег h2 для каждой из этих страниц.
У Вас может быть причина не создавать тег h2 для каждой страницы. Моя страница в блоге является страницей меню со списком статей. Я их регулярно добавляю и обновляю, поэтому я решил не включать тег h2.
Создайте список отсутствующих тегов h2.
Нажмите на кнопку «Экспортировать».
Найдите хорошее место для сохранения файла.
Это файл CSV, поэтому его можно открыть через Excel.
Отфильтруйте те теги h2, которые дублируются.
Это можно сделать, нажав на кнопку «дублированный» в меню фильтра.
Сохраните эту информацию в файле CSV, чтобы использовать ее в будущем.
Вернитесь к меню фильтра, выберите вкладку «Все».
Экспортируйте список.
На данном этапе у Вас должно быть три файла CSV (отсутствуют, дублируются, все).
Создайте новый тег h2.
Ваша задача – создать новый тег h2 для каждой категории. Начните с отсутствующих тегов, затем перейдите к дублированным тегам и, наконец, пересмотрите все h2.
Если Ваш сайт содержит десятки тысяч страниц, начните работу с важнейшими тегами h2, а именно – с отсутствующими.
Но если у Вас есть время, обновите все свои теги h2 в соответствии с приведенными выше рекомендациями.
Вы почувствуете большую разницу в росте трафика, рейтинга и общей производительности сайта.
Вывод
Если Вы прочитали эту статью до конца, то Вы уже знаете о тегах h2 больше, чем большинство людей на планете.
Но что еще более важно – Вы точно знаете, как использовать тег h2 для максимального воздействия в сфере SEO.
Имейте в виду, что тег h2 по-прежнему очень важен для SEO-оптимизации. Это очень мощный инструмент – Ваш сайт может взлететь, Ваш контент может взлететь, а также Ваш трафик и Ваши рейтинги.
Надеюсь, что Вы сделаете то, что сделал я – я открыл для себя потенциал тегов h2. Обновите их на своем сайте – всплеск трафика гарантирован.
Оригинал взят с сайта neilpatel.com: How to Create the Perfect h2 Tag for SEO
h2 — базовый заголовок первого уровня: что писать, длина, примеры
Как оптимизировать страницу с помощью html заголовка первого уровня h2? Какая должна быть его длина и сколько тегов h2 можно использовать на странице? Примеры хороших и плохих заголовков. Обо всем подробнее читайте в данной статье.
Содержание статьи
h2 — это базовый заголовок страницы первого уровня. В Html разметке существует всего 6 заголовков, показывающих важность блоков стоящих под ними. Наиболее важный заголовок h2, наименее — H6.
По-умолчанию, стили заголовков отличаются: h2 имеет наибольший размер, далее по нисходящей, соответственно, H6 — наименьший из заголовков. Визуальное отличие в отображении сделано для пользователей, которые посещают web-ресурсы. Для роботов имеет значение синтаксис.
Синтаксис заголовка h2
В Html-коде страницы заголовок h2, как правило, размещается в пределах парного тега body как можно ближе к началу страницы. Выглядит вот так:
<h2>h2 — базовый заголовок первого уровня</h2>
Пример использования тега h2 на данной странице:
h2 является парным тегом. Текст расположенный между открывающим тегом <h2> и закрывающим тегом </h2> и является заголовком первого уровня. Заголовки h3-H6 имеют аналогичный синтаксис.
Важно! Заголовки h2-H6 должны иметь иерархическую и смысловую последовательность. Заголовок третьего уровня не должен содержать в себе блок с заголовком второго уровня, также как и заголовок четвертого уровня не должен находиться внутри блока с заголовком второго уровня.
Простой пример правильной иерархической структуры заголовков:
<html> <head> <title>Популярные породы кошек в России и США</title> </head> <body> <h2>Породы кошек в России и США</h2> <p>Вступление</p> <h3>Породы кошек в России</h3> <p>Текст про породы кошек в России</p> <h4>Русская голубая кошка</h4> <p>Текст про русскую голубую кошку</p> <h4>Сиамская кошка</h4> <p>Текст про сиамскую кошку</p> <h3>Породы кошек в США</h3> <p>Текст про породы кошек в США</p> <h4>Мейн-кун</h4> <p>Текст про породу Мейн-кун</p> </body> </html>
Более подробно ознакомиться c иерархией и структуризацией страницы с помощью заголовков вы можете в спецификации HTML5.
Для чего нужен заголовок h2?
Заголовки в целом нужны для правильной структуризации документа. Соблюдение структуры web-страницы необходимо как для пользователей, которые визуально воспринимают информацию на сайте, так и для роботов поисковых систем. Для первых понятная структура страницы является залогом простоты восприятия информации, для вторых заголовки и блоки под ними представляют семантическую важность.
Заголовок страницы в отличие от тега meta description виден всем пользователям сайта. h2 является смысловым обобщением содержания web-страницы.
Особенности заголовка h2
Заголовок первого уровня — это блочный элемент, который всегда начинается с новой строки. Он по-умолчанию обладает жирным начертанием и имеет свои отличительные особенности, которые не присущи другим заголовкам более низких уровней.
Что писать в h2?
Как уже говорилось ранее, h2 — это заголовок первого уровня как в визуальном плане, так и в смысловом. Базовый заголовок должен отражать содержание всей страницы, а не отдельных ее частей. h2 не должен дублировать тег title, но также как title и description должен содержать главное ключевое слово страницы. У тега h2 высокая вероятность попасть в заголовок динамического сниппета, поэтому дублирование h2 и title является плохой практикой. Вы таким образом сужаете вариативность и релевантность своего сниппета по низкочастотным запросам.
Главное требование к h2 — это релевантность содержимому страницы. Заголовок помимо наличия ключевого слова должен привлекать внимание и быть интересен пользователю. Пример корректно составленного h2:
Размер и длина заголовка h2
Начнем с размера. Во многих SEO-блогах можно найти информацию о том, что заголовок h2 обязательно должен быть визуально больше остальных заголовков, в противном случае поисковые системы посчитают это содержание за неоптимизированный контент, и позиции сайта могут понизиться в выдаче. Есть ли у этой информации объективная основа? Нет. Ни в спецификации HTML, ни в справочной информации поисковых систем вы не найдете данных, отражающих важность визуальных стилей заголовков.
Более того, многие начинающие оптимизаторы по ошибке принимают текст самого большого размера за заголовок первого уровня, хотя зачастую это бывает не так. Вот отличный пример:
По запросу «Купить мужские джинсы» в ТОП-5 выдачи Яндекс (на момент написания статьи) присутствует один из лидеров E-commerce интернет-магазин Lamoda.ru. На скриншоте видно, что заголовок первого уровня «Мужские джинсы» гораздо меньше по размеру, чем описательный блок <div>, и другие текстовые элементы, размещенные на странице.
Визуальное отображение — это вопрос юзабилити, а семантика — это вопрос поисковой оптимизации. Не стоит путать эти два понятия. В вашем конкретном проекте стоит руководствоваться здравым смыслом, эстетикой ресурса и удобством представления информации для пользователей.
Длину h2 рекомендуется делать не более 60 символов, так как поисковые системы учитывают их ограниченное количество. Если вы не можете уместиться в этот лимит, не потеряв смысловую нагрузку заголовка, напишите заголовок длиной более 60 символов. В идеале нужно придерживаться данной цифры, так как h2, как говорилось ранее, может быть использован при формировании динамического сниппета. А отображаемая длина заголовка (ссылки) в сниппете ограничена.
Сколько заголовков h2 может быть на странице?
Согласно спецификации HTML 5 количество заголовок первого уровня возможно использовать для каждого тега article или section. Яндекс в разделе представления информации о сайте не упоминает о возможном количестве использования h2, а лишь говорит о том, что должна быть соблюдена иерархия использования заголовков. Официальный представитель Google Джон Мюллер на официальном канале youtube Google Webmasters отмечает, что использование множественных заголовков h2 на одной странице не является проблемой, если это не нарушает иерархию web-документа.
Что говорит практика? На практике подавляющее большинство оптимизаторов, seo-компаний и подрядчиков использует при структуризации страниц только 1 заголовок h2. Заголовок первого уровня также не используется при оформлении элементов интерфейса: меню, сайдбары и т.д. Нет объективных исследований по влиянию количества заголовков h2 на повышение позиций сайта в выдаче или переоптимизацию ресурса, да и согласно официальным данным поисковых систем такие исследования не нужны.
Мы рекомендуем все-таки не отходить от общепринятой практики и использовать только 1 уникальный h2 заголовок на странице. В спецификацию HTML достаточно часто вносятся изменения. Для оптимального построения иерархии и структуризации страниц большинству web-проектов будет достаточно использовать первые три заголовка. Не стоит экспериментировать, так как все необходимые инструменты для создания иерархии у вас уже есть.
Проверить заголовок h2 на странице
Существует 3 простых способа проверить заголовок h2 на странице:
- Кликните правой кнопкой мыши на участок текста, и в зависимости от вашего браузера нажмите кнопку «Посмотреть код» (Chrome), «Исследовать элемент» (Mozilla Firefox) или «Проверить объект» (Safari). У вас откроется панель вебмастера как на скриншоте ниже. В html коде страницы вы увидите разметку текста, и поймете какого уровня заголовок перед вами и заголовок ли это вообще.
- Сочетание клавиш Ctrl+Shift+C вызывает панель вебмастера. Кликните в любое место представленного html кода. Далее нажмите сочетание клавиш Ctrl+F для поиска по содержимому кода, и вбейте в поисковую строку «h2».
- Кнопка F12 вызывает панель разработчика. Поиск элемента h2 делается аналогично предыдущему способу.
8 ошибок при написании h2
Мы систематизировали наиболее часто встречающиеся ошибки при составлении заголовков первого уровня. Проверьте, есть ли эти ошибки на вашем сайте:
- Посторонние элементы. В h2 кроме текста не должно быть ничего. Некоторые вебмастеры думают, что они усилят заголовок, обернув его также в тег strong или b, придав ему жирное начертание, итак заложенное в стилях. Это плохая практика, старайтесь ее избегать. Не рекомендуем также чрезмерно использовать пунктуацию (знаки препинания в заголовках). Старайтесь делать их простыми и лаконичными.
- Отсутствие или переизбыток ключевых слов. Из крайности в крайность. h2 — это квинтэссенция вашей семантики на странице. Ключевое слово должно присутствовать в заголовке. Отсутствие ключевых слов в главном заголовке страницы поставит под вопрос ее релевантность поисковым запросам.
- Дублирование. Ошибкой является как дублирование title в h2 и наоборот, так и дублирование h2 на разные страницы сайта. h2 должен быть уникальным для всего сайта. Из 2 страниц с одинаковым контентом в выдачу попадет наиболее релевантная.
- Длина. Старайтесь укладываться в 60 символов. Заголовки h2 по 300-400 символов можно увидеть на многих ресурсах, не следуйте дурному примеру. Также не стоит составлять базовый заголовок из одного слова, если это не головной раздел сайта или общая категория товаров.
- Грамматика. Грамматические ошибки сводят на нет всю семантическую значимость вашего заголовка. Старайтесь не допускать ошибки в тексте, а в заголовке — тем более!
- Больше одного h2. Этот вопрос мы подробнее расписали выше. С натяжкой отнесем данный пункт к ошибкам оптимизации.
- Отсутствие структуры. h2 должен располагаться в начале страницы. Другие заголовки до этого тега присутствовать не должны.
- Не заполнение h2. Кто-то опускает момент заполнения h2 вообще. Это грубая ошибка, которую нельзя допускать.
Примеры: Хороший h2 vs Плохой h2
Давайте рассмотрим на паре живых примеров заголовок первого уровня h2
Пример #1
- Хороший заголовок. Заголовок находится в начале страницы, не дублируется, его размер 59 символов. h2 отражает суть всей статьи, содержит высокочастотное ключевое слово в начале, вызывает интерес у читателя.
- Плохой заголовок. Размер h2 явно превышает 60 символов, заголовок переоптимизирован, он не отражает смысловую суть документа целиком. Заголовок представляет из себя перечисление частей статьи, в нем содержится слишком большое количество ключевых слов.
Пример #2
- Хороший заголовок. Лаконичный заголовок первого уровня, находится в начале страницы, характеризует категорию товаров с половой сегментацией, является ключевым словом. У h2 отсутствуют посторонние элементы в коде, грамматические ошибки, он не дублируется.
- Плохой заголовок. Заголовок данного сайта расположен в шапке. Это значит, что h2 «КУПАЛЬНИКИ» дублируется абсолютно на всех страницах сайта, не отражает семантику страницы. По слову «купальники» невозможно понять, что находится на странице: интернет-магазин, блог о купальниках, размерные сетки купальников или что-то еще. В категориях появляется 2 заголовка h2. Также заголовок состоит из одного слова, и не характеризует половую сегментацию товара.
Как вставить тег h2 в популярных CMS?
В каждой системе управления сайтом есть встроенный функционал, формирующий h2 для категории, страницы или раздела. Давайте рассмотрим, как вставить заголовок первого уровня в самых популярных системах управления сайтами.
WordPress
В WordPress заголовок первого уровня формируется из текстового поля над постоянной ссылкой записи или страницы. Любую CMS можно кастомизировать на свой вкус. В случае отключения основного заголовка, есть возможность вывода h2 с помощью визуального редактора — выпадающий список со словом «Абзац».
Bitrix
В панели управления заголовок h2 по-умолчанию формируется во вкладке «Раздел» или «Элемент» в поле «Название». Либо во вкладке SEO в поле «Заголовок раздела», предварительно установив галочку «Изменить для этого раздела и его подразделов».
Joomla
В Joomla аналогично другим системам заголовок h2 формируется очень просто. Текстовое поле Title, либо выпадающий список «Paragraph».
Помимо стандартных средств в каждой CMS можно добавить заголовок первого уровня с помощью визуального редактора, либо перейдя в режим исходного кода. В режиме исходного кода вы руками можете прописать h2 согласно его синтаксису.
Если вы нашли неточности, либо у вас есть замечания к статье, пожалуйста, пишите в комментарии.
Поделитесь статьей в социальных сетях:как правильно использовать на сайте
Заголовки h2 — h6 — это элементы разметки HTML, которые определяют уровень важности заголовков на странице.
Соответственно, заголовок h2 является наиболее важным, а заголовок h6 — наименее. Благодаря этим тегам составляется правильная иерархия структуры страницы.
Для чего нужны
Заголовки вкратце выражают основную мысль, которая более подробно раскрывается в тексте. Прочитав заголовок, посетитель сайта принимает решение: остаться на странице и продолжить читать документ или же покинуть сайт.
То есть, основное предназначение заголовков — привлечение внимания пользователя.
Но нельзя забывать и о том, что благодаря заголовкам, вебмастер создает грамотную иерархию, структуру контента на странице, удобство для потребления контента, что напрямую влияет на SEO-оптимизацию ресурса.
Анализируя заголовки, поисковые роботы оценивают общую релевантность и актуальность информации, представленной на странице, для пользователя.
Заголовки в статье
Визуально, заголовки в теле документа выглядят следующим образом:
Видно, что каждый заголовок, в зависимости от его значимости, отличается размером шрифта. Таким образом, читателю становится понятной вся структура статьи, и материал более доступно и легко усваивается.
Заголовки в коде
Просматривая документ в формате HTML, такого явного визуального различия между заголовками нет. Выглядит разметка так:
Более наглядный пример в коде:
Тут все понятно и логично: каждый заголовок задается соответствующим HTML-тегом своего уровня.
Иерархия заголовков
Оформляя страницу сайта, нужно обязательно использовать заголовки. Но делать это нужно логично и обдуманно. Существует строгий порядок расположения тегов h2-h6 в теле документа.
Каждая страница начинается с заголовка h2. Он всегда идет первым и единственным, более не повторяясь в структуре статьи.
Например, на нашем сайте он выглядит вот так:
Вторым по значимости является заголовок h3, который может встречаться несколько раз, в зависимости от объема и смысловой нагрузки контента.
Очень часто, этого заголовка h3 достаточно для грамотного и правильного оформления страницы. Но бывает и так, что приходится использовать следующий заголовок: h4.
Заголовок h4 используется внутри текста, обозначенного заголовком h3, разделяя контент на дополнительные смысловые разделы.
Важно! не рекомендуется использовать заголовок низшего уровня, если вы не использовали в статье заголовок высшего уровня. То есть нельзя использовать заголовок h5, если в вашей статье нет заголовка h4.
Как правило, заголовок h5 является крайним в иерархии статьи и используется редко. То есть, можно сказать, что заголовки h5 и h6 не используются вовсе. Но это не значит, что их нельзя использовать. Если есть необходимость, то стоит вспомнить и про них.
Главное — нужно заботиться об удобстве восприятия материала пользователем.
Для примера приведу правильную иерархию статьи:
Почему h2 самый главный
Заголовок h2 — это общий заголовок всего документа, поэтому он может использоваться только один раз.
Он является главным, так
что это за заголовок, как прописать на сайте и для чего предназначен в SEO и его длина в 2020?
Приветствую! Пришло время рассказать ещё об одном важном мета-теге – заголовке h2. HTML тег h2 входит в тройку самых важных метатегов в SEO.
Ранее мы уже обсудили как правильно прописывать Тайтл и Дескрипшн и вот теперь пришло время поговорить о теге-заголовке.
Содержание статьи:
Что это за тег такой?
h2 – это собственно сам Заголовок. В отличие от Title заголовок h2 не должен содержать вхождения наибольшего количества ключевых слов, да и вообще он может быть более «желтушным», т.к. задача данного тега – привлечение внимания ВНУТРИ сайта.
Таким образом, отметим несколько основных критериев, как правильно прописывать
Выглядит Заголовок 1 вот так:
Длина h2 в 2020 году
Также в отличие от метатега Тайтл – h2 гораздо короче, его длина, желательно, не должна превышать 50 символов.
В эту длину необходимо поместить второе по важности высокочастотное ключевое слово, т.к. первое должно пойти в Title.
Ключевой запрос можно склонять, слегка разбавлять предлогами и обязательно доводить до читабельного вида.
Инфографика
Слова словами, а вот инфографика ещё никому не навредила 🙂
В высоком разрешении инфографику по заголовку h2 можно скачать тут.
Заголовок Н1 для интернет-магазинов
Как и в случае с другими мета-тегами, мы также по-разному подходим к написанию нашего заголовка № 1 в SEO.
Для коммерческих сайтов и информационных проектов заполняем h2 по-разному.
Главная
Заголовок h2 для глав
Тег | HTML справочник
HTML тегиЗначение и применение
HTML заголовки определяются тегами от <h2> до <h6>:
<h2> определяет наиболее важные заголовки, а <h6> определяет наименее важные заголовки (<h2> заголовки должны быть основными заголовками, затем следуют заголовки <h3> и так далее). Браузеры автоматически добавляют пустое пространство до и после каждого заголовка.
Поисковые системы используют ваши заголовки для индексации структуры и содержания веб-страниц. Поэтому важно использовать заголовки, чтобы показать структуру документа.
Настоятельно рекомендуется использовать только один заголовок первого уровня на одной странице.
Поддержка браузерами
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | left right center justify | Не поддерживается в HTML5. Определяет выравнивание текста в заголовке. Используйте CSS свойство text-align вместо данного атрибута. |
Пример использования
В данном примере рассматривается применение заголовков от первого до шестого уровня.
<!DOCTYPE html> <html> <head> <title>Использование заголовков в HTML</title> </head> <body> <h2>Здесь содержится заголовок первого уровня</h2> <h3>Здесь содержится заголовок второго уровня</h3> <h4>Здесь содержится заголовок третьего уровня</h4> <h5>Здесь содержится заголовок четвертого уровня</h5> <h5>Здесь содержится заголовок пятого уровня</h5> <h6>Здесь содержится заголовок шестого уровня</h6> </body> </html>
Результат нашего примера:
Пример использования заголовков от <h2> до <h6> в HTML.Отличия HTML 4.01 от HTML 5
Атрибут align не поддерживается в HTML5.Значение CSS по умолчанию
h2 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML тегиИспользование и оптимизация мета тега h2: примеры использования ключа в теге h2
Тематический трафик – альтернативный подход в продвижении бизнеса
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
В виду последних событий в мире SEO, текстовые факторы стали иметь значительный вес в ранжировании. И если еще пару лет назад можно было махнуть рукой на оформление текста, то сейчас вы за это поплатитесь.
Итак, начнем с азов — текстовых тегов.
Мета тег h2: пример оформления и основная информация
HTML предлагает 6 разноуровневых заголовков, которые обозначают то, насколько важен текстовый блок, идущий после заголовка.
Таким образом, тег <h2> является самым важным заголовком первого уровня, а тег <h6> обозначает заголовки шестого уровня, наименее значительные. По умолчанию, тег заголовка h2 отображается самым крупным шрифтом и выделяется «жирненьким», заголовки, которые ниже рангом, соответственно, должны быть меньше.
Теги заголовков относят к блочным элементам: тег <h2> всегда начинается с новой строки, а уже за ним на следующей строке идут другие элементы. Более того, чтобы ваш текст эстетично выглядел, перед и после заголовков рекомендую делать отступ.
Как вставить тег заголовка h2 в текст на сайте?
<h2>Заголовок первого уровня</h2>
Использование ключа в теге: оптимизация тега h2
Мета теги h2-h6 обязательно следует использовать по назначению, неукоснительно соблюдая иерархию.
Дело в том, что поисковые роботы очень трепетно относятся к заголовкам и тому, что в них содержится. Важность и степень внимания поисковика определяются уровнем заголовка (понижается от h2 до h6). Поэтому мы настоятельно рекомендуем использовать ключ в теге h2 и фразы в тексте заголовков.
Тег заголовка <h2> (заголовок первого уровня) имеет самый большой вес, конечно же. Поэтому к его текстовому содержанию нужно отнестись с особой серьезностью.
- Вставить тег <h2> можно только вверху страницы сайта, над заголовками других уровней. Также во многих админках есть специальное поле для заголовка h2.
- Следует избегать хаотичного использования заголовков разных уровней и размещать их «как повезет». Поисковику (да, и пользователям) это вряд ли понравится.
- Ни в коем случае не используйте мета тег <h2> более одного раза на странице.
- По-умолчанию в различных браузерах заголовки выглядят по-разному: отличаются размерами шрифта и отступами. Посему советуем вам отрегулировать эти параметры при помощи стилей. НО! Не перебодритесь с уменьшением шрифта, т.к. поисковые роботы обращают на это внимание. Также не рекомендуем делать размер шрифта заголовка меньше, чем основной текст.
- Делать больший размер шрифта заголовка низкого уровня также не советуем. Если ваш <h5> будет больше, чем <h3>, то поисковой робот отнесется к этому негативно.
- И пожалуйста, перестаньте использовать теги выделения (strong, em, b, i) в оформлении ваших заголовков. Cодержание тегов заголовков имеет большее влияние на релевантность страницы по сравнению тегами выделения.
По мнению большинства сеошников (и мы к ним присоединяемся) содержание текста внутри тегов strong (жирненький текст) по степени значимости приблизительно соответствует содержанию заголовка уровня h5. А это так себе уровень.
- Использование ключа в теге h2 обязательно! Лучше всего, если это будет основная ключевая фраза (ключевики, которые входят вовсе другие ключевики в семантике на данную страницу).
- Текстовое содержание заголовка должно отличаться от тега title.
Как проверить тег h2 на странице
Чтобы проверить сколько у вас там получилось главных заголовков и исправить ситуацию, в которой их окажется больше одного, достаточно просто открыть код страницы.
Проверить количество тегов h2 можно как с помощью браузера, так и в админке. При этом никаких дополнительных расширений не требуется.
Ctrl + Shift + C или F12
Горячие клавиши, которые помогут вам открыть код страницы.
Можно ли не использовать тег h2 и другие подзаголовки?
Этот вопрос я несколько раз встречала в сети и хочу дать на него развернутый ответ. А поможет мне в этом крутой SEO специалист нашей студии Олег Васильев.
В сфере поисковой оптимизации очень сложно дать однозначные ответы на вопросы. Это далеко не связано с компетентностью специалиста, хотя доля правды в этом есть. Каждый вопрос, предположительно, должен преследовать достижение какой-либо цели. Исходя из этого ответы на вопросы уже могут разниться, и вы можете получить совсем другой результат.
Глобальная цель поисковых систем, таких как Google, Yandex, довольно проста — необходимо предоставить пользователю максимально полезную информацию относительно введенного запроса. Поисковики достигают ее, исследуя сайт по ряду факторов. Чтобы ваш сайт показали пользователю вы должны максимально соответствовать этим факторам, чтобы поисковая машина решила, что достигла своей глобальной цели.
Одним из критериев успешного ранжирования является соответствующая запросам пользователя, актуальная и правильно структурированная информация.
Что касается структуры, то именно она помогает пользователю быстро находить искомую информацию. Для этих целей информацию нужно разделять на небольшие абзацы, использовать списки (там, где это нужно), заголовки и подзаголовки.
Заголовок h2 помогает пользователю понять общий смысл содержания страницы. Как правило, текст на странице имеет вполне конкретную смысловую единицу, она одна, поэтому и главный заголовок должен быть один. Далее контент, если структура предполагает, можно разбить на небольшие смысловые блоки, и каждый блок будет иметь свой подзаголовок. Очень важно соблюдать вложенность, то есть после после h2 необходимо использовать h3, а после h3 используется h4. Все вполне логично.
Заголовки и подзаголовки должны нести смысловую нагрузку и не использоваться для других целей.
А теперь вернемся к вопросу:
Можно ли не использовать тег h2 и другие подзаголовки?
Ответ очевиден: Можно, если вам не особо важно продвижение вашего сайта в сети.
| Справочник HTML
Элементы <h2> ‒ <h6> (от англ. «header» ‒ «заголовок») создают заголовки разного уровня в документе. <h2> ‒ высший уровень (наивысшая важность), <h6> ‒ низший уровень (наименьшая важность). Заголовки обычно используются в порядке, соответствующем их уровню.
По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше, а текст заголовка <h5> имеет тот же размер, что и стандартный текст. Элементы <h2> ‒ <h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство (margin).
Совет: Поисковые системы используют ваши заголовки для индексации структуры и содержания веб-страниц. Поэтому важно использовать заголовки, чтобы показать структуру документа.
Примечание: Заголовок <h2> должен использоваться только один раз на странице.
Правила составления главного заголовка <h2>:
- В заголовке <h2> должны использоваться ключевые слова, применяемые для продвижения html-страницы.
- Не стоит делать заголовок <h2> слишком объёмным, содержание заголовка должно быть уникальным, ёмким и тематичным.
- Заголовок <h2> не должен содержать ничего кроме самого текста.
- Содержание <h2> должно соответствовать тематике, указанной в теге <title> веб-страницы.
- Не стоит делать заголовок <h2> полной копией тега <title>.
- Не перечисляйте в заголовке ключевые фразы через запятую. Содержание <h2> должно быть понятно как поисковикам, так и посетителям сайта.
Синтаксис
<h2>Заголовок первого уровня</h2>Закрывающий тег
Обязателен.
Атрибуты
- alignУстарел в HTML5
- Определяет горизонтальное выравнивание содержимого элемента.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <h2> со следующими значениями CSS по умолчанию:
h2 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}Различия между HTML 4.01 и HTML5
В HTML5 атрибут align не поддерживается. Используйте стили CSS.
Пример использования:
Элементы <h2> ‒ <h6>
Шесть разных HTML заголовков:
Пример HTML:
Попробуй сам<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>
<h5>Заголовок четвертого уровня</h5>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
Спецификации
Поддержка браузерами
| Элемент | ||||||
| <h2> | 2+ | 1+ | 2+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <h2> | 1+ | 1+ | 6+ | 1+ |
Похожие страницы
HTML уроки: HTML Элементы
HTML уроки: HTML Базовые теги