Игорь . Обновление:Октябрь 6, 2012 .

Здравствуйте, уважаемые читатели! Продолжаю публикации в разделе и сегодняшний пост будет посвящен формированию заголовков html (теги h1-h6), а также способам форматирования html текста путем выделения необходимых слов или фраз (теги strong, b; em, i) и фрагментов текста (теги blockquote, pre).

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

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

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

Уверен, многие из вас уже неоднократно сталкивались с тегами заголовков h1-h6, однако, возможно, некоторые недооценивают их важность с точки зрения seo. Дело в том, что эти теги играют не последнюю роль в деле и я постараюсь коснуться этого аспекта тоже. Название элементы h1-h6 получили от заглавной буквы английского слова "Header" (заголовок). Синтаксис заголовков в html коде выглядит следующим образом:

Содержание заголовка h1

Содержание заголовка h2

Содержание заголовка h3

Содержание заголовка h4

Содержание заголовка h5
Содержание заголовка h6

Прописывая этот кусок html кода при отображении в браузере мы получаем:

Самый верхний уровень 1, самый низкий - 6. Таким образом любой текст можно классифицировать с точки зрения его важности. Теги h1-h6 являются блочными, поэтому заголовок, определяемый ними, занимает все возможное пространство по ширине. Однако, несмотря на то, что эти элементы являются блочными, они не должны содержать другие блочные теги, только строчные. Если касаться оптимизации статей и всего ресурса в целом, то можно выделить несколько рекомендаций:

  • наиболее важны с точки зрения ранжирования поисковыми системами, соответственно они наиболее востребованы и часто используемые. Рекомендуется заголовок тега h1 использовать один раз на странице (обычно он располагается на странице со статьей в качестве названия поста, у меня пока на блоге немного не так, но я собираюсь исправить ситуацию). Заголовок h2 применяется для подзаголовков, если материал большой и его надо разделить на логические части, h3 - для подзаголовков логических фрагментов этих частей; кроме того, h2 и h3 допускается использовать на главной странице и страницах категорий.
  • Теги h4, h5, h6 применяются редко, поскольку слабо учитываются при ранжировании. Однако, если статья большая и необходимо выделить какие-то фрагменты для удобства читателей, то приходят на помощь и они (например, в объемном мануале в каждой из частей, определяемой элементом h3, требуется выделить логические куски с подзаголовком h4). Кроме того, теги h4, h5, h6 могут быть использованы для названий каких-либо блоков в сайдбаре, футере (подвале) и т.д.
  • Желательно использовать заголовки h1, h2, h3 в обязательном порядке. Конечно, я не проводил анализа строгости поисковиков при несоблюдении этого правила, однако логично предположить, что это учитывается при ранжировании.
  • Необходимо добавить, что в содержание заголовков, особенно h1-h3, в обязательном порядке должны входить ключевые слова, определяемые при , поскольку поисковые системы именно ключевым словам и фразам придают большое значение.

Ну, и само собой, использование тегов html заголовков, и это главное, делает материал более удобным для восприятия пользователями. Что касается атрибута align тегов h1-h6, то сейчас я о нем говорить не буду, поскольку он не рекомендуется к применению по правилам спецификации html. Как разнообразить внешний вид подзаголовков с помощью приемлемых методов, которые не нарушат , мы поговорим, когда приступим к изучению .

Форматирование текста при помощи специальных HTML тегов

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

Логическое и физическое форматирование - особенности использования каждого из них

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

Наиболее ярким примером служат strong и em, которые являются тегами логического форматирования, а соответственно b и i - физического форматирования. При отображении в браузере текста, обрамленного тегами strong и b (выделение жирным), em и i (выделение курсивом), визуальной разницы не ощущается:

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

Поговаривают, что значение тегов strong и em за последнее время серьезно упало и поисковые машины сейчас мало внимания им уделяют. Однако, я все-таки не советовал бы увлекаться их применением, отмечая ими ключевые слова, тем более, что существует разумная альтернатива в лице элементов em и i.

Какие еще есть теги, позволяющие форматировать текстовое содержание

Теперь еще несколько слов о других тегах форматирования текста, которые применяются крайне редко, но все же нужны, раз они существуют. Возможно, кому-то эта информация окажется полезной. Отмечу по обыкновению лишь те теги, которые соответствуют спецификации html 5. Начнем с тегов физического (визуального) форматирования (теги b и i рассмотрены выше).

  • Small - служит для уменьшения размера шрифта на единицу, если сравнивать с обычным текстом.
Seo оптимизация сайтов, блогов, порталов.
  • Sub - текст отображается в виде нижнего индекса
  • H2O - химическая формула воды
  • Sup - отображение текста в виде верхнего индекса
  • X2=Y - математическая формула

    Безусловно, это только некоторые элементы физического форматирования, однако я выбрал только те, которые валидны по отношению к html 5, остальные рекомендуется заменять стилями css, с которыми вскоре я вас ознакомлю. Далее приведу примеры тегов логического форматирования.

    • Abbr - указывает на то, что данная последовательность символов является аббревиатурой. Расшифровка сокращения осуществляется с помощью атрибута title и всплывает при подведении курсора к тексту.
    HTML - язык гипертекстовой разметки

  • Cite - применяется для выделения цитат Томми Дюар Иногда шаг вперёд требует шага назад.

  • Code - применяется для отображения разнообразных кодов, например, кода скрипта
  • (function() { var request, b = document.body, c = "className", cs = "customize-support", rcs =new RegExp("(^|\\s+)(no-)?"+cs+"(\\s+|$)"); request = true; b = b.replace(rcs, ""); b += (window.postMessage && request ? " " : " no-") + cs; }());


  • Del - выделяет текст, перечеркивая его. Очень полезно, когда надо отметить текст, удаленный из новой версии документа. Применение этого тега позволяет отслеживать изменения, которые были сделаны в тексте.
  • До сих пор не было обновлений блога
  • Ins - выделяет текст, подчеркивая его. Показывает тем самым, что этот фрагмент текста был вставлен после опубликования документа.
  • До сих пор не было обновлений блога, но теперь этот недостаток будет исправлен
  • 1 элемент маркированного списка
  • 2 элемент маркированного списка
  • 3 элемент маркированного списка
  • Представленные выше теги логического и физического форматирования часто не встречаются при написании html кода, однако знание о них необходимо хотя бы для выяснения их роли в современном продвижении сайтов. Далее рассмотрим еще два тега форматирования текста html, которые играют не последнюю роль.

    Как вставить цитату посредством blockquote и выделить текстовый фрагмент с помощью pre

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


    Тег blockquote является парным и может включать в себя как блочные (например теги абзацев p), так и строчные элементы.

    Абзац текста, заключенный в тег p

    Абзац текста, заключенный в тег форматирования blockquote.

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

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

    HTML форматирование текста
     с помощью тега pre
     тег pre - парный и блочный элемент
    

    Точно в таком же виде текст отобразится в браузере:

    HTML форматирование текста с помощью тега pre тег pre - парный и блочный элемент

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

    Желаете получать своевременно свежие актуальные и полезные статьи? Тогда можете подписаться:

    Еще статьи по данной теме:

    34 отзыва

    1. Сергей

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

      Прежде всего, заголовки, точнее, их непосредственное использование. Я встречал два мнения.
      1. в коде должно быть название сайта, - заголовок статьи, - подзаголовки. Тег на странице должен быть единственным.
      2. - заголовок статьи и название сайта, - подзаголовки.

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

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

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

    2. Сергей

      прошу прощения, забыл, что движок вырезает теги:

      1. в коде h1 должно быть название сайта, h2 - заголовок статьи, h3 - подзаголовки. Тег на странице должен быть единственным.
      2. - h1 заголовок статьи и название сайта, h2 - подзаголовки.

    3. Василий

      Игорь, я никак не могу понять, где находиться тег H1. У вас и у меня в шапке стоит изображение. У вас там есть этот тег. При анализе моего сайта одним сервисом, мне в результате сказали, что у меня вообще на сайте нет тега H1. Как его вообще вставить в шапку сайта?

    4. Игорь

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

    5. Игорь

      Точно так. 🙂

    6. Игорь

      Василий, я прописывал заголовок в функциях темы прямо в админке. Внешний вид - Темы, для моей темы там есть множество опций, с помощью которых можно отредактировать ту или иную область моей темы, в том числе вписать заголовок. А Вы, как я понимаю поменяли исходную шапку своей темы, не так ли? Причем поменяли полностью изображение, а на изображении уже было название Вашего ресурса. Вы же не прописывали h1 в шапку, откуда ему взяться. Посмотрите внимательнее в функциях вашей темы, может там тоже есть похожая функция. Там, где «Управление темами» посмотрите, должны быть ссылки, что-то типа «Настроить», «Опции темы» и уже там уже поищите ссылку на подобии «Название и описание сайта». В моей теме, например, очень многое можно изменить, даже цвета сайта и шапку, загрузив новое изображение. Отпишитесь в комментариях, как получилось.

    7. Василий

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

    8. Игорь

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

    9. Василий

      В стандартной теме все есть. В настройках самой темы таких опций нет. Через
      Админ-панель -> Темы -> Настройка и описание сайта. Там я написал Название сайта и
      Краткое описание. Но тега h1 все равно нет. На тестовом сайте поставил заново эту
      тему, вот адрес http://komp.vellisa.ru/. Можно зайти через Яндекс, так как он закрыт
      от индексации. Раньше когда писал в Админ-панели название сайта, то оно добавлялось в шапку, но выглядело не красиво. Сейчас надписи почему-то не добавляются.

    10. Игорь

      Василий, я исследовал Вашу проблему. Дело в том, что согласно стилям css Вашей темы, название, заключенное в теги h1, просто не помещается в шапку. Попробуйте сделать следующее. Если Вы работаете с браузером Chrome, подведите курсор к изображению в шапке и кликните правой кнопкой мыши, из контекстного меню выберите «Просмотр кода элемента». В нижней половине окна увидите код html именно этого изображения, это строчка будет выделена темно-синим цветом. Эта ссылка на изображение шапки Вашей темы. Справа будут представлены стили именно для этого элемента. Кликните правой кнопкой мыши по этой ссылке и из контекстного меню выберите «Delete node». Видите, элемент удалился? Надеюсь, Вы понимаете, что после перезагрузки браузера все станет на свои места, так что экспериментировать можно сколько угодно. Этот элемент у Вас заключен в контейнер <_div class="span-11">. После удаления ссылки на изображения останется ссылка на главную страницу. В качестве анкора этой ссылки пропишите любое слово, заключенное в теги h1, например, World. То есть выглядеть это будет примерно так: заключенная в контейнер span-11 ссылка на главную <_a_href vellisa.ru_=""><_h1>World<_><_>. И тут же увидите это слово на месте изображения (которое, кстати и не нужно, поскольку там название темы, как я понимаю. Попробуйте вместо этого изображения загрузить картинку меньшего размера и снова попробуйте через админку прописать название сайта. Если не получится, будем действовать более предметно.

    11. Василий

      Игорь, спасибо большое за помощь. Удалил я элемент, дальше как вставить не очень понятно. Методом тыка вставлял это слово, не совсем получилось, но слово было. Изменения названия сайта не получается написать, изменяю, но в шапке ничего не отображается.
      А вообще возможно сделать так, чтобы у меня на основном сайте осталась изображение какое там сейчас и как-то добавить теги h1?

    12. Игорь

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

    13. Василий

      Спасибо Игорь. Конечно я подожду, это не срочное дело.

    14. Евгений

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

    15. Игорь

      Евгений, влияния на продвижение атрибута align действительно пока нет, а вот что касается валидности, то Вы погорячились. Он не рекомендуется к использованию не только в соответствии со спецификацией html 5, но и даже в соответствии с html 4.01. Вместо этого атрибута рекомендуется использование аналогичного свойства text-align, которое прописывается в css.

    16. Игорь

      Василий, извините, что долго пришлось ждать. Только-только немного разгрузился и вот решил Вашу проблему. Следуйте моим дальнейшим инструкциям, чтобы заголовок H1 появился в шапке. Для начала необходимо отредактировать Ваше изображение в шапке. Оно у Вас находится здесь: http://vellisa.ru/wp-content/themes/cooltext643525798.png , то есть в папке с текущей темой. Загрузите его на компьютер с помощью , например. Откройте его в любом графическом редакторе, даже простая программа paint подойдет. Там сотрите простым ластиком надпись "vellisa.ru". Если этого не сделать, то будет двойная надпись, либо надпись с h1 наложится на нее, будет выглядеть некрасиво. Затем откройте с помощью notepad++ файл header.php, который отвечает за шапку, найдите там строчку.

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

    Что такое H1?

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

    сам заголовок

    , цифра как раз и обозначает уровень заголовка.

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

    Условие 1. Ключевые слова в заголовках

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

    Размещая ключевые слова, делайте это аккуратно: не злоупотребляйте ключами и не составляйте спамные заголовки (например, купить квартиру Москва, купить сумка холодильник, купить мотоцикл Красноярск цена, моя твоя не понимать и т. д. ). Сохраняйте красоту фразы и ее логичность. В великом и могучем русском языке слова спрягаются и склоняются, а роботы сейчас понимают смыл, разбираются в языке не хуже нас с вами! И не частите - спам очевиден всем, а так и до Баден-Бадена рукой подать, ну и не забывайте про Панду от Google.

    Пример, где количество ключей зашкаливает, перебор.

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

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

    Помните, что текст создается не только для поисковых машин, но и для людей. И вообще роботам нравятся человечные, простые и понятные тексты. Если в заголовке ключевые слова органично встанут в начало предложения, то сработает чуточку лучше. Т.е. с точки зрения оптимизации страницы под ключевое слово "гостиницы Москвы" лучше отработает заголовок "Гостиницы Москвы - официальные сайты, обзоры, фото", чем "Обзоры, фото и официальные сайты гостиниц Москвы".

    Условие 2. Теги

    -

    Размещая тексты на сайте, не забудьте правильно расставить теги. Теги для заголовков текста определяются следующим HTML-кодом:

    -

    . По нашим наблюдениям, вполне хватает двух тегов —

    -

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

    Поисковики также учитывают размерность и значимость тегов

    -

    . При верстке стоит обратить внимание, чтобы заголовки визуально выделялись из общего текста.

    Ссылки в заголовках использовать не стоит, особенно в

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

    Допустимо ссылаться с заголовков уровня

    и ниже, но тоже если это оправдано и логично.

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

    -

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

      Наводим порядок. Теги

      -

      расставляются по принципу иерархии: тег

      важнее тега

      . На деле это выглядит вот так:

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

      Кроме того, тег

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

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

      А если у вас возникнут сложности - обращайтесь к нашим специалистам , мы готовы проверить, правильно ли прописаны заголовки у вашего сайта, корректно прописать в случае ошибок и ответить на любые вопросы. Составление заголовков для 1 страницы (+подбор 3-х релевантных ключей) - от 450 рублей.

    Здравствуйте, друзья! Рады приветствовать вас на блоге Андрея с Дашей – Thebizfromscratch. Что-то давно мы ничего не писали о SEO и в этой статье хотим наверстать упущенное, ведь тема на сегодня – Влияние заголовков H1, H2 – H6 на продвижение сайта. Мы расскажем, по каким правилам и принципам прописываем заголовки на своём блоге и надеемся, что наш опыт окажется для вас полезным.

    Как правильно расставлять мета-теги H1, H2…H6

    Итак, оформляя публикацию, мы прописываем мета-теги в следующем порядке:

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

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

    1. H3, H4,H5, H6

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

    А чтобы упомянутая выше информация правильно была понята, давайте рассмотрим пример! Пусть вы написали статью под поисковой запрос – «Как сделать сайт». Эту фразу нужно прописать в поле Title и повторить минимум 2 раза без изменений в самом тексте. Или как делают многие – повторяют поисковой запрос 1 раз на 1000 символов.

    Если дальше вы нуждаетесь в выделении структуры, то смело используйте H2, содержащий низкочастотный запрос. Опять же в рамках примера – «Как качественно сделать сайт на движке WordPress». Остальные мета — теги пишите без ключей.

    1. Не проставляйте в заголовках ссылки на другие продвигаемые страницы. Код ссылки будет расцениваться поисковыми машинами, как ключевые слова, и только навредит ранжированию.
    2. Не располагайте заголовки низшего порядка над более значимыми. Первым должен следовать H1, затем H2 и далее по нарастающей. Должна вырисовываться древовидная структура.
    3. Рекомендуется использовать H1 единожды, H2 не более 3-х раз, а H3-H6 сколько угодно (только без ключей и только, если это необходимо).

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


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

    Что такое заголовки H1 и H2?

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

    Тексты на сайтах также должны иметь заголовки. Этому существует как минимум 2 причины:

    1. Заголовки структурируют текст, делают его более удобным для чтения. Сплошной текст (часто его называют «простыней») труден для восприятия, читать его не хочется. А так как поведенческие факторы (совокупность действий посетителей на сайте) сегодня учитываются поисковыми системами, вы заинтересованы в том, чтобы пользователь прочел текст на вашем ресурсе, а не закрыл страницу, испугавшись «простыни».

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

    Теперь вы понимаете, что пренебрегать использованием заголовков в текстах на страницах сайта не стоит? Тогда следуем дальше!

    Что же обозначают термины H1 и H2? Нам придется немного затронуть вопросы, касающиеся html-верстки. Н1 и H2 (а, точнее,

    и

    ) - html теги, которые показывают важность текста, следующего после них. Их еще называют тегами акцентирования. В html-документе это выглядит так:

    На веб-странице такие заголовки по умолчанию имеют разное форматирование:

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

    Что нужно знать для грамотной расстановки заголовков H1 и H2?

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

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

    Основные правила использования заголовка H1

      Заголовок H1 должен быть кратким, но емким. Важное условие - естественное вхождение в него ключевых слов. Приведем пример. Допустим, вы оптимизируете страницу, на которой представлен каталог женской обуви. Для продвижения данной страницы выбраны следующие запросы (о том, что такое поисковые запросы, вы можете прочесть в нашем материале «Понимай своего сео-специалиста» ): «женская обувь» (частотность - 3896), «женская обувь в Минске» (частотность - 490), «купить женскую обувь» (частотность - 384), «обувь для женщин» (частотность - 207), «женская обувь каталог цены» (частотность - 318). Для текста на данной странице логичнее всего использовать заголовок H1 «Женская обувь», так как он является наиболее общим, но в то же время описывает содержание контента, а также может быть конкретизирован заголовками более никого уровня.

      Заголовок H1 должен встречаться на странице только один раз.

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

      Заголовок H1 должен располагаться выше заголовков других уровней (перед ним не допускается ставить, например, заголовок H2).

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

    Примеры составления заголовков H2

    Каким образом составляются заголовки H2? Их в тексте может быть несколько. Как правило, они конкретизируют заголовок H1 и структурируют весь текст. Вернемся к нашему примеру со страницей, на которой представлена женская обувь. Для данной страницы можно написать продающий текст, в котором будут описаны преимущества моделей, предлагаемых покупательницам, и представлена таблица размеров. Также на странице пользователь сможет найти каталог обуви с фото и ценами. При этом заголовки в тексте могут быть такими:

    Если вы вспомните поисковые запросы, которые мы используем для продвижения нашей страницы в данном примере, то поймете, что в заголовки H2 мы включаем расширенные запросы, которые имеют более низкую частотность. Они могут быть представлены в непрямом вхождении (их можно склонять, «разбавлять» другими словами). А главное - они конкретизируют наш заголовок H1 и сигнализируют поисковой системе о том, что текст, идущий после них, действительно отвечают поисковым запросам, прописанным в заголовке страницы (Title).

    Наиболее распространенные ошибки использования заголовков H1 и H2

    При использовании заголовков для оптимизации текстов постарайтесь избежать следующих ошибок:

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

      и

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

      и

      заключены, например, названия блоков. Допустим, такие как «Популярные товары», «Последние новости», «Мы в социальных сетях» и проч. Такой прием вводит в заблуждение поисковые системы и не приносит ничего хорошего. Поэтому при проведении сео-аудита сайта специалист обязательно проверяет, «по назначению» ли используются заголовки. Запомните важное правило - H1 и H2 должны применяться лишь для структурирования текста!

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

      Помещение в заголовки гиперссылок.

      Присутствие на странице двух и более заголовков H1. Мы помним, что это недопустимо! Наш девиз: «Одна страница - один заголовок H1»!

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

    . Проверьте, нет ли такой недоработки на вашем сайте - изучите структуру документа, нажав клавишу F12. Ваш заголовок заключен в теги

    ? Значит, все отлично!

    О важности правильной расстановки заголовков текста следует напомнить и разработчику, мало знакомому с seo, при верстке уникального сайта.

    Зачастую начинающих веб-мастеров мучает вопрос, почему одни сайты ранжируются выше и обходят конкурентов в поисковой выдаче. Причиной этого могут быть неправильно расставленные теги 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://i1.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> <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> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </article> </div> </div> <div id="sidebar"> <aside> <div class="inner"> <div> <div class="xyz_wrapper"> <div> </div> </div> <div> </div> </div> </div> </aside> </div> </div> </div> <script type="text/javascript" src="/assets/like.js"></script> </main> <div id="slide-menu"> <div id="slide-menu"> <div class="menu-content"> <div class="slide-menu-close" id="slide-menu-close" title="Закрыть"></div> <dblock></dblock> <ul> <li><span class="link" onclick="go('/category/beeline/')"><i class=""></i> Beeline</span></li> <li><span class="link" onclick="go('/category/internet/')"><i class=""></i> Интернет</span></li> <li><span class="link" onclick="go('/category/tele2/')"><i class=""></i> Tele2</span></li> <li><span class="link" onclick="go('/category/useful/')"><i class=""></i> Полезное</span></li> <li><span class="link" onclick="go('/category/ip-telephony/')"><i class=""></i> IP-Телефония</span></li> <li><span class="link" onclick="go('/category/iota/')"><i class=""></i> Йота</span></li> <li><span class="link" onclick="go('/category/mts/')"><i class=""></i> Mts</span></li> <li><span class="link" onclick="go('/category/megafon/')"><i class=""></i> Megafon</span></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="">Реклама</a></li> <li><a href="">О сайте</a></li> </ul> </div> </div> </div> <div id="slide-search"> <div class="search-content"> <div class="search-form-close" id="slide-search-close" title="Закрыть"></div> <div class="search-form-header"><img src="/assets/vsadu-icon-gray.svg" alt="Портал о мобильных операторах" onerror="this.src='/ui/vsadu-icon-gray.png'" style="height: 45px" loading=lazy> Поиск</div> <form style="position: relative" action="/search" method="get" autocomplete="off"> <input type="text" class="m-seach-field" name="q" placeholder="поиск по сайту" value="" /> <div> <dblock></dblock> </div> <div class="desktop_screen" style="position: absolute;right: 9px;top: 9px;"> <input type="submit" class="button yellow big" value="Найти" /> </div> </form> </div> </div> <script type="text/javascript" src="/assets/slide-menu.3.js"></script> <script type="text/javascript" src="/assets/sticky.min.js"></script> <script type="text/javascript" src="/assets/jquery.lazyload.min.js"></script> <script type="text/javascript" src="/assets/jquery-ui.min.js"></script> <script type="text/javascript" src="/assets/JsHttpRequest.js"></script> <script type="text/javascript" src="/assets/Request.js"></script> <div class="white_section"> <div> <div class="desktop_screen" style="padding: 15px 0;background:#f6f8f2;"> <dblock></dblock> </div> </div> </div> <footer> <div class="footer"> <dblock></dblock> <div class="silver_section"> <div class="content"><div class="inner"> <div class="section group" style="text-align: center"> <div class="col span_1_of_3"> <div style="font-size: 16px; vertical-align: middle; line-height: 45px;"><i class="fa fa-envelope-o"></i> cena5.ru - Портал о мобильных операторах</div> </div> <div class="col span_1_of_3"> </div> <div class="col span_1_of_3"> <a target="_blank" href="https://connect.ok.ru/offer?url=https://cena5.ru/kak-ispolzovat-v-prodvizhenii-teg-h1-anatomiya-zagolovkov-h1-h6-dlya.html"><img class="soc" alt="Портал о мобильных операторах Одноклассники" src="/assets/ok.svg" onerror="this.src='/ui/icons/ok.png'" loading=lazy></a> <a target="_blank" href="https://vk.com/share.php?url=https://cena5.ru/kak-ispolzovat-v-prodvizhenii-teg-h1-anatomiya-zagolovkov-h1-h6-dlya.html"><img class="soc" alt="Портал о мобильных операторах ВКонтакте" src="/assets/vk.svg" onerror="this.src='/ui/icons/vk.png'" loading=lazy></a> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://cena5.ru/kak-ispolzovat-v-prodvizhenii-teg-h1-anatomiya-zagolovkov-h1-h6-dlya.html"><img class="soc" alt="Портал о мобильных операторах Facebook" src="/assets/fb.svg" onerror="this.src='/ui/icons/fb.png'" loading=lazy></a> <a target="_blank" href="https://www.twitter.com/share?url=https://cena5.ru/kak-ispolzovat-v-prodvizhenii-teg-h1-anatomiya-zagolovkov-h1-h6-dlya.html"><img class="soc" alt="Портал о мобильных операторах Twitter" src="/assets/tw.svg" onerror="this.src='/ui/icons/tw.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Google+" src="/assets/g+.svg" onerror="this.src='/ui/icons/g+.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Pinterest" src="/assets/pin.svg" onerror="this.src='/ui/icons/pin.png'" loading=lazy></a> <div class="soc-caption">Портал о мобильных операторах в социальных сетях</div> </div> </div> </div></div> </div> <div class="content desktop_screen" style="overflow: inherit; margin-top: 20px"><div class="inner"> <div class="section group"> <div class="col span_2_of_5"> <div class="share-widget"> <script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="https://yastatic.net/share2/share.js" async="async"></script> <div class="ya-share2" data-services="collections,vkontakte,gplus,odnoklassniki,facebook,moimir,twitter,pinterest,lj,viber,whatsapp,pocket" data-url="https://cena5.ru" data-counter="true" data-limit="6"></div> </div> </div> <div class="col span_3_of_5" style="text-align: center;"> <a class="section_link" href="/feedback.html">Контакты</a> <a class="section_link" href="" style="color: #ff4500 !important;">Реклама</a> <a class="section_link" href="">Вакансии</a> <script> document.write('<a class="section_link" href="mailto:info' + '@cena5.ru">Написать нам</a>') </script> </div> </div> </div> </div> <dblock></dblock> <div class="content"> <div class="inner"> <p style="margin: 20px 0">Copyright © «cena5.ru» 2024 Копирование и видоизменение материалов сайта возможно только после письменного согласия правообладателей. <br /> Статьи защищены законом об авторских и смежных правах, при цитирование материалов проекта «cena5.ru» <span style="text-decoration: underline">прямая открытая ссылка</span> на <strong>cena5.ru</strong> обязательна. <br /> Все права защищены.</p> <dblock></dblock> </div> </div> </div> </footer> <script src="/assets/init.3.js"></script> <div class="push-popup"> <img src="/assets/vsadu-icon.png" style="float: left; margin-right: 10px; margin-bottom: 70px" / loading=lazy> Мы можем оповещать вас о новых статьях,<br /> чтобы вы всегда были в курсе самого интересного. <br /><br /> <button class="button blue uppercase push-button" style="margin-bottom: 10px">Продолжить</button> <button class="button blue-text uppercase push-cancel" style="margin-bottom: 10px">Нет, спасибо</button> </div> <script src="/assets/init.1.js"></script> <div id="p-b"> </div> <style> #yinfo-badge .yinfo-links, #yinfo-badge .yinfo-report { display: none !important } ::shadow .yinfo-links, ::shadow .yinfo-report { display: none !important } </style> <div class="page-top-button wide_desktop_screen hidden"> <div class="page-top-sec"> <a href="/" title="Главная Портал о мобильных операторах"><i class="fa fa-home gray" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a href="" title="О сайте"><i class="fa fa-calendar green" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a title="Связаться с нами" href="/feedback.html"><i class="fa fa fa-commenting-o" style="font-size: 32px; color:#ff4500"></i></a> </div> </div> </body> </html>