Заголовки h1-h6: детальный обзор, примеры. Добавление материалов

Добрый день, уважаемые посетители.

Сегодня будет статья по теме заголовков H1-H6 для на сайте.

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

Основные 2 цель заголовков в тегах H1-H6 - оформление и структуризация контента на страницах ресурса с целью сделать его более читаемым и легко потребляемым посетителями сайта. Никаких других целей мы не должны преследовать от этих тегов.

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

Заголовки в данных тегах должны использоваться лишь для разбиения текста на логические части. Никаких выделений целых предложений и отдельных фраз.

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

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

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

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

Поисковые системы сейчас обращают внимание на данные теги. Но не как на СЕО элементы, а как на элементы структурирования. Поэтому странно будет, если идет H1, а потом сразу H6.

При использовании данных тегов мы обязательно выдерживаем структуру. Если опускаемся на уровень вниз, то никаких прыжков через уровень. Структуру должна быть следующей: H1-H2-H3-H4-H5-H6.

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

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

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

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

• H1 всегда один раз на каждой странице;
• Побуждаем пользователя к прочтению материала, поэтому имеется смысл использовать цепкие слова (например, секреты, лучшие фишки и так далее);
• Делаем отличным от тега title, который отображает название страницы в поисковой выдаче и побуждает переход на страницу сайта из поиска. Он должен быть немного отличным, но обязательно должен давать понимание того, что контекст материала на странице не изменился;
• Употребляем ключевое слово статьи, но в разбавленной форме, а не в точном вхождении;
• Не рекомендуется использовать знаки препинания.

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

Распространенная ситуация, когда вместо H1 стоит H2. Это не является грубой ошибкой, но лучше такого не допускать.

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

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

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

заголовок 2го уровня заголовок 3го уровня заголовок 4го уровня заголовок 5го уровня заголовок 6го уровня

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

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

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

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

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

Приведу вам еще 2 примера оформленных заголовков в H1.

Как видим, это не просто жирный шрифт, а красивый фон с волнистой нижней поверхностью и подчеркнутой верхней.

Также интересное оформление можете сами посмотреть на этой странице .

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

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

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

• Больше одного H1 на странице. Это не правильно. Только один раз в каждом документе;
• Использования тегов H1-H6 для оформление дополнительных элементов сайта. В самом начале я писал, что предназначение этих документов - оформление и структуризация контента. Поэтому, их стоит использовать только в контенте. Большинство шаблонов сайтов содержат данные теги в боковых колонках для придания стилей их названий и так далее. Ярко выражено это в шаблонах WordPress, когда название каждого виджета в сайдбаре заключено в H3 или в другие теги.Если такая ситуация имеется, то заменяете заголовочные теги в служебных элементах сайта на другие, например на тег "span";
• Специально вписываем ключевые слова. Раньше бытовало мнение, что вписав ключевые слова в прямом вхождении в заголовки всех уровней, можно повысить их плотность и позиции такой страницы будет выше. Но сейчас это уже "карается законом" поисковых систем и накладываются санкции за спам в заголовках. Тем более, данные теги ранжируются по другим алгоритмам. Вывод: нет цели вписать ключевые слова;
• Частое употребление точек и знаков препинания. Точки в заголовках вообще употреблять не стоит, так как это неправильно с точки зрения, как копирайтинга, так и общих правил оформления текстов. Количество знаков препинания также стараемся минимизировать, чтобы повысить читаемость заголовков. Сюда же можно отнести и большое количество слов - не делаем слишком длинные заголовки;
• Не соблюдается выдержка структуры с точки зрения иерархии. Старайтесь соблюдать логическую цепочку в построении иерархии тегов H2-H6 на каждой странице;
• Использование тегов H1-H6 для оформления других элементов текста, а не заголовка. Это то, о чем я говорил выше, когда некорректно настроены стили оформления каждого тега и вместо обычного выделения жирным можно использовать заголовок какого-нибудь уровня.
• Заголовок не уместен или не несет контекст текста, который идет за ним. Чтобы научиться создавать логические заголовки, возьмите пару хорошо оформленных книг, которые вам было легко читать. Также ориентируйтесь на структуризацию контента на сайте Википедии;
• Неиспользование заголовков H1-H6 вообще или же отсутствие на небольших текстах. Просто полное отсутствие и говорить не о чем, а вот про отсутствие на небольших страницах - момент сомнительный, так как любой текст (даже минимальные 1000 символов) имеют логическую структуру. Переход от одной темы к другой. Почему бы его не разбить на логические части подзаголовками различных уровней?

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

Кстати, сможете найти небольшой недочет по моим заголовкам на сайте? Если да, то пишите в комментарии. Данный момент не сильно заметен, но он имеется.

До встречи в следующих материалах. Все еще впереди.

С уважением, Константин Хмелев!

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

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

Я сам в большинстве случаев предпочитаю переходить на страницы, которые опубликованы не так давно, а материалы 3-5 летнего и более возраста посещаю намного реже, так как зачастую информация во многих тематиках быстро устаревает и теряет свою актуальность.

Как вы думаете, получит ли данная статья о плагинах Firefox максимальное количество переходов из поиска, если она датирована 2008 годом?

Или мой пост о плагинах WordPress от 2007 года:

Думаю, что нет, так как информация в данных тематиках с годами устаревает.

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

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

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

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

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

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

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

Например, страница Вашего сайта на 5-10 месте. За счет удаления даты из выдачи вполне реально вывести ее на первое место, чтобы она получала максимальное количество переходов из поисковой выдачи.

Я делал эксперимент и убирал даты для нескольких сайтов в разных тематиках. Приведу скриншот позиций одной из страниц по конкурентному запросу:

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

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

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

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

Как вывести дату публикации на javascript

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

Покажу на примере WordPress. Открываем папку с темой блога и во всех файлах, в которых вы хотите заменить вывод даты (например, single.php, index.php, archive.php, можно также в файлах тегов и категорий) ищем код, который отвечает за отображение даты публикации.

Он может быть таким:

Заменяем код на такой:

document.write("");

В некоторых темах может использоваться такой код:

Его нужно заменить на следующий:

document.write("");

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

Как вместо даты выводить дату последнего изменения

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

Для этого нужно заменить код вывода даты на такой: