Грамотный подбор и расстановка заголовков 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
(h сокращение от англ. слова heading – заголовок) и их влияние на оптимизацию сайта в целом. Если теги расставлены неверно, поисковым системам трудно получать информацию о размещенных на вашем сайте статьях и ключевых словах, которые они содержат. Теги дают возможность выделить заголовки и сделать Вашу статью более удобной для прочтения. Кроме того они обеспечивают преимущества вашего сайта в системе ранжирования, упорядочивая html код страницы.
Как определить, что Ваш сайт находится под фильтрами Google? Подробнее .
Заголовок Вашего сайта обозначает тег h1
. Он дает возможность понять поисковой системе название онлайн-ресурса. Например, сайт об аренде серверов. В главном названии будет выводиться именно данное название при поиске в системе. Не стоит путать h1 с тегом
(заголовком страницы), ведь <title> пишется в шапке страницы между <head></head>, в то время, когда h1-h6 указывают в «теле» страницы и заключают между тегов <body></body>.
</p>
<p><b><i>Как правильно составить главный заголовок h1?
</i>
</b></p>
<ul><li><span>обязательное использование ключевых слов для продвижения;
</span></li>
<li><span>h1 используют один раз на одной странице, если размещать больше ПС может воспринять данный факт как переоптимизацию;
</span></li>
<li><span>будет достаточно нескольких слов, не нужно помещать в данный тег все ключевики страницы;
</span></li>
<li><span>заголовок должен быть читабельным;
</span></li>
<li><span>мета тег h1 должен содержать только текст;
</span></li>
<li><span>h1 должен отвечать тематике, которая указана в title данной страницы;
</span></li>
<li><span>не перечисляйте ключевые фразы через запятую, это усугубляет релевантность;
</span></li>
<li><span>делайте заголовок уникальным и тематическим, не делайте его копией Title;
</span></li>
<li><span>каждая страница должна содержать уникальные h1-h6, пытайтесь как можно качественней избегать любых повторений.
</span></li>
</ul><p>Для более качественного и профессионального продвижения вам понадобится аудит сайта. Как сделать самостоятельный аудит своего сайта? Об этом подробнее в .</p>
<p><b><i>Тег h2
</i>
</b><span>в зависимости от размера и содержимого страницы сайта можно использовать пару раз и он показывает подзаголовок h1. Значение данного тега несколько меньше чем h1, но его часто используют в качестве описания страницы. Тег h2 используют в качестве заголовка второго уровня, ним выделяют подзаголовки на страницы сайта. Но стоит отметить, что иногда специалисты по продвижению настоятельно рекомендуют использовать только один тег h2
</p>
<p><b><i>Тег h3
</i>
</b><span> также помогает сайту подняться по запросам в поисковой системе. В большинстве случаев его используют непосредственно в статье в качестве подзаголовков (3-5 штук в статье). Он придает значения ключевым словам.
</p>
<p><b><i>Теги h4, h5, h6
</i>
</b><span> не имеют весомого значения и влияния. На практике они вовсе редко используются. Текст, который оформлен данными тегами, будет ранжируваться где-то чуть ниже, чем текст, который выделен жирным шрифтом (тегом strong). Данные теги предназначены для мелких элементов на странице. Их обычно отделяют от остального текста. По сравнению с h1 их можно размещать на странице по несколько раз.
</p>
<p><b><i>Правила написания текста заголовков h1,h2,h3,…,h6
</i>
</b></p>
<p>Из чего должны состоять заголовки h1-h6:
</p>
<ol><li><span>прямое вхождение ключевого слова в заголовке, которое повысит релевантный запрос в поисковой выдачи;
</span></li>
<li><span>уникальный заголовок по отношению других страниц сайта, так как одинаковые заголовки могут не учитываться ПС;
</span></li>
<li><span>если заголовок находится близко к html-коду, то его значение относительно других элементов страницы значительно увеличивается;
</span></li>
<li><span>ключевое слово должно быть как можно ближе к началу заголовка;
</span></li>
<li><span>длина заголовка не должна превышать 60 символов, так как длинный заголовок не будет воспринят поисковиком;
</span></li>
<li><span>исключить из заголовка грамматические ошибки;
</span></li>
<li><span>заголовки проверяются на переоптимизацию, поэтому не стоит помещать как можно больше ключевых слов в один заголовок.
</span></li>
</ol><p><b><i>Что писать и как правильно заполнять. Практические советы.
</i>
</b></p>
<p>Успешность оптимизации сайта во многом зависит от того, как прописаны теги. Поэтому следует придерживаться следующих правил написания тегов:
</p>
<ul><li><span>соблюдать иерархию тегов, то есть h1 должен быть выше остальных, другие заголовки по порядку уровней;
</span></li>
<li><span>чем больше уровень тем должен быть больше шрифт заголовка, то есть придерживаться градации шрифтов;
</span></li>
<li><span>отказаться от всего лишнего и ненужного в заголовках – акцентирующих тегов и ссылок, только текст;
</span></li>
<li><span>не нужно злоупотреблять h1,h2,h3,…,h6. Огромное количество важных элементов на странице воспринимается поисковыми роботами как переспам.
</span></li>
<li><span>в качестве заголовка может быть даже картинка, например, с логотипом, которую соответствующим образом оптимизируют.
</span></li>
</ul><p>Важно отметить, что наличие на страницы сайта всех уровней заголовков не обязательное условие. В большинстве случаев вполне достаточно h1, h2, h3, а применение остальных может и навредить, если ними выделять и вовсе неважные элементы текста страницы.
</p>
<p>Надеемся наши советы помогли Вам разобраться с особенностями тегов h1, h2, h3,…, h6 и в их роли в правильном структурировании контента на сайте. Если возникнут дополнительные вопросы, обращайтесь! Также рекомендуем статью ““.
</p>
<p>Чтобы ваш сайт не выглядел спамным в глазах поисковой системы, придерживайтесь нескольких , которые касаются написания тегов и не только.
</p>
<p>СЕО не работает? В чем может скрываться причина. Об этом в следующей на нашем блоге.<br></p>
<p>Компания <b><i>Hyper
Host™
</i>
</b> – только и .
</p>
<p>22023 раз(а)
<span>5 Сегодня просмотрено раз(а)
</p>
<h2>SEO разметка текста.. или семантическая верстка сайта.</h2>
<p>Семантическая верстка сайта - за этим страшным определением скрывается одна простая истина: сайт должен быть не просто сверстан, а свёрстан логично! Так что можно сказать примерно так: семантическая верстка это - логичная верстка.</p>
<p>Для того что бы Вам было понятнее о чем идёт речь приведу несколько примеров где логика отсутствует..</p>
<p>Итак, плохие примеры:</p>
<ul><li>Использование заголовков <b><h1> - <h6>
</b> лишь с той целью чтобы увеличить или уменьшить размер буковок..</li><li>Неуместное использование тегов логического форматирования , например, вместо текста <b><address>г. Самара</address>
</b> просто какой то текст, который никоем образом к адресу не относится.. например: <b><address>Установка окон</address>
</b>.</li><li>Использование тегов для формирования списков <b><ul> <ol> <li>
</b> для простой декорации текста или например для создания отступов в тексте.. и наоборот формирование некого списка, перечня например того же меню сайта с помощью других тегов.</li><li>И даже использование таблицы в качестве каркаса сайта (табличная вёрстка) вместо того чтобы использовать таблицу по её прямому назначению, а именно для вывода данных в табличной форме.. расписания движения электричек например.. это тоже НЕ семантическая верстка сайта.</li>
</ul><p>Много всяких примеров приводить можно.. суть же одна: семантическая верстка - эта верстка, при которой каждый тег на странице работает по своему прямому назначению и никак иначе.</p>
<p>Думаю сейчас многие испугались "ааа.. у меня сайт таблицей свёрстан!", "а у меня меню сайта не является списком.." не пугайтесь сильно! конечно к "правильному" построению сайта нужно стремиться, но если по-другому никак не получается то можно чем то и пренебречь, однако некоторые вещи всё же лучше соблюдать!</p>
<p>Заострим внимание на правильной разметке текста, так как это наиболее важно для оптимизации сайта под поисковые системы..</p>
<p>Многие начинающие веб-мастера думают, что заголовки <b><h1> - <h6>
</b> это всего лишь способ выделить текст размером, сделать его крупнее - это не так!! На самом деле теги <b><h1> - <h6>
</b> во-первых выделяют именно <b>заголовки
</b> в тексте, а во вторых выделяют их по степени "важности" например заголовок <b><h1>
</b><b>Как создать сайт?
</b><b></h1>
</b> в глазах поисковых систем куда более важен чем заголовок <b><h6>
</b><b>Как создать сайт?
</b><b></h6>
</b> и если бы это были заголовки двух разных страниц то при прочих равных условиях поисковая машина по запросу пользователя <b>"Как создать сайт?"
</b> выдаст в результатах поиска на первом месте ту страницу, в которой используется заголовок первого уровня <b><h1>
</b>.</p>
<p>Однако не стоит хвататься переделывать все заголовки на Вашем сайте с <b><h2>,<h3>..<h6>
</b> в <b><h1>
</b> ни к чему хорошему в плане оптимизации это не приведёт! В идеале на странице должен присутствовать всего один заголовок первого уровня который как бы содержит в себе два-три заголовка второго уровня в которых в свою очередь "вложены" заголовки рангом поменьше и так далее.. структура документа должна иметь примерно такой вид:</p>
<p>То есть заголовки должны быть, как бы вложены друг в друга по степени важности и иметь древовидный вид. Сам же текст желательно разбить на параграфы с помощью тега <b><p>
</b> - где текст каждого абзаца несет в себе одну логическую часть текста.</p>
<p>Такая разметка текста легко "усваивается" поисковыми системами и другими программами работающими с HTML документами, например, позволяет выхватить один из параграфов для описания сайта в результатах поиска, не ломая голову где начинается и где заканчивается определённая логическая часть текста или учитывая уровни заголовка автоматически составить содержание документа.</p>
<p>Так как текст в заголовках <b><h1>- <h6>
</b> имеет куда более большее значение для поисковых систем, да и просто для человека просматривающего страницу, нежели чем просто текст то их следует наполнять ключевыми словами!</p>
<p>Должны ли H1 и TITLE
совпадать или нужно их делать разными? Давний вопрос, который обязательно возникает на каждой встрече, где есть сеошники. Откуда он появился сказать сложно. Возможно, из несоответствия рекомендаций поисковых систем и примеров в ТОП10.</p>
<p>Доводы за разные теги тайтла и H1: мол, поисковик “подумает”, что мы хотим усилить двойным употреблением значение ключевого слова, за что обязательно накажет 🙂<br>
Доводы за одинаковые теги: цитата в помощи Яндекса для вебмастеров.</p>
<blockquote>
<p>Чтобы робот, анализирующий ваш сайт, смог правильно выделить наиболее важные разделы и ключевые страницы, нужно чтобы… текст в теге TITLE
для ключевых страниц совпадал с ее названием (с заголовком страницы, выделенным, например, тегом H1) и с текстами ссылок, указывающих на эту страницу.</p>
</blockquote>
<p>Как же на самом деле, делать их одинаковыми или разными? По большому счету - без разницы. Но стоит учесть несколько моментов.</p>
<h2>— H1 и TITLE
должны пересекаться</h2>
<p>Если тайтл об одном, а H1 о другом, то поиску сложней определить, каким именно ключевым словам релевантна страница, да и пользователи будут в затруднении. Также эти участки кода помогают поисковикам формировать специальные элементы в сниппете, типа хлебных крошек или быстрых ссылок. Другими словами, не нужно делать TITLE
и H1 совсем разными. Посмотрим несколько примеров (просто в качестве демонстрации, без предварительного анализа семантики).</p>
<p>Сайт представляет из себя салон итальянской мебели в Москве. Основные ключевые запросы: салон итальянской мебели, итальянская мебель…<br><b>TITLE
:
</b> Салон итальянской мебели в Москве. Купить мебель из Италии | Название-Салона</p>
<p><b>H1:
</b> Добро пожаловать<br>
Неоптимальный вариант, так как в H1 вообще нет продвигаемых ключевых слов. Приветствие можно написать в тексте.</p>
<p><b>H1:
</b> Эксклюзивная мебель из Италии<br>
Уже получше, так как теги пересекаются по ключу “мебель из италии”. Но его может не быть в приоритетных запросах.</p>
<p><b>H1:
</b> Салон итальянской мебели Название-Салона<br>
Нормальный заголовок для основного запроса, ничего лишнего.</p>
<p>Как видим, здесь нет смысла делать полностью одинаковыми H1 и TITLE
, но они должны все же пересекаться.</p>
<p><img src='https://i2.wp.com/devaka.ru/wp-content/uploads/2016/02/2224t.png' width="100%" loading=lazy></p>
<h2>— H1 и TITLE
виден пользователями на разных этапах взаимодействия с сайтом</h2>
<p>TITLE
пользователь чаще видит еще до перехода на сайт. H1 видит уже тогда, когда находится на странице. В связи с этим, H1 лучше делать коротким и максимально описывающим суть посадочной страницы, многое зависит от её предназначения. Что касается TITLE
, помимо содержания ключевых слов, он должен мотивировать пользователя на клик (переход). В противном случае можно оптимизировать текстовую релевантность, но не оптимизировать конверсию в клики и, соответственно, получать не весь трафик.</p>
<p>Например, раздел радиоуправляемых вертолетов на сайте.<br><b>H1:
</b> Радиоуправляемые вертолеты (логично)<br><b>TITLE
:
</b> Купить радиоуправляемые вертолеты с доставкой по Москве</p>
<p>Здесь слово “купить” призывает к действию, а “доставка по Москве” снимает ряд вопросов перед кликом.</p>
<p>Информационная тема: как плести браслеты из резинок<br><b>H1:
</b> Как плести браслеты из резиночек на станке<br><b>TITLE
:
</b> Браслеты из резиночек: пошаговые инструкции и схемы плетения с фото и видео</p>
<p>“Пошаговые инструкции и схемы” не только расширяют семантику, но и повышают вероятность клика на заголовок. Человек, который ищет “как плести” как раз подразумевает пошаговые инструкции с фото, но может не включать это в свой запрос.</p>
<h2>— TITLE
подтягивается в соцсети</h2>
<p>Если код дополнительно не настраивать, то при расшаривании пользователями страницы в соцсети, заголовок берется из тайтла. Если он спамный, то это препятствует как переходу из соцсетей, так и расшариванием в принципе. Если же будет просто коротким как и H1, то это тоже плохой вариант.</p>
<p>Этот пункт наиболее актуален для информационных и новостных проектов. Но некоторые из них только и работают на соцсети, поэтому брать пример с заголовков типа “Эта женщина больше не могла смотреть на себя в зеркало. И вот что она сделала…” не всегда корректно для SEO
. Просто при составлении тайтлов помните, что они могут попадать заголовками в соцсети.</p>
<h2>— TITLE
может содержать дополнительные ключевые фразы</h2>
<p>Чтобы продвигать страницу не только по выбранным среднечастотным фразам, но и по смежным, а также большому пулу низкочастотных фраз, в тайтл можно добавлять некоторые слова из сем.ядра. Соответственно, это будет отличать его от тега H1.</p>
<p>Например, у нас пул запросов: монтаж битумной черепицы, монтаж гибкой черепицы, инструкция по монтажу черепицы, технология монтажа черепицы, технология укладки битумной черепицы, укладка битумной черепицы, монтаж гибкой черепицы видео и др. и пр.</p>
<p><b>H1:
</b> Инструкция по монтажу гибкой битумной черепицы<br><b>TITLE
:
</b> Монтаж гибкой черепицы, технология укладки. Цена, видео</p>
<p>Здесь тайтл и H1 вовсе различаются, пересекаются лишь некоторыми словами (монтаж, битумная, черепица). Вставлять все слова из ядра в тайтл или в H1 нет смысла, это будет выглядеть спамным, а разделение слов по участкам кода (в том числе по другим заголовкам) - хорошая стратегия.</p>
<p>Всем-всем привет!<br> — это работа комплексная, требующая внимания к каждой мелочи. Даже неправильное использование заголовков (теги H1, H2, H3) на страницах сайта может мешать нормальному продвижению в поисковых системах. Сегодня мы как раз об этом и поговорим.</p>
<p>Все, что описано в вышеперечисленных уроках, пригодиться сегодня.</p>
<h2>Правила использования заголовков</h2>
<p>В мире SEO существуют некие правила использования тегов H1, H2, H3 и ниже, которые желательно бы соблюдать на всех страницах:</p>
<ul><li>На странице должен быть только один единственный заголовок первого уровня (H1);</li>
<li>Заголовок H1 не должен совпадать с Title страницы;</li>
<li>Заголовки H2, H3, H4 должны использоваться только в внутри статьи;</li>
<li>В заголовках должны использоваться только фразы, приносящие пользу, то есть, в тегах H1…H6 не должно быть бессмысленных фраз, типа: отзывы, подписаться, комментарии и т.п.;</li>
<li>Соблюдайте иерархию заголовков. Заголовок второго уровня должен быть ниже H1, заголовок третьего уровня должен быть ниже <b>первого
</b> H2. Если будет иначе, то поисковый робот, который видит только HTML-код, не правильно воспримет страницу, чего мы не хотим.</li>
</ul><p>Коротко об этих правилах я уже писал в уроке, посвященному . Обязательно прочитайте, там много полезного!</p>
<h2>Как понять правильно ли использованы заголовки?</h2>
<p>Вы знакомы с браузером Mozilla Firefox? Наверное, да. Так вот, этот браузер, благодаря одному плагину с хорошим функционалом, предоставляет шикарные возможности для анализа страниц. Название этому плагину — RDS bar. Скачать его можно по этой ссылке , но сделать это необходимо в Firefox, поэтому, если данный браузер у Вас не установлен, быстрее скачивайте его и устанавливайте.</p>
<p>RDS bar можно установить и на другие браузеры, но именно в Mozilla Firefox его функционал гораздо шире.</p>
<p>Прежде, чем мы перейдем к анализу страниц сайта, необходимо внести небольшие настройки в плагин:</p>
<img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/nastrojki-rds.png' height="131" width="255" loading=lazy><p>Теперь мы сможем спокойно посмотреть сколько тегов H1, H2, H3 находиться на странице, увидим лишние заголовки и будем знать, что нужно править. Увидеть все это великолепие можно, нажав на кнопку SEO-теги в RDS bar, которую только что активировали:<img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/seo-tegi.png' height="181" width="244" loading=lazy></p>
<p>Как только Вы нажмете на эту кнопку, перед Вашими глазами появится небольшое сообщение:<br><img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/meta-tegi-i-zagolovki.png' width="100%" loading=lazy></p>
<p>В этом сообщении представлены , заголовок H1 и другие. Как видите, на страницах моего блога с этим все в порядке, так как исправил этот косяк неделю назад, а вот на клиентском сайте с этим все гораздо хуже.</p>
<p>Перечислю ошибки:</p>
<ol><li>Дублирование между заголовками H2 и H5;</li>
<li>Нет заголовков третьего уровня;</li>
<li>В H4 находиться мусор.</li>
</ol><p>Работы предстоит много, поэтому продемонстрирую исправление ошибок на каком-нибудь одном примере. Попробую-ка изменить теги H5 на H3, чтобы соблюдалась иерархия заголовков.</p>
<h2>Как исправить ошибки?</h2>
<p>Для этого мне понадобятся файлы сайта (), Notepad++ и Mozilla Firefox.</p>
<ol><li>Чтобы знать, где именно находится проблемный тег и его стилевой класс, нужно воспользоваться встроенным инструментом браузера «Исследовать элемент»:<img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/issledovat-element.png' height="246" width="342" loading=lazy>Наведите курсор на определенный элемент, нажмите правой кнопкой мыши на него и выберите пункт «Исследовать элемент». В нижней части окна появится область, где можно увидеть и стилевой класс HTML-элемента и его стили CSS:<br><img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/kod-issledovat-element.png' align="center" width="100%" loading=lazy></li>
<li>Посмотрите стилевой класс нужного Вам элемента и скопируйте его, чтобы потом найти его в коде страницы. В моем случае класс заголовка H2 — page-box__title:Я хочу изменить уровень заголовка H5 на H3, так как в H5 перечисляются релевантные ключевые слова.</li>
<li>Далее необходимо найти в папке сайта элемент с этим классом, для этого воспользуемся встроенными функциями , а именно поиском по файлам. Откройте Notepad++, в верхнем меню найдите пункт «Поиск» и в выпадающем меню выберите «Найти в файлах»:<img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/najti-v-fajlah.png' height="248" width="367" loading=lazy></li>
<li>В поле «Найти» ввожу стилевой класс заголовка пятого уровня (page-box__title), а в поле «Папка» указываю путь до папки с сайтом:<br><img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/poisk-v-failah.png' width="100%" loading=lazy>После того, как я нажму на кнопку «Найти все», пойдет процесс поиска файла:<br><img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/process-poiska.png' width="100%" loading=lazy></li>
<li>В нижней части рабочего окна Notepad++ будут представлены результаты поиска, среди которых есть и тот самый заголовок пятого уровня (H5) с классом «page-box__title»:<br><img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/zagolovok-v-poiske.png' width="100%" loading=lazy>Чтобы перейти непосредственно к файлу в котором содержится данный заголовок, достаточно сделать двойной щелчок по результату поиска;</li>
<li>Далее я просто меняю теги <h5></h5> на теги <h3></h3>:Обязательно сохраняю файл;</li>
<li>Смотрим результат на сайте:<br><img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/zagolovki-na-saite.png' width="100%" loading=lazy>Смотрится не очень.</li>
<li>Чтобы заголовки выглядели нормально, необходимо внести в файл со стилям (style.css) изменения. Так как, приведенные в примере заголовки заключены в тег <a>, то скорее всего правило в style.css будет выглядеть так: .page-box__title > a (дочерний селектор). Поиск в Notepad++ нашел и это:<br><img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/style-zagolovka.png' width="100%" loading=lazy>В стилевое правило нужно добавить свойство font-size (размер шрифта) с нужным, на Ваш взгляд, значением. В моем случае, оптимальным размером шрифта будет 14 px:<br><img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/razmer-shrifta.png' width="100%" loading=lazy></li>
<li>Смотрим результат:<br><img src='https://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/rezultat-izmenenj.png' width="100%" loading=lazy>Как видите, заголовки стали отображаться нормально.</li>
</ol><p>Таким же образом работаем с другими заголовками. Как только закончите работу, не забудьте отправить изменения на сервер. Сделать это можно через FileZilla, о которой рассказывал</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/anatomiya-zagolovkov-h1-h6-dlya-oformleniya-i-strukturizacii-kontenta.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/anatomiya-zagolovkov-h1-h6-dlya-oformleniya-i-strukturizacii-kontenta.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/anatomiya-zagolovkov-h1-h6-dlya-oformleniya-i-strukturizacii-kontenta.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/anatomiya-zagolovkov-h1-h6-dlya-oformleniya-i-strukturizacii-kontenta.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>