Чайникам 

Заголовки h1-h6: детальный обзор, примеры. Анатомия заголовков H1-H6 для оформления и структуризации контента

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

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

Чтобы робот, анализирующий ваш сайт, смог правильно выделить наиболее важные разделы и ключевые страницы, нужно чтобы… текст в теге TITLE для ключевых страниц совпадал с ее названием (с заголовком страницы, выделенным, например, тегом H1) и с текстами ссылок, указывающих на эту страницу.

Как же на самом деле, делать их одинаковыми или разными? По большому счету - без разницы. Но стоит учесть несколько моментов.

— H1 и TITLE должны пересекаться

Если тайтл об одном, а H1 о другом, то поиску сложней определить, каким именно ключевым словам релевантна страница, да и пользователи будут в затруднении. Также эти участки кода помогают поисковикам формировать специальные элементы в сниппете, типа хлебных крошек или быстрых ссылок. Другими словами, не нужно делать TITLE и H1 совсем разными. Посмотрим несколько примеров (просто в качестве демонстрации, без предварительного анализа семантики).

Сайт представляет из себя салон итальянской мебели в Москве. Основные ключевые запросы: салон итальянской мебели, итальянская мебель…
TITLE : Салон итальянской мебели в Москве. Купить мебель из Италии | Название-Салона

H1: Добро пожаловать
Неоптимальный вариант, так как в H1 вообще нет продвигаемых ключевых слов. Приветствие можно написать в тексте.

H1: Эксклюзивная мебель из Италии
Уже получше, так как теги пересекаются по ключу “мебель из италии”. Но его может не быть в приоритетных запросах.

H1: Салон итальянской мебели Название-Салона
Нормальный заголовок для основного запроса, ничего лишнего.

Как видим, здесь нет смысла делать полностью одинаковыми H1 и TITLE , но они должны все же пересекаться.

— H1 и TITLE виден пользователями на разных этапах взаимодействия с сайтом

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

Например, раздел радиоуправляемых вертолетов на сайте.
H1: Радиоуправляемые вертолеты (логично)
TITLE : Купить радиоуправляемые вертолеты с доставкой по Москве

Здесь слово “купить” призывает к действию, а “доставка по Москве” снимает ряд вопросов перед кликом.

Информационная тема: как плести браслеты из резинок
H1: Как плести браслеты из резиночек на станке
TITLE : Браслеты из резиночек: пошаговые инструкции и схемы плетения с фото и видео

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

— TITLE подтягивается в соцсети

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

Этот пункт наиболее актуален для информационных и новостных проектов. Но некоторые из них только и работают на соцсети, поэтому брать пример с заголовков типа “Эта женщина больше не могла смотреть на себя в зеркало. И вот что она сделала…” не всегда корректно для SEO . Просто при составлении тайтлов помните, что они могут попадать заголовками в соцсети.

— TITLE может содержать дополнительные ключевые фразы

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

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

H1: Инструкция по монтажу гибкой битумной черепицы
TITLE : Монтаж гибкой черепицы, технология укладки. Цена, видео

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

SEO разметка текста.. или семантическая верстка сайта.

Семантическая верстка сайта - за этим страшным определением скрывается одна простая истина: сайт должен быть не просто сверстан, а свёрстан логично! Так что можно сказать примерно так: семантическая верстка это - логичная верстка.

Для того что бы Вам было понятнее о чем идёт речь приведу несколько примеров где логика отсутствует..

Итак, плохие примеры:

  • Использование заголовков

    -

    лишь с той целью чтобы увеличить или уменьшить размер буковок..
  • Неуместное использование тегов логического форматирования , например, вместо текста
    г. Самара
     просто какой то текст, который никоем образом к адресу не относится.. например:
    Установка окон
    .
  • Использование тегов для формирования списков
      1. для простой декорации текста или например для создания отступов в тексте.. и наоборот формирование некого списка, перечня например того же меню сайта с помощью других тегов.
      2. И даже использование таблицы в качестве каркаса сайта (табличная вёрстка) вместо того чтобы использовать таблицу по её прямому назначению, а именно для вывода данных в табличной форме.. расписания движения электричек например.. это тоже НЕ семантическая верстка сайта.

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

    Думаю сейчас многие испугались "ааа.. у меня сайт таблицей свёрстан!", "а у меня меню сайта не является списком.." не пугайтесь сильно! конечно к "правильному" построению сайта нужно стремиться, но если по-другому никак не получается то можно чем то и пренебречь, однако некоторые вещи всё же лучше соблюдать!

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

    Многие начинающие веб-мастера думают, что заголовки

    -
    это всего лишь способ выделить текст размером, сделать его крупнее - это не так!! На самом деле теги

    -

    во-первых выделяют именно заголовки в тексте, а во вторых выделяют их по степени "важности" например заголовок

    Как создать сайт?

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

    .

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

    ,

    ..

    в

    ни к чему хорошему в плане оптимизации это не приведёт! В идеале на странице должен присутствовать всего один заголовок первого уровня который как бы содержит в себе два-три заголовка второго уровня в которых в свою очередь "вложены" заголовки рангом поменьше и так далее.. структура документа должна иметь примерно такой вид:

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

    - где текст каждого абзаца несет в себе одну логическую часть текста.

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

    Так как текст в заголовках

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

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

    Должны ли заголовки быть одинаковыми, похожими или кардинально отличаться? Каковы требования поисковиков и рекомендации SEO-шников по наполнению тегов ? Каким образом Тайтл и H1 влияют на продвижение? Прописывать ли мета-заголовки вручную или довериться автоматике движков CMS (систем управления контентом)?

    Title и H1: как составляются и чем отличаются

    Мета-тег Title - главный заголовок страницы, который прописывается в верхней части HTML-кода и дополняется описанием (мета-тегом Description).

    Заголовок Тайтл обосабливается в HTML-коде блоками ..заголовок.. и легко находится поиском (нужно открыть код страницы - комбинация Ctrl+U, перейти на вкладку с кодом, запустить поиск - Ctrl+F по фразе "title").

    Кроме того, заголовок страницы:

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

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

    Если вы пользуетесь CMS, тег Title в движке или генерируется автоматически (берется заголовок записи, а фактически содержимое тега H1) или создается вручную (заполнением мета-тегов страницы через специальные поля или SEO плагины).

    Ручное заполнение предпочтительней, потому что вебмастер:

    1) Устраняет дублирование текстовых блоков (чтоб Title отличался от H1).
    2) Вставляет дополнительные ключи из расширенной семантики среднечастотных и низкочастотных запросов.
    3) Управляет через Title заголовками сниппетов в выдаче.
    4) Использует по желанию частичную автоматизацию.
    5) Самостоятельно устанавливает порядок слов и знаков препинания в Тайтле.

    Частичная автоматизация заполнения мета-тега Title экономит рабочее время вебмастера на ручном добавлении к заголовкам всех страниц сайта однотипных (статичных или динамичных) фрагментов текста. Автоматизация при желании может добавить в Тайтл: дату или год, URL главной страницы, название компании, E-mail, физический адрес офиса, телефонный номер.

    Рассмотрим подробнее объективные требования и полезные рекомендации по составлению Title и H1, которые понравятся пользователям и поисковым роботам.

    Требования к Title (Tag)

    1. В рамках сайта не должно быть двух одинаковых Title.
    2. Тег не может использоваться на странице 2 раза (у каждой страницы только 1 основной заголовок).
    3. Присутствие в заголовках ключей из семантического ядра позитивно влияет на SEO (если нет переспама, иначе - ).
    4. При заполнении тега используют буквы, цифры, знаки препинания, специальные символы.
    5. Длина Title может быть разной, но она ограничивается визуально при формировании выдачи примерно до 7-8 слов (54-64 символа без пробелов), после которых ставится многоточие. При этом поисковики сами решают - что показать, а что скрыть.
    6. Ключевые слова по возможности размещают в первой части мета-тега, ближе к началу.
    7. Поисковые системы "читают" Тайтл полностью, даже если он обрезается в сниппетах.
    8. Длинные заголовки страниц полезны для по среднечастотным и низкочастотным запросам.
    9. Желательно не использовать в Title более 2-х повторов одного слова, как и "кривых" нелогичных ключей.
    10. Заголовок страницы должен быть осмысленным, читабельным и привлекательным для посетителей (не использовать бездумный список всех ключей из семантики).
    11. Стоп-символы (точки, дефисы, запятые, слеши, кавычки, скобки) применяют для деления ключевых слов и смысловых отрезков.
    12. Ключевые фразы лучше использовать перед началом стоп-символов, где их значимость выше.
    13. Стоп-слова в заголовке ("в", "на", "от", "с", "под") влияют на ранжирование в Яндексе.
    14. Заголовок Title составляют с учетом специфики сайта, особенностей продвижения и каналов привлечения трафика (например, если источник переходов - рассылка, заголовок должен быть интригующим или "вирусным", если - поиск, акцент делается на SEO- и ).
    15. При заполнении тегов помните, что они подтягиваются в соцсети, отображаются в сниппетах и влияют на решения пользователей кликнуть по ссылкам.
    16. По возможности Тайтл должен быть уникальным во всем интернете.
    17. Для увеличения конверсий добавляйте мотивирующие призывы (жми, закажи сейчас, читайте и пр.).

    Не забывайте - ошибки заполнения Тайтл и перенасыщенность (переспам) ключами приводят к и проблемам с ранжированием!

    Требования к H1 (Header)

    1. Тег H1 обязан присутствовать на странице, но не более одного раза.
    2. Заголовок первого уровня не дублирует Тайтл, но пересекается с ним по ключевым словам.
    3. Содержимое тега иногда попадает в поисковые сниппеты как Description (описание).
    4. Оптимальный H1 дополняет, семантически и информационно расширяет мета-тег Title.
    5. Присутствие ключевых слов в теге позитивно влияет на SEO (если нет общего переспама).
    6. Содержимое заголовка должно быть читабельным, релевантным контенту.
    7. В теге нельзя использовать бессмысленное перечисление ключевых слов и точных "кривых" вхождений.
    8. Требований к длине H1 не предъявляется, но она должна быть умеренной и целесообразной. Вставка всего текста страницы в тег заголовка первого уровня чревато серьезными неприятностями.
    9. Согласно иерархической структуре H1 следует перед тегами H2-H6 и является более значимым. Следите за иерархией заголовков вашего сайта, не ставьте H1 после H2-H6.
    10. При правильной настройке SEO-функций CMS тег формируется автоматически - берется из названия записи на странице.
    11. Обычно тег H1 визуально акцентируется в тексте более крупным шрифтом или цветом, используется в начале контента.
    12. H1 не нужно выделять ни подчеркиванием, ни курсивом, ни жирной заливкой, ни тегами Strong.
    13. Не используйте одинаковых H1 на разных страницах сайта (во избежание путаницы и так называемой "каннибализации ключей").

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

    Дополнять, но не дублировать.

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

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

    Если в процессе оптимизации возникнут вопросы или затруднения при заполнении тегов, смотрите на лидеров выдачи Яндекса/Google по вашим запросам. В ТОП-5 уже включены те площадки, которые поисковики сочли эталонными, "правильными". Анализируйте их и берите пример!

    Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги 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><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201512/kak-pravilno-ispolzovat-030726.jpg' width="100%" loading=lazy></p> <p>Правила составления главного заголовка h1 :</p> <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><br><img src='https://i1.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><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201512/pravila-rasstanovki-h2-h-030727.jpg' width="100%" loading=lazy></p> <h3>Самые распространенные ошибки при расстановке тегов h1-h6</h3> <ul><li>В некоторых CMS расстановка тегов производится автоматически и зачастую с нарушением правил внутренней оптимизации. К примеру, с помощью h3 выделаются заголовки блоков и иных элементов сайта, а это не правильно. Для этих целей существуют другие теги HTML ;</li> <li>В корне ошибочным будет заключение в теги h ссылок, изображений, логотипов и т.д.;</li> <li>Частой ошибкой является незакрытый заголовок. Это может сбить с толку поисковики и такие страницы рискуют быть пониженными в выдаче;</li> <li>Нередки явления, когда в тегах либо вовсе отсутствуют текст (пустые теги ), либо вместо адекватного текста присутствуют несвязанные слова;</li> <li>Выявление и исправление подобных ошибок позволит повысить вес страниц и улучшить ранжирование сайта в целом.</li> </ul><h3>Какой должна быть оптимальная длина тега h1?</h3> <p>Заголовок, имеющий краткое и лаконичное описание, имеет больше шансов привлечь внимание поисковиков. При заполнении заголовка h1 важно не только точно ввести ключевое слово, приписав его ближе к началу заголовка, но и не сделать сам заголовок не слишком длинным. Лучше всего, если длина тега h1 не будет превышать 60 символов, так как остальную часть поисковые роботы просто не анализируют.</p> <i> </i> <p>В предыдущей я описывал основные факторы ранжирования для поисковых систем.</p> <p>В данной статье разберем как правильно составлять заголовки на страницы сайта. Этот фактор относится к внутренним факторам ранжирования и обязателен при правильной оптимизации контента на страницах сайта.</p> <p>Ранее я уже по их важности и роли для SEO. Сегодня подробнее разберем именно теги типа H. Всего существует 6 таких тегов, но в основном используются только первые 3 - теги h1, h2 и h3.</p> <h2><span>SEO заголовок страницы h1 и его значимость </span></h2> <p>Самый главный заголовок страницы размечается тегом h1. Это может быть название страницы, статьи или товара. Это обязательный заголовок и он должен присутствовать на всех страницах сайта без исключения.</p> <p>Очень часто встречаю в самописных сайтах или просто в непрофессионально собранных шаблонах такой момент, что тега h1 просто нет. На месте заголовка страницы заместо h1, находится тег h2. Это еще в лучшем случае - бывает что вообще нет заголовков типа H на странице. А то что выглядит типа заголовка, просто обычный div или span блок с прописанными заранее стилями походящими на заголовок.</p> <p>Обязательно проверяйте наличие тега h1 на странице в самом начале оптимизации или еще ранее - на этапе проведении сайта. К тому же тег h1 должен быть всего 1 на странице.</p> <p>Опять же частое явление, когда тегов h1 на странице несколько. Это свойственно опять же самописным сайтам или сделанных на конструкторе или с помощью разного рода софта вроде , об ужасном коде которого я писал ранее.</p> <p>Последний сайт что я взял на оптимизацию - это как раз таки одностраничный сайт собранный на Muse и когда я заглянул на код сайта обнаружил аж 7 заголовок размеченных тегом h1 - это ужасная ошибка.</p> <h2><span>Заголовок h2 и его важность для продвижения </span></h2> <p>Если h1 многие все же придерживаются правил и используют на страницах своего сайта, то тегом h2 многие пренебрегают, а зря! Этим тегом обычно размечаются подразделы статьи, страницы.</p> <p>Еще на этапе сбора семантического ядра для сайта в целом или для отдельной статьи нужно примерно понимать из каких разделов будет состоять статья. Опишем ли мы подробно преимущества, стоимость или какие-либо другие подробности по теме статьи или по товару.</p> <p>Рассмотрим пример страницы товара в магазине фототехники - если заголовок h1 страницы имеет вид "Canon 6d Body", то тегом h2 мы будем примерно разбивать на части (подразделы) описание самого товара на странице и иметь вид "Характеристики Canon 6d Body" и "Преимущества фотоаппарата Canon 6d Body".</p> <p>Тем самым мы за счет заголовков типа h2 захватим важные моменты, которые также могут интересовал посетителя сайта помимо самого названия. Теперь сайт будет конкурировать с остальными не только по запросу по основному "Canon 6d Body", но и по дополнительным запросы касаемо преимуществ и характеристик данной модели фотоаппарата. А охват большего числа запросов в свою очередь - это рост трафика на сайт.</p> <p>Кстати говоря, замечал и на своем блоге и на клиентских сайта случаи, когда заголовок типа h2 попадал в сниппет результатов поиска. Туда как правило попадает либо h1, либо title - они оба самые сильные по важности заголовки страницы и за ними преимущество, но не исключено и влияние h2 на сниппет.</p> <p>Например данная статья может с легкостью выйти в ТОП по запросу "Заголовок h2", только потому что эта фраза есть в теге h2.</p> <h2><span>Пару слов о заголовке h3 и нужен ли о вообще </span></h2> <p>Я в своих статьях очень редко использую заголовок с тегом h3. В случаях если статья набирает в себе 5000 символов и выше и то не всегда - можно обойтись и разбаить статью на подразделы и разметить их тегом h2.</p> <p>Все заголовки начинаz с h3 и до h6 несут в себе ту же самую уточняющую и дробящую страницу на подразделы роль, но это используется крайне редко. У вас должна быть просто очень огромная статья, чтобы можно было выстроить такую иерархию из подразделов страницы и задействовать все типы заголовков.</p> <p>Для примера вложенности подзаголовков я напишу про иерархию заголовков, и размечу заголовок этого раздела тегом h3.</p> <h3><span>Порядок и иерархия заголовков на странице сайта </span></h3> <p>Все заголовки должны идти в строгом порядке. Первым на странице всегда идет заголовок типа h1.</p> <p>Если подразделы для каждого из заголовков h2 получились внушительных размеров и в них затронуты несколько еще более мелких подтем, то внутри каждого или одного отельного подраздела с тегом h2 вы делаете сложенные "мини" подразделы страницы и размечаете их h3.</p> <p>Не обязательно что все подразделы озаглавленные тегом h2 будут большими и их надо дробить еще на несколько подразделов. Ниже постараюсь наглядно показать как правильно делать вложенность по заголовкам на странице.</p> <p><img src='https://i0.wp.com/alexbrush.com/wp-content/uploads/2017/04/ierarhiya-zagolovkov-stranitsy.png' width="100%" loading=lazy></p><p><i> </i> <span>8 лайков </p> <ol><li>1 <p>Павел </p><p>Александр, меня очень волнует вопрос по тегам. Пытаюсь правильно и доступно написать о своих услугах. С названием страницы (h1) я все понял, но у меня на этой же странице 12 различных предложений для клиента, напрямую связанные с главной темой страницы. Так вот, могу ли на это странице сделать 12ть заголовков h2? Какое количество текста должно быть под каждым заголовком? И да, я разбавляю их картинками... Заранее спасибо за ответ.</p> </li> <li>3 <p>Андрей </p><p>как будет влиять на ранжирование span внутри h1.<br> на w3c ошибок много. или лучше сделать ЗАГОЛОВОК</p> </li> <li>5 <p>Граттол Казахстан </p><p>Подскажите пожалуйста, что будет если сначала идет h3 а потом h2? У меня магазин на вукомерц и описание товара вот так сделано. Надо ли исправлять? Просто товаров там не мало уже.</p> </li> <li>7 <p>Сергей </p><p>А если у меня тег h1 состоит из двух фраз, одна из которых, по задумке дизайнера, сделана другим шифтом. Как тогда обойтись без, скажем, span внутри тега h1?</p> </li> <li>9 <p>Юлия </p><p>Александр, подскажите пожалуйста. На сайте по продаже товара, в описании у нас есть и h1 и h2. Вопрос: "Тех. характеристики" и "В комплекте" - можно/нужно ли ставить h3? Думаю это лишнее и лучше обычным жирным шрифтом, верно?</p> </li> <li>11 <p>Александр </p><p>Добрый день, Александр. У меня есть 2 вопроса по этой теме:<br> 1. Хочу сделать микроразметку для товаров интернет-магазина и появился вопрос - можно ли использовать такую конструкцию внутри тега h1? Ничего, что в h1 вложено itemprop...?.</p></li></ol> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <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> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="Поиск" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>Свежие записи</span></h3> <ul> <li> <a href="/application/test-amthauera-test-r-amthauera-test-struktury-intellekta-tsi-test-struktury/">Тест амтхауэра. Тест Р.Амтхауэра, Тест структуры интеллекта (TSI) Тест структуры интеллекта кр 3 85</a> </li> <li> <a href="/pots/kak-vernut-zavodskie-nastroiki-navitel-undelete-navigator-kak-vosstanovit-faily/">Undelete Navigator Как восстановить файлы после удаления</a> </li> <li> <a href="/pots/ustanovit-taimer-avtomaticheskogo-vyklyucheniya-kompyutera-v-nuzhnoe-vremya-net/">Скачать Таймер Выключения Бесплатно для Windows Часы таймер для кухни windows 7</a> </li> <li> <a href="/security/golosovoi-pomoshchnik-assistent-bixby-ot-samsung-chto-eto-i-kak-rabotaet-bixby-na-samsung/">Bixby на Samsung: Как работает, и как пользоваться в России Как работает Биксби</a> </li> <li> <a href="/reviews/simvol-zapyataya-sverhu-stavim-verhnyuyu-zapyatuyu-na-klaviature-pri/">Ставим верхнюю запятую на клавиатуре при помощи комбинации клавиш</a> </li> <li> <a href="/security/chto-delat-esli-ne-rabotaet-pk-kompyuter-vklyuchaetsya-no-slyshen/">Компьютер включается, но слышен сигнал</a> </li> <li> <a href="/error-itunes/kak-sozdat-temu-dlya-windows-kak-sozdat-temu-oformleniya-temy-dlya-windows-7/">Как создать тему оформления Темы для windows 7 создать самому</a> </li> <li> <a href="/instructions/voevodin-mihail-viktorovich-voevodin-mihail-viktorovich-otryvok/">Воеводин михаил викторович Отрывок, характеризующий Воеводин, Михаил Викторович</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">© 2024 <a href="/" title="olegshein.ru"><span>olegshein.ru</span></a>. Компьютерный клуб Олега Шейна.<br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">Есть вопросы?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name"> Имя </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email"> Email <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message"> Сообщение <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none"></textarea> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-buttons"> <div class="pweb-field"> <button id="pwebcontact1_send" type="submit" class="btn pweb-button-send" data-role="none">Отправить</button> </div> </div> </div> </div> </div> <div class="pweb-msg pweb-msg-after"> <div id="pwebcontact1_msg" class="pweb-progress"> <script type="text/javascript"> document.getElementById("pwebcontact1_msg").innerHTML = "Initializing form..." </script> </div> </div> <input type="hidden" name="5eb40beb9e" value="1" id="pwebcontact1_token"> </form> </div> </div> </div> </div> </div> <script type="text/javascript"> jQuery(function() { jQuery(".tooltips img").closest(".tooltips").css("display", "inline-block"); new jQuery.Zebra_Tooltips(jQuery('.tooltips').not('.custom_m_bubble'), { 'background_color': '#000000', 'color': '#ffffff', 'max_width': 250, 'opacity': 0.95, 'position': 'center' }); }); </script> <script type="text/javascript"> jQuery(document).on('ready post-load', function() { jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create"]').addClass('nolightbox'); }); jQuery(document).on('ready post-load', easy_fancybox_handler); jQuery(document).on('ready', easy_fancybox_auto); </script> <div id="mistape_dialog" data-mode="comment" data-dry-run="0"> <div class="dialog__overlay"></div> <div class="dialog__content"> <div id="mistape_confirm_dialog" class="mistape_dialog_screen"> <div class="dialog-wrap"> <div class="dialog-wrap-top"> <h2>Сообщить об опечатке</h2> <div class="mistape_dialog_block"> <h3>Текст, который будет отправлен нашим редакторам:</h3> <div id="mistape_reported_text"></div> </div> </div> <div class="dialog-wrap-bottom"> <div class="mistape_dialog_block comment"> <h3><label for="mistape_comment">Ваш комментарий (необязательно):</label></h3> <textarea id="mistape_comment" cols="60" rows="3" maxlength="1000"></textarea> </div> <div class="pos-relative"> </div> </div> </div> <div class="mistape_dialog_block"> <a class="mistape_action" data-action="send" data-id="389" role="button">Отправить</a> <a class="mistape_action" data-dialog-close role="button" style="display:none">Отмена</a> </div> <div class="mistape-letter-front letter-part"> <div class="front-left"></div> <div class="front-right"></div> <div class="front-bottom"></div> </div> <div class="mistape-letter-back letter-part"> <div class="mistape-letter-back-top"></div> </div> <div class="mistape-letter-top letter-part"></div> </div> </div> </div> </body> </html>