Теги заголовка: что это такое и как их использовать

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

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

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

Вот краткое руководство по тегам заголовков и тому, для чего они используются:

• H1 - Заголовок сообщения. Обычно они ориентированы на ключевые слова, сосредоточены на «большой идее» страницы или публикации и созданы, чтобы привлечь внимание читателя.
• H2 - Это подзаголовки, которые классифицируют основные моменты ваших абзацев и отдельных разделов. Подумайте об использовании семантических ключевых слов, связанных с «большой идеей» в вашем H1, а также помогите читателю легко найти разделы, которые они хотят прочитать.
• H3 - Это подразделы, в которых разъясняются вопросы, затронутые в H2. Кроме того, их можно использовать в списках форматирования или в маркированных списках.
• H4 —Это подразделы, в которых более подробно разъясняются моменты, затронутые в H3. Кроме того, их можно использовать в списках форматирования или в маркированных списках.

Буква H в H1, H2 и т. Д. Официально означает «элемент заголовка», хотя SEO-сообщество также обычно называет эти теги «тегами заголовка».

Как вы можете догадаться из приведенного выше руководства, цифра указывает на иерархические отношения между каждым из них (причем H1 является наиболее важным, H2 - менее важным и т. Д.).

Вот пример того, как эта иерархическая структура может проявляться в структуре блога:

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

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

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

Для иллюстрации тег заголовка в приведенном ниже примере - это заголовок «Окончательное руководство по маркетингу продуктов в 2021 году".

Заголовок обозначается как H1 для страницы, использующей HTML-код. Этот код может проявляться в исходном коде веб-страницы следующим образом:

Увидеть перо H1 Пример 1 Кристина Перриконе (@hubspot) На CodePen.

Однако, как мы упоминали ранее, существуют и другие теги заголовков, которые также помогают в создании структуры страницы.

Сколько тегов заголовков поддерживает HTML?

HTML поддерживает до шести тегов заголовков (H1-H6), которые вы можете использовать для структурирования страницы по мере необходимости. Их можно визуально стилизовать в соответствии с вашим брендом, и, за исключением H1, вы можете иметь столько тегов на странице, сколько захотите. 

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

Ниже приведен снимок экрана сообщения в блоге HubSpot с примерами тегов заголовков, обозначенных стрелками:

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

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

Теги заголовков и SEO

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

Подумайте об этом: Google находит контент, чтобы обслуживать своих пользователей, сканирование веб-страниц. При этом он анализирует текст, изображения и другие элементы, которые он находит для понять, о чем эта страница.

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

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

Для иллюстрации предположим, что ваше ключевое слово - «электронная торговля». Вы бы хотели, чтобы это было отражено в вашем теге H1, поэтому название типа «Руководство по началу бизнеса в электронной коммерции» было бы идеальным. Это точно укажет Google, как отправлять веб-браузеры на ваш пост.

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

Вам также не нужно придумывать ключевые слова самостоятельно - на самом деле, вы можете легко Ключевое слово исследований чтобы помочь вам или изучить инструменты исследования ключевых слов, такие как SEMRush or Ahrefs. Просто убедитесь, что ваши теги заголовков удобны как для людей, так и для роботов поисковых систем.

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

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

Как добавить теги заголовка в HTML

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

Например, если ваш h1 был «Руководство по запуску электронной коммерции,”Это будет выглядеть так:

Увидеть перо H1 Пример 2 Кристина Перриконе (@hubspot) На CodePen.

Это будет работать для HTML4 и старше. Если вы работаете с HTML5, вам, возможно, придется использовать немного другую строку, чтобы получить тот же результат. Изменение состоит в том, чтобы предупредить Google о том, что такое H1:

Увидеть перо H1 Пример 3 Кристина Перриконе (@hubspot) На CodePen.

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

Увидеть перо H3 Пример 1 Кристина Перриконе (@hubspot) На CodePen.

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

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

В следующий раз, когда вы создадите сообщение для своего веб-сайта, посмотрите, влияет ли добавление соответствующих тегов заголовков на SEO и как ваши читатели воспринимают информацию.

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

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

Примечание редактора: этот пост был первоначально опубликован в январе 2020 года и был обновлен для полноты.

Источник: https://blog.hubspot.com/marketing/header-tags