Заголовки H1 и TITLE. Делать ли их одинаковыми или разными? Как правильно использовать заголовки H1 и H2 при оптимизации текстов
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
В виду последних событий в мире SEO, текстовые факторы стали иметь значительный вес в ранжировании. И если еще пару лет назад можно было махнуть рукой на оформление текста, то сейчас вы за это поплатитесь.
Итак, начнем с азов - .
Мета тег H1: пример оформления и основная информация
Предлагает 6 разноуровневых заголовков, которые обозначают то, насколько важен текстовый блок, идущий после заголовка.
Таким образом, тег
является самым важным заголовком первого уровня, а тег обозначает заголовки шестого уровня, наименее значительные.
По умолчанию,
тег заголовка h1
отображается самым крупным шрифтом и выделяется «жирненьким», заголовки, которые ниже рангом, соответственно, должны быть меньше.
Теги заголовков относят к блочным элементам: тег
всегда начинается с новой строки, а уже за ним на следующей строке идут другие элементы. Более того, чтобы ваш текст эстетично выглядел, перед и после заголовков рекомендую делать отступ.
Как вставить тег заголовка H1 в текст на сайте?
Заголовок первого уровня
Использование ключа в теге: оптимизация тега H1
Мета теги h1
-h6 обязательно следует использовать по назначению, неукоснительно соблюдая иерархию.
Дело в том, что поисковые роботы очень трепетно относятся к заголовкам и тому, что в них содержится. Важность и степень внимания поисковика определяются уровнем заголовка (понижается от h1 до h6). Поэтому мы настоятельно рекомендуем
использовать ключ в теге h1
и фразы в тексте заголовков.
Тег заголовка
(заголовок первого уровня) имеет самый большой вес, конечно же. Поэтому к его текстовому содержанию нужно отнестись с особой серьезностью.
- Вставить тег
можно только вверху страницы сайта, над заголовками других уровней. Также во многих админках есть специальное поле для заголовка h1.
- Следует избегать хаотичного использования заголовков разных уровней и размещать их «как повезет». Поисковику (да, и пользователям) это вряд ли понравится.
- Ни в коем случае не
используйте мета тег
более одного раза на странице.
- По-умолчанию в различных браузерах заголовки выглядят по-разному: отличаются размерами шрифта и отступами. Посему советуем вам отрегулировать эти параметры при помощи стилей. НО! Не перебодритесь с уменьшением шрифта, т.к. поисковые роботы обращают на это внимание. Также не рекомендуем делать размер шрифта заголовка меньше, чем основной текст.
- Делать больший размер шрифта заголовка низкого уровня также не советуем. Если ваш
будет больше, чем , то поисковой робот отнесется к этому негативно.
- И пожалуйста, перестаньте использовать теги выделения (strong, em, b, i) в оформлении ваших заголовков. Cодержание тегов заголовков имеет большее влияние на релевантность страницы по сравнению тегами выделения.
По мнению большинства сеошников (и мы к ним присоединяемся) содержание текста внутри тегов strong (жирненький текст) по степени значимости приблизительно соответствует содержанию заголовка уровня h5. А это так себе уровень.
- Использование ключа в теге h1
обязательно! Лучше всего, если это будет основная ключевая фраза (ключевики, которые входят вовсе другие ключевики в семантике на данную страницу).
- Текстовое содержание заголовка должно отличаться от тега title.
Как проверить тег h1 на странице
Чтобы проверить сколько у вас там получилось главных заголовков и исправить ситуацию, в которой их окажется больше одного, достаточно просто открыть код страницы.
Проверить количество тегов h1
можно как с помощью браузера, так и в админке. При этом никаких дополнительных расширений не требуется.
Ctrl + Shift + C или F12
Горячие клавиши, которые помогут вам открыть код страницы.
Можно ли не использовать тег h1 и другие подзаголовки?
Этот вопрос я несколько раз встречала в сети и хочу дать на него развернутый ответ. А поможет мне в этом крутой SEO специалист нашей студии Олег Васильев.
В сфере поисковой оптимизации очень сложно дать однозначные ответы на вопросы. Это далеко не связано с компетентностью специалиста, хотя доля правды в этом есть. Каждый вопрос, предположительно, должен преследовать достижение какой-либо цели. Исходя из этого ответы на вопросы уже могут разниться, и вы можете получить совсем другой результат.
Глобальная цель поисковых систем, таких как Google, Yandex, довольно проста - необходимо предоставить пользователю максимально полезную информацию относительно введенного запроса. Поисковики достигают ее, исследуя сайт по ряду факторов. Чтобы ваш сайт показали пользователю вы должны максимально соответствовать этим факторам, чтобы поисковая машина решила, что достигла своей глобальной цели.
Одним из критериев успешного ранжирования является соответствующая запросам пользователя, актуальная и правильно структурированная информация.
Что касается структуры, то именно она помогает пользователю быстро находить искомую информацию. Для этих целей информацию нужно разделять на небольшие абзацы, использовать списки (там, где это нужно), заголовки и подзаголовки.
Заголовок h1 помогает пользователю понять общий смысл содержания страницы. Как правило, текст на странице имеет вполне конкретную смысловую единицу, она одна, поэтому и главный заголовок должен быть один. Далее контент, если структура предполагает, можно разбить на небольшие смысловые блоки, и каждый блок будет иметь свой подзаголовок. Очень важно соблюдать вложенность, то есть после после H1 необходимо использовать H2, а после H2 используется H3. Все вполне логично.
Заголовки и подзаголовки должны нести смысловую нагрузку и не использоваться для других целей.
А теперь вернемся к вопросу:
Можно ли не использовать тег h1 и другие подзаголовки?
Ответ очевиден: Можно, если вам не особо важно продвижение вашего сайта в сети.
02.12.15
44.1K
Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h1
, h2
…h6
. Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.
Теги h1
—h6
позволяют выделить заголовки различных уровней. Они дают понять, какие части текста более точно отражают тему статьи и обеспечивают преимущества в ранжировании.
Грамотная расстановка тегов позволяет поисковым системам более точно отображать станицу по запросам в выдаче, что благоприятно сказывается на позиции ресурса:
Зачем нужны теги h1-h6?
В теги заключается название сайта, заголовки и подзаголовки текста:
В HTML теги заголовков обозначаются h
от английского «header
», что в переводе означает «заголовок, шапка
». Вот пример того, как это выглядит:
Заголовок
Расстановка тегов заголовков должна производиться на каждой странице ресурса. При этом важность заголовка будет зависть от его цифры, чем она меньше, тем заголовок важнее:
- наиболее важные теги
- менее значимые теги...
- последние по важности теги
Однако относиться к их расстановке следует с осторожностью. Неправильное использование может привести к тому, что ваш ресурс попадет под санкции поисковых систем.
Синтаксис тегов h1-h6
Название текста
Подзаголовок 1
...
Подзаголовок 2
Подзаголовок 3.1
...
Подзаголовок 3_2
Подзаголовок 3
Наибольшей популярностью пользуются теги h1
h2
h3
.
Как правильно использовать тег h1?
Игнорируя тег h1
, веб-мастера, лишают себя такого важного преимущества, как оптимизация контента. На движках он часто прописывается автоматически, однако не всегда, и данный факт следует учитывать.
HTML
тег h1
– самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом
(<span>заголовком страницы
</span>). Title
отражается в браузере вверху экрана с левой стороны в тот момент, когда открыта страница ресурса. Title
прописывается в шапке страницы между <head></head>, в то время, когда h1
—h6
указываются в самом «теле
» страницы и заключаются в теги <body></body>.</p>
<p>На странице может присутствовать только один h1
тег. Если указать несколько заголовков с тегом h1
, поисковики могут расценить это как переспам, что в свою очередь грозит баном:</p>
<p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201512/kak-pravilno-ispolzovat-030726.jpg' width="100%" loading=lazy></p><br>
Правила составления главного заголовка h1
:
<ul><li>В теге должны использоваться ключевые слова, применяемые для продвижения страницы;</li>
<li>Не стоит делать заголовок h1
слишком объемным, вполне достаточно нескольких слов;</li>
<li>Текст заголовка должен быть читабельным;</li>
<li>Мета тег h1
не должен содержать ничего кроме самого текста. Если желаете его выделить, поставьте коды за пределами тега;</li>
<li>Перед тем, как вручную прописывать h1
, убедитесь, что движок не задает его автоматически;</li>
<li>Содержание h1
должно соответствовать тематике, указанной в title
страницы;</li>
<li>При составлении h1
обязательно используйте ключевую фразу, по которой продвигается страница;</li>
<li>Содержание заголовка должно быть уникальным, емким и тематичным. Не стоит делать h1
полной копией тега Title
. Важно, чтобы на каждой странице ресурса были прописаны уникальные h1
—h6
, поэтому избегайте повторений;</li>
<li>Нельзя перечислять в заголовке ключевые фразы через запятую. Содержание h1
должно быть понятно не только поисковикам, но и посетителям ресурса.</li>
</ul><p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201512/pravila-sostavlenija-glav-030726.jpg' width="100%" loading=lazy></p>
<h3>Как правильно использовать теги h2-h6?</h3>
<p>Кроме h1
для расстановки заголовков, которые идентифицируются поисковыми системами, используются теги h2
, h3
, h4
, h5
, h6
и т.д.</p>
<h4>Тег h2</h4>
<p>Как правило, используется для заголовков постов в ленте, размещенной на главной странице или для подзаголовков в статье.</p>
<h4>Теги h3, h4</h4>
<p>Зачастую с их помощью выделяют названия подзаголовков, рубрик и виджетов в sidebar
.</p>
<h4>Теги h5, h6</h4>
<p>Предназначены для еще более мелких элементов страниц, которые следует отделить от остального текста.</p>
<p>Расстановка заголовков h1
— h6
в разных версиях движков может быть реализована по-разному.</p>
<p>Правила расстановки h2
—h6
:</p>
<ul><li>Структура заголовков. Должна быть соблюдена иерархия заголовков;</li>
<li>Размер шрифта. Чем ниже уровень заголовка, тем мельче шрифт. Редактирование шрифтов производится в стилях. Но, как правило, шрифты имеют правильные размеры по умолчанию;</li>
<li>Не допускается применение тегов заголовков вместе с другими тегами акцентирования. В заголовках рекомендуется использовать ключевые слова, по которым данная станица будет продвигаться в поиске;</li>
<li>В отличие от h1
, теги h2
—h6
могут быть прописаны на странице несколько раз.</li>
</ul><p><body>
<h1>Я главный в иерархии заголовков</h1>
<h2>Мои дети</h2>
<h3>Мои внуки</h3>
<h3>Мои внуки</h3>
<h3>Мои внуки</h3>
<h2>Мои дети</h2>
<h3>Мои внуки</h3>
<h3>Мои внуки</h3>
<h3>Мои внуки</h3>
<h4>Мои правнуки</h4>
<h4>Мои правнуки</h4>
<h4>Мои правнуки</h4>
</body></p>
<ul><li>Не должно быть никакого спама;</li>
<li>Составление текста h1
— h6
должно производиться с использованием синонимов и учетом правил морфологии;</li>
<li>Основные ключевые запросы лучше разместить ближе к началу заголовка;</li>
<li>Ключевые фразы, прописанные в заголовках, должны встречаться в тексте страницы;</li>
<li>Теги h1
— h6
должны быть краткими, емкими и информативными:</li>
</ul>
<p>Добрый день, уважаемые посетители.</p><p>Сегодня будет статья по теме заголовков H1-H6 для на сайте.</p> <i>
</i> <p>Наверняка, все уже знаю, что это за заголовки такие, но уверен, что не каждый знает тонкие моменты в их употреблении и не догадываться, что их использование на страницах ресурса преследует всего лишь 2 задачи.</p><h2>Цели и примеры использования</h2><p>Основные 2 цель заголовков в тегах H1-H6 - оформление и структуризация контента на страницах ресурса с целью сделать его более читаемым и легко потребляемым посетителями сайта. Никаких других целей мы не должны преследовать от этих тегов.</p><p>Кроме простого употребления в качестве элементов структуризации контента и его оформления, посетители часто используют данные теги, чтобы придать необходимый дизайн отдельным фразам или даже целым предложениям. Получается ситуация, когда тег H6 (например) имеет дизайн просто жирного шрифта и вместо того, чтобы выделить строчку в тексте тегом <strong>, они заключают его в тег H6. Это в корне неправильно.</p><p>Заголовки в данных тегах должны использоваться лишь для разбиения текста на логические части. Никаких выделений целых предложений и отдельных фраз.</p><p>К тому же заголовки H1-H6 имеют иерархию, что делает их различным по оформлению, как минимум по размеру шрифта. Каждый низший уровень должен быть менее заметный, чем вышестоящий над ним.</p><p>На изображении видно правильное оформление заголовков в данных тегах, когда размер шрифта идет по убыванию от верхнего уровня к низшему. Если же у вас будет ситуация отличная от этой, то уже стоит обратиться к стилям оформления вашего сайта и отредактировать их должным образом.</p><p>Но тут один момент - проследите, чтобы заголовки нижнего уровня (ближе к H6) были похожи на заголовки и не сливались с обычным текстом. Они должны быть похожи на заголовки, а не просто на жирный шрифт.</p><p>Исходя из такого оформления, мы можем понять, что заголовки должны выдерживать свою иерархию при употреблении их в качестве элементом структуризации текста. Не может быть такого, что сначала идет первый заголовок H1, а затем сразу H5 или H6. После первого уровня логично и правильно будет использовать только заголовок в теге H2. Это важно, как с точки зрения самого оформления материала, так с точки зрения выдержки правильной структуры.</p><p>Поисковые системы сейчас обращают внимание на данные теги. Но не как на СЕО элементы, а как на элементы структурирования. Поэтому странно будет, если идет H1, а потом сразу H6.</p><p>При использовании данных тегов мы обязательно выдерживаем структуру. Если опускаемся на уровень вниз, то никаких прыжков через уровень. Структуру должна быть следующей: H1-H2-H3-H4-H5-H6.</p><p>Стоит сказать, что употребление заголовка уровня H1 в данных случаях не будет уместно, так как он должен употребляться один единственный раз на странице и должен содержать в себе название материала.
Поэтому, в тексте его употреблять нет необходимости.</p><p>Сейчас я расскажу основные моменты использования заголовка H1, но перед этим дам пару общих советов, которые справедливы для заголовков всех уровней.</p><ul><li>Не заканчиваются точкой;</li><li>Выдерживаем иерархию при употреблении;</li><li>Нет цели разместить ключевые слова;</li><li>Имеют место быть даже в очень коротких статьях, так как любой текст можно разбить на логические части;</li><li>В заголовке вписывает краткую суть последующего текста, а не что-то "лишь бы было".</li>
</ul><h2>Основы использования H1</h2><p>Вышеперечисленные правила также актуальны, но кроме них имеются обязательные именно для этого уровня заголовка.</p><ul><li>H1 всегда один раз на каждой странице;</li><li>Побуждаем пользователя к прочтению материала, поэтому имеется смысл использовать цепкие слова (например, секреты, лучшие фишки и так далее);</li><li>Делаем отличным от тега title, который отображает название страницы в поисковой выдаче и побуждает переход на страницу сайта из поиска. Он должен быть немного отличным, но обязательно должен давать понимание того, что контекст материала на странице не изменился;</li><li>Употребляем ключевое слово статьи, но в разбавленной форме, а не в точном вхождении;</li><li>Не рекомендуется использовать знаки препинания.</li>
</ul><h3>Использование на практике</h3><p>Выше я писал, что H1 используется всего лишь 1 раз на странице и он должен быть встроен автоматически в верстку шаблона сайта и подставляться также будет автоматически в заголовок. Проверьте этот момент. Проанализируйте свои заголовки статей и посмотрите, чтобы они были заключены в H1. Если это не так, то редактируем свой шаблон.</p><p>Распространенная ситуация, когда вместо H1 стоит H2. Это не является грубой ошибкой, но лучше такого не допускать.</p><p>Если мы говорим об использовании остальных уровней заголовков H2-H6, то их уже стоит использовать в ручном режиме.</p><p>Использовав какую-нибудь CMS для создания сайта, данные заголовки добавляются в статьи очень просто. Например, в WordPress на панели форматирования в редакторе страницы всегда имеется пункт заголовков, где можно выбрать нужный уровень, ранее выделив нужный текст, который необходимо заключить в заголовок.</p><p><img src='https://i2.wp.com/kostyakhmelev.ru/wp-content/uploads/2015/02/zagolovki-v-Wordpress.jpg' align="center" height="512" width="288" loading=lazy></p><p>Так с каждым движком. Если же используете HTML верстку сайта и необходимо добавлять теги в ручном режиме, то сложностей тут не возникнет. Стоит лишь заключать нужные части текста между открывающим и закрывающим тегами с нужным уровнями. Смотрите ниже примеры.</p> <p><h2>заголовок 2го уровня</h2>
<h3>заголовок 3го уровня</h3>
<h4>заголовок 4го уровня</h4>
<h5>заголовок 5го уровня</h5>
<h6>заголовок 6го уровня</h6></p><p>Что касается стилей оформления для каждого уровня, то в файле стилей стоит добавить правила к каждому уровню.</p> <p>Заметьте, что перед названием уровня заголовка в стилях нет никаких точек и решеток. Внутри скобок указываем сами стили: тип шрифта, размер, цвет, фон и так далее.</p> <h2>Дизайн заголовков H1-H6</h2><p>Если вы сделаете свои заголовкам уникальный выделяющийся дизайн, то посетители вас за это только поблагодарят и оформление контента будет на высшем уровне. Сейчас простые заголовки с большим размером шрифта и жирным выделением уже уходят в прошлое.</p><p>В моду приходят простые, но в то же время оформление заголовки с помощью различных выделений линиями, подчеркиваниями с помощью фоном и так далее.</p><p>Я когда-то давал уже некоторые примеры таких дизайнов. Даже, если взять мой блог, то главный заголовок в H1 оформлен не просто большим шрифтом на белом фоне с остальным текстом. Он отделен серой рамкой на общем фоне сайта, что делает его более заметным и акцентирует внимание на нем.</p><p>Приведу вам еще 2 примера оформленных заголовков в H1.</p><p>Как видим, это не просто жирный шрифт, а красивый фон с волнистой нижней поверхностью и подчеркнутой верхней.</p><p>Также интересное оформление можете сами посмотреть на <span>этой странице
</span>.</p><p>Что касается заголовков H2-H6, то их не просто можно оформлять каким-то фоном, а делать им нумерацию (если используете содержание в начале страницы) в виде красивых картинок. Опять же, это не должны быть простые цифры. Вот хороший пример такой задумки.</p><p>Когда вы знаете то, чего не знают, а тем более не делают большинство, можно перейти и рассмотреть основные ошибки в употреблении заголовков всех уровней на вашем сайте.</p> <h2>Ошибки в употреблении</h2><p>Все ошибки вы уже могли и сами додумать, изучив весь материал выше, но имеются некоторые нюансы. Перечислю все, что может относится именно к вам и то, что немедленно необходимо исправить.</p><ul><li>Больше одного H1 на странице. Это не правильно. Только один раз в каждом документе;</li><li>Использования тегов H1-H6 для оформление дополнительных элементов сайта. В самом начале я писал, что предназначение этих документов - оформление и структуризация контента. Поэтому, их стоит использовать только в контенте. Большинство шаблонов сайтов содержат данные теги в боковых колонках для придания стилей их названий и так далее. Ярко выражено это в шаблонах WordPress, когда название каждого виджета в сайдбаре заключено в H3 или в другие теги.Если такая ситуация имеется, то заменяете заголовочные теги в служебных элементах сайта на другие, например на тег "span";</li><li>Специально вписываем ключевые слова. Раньше бытовало мнение, что вписав ключевые слова в прямом вхождении в заголовки всех уровней, можно повысить их плотность и позиции такой страницы будет выше. Но сейчас это уже "карается законом" поисковых систем и накладываются санкции за спам в заголовках. Тем более, данные теги ранжируются по другим алгоритмам. Вывод:
нет цели вписать ключевые слова;</li><li>Частое употребление точек и знаков препинания. Точки в заголовках вообще употреблять не стоит, так как это неправильно с точки зрения, как копирайтинга, так и общих правил оформления текстов. Количество знаков препинания также стараемся минимизировать, чтобы повысить читаемость заголовков. Сюда же можно отнести и большое количество слов - не делаем слишком длинные заголовки;</li><li>Не соблюдается выдержка структуры с точки зрения иерархии. Старайтесь соблюдать логическую цепочку в построении иерархии тегов H2-H6 на каждой странице;</li><li>Использование тегов H1-H6 для оформления других элементов текста, а не заголовка. Это то, о чем я говорил выше, когда некорректно настроены стили оформления каждого тега и вместо обычного выделения жирным можно использовать заголовок какого-нибудь уровня.</li><li>Заголовок не уместен или не несет контекст текста, который идет за ним. Чтобы научиться создавать логические заголовки, возьмите пару хорошо оформленных книг, которые вам было легко читать. Также ориентируйтесь на структуризацию контента на сайте Википедии;</li><li>Неиспользование заголовков H1-H6 вообще или же отсутствие на небольших текстах. Просто полное отсутствие и говорить не о чем, а вот про отсутствие на небольших страницах - момент сомнительный, так как любой текст (даже минимальные 1000 символов) имеют логическую структуру. Переход от одной темы к другой. Почему бы его не разбить на логические части подзаголовками различных уровней?</li>
</ul><p>Вот и все, дорогие веб-мастера. Материал про заголовки на сайте подошел к концу. Вышел он довольно затянутый. Где-то я повторялся, но это только, чтобы акцентировать ваше внимание на ключевых мыслях статьи. Надеюсь, что данный материал вам пригодился.</p><blockquote><p>Кстати, сможете найти небольшой недочет по моим заголовкам на сайте? Если да, то пишите в комментарии. Данный момент не сильно заметен, но он имеется.</p>
</blockquote><p>До встречи в следующих материалах. Все еще впереди.</p><p>С уважением, Константин Хмелев!</p>
<p><b>Тег H1 или заголовок H1
</b> — это заголовок первого уровня и он имеет наибольшее значение и важность среди всех заголовков. <b>Тег H1
</b> должен применяться на странице один раз, располагаться выше всех других заголовков и иметь самый большой размер шрифта.</p>
<p>Всего тегов заголовков существует шесть. Это h1, h2, h3, h4, h5 , h6. Эти теги применяются для форматирования текста на странице. H1 самый весомый среди них как для посетителе, так и для поисковиков.</p>
<p>Приветствую Вас на страницах . В этой статье поделюсь с Вами некоторыми моментами при использовании заголовка H1 на страницах блога под управлением CMS WordPress.</p>
<h2>Тег H1 — значение для продвижения</h2>
<p><img src='https://i2.wp.com/inetmkt.ru/wp-content/uploads/2012/03/tegi-h.jpg' align="left" height="150" width="150" loading=lazy>Поисковые системы используют слова и фразы, применяемые в этом теге, для определения релевантности страниц поисковому запросу. Этот тег является одним из наиболее значимых элементов релевантности. При оптимизации текста страницы важнее тега H1 поисковые системы ценят только тег TITLE.</p>
<p>И если быть более кратким и конкретным, то <b>тег H1 рекомендуется использовать для заголовков страниц наших сайтов
</b> и они должны содержать ключевую фразу, по которым эта страница продвигается.<br>
Релевантность страниц, наряду с , является одним из самых весомых показателей для завоеваний лояльности поисковых систем.</p>
<h2>Правила заполнения заголовка H1</h2>
<p>Для получения хорошего результата при продвижении страниц сайта следует выполнять следующие правила его заполнения:</p>
<ol><li>Каждая страница должна содержать ОДИН тег H1.</li>
<li>Тег должен содержать одно ключевое слово, по которому продвигается страница.</li>
<li>Содержимое заголовка H1 должно быть уникальным для каждой страницы.</li>
<li>Тег H1 не должен быть гиперссылкой.</li>
<li>Желательно, чтобы тег не содержал классов, идентификаторов и других CSS элементов, а был в «голом» виде.</li>
<li>Не рекомендуется использовать в содержимом знаков препинания, запятых, двоеточий и так далее.</li>
<li>Размер тега не должен быть более двух предложений, лучше одно.</li>
</ol><p>В html-коде заголовок страницы должен выглядеть таким образом:</p>
<blockquote><p><h1>Тег H1 это заголовок страницы</h1></p>
</blockquote>
<p>Наиболее типичные грубые ошибки – это отсутствие тега H1 на странице или присутствие более одного заголовка. Такие ошибки обычно характерны для страниц разделов, в которых перечислены статьи, входящие в эти разделы.</p>
<p>Контроль заполнения тега H1 по всему сайту проводится в рамках . Для проведения такого аудита есть немало достойных инструментов. Я же порекомендую Вам сервис от Мегаиндекса – <i>audit.megaindex.ru
</i>
.</p>
<h2>Тег H1, применение в WordPress</h2>
<p><img src='https://i2.wp.com/inetmkt.ru/wp-content/uploads/2012/03/h1-wordpress.jpg' height="150" width="148" loading=lazy>Теорию повторили и теперь остановимся на некоторых технических моментах, связанных и применением тега H1 на сайтах, использующих CMS WordPress. Поскольку большинство начинающих блоггеров используют бесплатные шаблоны, то в них могут содержаться некоторые недоработки.<br>
В частности, возможны варианты, когда заголовок страницы выделяется не тегом H1, а другим тегом, чаще всего это H2.</p>
<p>Эта же недоработка обнаружилась и на моем блоге, после того как я создал при помощи программы Artisteer. При просмотре HTML-кода было обнаружено, что все заголовки страниц выводятся с тегом H2.</p>
<p>Для устранения этого пришлось редактировать файл <i>single.php
</i>
, именно так в большинстве шаблонов называются файлы, которые выводят информацию по каждой отдельной записи. Как я это сделал сейчас продемонстрирую наглядно.<br>
В теле файла <i>single.php
</i>
ищем часть кода, которая выводит заголовок. В моем случае этот выглядело таким образом:</p>
<blockquote><p><h2
class=»art-PostHeaderIcon-wrapper»><br>
<span class=»art-PostHeader»><br>
<?php the_title(); ?><br>
</span><br>
</h2
></p>
</blockquote>
<p>Меняем выделенные красным цветом теги h2 на необходимые h1 и файл <i>single.php
</i>
исправлен и готов к использованию. Оказалось, что это довольно просто, поменял пару символов и готово. Теперь этот блок стал выглядеть так:</p>
<blockquote><p><h1
class=»art-PostHeaderIcon-wrapper»><br>
<span class=»art-PostHeader»><br>
<?php the_title(); ?><br>
</span><br>
</h1
></p>
</blockquote>
<p>В Вашем случае выражение может быть несколько другого вида, но смысл, я надеюсь, Вы поняли.</p>
<p>Аналогичные изменения мне пришлось проделать с еще одним файлом темы <i>page.php
</i>, который отвечает за вывод страниц блога. Как известно блог на CMS WordPress содержит записи и страницы.</p>
<p>Функции создания и изменения их находятся в разных разделах администрирования блога, они хранятся в разных местах и соответственно за их вывод отвечают и разные программные модули.</p>
<p>В итоге отрезок кода в файле <i>page.php
</i>, который выводит заголовок страницы стал выглядеть вот так:</p>
<blockquote><p><h1
class=»art-PostHeaderIcon-wrapper»><br>
<span class=»art-PostHeader»><a href=»<?php the_permalink() ?>» rel=»bookmark» title=»<?php printf(__(‘Permanent Link to %s’, ‘kubrick’), the_title_attribute(‘echo=0’)); ?>»><br>
<?php the_title(); ?><br>
</a></span><br>
</h1
></p>
</blockquote>
<p>Но это было еще не все, на моем шаблоне я обнаружил, что тег H1 используется при выводе заголовка самого блога. И мне пришлось решать, оставлять все как есть или добиваться вывода заголовков страниц с тегом H1.</p>
<p>Ведь использование двух и более заголовков этого типа на одной странице не рекомендуется. Поисковые системы могут это расценить как переоптимизацию и сделать соответствующие выводы.</p>
<h2>Тег H1, корректировка шаблона WordPress</h2>
<p>В конце концов решил подправить эту недоработку, тем более, что хлопот больших это не принесло. Сейчас я Вам обо всем подробно доложу.</p>
<p>Для этого надо было внести поправки всего в два файла.</p>
<p>Первый <i> header.php
</i>
— это файл вывода заголовка блога.</p>
<p>Второй <i>style.css
</i> — файл описания стилей блога.</p>
<h3>Изменения header.php</h3>
<blockquote><p><div class=»art-Logo»><br>
<h1
id=»name-text» class=»art-Logo-name»><br>
<a href=»<?php echo get_option(‘home’); ?>/»><?php bloginfo(‘name’); ?></a></h1
><br>
<div id=»slogan-text» class=»art-Logo-text»><br>
<?php bloginfo(‘description’); ?></div><br>
</div></p>
</blockquote>
<p>Находим в <i>header.php
</i> фрагмент, который выводит заголовок блога и меняем тег заголовка h1
(выделил красным цветом те символы, которые изменяю) на тег абзаца p
. В результате получили такой код.</p>
<blockquote><p><div class=»art-Logo»><br>
<p
id=»name-text» class=»art-Logo-name
«><br>
<a href=»<?php echo get_option(‘home’); ?>/»><?php bloginfo(‘name’); ?></a></p
><br>
<div id=»slogan-text» class=»art-Logo-text»><br>
<?php bloginfo(‘description’); ?></div><br>
</div></p>
</blockquote>
<h3>Изменения в файле style.css</h3>
<p>Синим цветом я выделил наименование класса css, который нам придется подправить в файле <i>style.css
</i>, чтобы шрифт и размер вывода заголовка блога остался прежним, таким же как и до изменений. Далее открываем файл стилей, ищем поиском необходимый класс «art-Logo-name», фрагмент ниже</p>
<blockquote><p>h1
.art-Logo-name, h1
.art-Logo-name a, h1
.art-Logo-name a:link, h1
.art-Logo-name a:visited, h1
.art-Logo-name a:hover<br>
{<br><br>
font-size: 29px;<br>
text-decoration: none;<br>
padding:0;<br>
margin:0;<br>
color: #E0EDF0 !important;<br>
}</p>
</blockquote>
<p>Все выделенные красным цветом h1
меняю на p
и получаю в результате</p>
<blockquote><p>p
.art-Logo-name, p
.art-Logo-name a, p
.art-Logo-name a:link, p
.art-Logo-name a:visited, p
.art-Logo-name a:hover<br>
{<br>
font-family: Arial, Helvetica, Sans-Serif;<br>
font-size: 29px;<br>
text-decoration: none;<br>
padding:0;<br>
margin:0;<br>
color: #E0EDF0 !important;<br>
}</p>
</blockquote>
<p>Вот, собственно и все, что я хотел рассказать Вам о теге H1, как одном из элементов .<br>
Замечу только, что все работы я проводил на<b> тестовом поддомене
</b>, чтобы посетители моего блога не испытывали затруднений при возникновении проблем, которые могут возникнуть при подобного рода манипуляциях. Да и с точки зрения безопасности и сохранности функционала сайта это будет правильным решением.</p>
<p>В заключение хочу Вам предложить посмотреть небольшое видео, оно, правда, озвучено на английском языке, но мне все было понятно, надеюсь и Вам будет несложно разобраться. Этот ролик неплохо дополняет текст статьи и для новичков или тех, кто не силен в программировании будет неплохим подспорьем. Приятного просмотра.</p>
<p><span class="zgOuilSChgY"></span></p>
<p>На этом позволю себе закончить, а Вам пожелать успехов.</p>
<p>Здравствуйте, друзья! Рады приветствовать вас на блоге Андрея с Дашей – Thebizfromscratch. Что-то давно мы ничего не писали о SEO и в этой статье хотим наверстать упущенное, ведь тема на сегодня – Влияние заголовков H1, H2 – H6 на продвижение сайта. Мы расскажем, по каким правилам и принципам прописываем заголовки на своём блоге и надеемся, что наш опыт окажется для вас полезным.</p>
<h2><span>Как правильно расставлять мета-теги H1, H2…H6
</span></h2>
<p>Итак, оформляя публикацию, мы прописываем мета-теги в следующем порядке:</p>
<p>Является наиболее значимым заголовком, поэтому в теги h1 принято заключать желательно разбавленный нейтральными словами основной поисковой ключ, т.е. разбавленный title.</p>
<p>Следующий по значимости заголовок, с помощью которого выделяют подобранный к основному запросу низкочастотный запрос.</p>
<ol><li><b>H3, H4,H5, H6
</b></li>
</ol><p>По сути, не имеют особого влияния на продвижение. Однако включение ключивиков в них может привести к переоптимизации, что вызовет лишь негативный отклик у поисковых ботов. Поэтому данные мета-теги мы используем только для красивого структурирования статьи. Чтобы посетителям было удобнее читать и сразу понимать, где заканчивается одна мысль и начинается другая. Тем более, не забывайте, что все посты пишутся исключительно для читателей и увлекаться частым повтором одних и тех же слов/фраз – не стоит.</p>
<p>А чтобы упомянутая выше информация правильно была понята, давайте рассмотрим пример! Пусть вы написали статью под поисковой запрос – «Как сделать сайт». Эту фразу нужно прописать в поле Title и повторить минимум 2 раза без изменений в самом тексте. Или как делают многие – повторяют поисковой запрос 1 раз на 1000 символов.<br><img src='https://i1.wp.com/thebizfromscratch.ru/wp-content/uploads/2016/12/syuda-tittle.jpg' align="center" width="100%" loading=lazy></p>
<p>Если дальше вы нуждаетесь в выделении структуры, то смело используйте H2, содержащий низкочастотный запрос. Опять же в рамках примера – «Как качественно сделать сайт на движке WordPress». Остальные мета — теги пишите без ключей.<br><img src='https://i1.wp.com/thebizfromscratch.ru/wp-content/uploads/2016/12/struktura.jpg' align="center" width="100%" loading=lazy></p>
<ol><li>Не проставляйте в заголовках ссылки на другие продвигаемые страницы. Код ссылки будет расцениваться поисковыми машинами, как ключевые слова, и только навредит ранжированию.</li>
<li>Не располагайте заголовки низшего порядка над более значимыми. Первым должен следовать H1, затем H2 и далее по нарастающей. Должна вырисовываться древовидная структура.</li>
<li>Рекомендуется использовать H1 единожды, H2 не более 3-х раз, а H3-H6 сколько угодно (только без ключей и только, если это необходимо).</li>
</ol><p>Пожалуй, это были основные принципы и правила, которыми мы пользуемся при оформлении статей. Надеемся, что тема – влияние заголовков H1, H2 – H6 на продвижение сайта – раскрыта и вы нашли для себя полезную информацию. В случае вопросов – обязательно задавайте их в комментариях, постараемся помочь.</p>
<br style="clear:both;">
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
<div style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div>
</article>
<div class='yarpp-related'>
<div class="related-posts-title">Похожие публикации:</div>
<ul class="related-items">
<li>
<img src="/uploads/ae45d64dcd398b037767c2e15d062ff2.jpg" width="180" height="160" alt="Секретные коды для андроид 6" loading=lazy> <a href='/excel/sekretnye-kody-dlya-android-6-0-servisnye-kody-dlya-android-kak-poluchit-dostup-k/'
class='related-item__title'>Секретные коды для андроид 6</a>
</li>
<li>
<img src="/uploads/03df3ecc74ac66821e5f8b7dcbf632c9.jpg" width="180" height="160" alt="Как изменить приложение по умолчанию на Android" loading=lazy> <a href='/word/kak-smenit-prilozhenie-po-umolchaniyu-android-kak-izmenit-prilozhenie/'
class='related-item__title'>Как изменить приложение по умолчанию на Android</a>
</li>
<li>
<img src="/uploads/9574031c028ca2e60f1542509461689b.jpg" width="180" height="160" alt="Не слышит собеседник на iPhone Почему в айфоне 7 меня плохо слышат" loading=lazy> <a href='/word/ploho-slyshno-sobesednika-na-iphone-ne-slyshit-sobesednik-na-iphone/'
class='related-item__title'>Не слышит собеседник на iPhone Почему в айфоне 7 меня плохо слышат</a>
</li>
<li>
<img src="/uploads/b8fc911e55d429c82b9c8bd03eb22f20.jpg" width="180" height="160" alt="Обзор HTC One dual sim. Дважды флагман. Обзор HTC One dual sim Htc one dual sim фронтальная камера" loading=lazy> <a href='/program/obzor-htc-one-dual-sim-dvazhdy-flagman-obzor-htc-one-dual-sim-htc-one-dual-sim/'
class='related-item__title'>Обзор HTC One dual sim. Дважды флагман. Обзор HTC One dual sim Htc one dual sim фронтальная камера</a>
</li>
</ul>
</div>
<style>
.nafAdaptMedia { width: 100%; height: 300px; }
@media(min-width: 500px) { .nafAdaptMedia { width: 100%; height: 300px; } }
@media(min-width: 800px) { .nafAdaptMedia { width: 100%; height: 300px; } }
</style>
<style>
.nafAdaptText { width: 100%; height: 300px; }
@media(min-width: 500px) { .nafAdaptText { width: 100%; height: 300px; } }
@media(min-width: 800px) { .nafAdaptText { width: 100%; height: 300px; } }
</style>
</div>
<div id="rightColomn">
<div class="title">Категории</div>
<aside>
<ul id="asidemenu" class="menu">
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/programs/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Программы</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/windows/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Windows</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/browsers/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Браузеры</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/word/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Word</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/excel/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Excel</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/payment-systems/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Платежные системы</span></a></li>
<li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/download-software/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Скачать софт</span></a></li>
</ul>
</aside>
<div class="banner" id="text-4">
<div class="textwidget">
</div>
</div>
</div>
</div>
</div>
<div class="hfooter"></div>
</div>
<footer>
<div class="container">
<ul>
<li><a href='/sitemap.xml'>Карта сайта</a></li>
</ul>
<div class="copy"> <a href='https://play.google.com/store/apps/details?id=org.planetsapp.pdfreader' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=leally.ru&sub2=org.planetsapp.pdfreader&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a>© 2024, leally.ru - Твой гид в мире компьютера и интернета
</div>
</div>
</footer>
<script type="text/javascript">
jQuery(document).ready(function(){
var q2w3_sidebar_1_options = { "sidebar" : "banner", "margin_top" : 10, "margin_bottom" : 0, "screen_max_width" : 0, "width_inherit" : false, "widgets" : ['text-4'] } ;
q2w3_sidebar(q2w3_sidebar_1_options);
setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); } , 1500);
} );
</script>
<script type='text/javascript' src='https://leally.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.1.10'></script>
<script type='text/javascript' src='https://leally.ru/wp-content/plugins/fitvids-for-wordpress/jquery.fitvids.js?ver=1.1'></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('body').fitVids();
} );
</script><script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script>
</body>
</html>
Теги заголовков относят к блочным элементам: тег
всегда начинается с новой строки, а уже за ним на следующей строке идут другие элементы. Более того, чтобы ваш текст эстетично выглядел, перед и после заголовков рекомендую делать отступ.
Как вставить тег заголовка H1 в текст на сайте?
Заголовок первого уровня
Использование ключа в теге: оптимизация тега H1
Мета теги h1 -h6 обязательно следует использовать по назначению, неукоснительно соблюдая иерархию.
Дело в том, что поисковые роботы очень трепетно относятся к заголовкам и тому, что в них содержится. Важность и степень внимания поисковика определяются уровнем заголовка (понижается от h1 до h6). Поэтому мы настоятельно рекомендуем
использовать ключ в теге h1 и фразы в тексте заголовков.Тег заголовка
(заголовок первого уровня) имеет самый большой вес, конечно же. Поэтому к его текстовому содержанию нужно отнестись с особой серьезностью.
- Вставить тег
можно только вверху страницы сайта, над заголовками других уровней. Также во многих админках есть специальное поле для заголовка h1.
- Следует избегать хаотичного использования заголовков разных уровней и размещать их «как повезет». Поисковику (да, и пользователям) это вряд ли понравится.
- Ни в коем случае не
используйте мета тег
более одного раза на странице. - По-умолчанию в различных браузерах заголовки выглядят по-разному: отличаются размерами шрифта и отступами. Посему советуем вам отрегулировать эти параметры при помощи стилей. НО! Не перебодритесь с уменьшением шрифта, т.к. поисковые роботы обращают на это внимание. Также не рекомендуем делать размер шрифта заголовка меньше, чем основной текст.
- Делать больший размер шрифта заголовка низкого уровня также не советуем. Если ваш
будет больше, чем
, то поисковой робот отнесется к этому негативно.
- И пожалуйста, перестаньте использовать теги выделения (strong, em, b, i) в оформлении ваших заголовков. Cодержание тегов заголовков имеет большее влияние на релевантность страницы по сравнению тегами выделения.
По мнению большинства сеошников (и мы к ним присоединяемся) содержание текста внутри тегов strong (жирненький текст) по степени значимости приблизительно соответствует содержанию заголовка уровня h5. А это так себе уровень.
- Использование ключа в теге h1 обязательно! Лучше всего, если это будет основная ключевая фраза (ключевики, которые входят вовсе другие ключевики в семантике на данную страницу).
- Текстовое содержание заголовка должно отличаться от тега title.
Как проверить тег h1 на странице
Чтобы проверить сколько у вас там получилось главных заголовков и исправить ситуацию, в которой их окажется больше одного, достаточно просто открыть код страницы.
Проверить количество тегов h1
можно как с помощью браузера, так и в админке. При этом никаких дополнительных расширений не требуется.
Ctrl + Shift + C или F12
Горячие клавиши, которые помогут вам открыть код страницы.
Можно ли не использовать тег h1 и другие подзаголовки?
Этот вопрос я несколько раз встречала в сети и хочу дать на него развернутый ответ. А поможет мне в этом крутой SEO специалист нашей студии Олег Васильев.
В сфере поисковой оптимизации очень сложно дать однозначные ответы на вопросы. Это далеко не связано с компетентностью специалиста, хотя доля правды в этом есть. Каждый вопрос, предположительно, должен преследовать достижение какой-либо цели. Исходя из этого ответы на вопросы уже могут разниться, и вы можете получить совсем другой результат.
Глобальная цель поисковых систем, таких как Google, Yandex, довольно проста - необходимо предоставить пользователю максимально полезную информацию относительно введенного запроса. Поисковики достигают ее, исследуя сайт по ряду факторов. Чтобы ваш сайт показали пользователю вы должны максимально соответствовать этим факторам, чтобы поисковая машина решила, что достигла своей глобальной цели.
Одним из критериев успешного ранжирования является соответствующая запросам пользователя, актуальная и правильно структурированная информация.
Что касается структуры, то именно она помогает пользователю быстро находить искомую информацию. Для этих целей информацию нужно разделять на небольшие абзацы, использовать списки (там, где это нужно), заголовки и подзаголовки.
Заголовок h1 помогает пользователю понять общий смысл содержания страницы. Как правило, текст на странице имеет вполне конкретную смысловую единицу, она одна, поэтому и главный заголовок должен быть один. Далее контент, если структура предполагает, можно разбить на небольшие смысловые блоки, и каждый блок будет иметь свой подзаголовок. Очень важно соблюдать вложенность, то есть после после H1 необходимо использовать H2, а после H2 используется H3. Все вполне логично.
Заголовки и подзаголовки должны нести смысловую нагрузку и не использоваться для других целей.
А теперь вернемся к вопросу:
Можно ли не использовать тег h1 и другие подзаголовки?
Ответ очевиден: Можно, если вам не особо важно продвижение вашего сайта в сети.
02.12.15 44.1KЗачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги h1 , h2 …h6 . Если эти теги расставлены неверно, без учета специфики ресурса, то поисковикам сложнее получить точную информацию о статьях и содержащихся в ней ключевых словах.
Теги h1 —h6 позволяют выделить заголовки различных уровней. Они дают понять, какие части текста более точно отражают тему статьи и обеспечивают преимущества в ранжировании.
Грамотная расстановка тегов позволяет поисковым системам более точно отображать станицу по запросам в выдаче, что благоприятно сказывается на позиции ресурса:
Зачем нужны теги h1-h6?
В теги заключается название сайта, заголовки и подзаголовки текста:
В HTML теги заголовков обозначаются h от английского «header », что в переводе означает «заголовок, шапка ». Вот пример того, как это выглядит:
Заголовок
Расстановка тегов заголовков должна производиться на каждой странице ресурса. При этом важность заголовка будет зависть от его цифры, чем она меньше, тем заголовок важнее:
- наиболее важные теги - менее значимые теги... - последние по важности тегиОднако относиться к их расстановке следует с осторожностью. Неправильное использование может привести к тому, что ваш ресурс попадет под санкции поисковых систем.
Синтаксис тегов h1-h6
Название текста
Подзаголовок 1
...Подзаголовок 2
Подзаголовок 3.1
...Подзаголовок 3_2
Подзаголовок 3
Наибольшей популярностью пользуются теги h1 h2 h3 .
Как правильно использовать тег h1?
Игнорируя тег h1 , веб-мастера, лишают себя такого важного преимущества, как оптимизация контента. На движках он часто прописывается автоматически, однако не всегда, и данный факт следует учитывать.
HTML тег h1 – самый значимый в своем роде. В него заключают название сайта и заголовок статьи. Однако не стоит его путать с тегом