Теги заголовков H1-H6: для чего они и как их использовать

H1-H6 - теги заголовков

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

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

Сегодняшняя статья из рубрики SEO/SMO. Будет чуть-чуть скучной теории 🙂

Пока же ситуация из жизни блогера, конкретно – меня. Недавно я наводил порядок в своем ноутбуке, в той части, где собраны материалы для этого блога: статьи, рисунки, заготовки, какие-то аналитические скрины и пр. У меня есть папка «Блог монет», в ней – папки с какими-то общими темами, например, «Seo», «Wordpress», «Движки», «Домены и хостинги» и т.п. В этих папках я уже создаю папки с отдельными статьями, где лежит сам текст и картинки к нему и вспомогательные файлы. Немного запутанно, но я привык.

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

Ладно, теперь собственно, сам пост. Как вы прочитали из названия, сегодня будем говорить о HTML тегах заголовков и подзаголовков H1-H6. Как обычно, тема появилась из темы другой статьи, которую я еще только собираюсь писать (она будет об оптимизации кода темы WordPress, как раз о замене тегов в названиях. Подписывайтесь на анонсы, чтобы не пропустить новый пост).

 

Чуть-чуть об HTML

Начнем с «ab ovo» («с яйца» по-латински), то есть с начала. (Не забыл еще латынь институтскую :))

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

(Лирическое отступление.) Я не программист, в теории как-то не очень. Прежде, чем что-то изменить в коде своей Вордпресс темы, тщательно изучаю вопрос, делаю копии файлов и тестирую, тестирую… Поэтому сильно углубляться в дебри не буду. Да и ни к чему глубокие знания программиста современному блогеру: достаточно заученных точечных изменений в коде. Но кое-что знать, все же, нужно. Например, то, что касается оптимизации блога.

Неотъемлемой частью внутренней оптимизации является правильное форматирование статей и самих веб-страниц. Один из инструментов форматирования страницы правильная расстановка тегов заголовков H1, H2, H3, H4, H5, H6.

 

Что такое теги заголовков H1-H6

В HTML существуют специальные теги заголовков H1-H6. Они и называются так «H» – от «header» (заголовок, шапка).

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

теги заголовков h1-h6

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

h1-h6 теги заголовков использование

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

 

Для чего нужны теги заголовков h1-h6?

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

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

Так в html:

Теги заголовков H1-H6 в html-редакторе

А так, смотрится в визуальном редакторе, только здесь без цвета и изменения шрифта:

H1-H6_теги заголовков

На самом деле, я не видел, чтобы блогеры использовали заголовки H4, H5, H6. Обычно большинство ограничивается тремя первыми. Ну, по крайней мере, я :). Хотя надо повнимательней посмотреть, может у меня в теме используются все? Да не, я помню, что в файле style.css прописаны только H1, H2 и H3.

 

Как обычно используются теги заголовков и подзаголовков H1-H6

Всем понятно, что цифра в названии тега означает его значимость. Поэтому

Тег H1

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

Title пишется в шапке страницы, между тегами <head></head>, а теги H1-H6 прописываются уже в самом теле страницы, между тегами <body></body>.

Тег заголовка H1 на странице должен быть один – заголовок же один. Конечно, вы можете прописать и несколько заголовков H1, вы же хозяин блога. Но поисковик – умная и бездушная скотинка, скорее всего расценит такие манипуляции с кодом как переспам и может вас наказать. Дескать, «чё самый умный штоле, путаешь меня? На тебе бан!»

С другой стороны, на одном из моих блогов, строительном, о котором я не раз уже говорил, стоит тема ModXBlog. В ней прописано по два тега H1 на странице: title и заголовок поста. Вот скрин кода:

Теги заголовков в коде страницы, h1-h6

Блогу уже 11 месяцев и никакого бана нет. Но и бешенного развития тоже нет. Я в любом случае переделаю код, чтобы оставался только один заголовок в H1. Мало ли, может, поисковики просто невнимательно блог шерстили.

Тег H2

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

Теги H3, H4

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

Теги H5, H6

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

На самом деле, в каждой теме wordpress расстановка тегов заголовков H1-H6 может быть реализована по-разному. Здесь уже все зависит от знаний, фантазии и чувства меры разработчиков.

 

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

Тем не менее, нужно как-то подытожить все, что я наговорил, все что прочитал, и все, что осталось в моей голове. Вот некоторые правила, писанные и неписанные, которые желательно соблюдать при использовании тегов заголовков H1, H2, H3, H4, H5, H6. В большей степени эти правила имеют значение для двух первых тегов (H1, H2).

Коротко я их сформулировал так:

  1. Используй теги h1-h6!
  2. Используй теги h1-h6 к месту!
  3. Не сори в тегах h1-h6!

🙂

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

  1. На странице должен быть только один заголовок, заключенный в тег H1. Остальных заголовков можно делать несколько. В тег H1 нужно заключать название статьи (если открыта какая-то конкретная статья) или название блога (если открыта главная страница). В этот тег крайне желательно заключить ключевые слова, по которым продвигается страница
  2. Тег H1 в коде должен находиться выше тега H2. Остальные тоже должны соблюдать «субординацию» H2 (как правило, подзаголовок) должен быть вышеH3 (подзаголовка в подзаголовке). Хотя здесь не так строго: эти тегу могут встречаться не только в статье, но и в сайдбаре или меню.
  3. Внутри тегов нельзя использовать другие способы выделения текста (strong, em и другие)
  4. Внутри тегов H1-H6 нельзя использовать другие теги заголовков H1-H6
  5. Старайтесь, чтобы между открывающим и закрывающим тегами H1-H6 был только текст, ссылок не должно быть
  6. Используйте внутри тегов заголовков ключевые слова – именно на эти теги поисковики обращают внимание в первую очередь
  7. Грамотно используя заголовки H1-H6, вы делаете текст статьи приятным для чтения, наглядным – читатели скажут вам спасибо

Ну вот, вроде ничего не пропустил. Скоро напишу, как переделать заголовки статей из тега H1 в H2 и убрать H1 в названии блога на странице статьи. Подписывайтесь на анонсы новых статей.

Всем удачи!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *