Исчерпывающие правила создания заголовка (тега) 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
o-es.ru
как правильно использовать на сайте
Заголовки h2 — h6 — это элементы разметки HTML, которые определяют уровень важности заголовков на странице.
Соответственно, заголовок h2 является наиболее важным, а заголовок h6 — наименее. Благодаря этим тегам составляется правильная иерархия структуры страницы.
Для чего нужны
Заголовки вкратце выражают основную мысль, которая более подробно раскрывается в тексте. Прочитав заголовок, посетитель сайта принимает решение: остаться на странице и продолжить читать документ или же покинуть сайт.
То есть, основное предназначение заголовков — привлечение внимания пользователя.
Но нельзя забывать и о том, что благодаря заголовкам, вебмастер создает грамотную иерархию, структуру контента на странице, удобство для потребления контента, что напрямую влияет на SEO-оптимизацию ресурса.
Анализируя заголовки, поисковые роботы оценивают общую релевантность и актуальность информации, представленной на странице, для пользователя.
Заголовки в статье
Визуально, заголовки в теле документа выглядят следующим образом:
Видно, что каждый заголовок, в зависимости от его значимости, отличается размером шрифта. Таким образом, читателю становится понятной вся структура статьи, и материал более доступно и легко усваивается.
Заголовки в коде
Просматривая документ в формате HTML, такого явного визуального различия между заголовками нет. Выглядит разметка так:
Более наглядный пример в коде:
Тут все понятно и логично: каждый заголовок задается соответствующим HTML-тегом своего уровня.
Иерархия заголовков
Оформляя страницу сайта, нужно обязательно использовать заголовки. Но делать это нужно логично и обдуманно. Существует строгий порядок расположения тегов h2-h6 в теле документа.
Каждая страница начинается с заголовка h2. Он всегда идет первым и единственным, более не повторяясь в структуре статьи.
Например, на нашем сайте он выглядит вот так:
Вторым по значимости является заголовок h3, который может встречаться несколько раз, в зависимости от объема и смысловой нагрузки контента.
Очень часто, этого заголовка h3 достаточно для грамотного и правильного оформления страницы. Но бывает и так, что приходится использовать следующий заголовок: h4.
Заголовок h4 используется внутри текста, обозначенного заголовком h3, разделяя контент на дополнительные смысловые разделы.
Важно! не рекомендуется использовать заголовок низшего уровня, если вы не использовали в статье заголовок высшего уровня. То есть нельзя использовать заголовок h5, если в вашей статье нет заголовка h4.
Как правило, заголовок h5 является крайним в иерархии статьи и используется редко. То есть, можно сказать, что заголовки h5 и h6 не используются вовсе. Но это не значит, что их нельзя использовать. Если есть необходимость, то стоит вспомнить и про них.
Главное — нужно заботиться об удобстве восприятия материала пользователем.
Для примера приведу правильную иерархию статьи:
Почему h2 самый главный
Заголовок h2 — это общий заголовок всего документа, поэтому он может использоваться только один раз.
Он является главным, так как именно по нему пользователь судит о содержании статьи и принимает решение, читать ее или нет.
Для того, чтобы составить хороший заголовок h2, который будет передавать суть документа, нужно понимать, чем h2 отличается от title и знать основные требования к его составлению.
Почему h2 должен различаться с Title
Title также является основным заголовком документа, но указывается он не только для посетителей сайта, но и для поисковых робото
webmasterie.ru
что это за заголовок, как прописать на сайте и для чего предназначен в SEO и его длина в 2020?
Приветствую! Пришло время рассказать ещё об одном важном мета-теге – заголовке h2. HTML тег h2 входит в тройку самых важных метатегов в SEO.
Ранее мы уже обсудили как правильно прописывать Тайтл и Дескрипшн и вот теперь пришло время поговорить о теге-заголовке.
Содержание статьи:
Что это за тег такой?
h2 – это собственно сам Заголовок. В отличие от Title заголовок h2 не должен содержать вхождения наибольшего количества ключевых слов, да и вообще он может быть более «желтушным», т.к. задача данного тега – привлечение внимания ВНУТРИ сайта.
Таким образом, отметим несколько основных критериев, как правильно прописывать
Выглядит Заголовок 1 вот так:
Длина h2 в 2020 году
Также в отличие от метатега Тайтл – h2 гораздо короче, его длина, желательно, не должна превышать 50 символов.
В эту длину необходимо поместить второе по важности высокочастотное ключевое слово, т.к. первое должно пойти в Title.
Ключевой запрос можно склонять, слегка разбавлять предлогами и обязательно доводить до читабельного вида.
Инфографика
Слова словами, а вот инфографика ещё никому не навредила 🙂
В высоком разрешении инфографику по заголовку h2 можно скачать тут.
Заголовок Н1 для интернет-магазинов
Как и в случае с другими мета-тегами, мы также по-разному подходим к написанию нашего заголовка № 1 в SEO.
Для коммерческих сайтов и информационных проектов заполняем h2 по-разному.
Главная
Заголовок h2 для главной интернет-магазина или сайта услуг в отличие от Тайтла не должен содержать гео-привязку и коммерческие фразы. В теге должно содержаться основное ключевое слово (второе по частотности, первое мы помним уходит в Title), которые характеризует в общем чем занимается интернет-магазин и бренд.
Т.е. формула заголовка:
%Второе по значимости ключевое слово% %Бренд%
Пример правильного h2 для интернет-магазина платьев:
Лучшие платья на «Платья 24»
Посадочные
Для посадочных страниц в принципе всё тоже самое, только не используем бренд коммерческого сайта, а просто второе по значимости (или синоним) основного ключевого слова.
Пример для магазина платьев:
Вечернее платье на свадьбу
Тег Н1 для информационных сайтов
С инфосайтами ситуация несколько иная. Здесь нам желательно использовать вопросительные предложения. Также следует прописывать вторую по значимости/частотности ключевую фразу.
Рассмотрим h2 для Главной и для статьи.
Главная
Для главной страницы информационного проекта можно использовать общую фразу, которой описывается весь сайт.
Артём Высоков
Автор блога о SEO и заработке на сайтах — Vysokoff.ru. Продвигаю информационные и коммерческие сайты с 2013 года.
Задать вопрос
Загрузка …Пример для главной страницы ресурса о платьях:
Всё о платьях
Есть и другой вариант, поставить высокочастотную фразу, это при условии что вы двигаете главную страницу под какой-то запрос.
Статьи
Для статей берём желательно (но далеко необязательно) вопросительные фразы, вторые по частотности после той что вставили в Тайтл.
Т.е. если у нас для Title выбрана фраза:
Как выбрать вечернее платье на выпускной или свадьбу по типу фигуры?
То в h2 мы можем поставить:
Выбор вечернего платья на выпускной или свадьбу
Что делать если нет заголовка 1?
В некоторых шаблонах на WordPress, Joomla или других CMS, верстальщики могут накосячить и сделать основной заголовок не в h2, а в DIV или, что чаще встречается, в h3 или h4. Это довольно грубая ошибка, т.к. по мнению многих SEO-специалистов (в том числе и я придерживаюсь такого же) на странице обязательно должен присутствовать тег h2.
Несмотря на это, есть заявления от Google, а точнее от Джона Мюллера, где он сообщает, что заголовки Н1 никак не влияют на ранжирование. Ниже видео на английском:
Но я всё равно придерживаюсь того, что на странице необходим html-тег заголовка h2.
Причиной недоверия является тот факт, что гуглойды очень часто в своих ответах на вопросы вебмастеров заявляют довольно странные вещи, и порой кажется, что они специально вводят в заблуждение сеошников.
Так, например, тот же Мюллер многократно сообщал, что в алгоритме ранжирования не участвуют поведенческие факторы, хотя есть патент от Google, который говорит об обратном.
Сотрудники Гугл заявляли, что плохие ссылки не могут навредить сайту или что алгоритм понимает, где первоисточник и что если у вас украдут статью можно не переживать, что на чужом сайте она будет ранжироваться лучше, хотя мы видим такое повсеместно. Причём эти заявления зачастую противоречат друг другу, сегодня говорят одно, а через месяц другое.
В общем, друзья, рекомендую всё же придерживаться мнения, что тег h2 на странице нужен. Давайте делать всё максимально правильно, ведь алгоритмы поисковых систем состоят из множества факторов и наша задача выполнить максимальное количество факторов на 5+.
Сколько раз на странице можно использовать?
Ещё один нюанс касающийся наличия Заголовка 1 на странице, а именно сколько заголовков h2 может быть на странице? И что делать, если на странице присутствует больше одного тега Н1?
Опять же я рекомендую такую формулу: 1 страница = 1 заголовок h2.
Если их несколько и они располагаются в навигационных элементах сайта, то нужно обратиться к верстальщику, чтобы он убрал лишние. Если же косяк в оформлении статьи, то вы сами можете заменить на необходимо заполнить в том или ином случае. В Вордпрессе делается это так:
h2 и Title
И ещё один важный момент. Я категорически против дублирования двух важных метатегов Тайтла и Заголовка Н1.
У поисковых систем нет конкретных запретов на такие дубли, но с точки зрения SEO, когда мы повторяем один и тот же ключ в двух мета-тегах, мы сильно не добиваем оптимизацию и общую релевантность продвигаемой страницы.
У нас есть шанс поставить в один важный тег ВЧ-запрос и в другой важный тег второй по значимости ВЧ-запрос, а вместо этого мы используем только один запрос, т.е. намеренно теряем возможность лучше ранжироваться сразу по двум ВЧ-запросам и куче SEO-хвостов, которые окружают эти фразы.
Я думаю, тут очевидно, что теги h2 и Title должны быть разными!
Резюме
Этой статьёй я хочу завершить цикл из трёх постов про основные метатеги в SEO, надеюсь я доходчиво рассказал, как их правильно использовать и грамотно формировать, чтобы ранжироваться в поисковых системах как можно выше.
Ну а если у вас остались вопросы, то велкоме в комменты! 😉
vysokoff.ru
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 согласно его синтаксису.
Если вы нашли неточности, либо у вас есть замечания к статье, пожалуйста, пишите в комментарии.
Поделитесь статьей в социальных сетях:naked-seo.ru
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h2> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h2>,…,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Синтаксис
<h2>Заголовок первого уровня</h2>Атрибуты
- align
- Определяет выравнивание заголовка.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег h2 и h3</title>
</head>
<body>
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem
nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.</p>
<h3>Ut wisis enim ad minim veniam</h3>
<p>Ut wisis enim ad minim veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид заголовков первого и второго уровня в браузере
Примечание
Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h2>…<h6>. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.
htmlbook.ru
Расставляем теги h2-h3 правильно — повышаем конверсию сайта
Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h2, h3…h6. Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.
Теги h2—h6 позволяют выделить заголовки различных уровней. Они дают понять, какие части текста более точно отражают тему статьи и обеспечивают преимущества в ранжировании.
Грамотная расстановка тегов позволяет поисковым системам более точно отображать станицу по запросам в выдаче, что благоприятно сказывается на позиции ресурса:
В теги заключается название сайта, заголовки и подзаголовки текста:
В HTML теги заголовков обозначаются h от английского «header», что в переводе означает «заголовок, шапка». Вот пример того, как это выглядит:
<h2> Заголовок</h2>
Расстановка тегов заголовков должна производиться на каждой странице ресурса. При этом важность заголовка будет зависть от его цифры, чем она меньше, тем заголовок важнее:
<h2></h2> - наиболее важные теги <h3></h3> - менее значимые теги ... <h6></h6> - последние по важности теги
Однако относиться к их расстановке следует с осторожностью. Неправильное использование может привести к тому, что ваш ресурс попадет под санкции поисковых систем.
<h2>Название текста</h2> <h3>Подзаголовок 1</h3> ... <h3>Подзаголовок 2</h3> <h4>Подзаголовок 3.1</h4> ... <h4>Подзаголовок 3_2</h4> <h3>Подзаголовок 3</h3>
Наибольшей популярностью пользуются теги h2 h3 h4.
Игнорируя тег h2, веб-мастера, лишают себя такого важного преимущества, как оптимизация контента. На движках он часто прописывается автоматически, однако не всегда, и данный факт следует учитывать.
HTML тег h2 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом <title> (заголовком страницы). Title отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title прописывается в шапке страницы между <head></head>, в то время, когда h2—h6 указываются в самом «теле» страницы и заключаются в теги <body></body>.
На странице может присутствовать только один h2 тег. Если указать несколько заголовков с тегом h2, поисковики могут расценить это как переспам, что в свою очередь грозит баном:
Правила составления главного заголовка h2:
- В теге должны использоваться ключевые слова, применяемые для продвижения страницы;
- Не стоит делать заголовок h2 слишком объемным, вполне достаточно нескольких слов;
- Текст заголовка должен быть читабельным;
- Мета тег h2 не должен содержать ничего кроме самого текста. Если желаете его выделить, поставьте коды за пределами тега;
- Перед тем, как вручную прописывать h2, убедитесь, что движок не задает его автоматически;
- Содержание h2 должно соответствовать тематике, указанной в title страницы;
- При составлении h2 обязательно используйте ключевую фразу, по которой продвигается страница;
- Содержание заголовка должно быть уникальным, емким и тематичным. Не стоит делать h2 полной копией тега Title. Важно, чтобы на каждой странице ресурса были прописаны уникальные h2—h6, поэтому избегайте повторений;
- Нельзя перечислять в заголовке ключевые фразы через запятую. Содержание h2 должно быть понятно не только поисковикам, но и посетителям ресурса.
Кроме h2 для расстановки заголовков, которые идентифицируются поисковыми системами, используются теги h3, h4, h5, h5, h6 и т.д.
Как правило, используется для заголовков постов в ленте, размещенной на главной странице или для подзаголовков в статье.
Зачастую с их помощью выделяют названия подзаголовков, рубрик и виджетов в sidebar.
Предназначены для еще более мелких элементов страниц, которые следует отделить от остального текста.
Расстановка заголовков h2— h6 в разных версиях движков может быть реализована по-разному.
Правила расстановки h3—h6:
- Структура заголовков. Должна быть соблюдена иерархия заголовков;
- Размер шрифта. Чем ниже уровень заголовка, тем мельче шрифт. Редактирование шрифтов производится в стилях. Но, как правило, шрифты имеют правильные размеры по умолчанию;
- Не допускается применение тегов заголовков вместе с другими тегами акцентирования. В заголовках рекомендуется использовать ключевые слова, по которым данная станица будет продвигаться в поиске;
- В отличие от h2, теги h3—h6 могут быть прописаны на странице несколько раз.
<body>
<h2>Я главный в иерархии заголовков</h2>
<h3>Мои дети</h3>
<h4>Мои внуки</h4>
<h4>Мои внуки</h4>
<h4>Мои внуки</h4>
<h3>Мои дети</h3>
<h4>Мои внуки</h4>
<h4>Мои внуки</h4>
<h4>Мои внуки</h4>
<h5>Мои правнуки</h5>
<h5>Мои правнуки</h5>
<h5>Мои правнуки</h5>
</body>- Не должно быть никакого спама;
- Составление текста h2— h6 должно производиться с использованием синонимов и учетом правил морфологии;
- Основные ключевые запросы лучше разместить ближе к началу заголовка;
- Ключевые фразы, прописанные в заголовках, должны встречаться в тексте страницы;
- Теги h2— h6 должны быть краткими, емкими и информативными:
- В некоторых CMS расстановка тегов производится автоматически и зачастую с нарушением правил внутренней оптимизации. К примеру, с помощью h4 выделаются заголовки блоков и иных элементов сайта, а это не правильно. Для этих целей существуют другие теги HTML;
- В корне ошибочным будет заключение в теги h ссылок, изображений, логотипов и т.д.;
- Частой ошибкой является незакрытый заголовок. Это может сбить с толку поисковики и такие страницы рискуют быть пониженными в выдаче;
- Нередки явления, когда в тегах либо вовсе отсутствуют текст (пустые теги), либо вместо адекватного текста присутствуют несвязанные слова;
- Выявление и исправление подобных ошибок позволит повысить вес страниц и улучшить ранжирование сайта в целом.
Заголовок, имеющий краткое и лаконичное описание, имеет больше шансов привлечь внимание поисковиков. При заполнении заголовка h2 важно не только точно ввести ключевое слово, приписав его ближе к началу заголовка, но и не сделать сам заголовок не слишком длинным. Лучше всего, если длина тега h2 не будет превышать 60 символов, так как остальную часть поисковые роботы просто не анализируют.
Соблюдая эти нехитрые правила, вы сможете улучшить показатели CTR, достичь поставленных маркетинговых целей и улучшить конверсию ресурса.
www.internet-technologies.ru
Как правильно использовать элементы HTML h2-H6
Теги h2 h3 обозначают заголовки разделов. Хотя порядок и размещение заголовков в HTML DTD не ограничивается, в документе не должны пропускаться уровни (например, от h2 сразу к h4), так как преобразование таких документов в другие представления часто проблематично. W3C
Но для структурирования страниц не обязательно использовать все шесть HTML элементов.
Например:
<h2>Основы разработки сайтов<h2> <p>Какой-либо текст</p> <h3>HTML</h3> <p>Какой-либо текст</p> <h3>CSS</h3> <p>Какой-либо текст</p>
Я всегда использую на странице только один элемент h2. Google раньше рекомендовал делать именно так.
Многие утверждают, что в некоторых случаях имеет смысл размещать на странице более одного h2 тега (и HTML5, безусловно, позволяет это сделать).
Это полностью зависит от сайта, который вы создаете, и его аудитории. Важно сохранять последовательность на всех страницах сайта, чтобы максимизировать удобство и простоту их использования. При использовании нескольких h2 я не стал бы нашпиговывать их ключевыми словами.
Я обычно стараюсь задействовать иерархию не ниже уровня h4, так как каждая страница представляет собой краткое изложение одной темы.
Например, здесь, здесь я живу:
<h2>Земля</h2> <h3>Европа</h3> <h4>Великобритания</h4> <h5>Шотландия</h5> <h5>Ренфрушир</h5> <h6>Гринок</h6>
Или наоборот.
Вы можете использовать любое количество тегов h2-h6 на любой странице, но это может быть слишком громоздкой конструкцией для среднестатистического веб-дизайнера.
Вы видите, что существует несколько способов задать эти элементы. Мы рекомендуем, чтобы одна страница была по возможности посвящена одной теме, а также:
- Чтобы на странице содержался один элемент h2;
- Страница может содержать столько элементов h3, сколько необходимо для обозначения разделов на странице;
- Рассмотрите возможность использования элементов h4 для групп полезных ссылок на другие релевантные источники. Но недавние рекомендации (2013 год) гласят, что лучше применять заголовки для текста, а не для группы навигации.
С помощью исследований было установлено, что Google добавляет некоторый вес элементам h2 (хотя другие исследования утверждают обратное). Джон Мюллер из Google действительно заявлял, что их использование дает «небольшое повышение».
Хотя теоретически считается, что это дает «небольшое повышение», я не уверен, что заголовки h2-H6 улучшают SEO заметным образом (в Google). Я бы не помещал ключевую фразу, по которой продвигаю страницу, в каждый элемент заголовка.
HTML тег h2— это элемент заголовка первого уровня в веб-документе:
Если документ является автономным, например, «Все, что вы хотите знать о SEO«, заголовок верхнего уровня должен быть таким же, как тайтл. Если он является частью серии, например, вводный раздел по «SEO когда-то и сейчас» набора материалов о «поисковой оптимизации«, то заголовок верхнего уровня должен содержать определенное количество дополнительного контекста:
<h2>SEO когда-то и сейчас</h2>
В то время как тайтл должен содержать определенный контекст:
<title>Все, что вы хотите знать о SEO</title>
Часто на практике элемент тайтл повторяется как h2 страницы.
В отличие от тайтла, этот элемент может включать в себя ссылки, использовать другой шрифт и другие элементы HTML.
Рассмотрите возможность использования CSS, которые разработаны, чтобы задавать размеры шрифтов соответствующих элементов, таких как h2, и т.д.
Я провел простой тест, чтобы узнать, будет ли Google рассматривать любой тег H в качестве заголовка страницы, если по какой-то причине ему не нравится элемент тайтл.
Результат был таков: если элемент тайтл выглядит неподходящим, Google может использовать любой доступный заголовок (теги h2 h3 h4) или h6, в качестве тайтла страницы.
Приведенный ниже пример показывает, что Google использовал Н6 в качестве тайтла страницы (в 2012 году):
Этот результат сегодня выглядит так:
Я не могу найти в интернете никаких веских доказательств того, что вы должны использовать заголовки (теги h2 h6) или что они улучшают ранжирование в Google. Я видел страницы, хорошо ранжируемые в Google и без них. Но я использую их на странице, особенно тег h2, потому что пытаюсь создавать сайты и для поисковых систем, и для людей:
<h2>The Hobo SEO Company, Scotland</h2>
Я до сих пор в основном использую только один тег заголовка <h2> на своих продвигаемых по ключевым словам страницах. Считаю, что это способ соответствует W3C. Я располагаю его в верхней части страницы выше размеченного тега <р>. Он включает в себя ключевые слова для этой страницы.
Я использую столько тегов, сколько необходимо в зависимости от размера страницы, но я использую только h2, h3 и h4.
Я стараюсь, чтобы длина тега h2 была максимально короткой. Аарон Уолл из SEOBook рекомендует не делать теги h2 такими же, как тайтлы страниц. Я всегда считал, что это не такая уж большая проблема, с точки зрения правильной оптимизации страницы. Но он приводит четкую причину:
Использование большего количества различных вариаций релевантных ключевых слов = больше трафика.
В 2016 году он дал дополнительные ценные советы:
Каждое дублирование в вашем страничном SEO — это в лучшем случае просто упущенные возможности. Хуже, если вы агрессивно совмещаете тайтлы страниц, заголовки страниц, и тексты анкоров внутренних и внешних ссылок. Так увеличиваются шансы, что страница попадет под фильтр и выпадет из результатов поиска.
Обеспечьте, чтобы ваши теги заголовков были релевантны контенту страницы и не были слишком спамными. В первую очередь сконцентрируйтесь на создании привлекательных текстов страниц.
Данная публикация представляет собой перевод статьи «How To Use h2-H6 HTML Elements Properly» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru