Заголовки (теги h1, h2, h3) в HTML5 и SEO заблуждения. Заголовки (теги h1, h2, h3) в HTML5 и SEO заблуждения Правила написания тегов h1 h2 h3 h4

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

При слове «заголовок» вы могли подумать о теге - но нет, в этой статье речь пойдет о тегах <h1>…<h6>. </p> <p>Разница между этими тегами заключается в уровнях: <h1> - это заголовок первого уровня, <h2> - заголовок второго уровня и так далее. Чем выше уровень, тем более важным считается блок после заголовка; то есть тег <h6> будет наименее значимым заголовком из всех представленных. В свою очередь тег <h1> считается наиболее важным из всех этих тегов и вторым по значимости для SEO-продвижения (первый по значимости - тег <title>, который определяет заголовок документа). </p> <p>Эти теги используются для того, чтобы логично оформить содержание страницы, структурировать ее для того, чтобы текст был разбит на логические части, и материал более легко воспринимался читателями. </p> <p><b>Важное дополнение: </b> теги <h1>…<h6> не используются для выделения текста; если вам нужно выделить фразу жирным, используйте тег <strong>, а не <h6> (если стиль этого заголовка просто выделение жирным). </p> <h2>Как использовать заголовки?</h2> <p>Правило номер раз </span><span> - на странице должен быть </span><b>только один </b> тег <h1>. </p> <p>Правило номер два </span><span> - заголовок с тегом </span><b><h1> </b> должен быть <b>самым крупным </b><span>, в то время как остальные заголовки <h2>…<h6> должны быть меньше (размер меняется в зависимости от уровня, чем ниже уровень, то меньше размер заголовка):<br><img src='https://i2.wp.com/timeweb.com/media/default/0001/01/646a24a81bbb4399103014c3b4bef90af9db3efc.gif' width="100%" loading=lazy></p> <p>(если вы сейчас прочитали эти строки и поняли, что у вас на сайте сделано не так, то это уже повод внести некоторые корректировки в оформление сайта) </p> <p>Правило номер три </span><span> - структура страницы </span><b>обязательно </b> должна иметь <b>иерархию </b><span>. То есть вы не можете сначала использовать заголовок <h1>, а затем сразу <h4> или <h5> - после первого уровня идет второй уровень, а значит, после <h1> должен идти тег <h2> - и никак иначе. Тут дело не только в абстрактном «правильно», но в самом оформлении материала, который для адекватного восприятия должен поддаваться какой-то логике. </p> <p>Правило номер четыре </span><span> - теги заголовков </span><b>парные </b>: </p> <b><h1> </b>Название статьи <b></h1> </b> <p>Вступление.</p> <b><h2> </b><span>Заголовок статьи 1 </span><b></h2> </b> <span> <p>Часть статьи 1.</p> </span> <b> <h3> </b><span>Подзаголовок статьи 1 </span><b></h3> </b> <span> <p>Пункт 1 части 1.</p> </span> <b> <h3> </b><span>Подзаголовок статьи 2 </span><b></h3> </b> <span> <p>Пункт 2 части 1.</p> </span> <p>Советы ниже актуальны для заголовков всех уровней, будь то первый уровень <h1> или какой-то из уровней ниже. </p> <p>Заголовки должны: </p> <ul><li><span>выстраиваться в иерархическом порядке; </span></li> <li><span>не оканчиваться точкой; </span></li> <li><span>иметь смысл, передавать идею следующего за ним текста (а не просто для «пусть будет»); </span></li> <li><span>быть даже в небольших статьях, которые можно разделить на несколько частей; </span></li> <li><span>не иметь грамматических ошибок (наличие таковых может снизить релеватность заголовка). </span></li> </ul><p>Другие советы, которые можно дать при составлении заголовков: </p> <ul><li><span>не стоит злоупотреблять заголовками и делать на странице множество <h2>…<h6> - поисковые боты могут расценить это как переоптимизацию сайта либо спам; </span></li> <li><span>в заголовках должны быть прямые вхождения ключевых слов, так как это повысит релевантность страницы в отношении этого запроса; однако слишком большая плотность ключевых слов не пойдет в плюс - поисковые боты будут игнорировать подробные заголовки из-за переоптимизации; </span></li> <li><span>заголовки должны быть </span><b>уникальными </b><span> (повторяющиеся заголовки поисковые системы могут не учитывать); </span></li> <li><span>заголовок должен быть близок к началу документа (то есть к началу HTML-кода): чем выше заголовок, тем более высокое значение он имеет (по сравнению с другими элементами страницы); </span></li> <li><span>желательная длина заголовка - не более 60 символов; это связано с поисковыми системами, которые воспринимают определенное количество символов (и длинный заголовок могут обработать не полностью). </span></li> </ul><p>Отдельно можно сказать о </span><b>дизайне заголовков </b><span> - будет здорово, если все заголовки на странице будут отличаться от другого текста (даже если речь идет не о <h1>, а о <h5> или <h6>). Можно как-то стилистически выделять заголовки, например, ставить их на цветную плашку или выделять шрифтом. </p> <p>А подзаголовки можно нумеровать, при этом ставить цифры в виде картинок. И удобно, и красиво. </p> <h2>Как использовать тег <h1></h2> <p>Тег <h1> имеет свои отличия от других тегов, поэтому про него нужно поговорить отдельно. Тут можно дать следующие советы: </p> <ul><li><span>на странице должен быть только </span><b>один </b>тег <h1>; </li> <li><span>тег <h1> должен быть на </span><b> каждой </b> странице; </li> <li><span>тег <h1> должен отличаться от <title>, но не кардинально; </span></li> <li><span>тег <h1> не должен состоять только из ключевых слов, их лучше использовать в разбавленной форме; </span></li> <li><span>тег <h1> должен побуждать к чтению статьи, поэтому при его придумывании рекомендуется воспользоваться советами относительно «цепких» заголовков; </span></li> <li><span>не следует использовать знаки препинания. </span></li> </ul><h2>Как выглядит структура заголовков</h2> <p>Чтобы понять, какую структуру должна иметь страница, ориентируйтесь вот на этот план:<br><img src='https://i0.wp.com/timeweb.com/media/default/0001/01/6da73912335d6fd8f5a4e1756ff17f7f22e2fc2a.png' width="100%" loading=lazy></p> <h2>Частые ошибки</h2> <p>За правильной разметкой нужно особенно следить при использовании бесплатных CMS и отдельных шаблонов - в некоторых случаях <h1> и подзаголовки других уровней могут стоять совсем не там, где они должны быть (например, <h3> выделяет заголовки блоков). Это встречается в WordPress, поэтому если вы видите, что виджеты в сайдбаре имеют теги заголовка, измените их на другие (например, на ). </p> <p>Также иногда заголовки включают какие-то посторонние элементы вроде изображения или ссылки, и это негативно отражается на SEO. </p> <p>Другая типичная ошибка - наличие на странице нескольких тегов <h1>. Этот тег должен быть один и только один. </p> <p>Зачастую теги <h1>…<h6> могут быть неправильно оформлены в визуальном текстовом редакторе в панели администратора: их не закрывают, оставляют пустыми или включают туда очень много текста. Важно не только, </span><i>что </i><span> вы напишите в заголовках, но и то, </span><i>как </i><span> вы это сделаете - поэтому </span><b>следите за оформлением </b>. </p> <p>Если возвращаться к тексту, то ошибки стандарты: слишком много ключевых слов, знаки препинания и так далее (обо всем этом уже писалось выше). Однако важно помнить и о содержании самого заголовка - он должен соотноситься с текстом. который идет далее. </p> <p>То есть <b>заголовок должен выполнять свою функцию </b><span>. Потому что когда он ее не выполняет, начинаются проблемы. </p> <p>Бывают, кстати, ошибки наоборот - когда вместо того, чтобы поставить тег заголовка, ставят теги <p>И <span> с каким-нибудь стилем. </p> <p>Еще бывает, что, прочитав все выше, человек решает отказаться от заголовков и не использовать их в маленьких текстах. И тут нужно понимать, что практически любой текст можно разбить на небольшие части, и соответственно озаглавить их. </p> <h2>Заключение</h2> <p>Если вы хотите использовать SEO для увеличения конверсии на своем сайте, то вам нужно внимательно относиться к заголовкам на страницах сайта и к их оформлению. Ничего сложного в этом нет, главное - следуйте советам, перечисленным в этой статье, и не забывайте также о том, что главное, для кого вы пишите заголовки и делаете правильное оформление - это посетители сайта (а не поисковые боты). </p> <i> </i> <blockquote class="bq-idea"><p>На моих топовых информационных проектах сначала специалист в тематике составляет структуру статьи (заголовки и подзаголовки), а потом уже копирайтеры по ним пишут текст.</p> </blockquote> <p>Структура — это на самом деле очень важно, если вы заморачиваетесь насчет качества. А чтобы составить нормальную структуру, нужно понимание того, как работают теги h.</p> <p>h1 — это главный подзаголовок в статье, который обычно размещен над текстом.</p> <blockquote class="bq-vajno"><p>Первый заголовок должен визуально быть больше остальных заголовков на странице.</p> </blockquote> <p>h2-h6 — это маленькие подзаголовки, которые проставляются по принципу вложенности.</p> <h2><span>Для чего вообще нужны заголовки? </span></h2> <p>Для тех, кто не сильно в теме — вот в принципе неплохое видео про азы составления подзаголовков h1-h6. Если не считаете себя спецом, посмотрите:</p> <p><span class="JuB6WeW7bcU"></span> <span class="JuB6WeW7bcU"></span></p> <p>И для закрепления материала чуть послабее видео:</p> <p><span class="MlX8xFRRAXE"></span> <span class="MlX8xFRRAXE"></span></p> <p>Заголовки призваны в одной фразе или даже слове выделить основную суть, идею последующего текста. Обычно на них человек обращает свое внимание в первую очередь, решая, стоит ли читать остальной материал. Особенно важное значение заголовки имеют в рекламных текстах, письмах, и служат главным инструментом по привлечению внимания целевой аудитории.</p> <p>В коде тег выглядит так: <h1>, где буква h происходит от слова «header», что в переводе значит «заголовок». Каждый уровень обозначается соответствующей цифрой.</p> <h3><span>H-теги глазами людей </span></h3> <p>Текст, разбитый на подзаголовки, смотрится более «опрятно», его проще читать. Современный пользователь уже давно научился сканировать статьи буквально за несколько секунд и оперативно делать выводы, стоит ли читать весь текст, есть ли в нем та полезная информация, которую он ищет. Заголовки цепляют глаз, выделяя главное и давая юзеру возможность проанализировать материал.</p> <p>Теги h1, h2, h3, h4, h5, h6 позволяют создать для читателя некую карту, по которой он сможет быстро сориентироваться в тексте. И если этими выделениями удалось зацепить внимание, то человек задержится на странице и наверняка прочтет всю статью. Проверить результат можно по поведенческим факторам. Если люди задерживаются на странице, совершают какие-либо действия – значит работа по SEO была проделана не зря.</p> <h3><span>H-теги глазами поисковиков </span></h3> <p>Поисковые роботы собирают с них информацию для семантического анализа. Особое значение для ботов имеют заголовки уровней h1, h2, h3. Их непоследовательное или неправильное применение может негативно сказаться на ранжировании станицы. Если в HTML-коде вообще отсутствуют h-теги, то сайту придется туго в продвижении. Уровни h4, h5, h6 менее значимы.</p> <h2>Иерархия H-тегов </h2> <p>Главным правилом в расстановке заголовков является их иерархия. Необязательно, чтобы теги шли друг за другом по размеру, но недопустимо в тексте использовать, например, h3, если у вас нигде не присутствует мета h2 или применять h6 без h5.</p> <p>Вот так выглядит иерархия с правильной вложенностью:</p> <h2>Что за тег h1 </h2> <p>Тег h1 – это оглавление текста (все равно что название книги или заголовок статьи в газете).</p> <blockquote class="bq-vajno"><p>На каждой странице должен быть один и только один тег h1.</p> </blockquote> <p>В плане привлекательности для пользователя он имеет главное значение. Но для SEO-продвижения больший вес будет иметь .</p> <p>Title – это тоже заголовок, но прописывается он не только для людей, но и для роботов. Он отображается не на самой станице, а только во вкладке браузера и в сниппете в качестве активной ссылки на сайт. Фактически title является альтернативным, но главным заголовком для html-документа. Если он отсутствует, то поисковая система берет за основу h1 и использует его в серпе.</p> <h3><span>Почему h1 должен различаться с Title </span></h3> <p>Довольно важно понимать, что h1 и Title — это разные заголовки. И их соответственно надо умело комбинировать. Вот азы на эту тему:</p> <p><span class="U6ODRKPEJ_M"></span> <span class="U6ODRKPEJ_M"></span></p> <p>Пренебрежение правилами уникализации и релевантности заголовков может привести к тому, что сайт попадет под фильтр. <a href="/questions/firemonkey-ot-prostogo-k-slozhnomu-firemonkey-chto-pochitat-i-posmotret-ochen.html">Последнее время</a> поисковые системы стали уделять особое внимание качеству контента и его SEO-настройкам. Дубли, переспам, хаотичное расставление заголовков, их несоответствие содержимому карается.</p> <h3><span>Требования по длине H1 </span></h3> <p>H1 рекомендуется делать более лаконичным, чем Title, не превышая количество символов более, чем 50. Но не случится катастрофы, если заголовок получится длиннее, когда не удается втиснуть всю суть в обозначенное количество.</p> <p>Специальные плагины для WordPress позволяют проанализировать правильное заполнение всех мет прямо в редакторе.</p> <h4><span>Правила для грамотного написания h1 </span></h4> <ul><li>Должен быть уникальным для всего сайта и абсолютно читабельным;</li> <li>Не повторяет тег title, но и не противоречит ему;</li> <li>Не стоит делать его слишком длинным (более объемным можно делать title);</li> <li>Используется только 1 раз на каждую страницу;</li> <li>Релевантен тексту и отображает смысловую суть материала;</li> <li>Интересен, привлекателен для пользователя;</li> <li>Нельзя ставить в конце точку и рекомендуется по минимуму использовать знаки препинания.</li> </ul><h4><span>Применение ключей </span></h4> <p>Главные ключевые фразы, в первую очередь, должен содержать title. Но следует их писать и в h1. И там, и там лучше это делать в самом начале. Но лучше бы <a href="/megaphone/rgnf-rffi-granty-lichnyi-kabinet-rgnf-www-rfh-ru-granty-lichnyi-kabinet.html">ключевые слова</a> не дублировали друг друга в этих двух тегах. Нужно использовать разные словоформы или разбавленные вхождения в h1 и прямые в title.</p> <blockquote class="bq-istoriya"><p>Некоторые берут все ключи на страницу и из них составляют структуру статей. Сразу учтите — без классных ПФ такая россыпь ключей по подзаголовкам будет караться фильтром за переспам.</p> </blockquote> <h2><span>Психологические приемы для составления привлекательного заголовка </span></h2> <p>Заголовок должен быть «цепляющим». Вот видео от Максима Ильяхова, спеца в области СМИ, ректора Школы редакторов и создателя сервиса «Главред»:</p> <p><span class="b7Cjj3KPEYg"></span> <span class="b7Cjj3KPEYg"></span></p> <p>Вот еще пара «приемов», которые применяются при составлении заголовков.</p> <h3><span>Решение проблемы </span></h3> <p>Помните, что человек всегда ищет не информацию или товары, а прежде всего – решение своих проблем, потребностей, нужд. Оперируйте именно к предполагаемой проблеме целевой аудитории</p> <blockquote><p>Пример удачного заголовка: «Выпадают волосы? Остановите выпадение за неделю».<br> Пример неудачного заголовка: «Можно ли остановить выпадение волос?»</p> </blockquote> <p>В первом случае мы четко обозначаем проблему и предлагаем конкретное решение. Во втором случае проблема задета косвенно и варианты ее решения размыты.</p> <h3>Заинтриговать </h3> <blockquote><p>Пример удачного заголовка: «Раскрываем секрет самого эффективного рецепта от выпадения волос».<br> Пример неудачного заголовка: «Лучший рецепт от выпадения волос».</p> </blockquote> <h3>Прием «экзамен» </h3> <p>Предложение, составленное в такой форме, бросает вызов читателю, предлагая ему проверить себя.</p> <blockquote><p>Пример удачного заголовка: «Вы уверены, что правильно боритесь с выпадением волос?»<br> Пример неудачного заголовка: «Все ли вам известно о выпадении волос».</p> </blockquote> <p>Конечно, это далеко не все методы, которые помогают воздействовать на восприятие человека и привлечь его интерес. Читайте книги по маркетингу, чтобы вычитать больше, если интересна эта тема. Кстати title тоже может быть «заманивающим». Тем более что скорее всего именно он высвечивается в поисковой выдаче. Проверить его отображение можно будет после индексации страницы.</p> <h2><span>Зачем нужны подзаголовки h2-h6 </span></h2> <p>Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.</p> <p>Нужны для того, чтобы иерархично обозначать все важное и стоящее внимания пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам.</p> <p>h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте.</p> <p>h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.</p> <p>h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и значимые слова, а также в меню, сайдбаре и других составляющих веб-документа.</p> <p>Длина всех h-тегов должна быть в пределах 50 символов.</p> <h2><span>Как правильно прописывать подзаголовки h2-h6 </span></h2> <ul><li>Нельзя, чтобы наименьший подзаголовок присутствовал без большего. То есть, если в тексте стоит метатег h4, то ему обязательно должны предшествовать h2 и h3.</li> <li>Чем выше заголовок по уровню, тем крупнее должен быть и шрифт. В WordPress обычно по умолчанию настройки выставлены таким образом, что теги автоматически форматируются в правильном виде.</li> <li>Все h-теги обязаны соответствовать содержанию контента, отображать суть информации.</li> <li>Недопустимо использовать h1-h6 в качестве анкоров или активных ссылок.</li> <li>Нельзя писать другие теги внутри тега h.</li> <li>В h-тегах допускается только текст и знаки препинания.</li> <li>В подзаголовках не должно быть переспама ключевых слов. Ключевики лучше всего задействовать в title, h1, h2, а в более мелких, таких как h3, h5, h6 делать упор на детальное раскрытие темы.</li> </ul><p>Если в разметке страницы прописан title и основной заголовок H1, но сам текст статьи не слишком большой и не содержит в себе подзаголовков, это не является ошибкой. В ТОПе находится немало страниц, где контент идет практически сплошной полосой, разве что разделенной на абзацы. Попасть в лидирующие позиции можно и без «колдовства» над разметкой текста, делая больший упор на . Сайты на WordPress прекрасно индексируются поисковиками. Но все же применение этих тегов не только облегчает задачу, но и делает контент более легким и приятным для визуального восприятия.</p> <h2><span>Как заполнять h-теги в WordPress </span></h2> <p>h1 заполняется обычно в поле над текстом в записи:</p> <p>Чтобы сделать подзаголовки h2-h6, надо выделить необходимый элемент и, наведя курсор на вкладку «заголовки», выбрать нужный, кликнув по нему. Проделать то же самое для каждого из подзаголовков, включая их в нужный формат.</p> <p>Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в Word заголовки автоматически отобразятся в нужных размерах. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.</p> <p>Как оптимизировать страницу с помощью html заголовка первого уровня H1? Какая должна быть его длина и сколько тегов H1 можно использовать на странице? Примеры хороших и плохих заголовков. Обо всем подробнее читайте в данной статье.</p><p>H1 - это базовый заголовок страницы первого уровня. В Html разметке существует всего 6 заголовков, показывающих важность блоков стоящих под ними. Наиболее важный заголовок H1, наименее - H6.</p><p>По-умолчанию, стили заголовков отличаются: H1 имеет наибольший размер, далее по нисходящей, соответственно, H6 - наименьший из заголовков. Визуальное отличие в отображении сделано для пользователей, которые посещают web-ресурсы. Для роботов имеет значение синтаксис .</p><h2>Синтаксис заголовка H1</h2><p>В Html-коде страницы заголовок H1, как правило, размещается в пределах парного тега body как можно ближе к началу страницы. Выглядит вот так:</p><p> <h1>H1 - базовый заголовок первого уровня</h1> </p><p>Пример использования тега h1 на данной странице:</p><p>H1 является парным тегом. Текст расположенный между открывающим тегом <h1> и закрывающим тегом </h1> и является заголовком первого уровня. Заголовки H2-H6 имеют аналогичный синтаксис.</p><p><i> </i><b>Важно! </b> Заголовки H1-H6 должны иметь иерархическую и смысловую последовательность. Заголовок третьего уровня не должен содержать в себе блок с заголовком второго уровня, также как и заголовок четвертого уровня не должен находиться внутри блока с заголовком второго уровня.</p><p>Простой пример правильной иерархической структуры заголовков:</p><p> <html> <head> <title>Популярные породы кошек в России и США

Породы кошек в России и США

Вступление

Породы кошек в России

Текст про породы кошек в России

Русская голубая кошка

Текст про русскую голубую кошку

Сиамская кошка

Текст про сиамскую кошку

Породы кошек в США

Текст про породы кошек в США

Мейн-кун

Текст про породу Мейн-кун

Более подробно ознакомиться c иерархией и структуризацией страницы с помощью заголовков вы можете в спецификации HTML5 .

Для чего нужен заголовок H1?

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

Заголовок страницы в отличие от тега виден всем пользователям сайта. H1 является смысловым обобщением содержания web-страницы .

Особенности заголовка H1

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

Что писать в H1?

Как уже говорилось ранее, H1 - это заголовок первого уровня как в визуальном плане, так и в смысловом. Базовый заголовок должен отражать содержание всей страницы, а не отдельных ее частей. H1 не должен дублировать тег title, но также как title и description должен содержать главное ключевое слово страницы. У тега H1 высокая вероятность попасть в заголовок динамического сниппета, поэтому дублирование H1 и title является плохой практикой. Вы таким образом сужаете вариативность и релевантность своего сниппета по низкочастотным запросам.

Главное требование к H1 - это релевантность содержимому страницы. Заголовок помимо наличия ключевого слова должен привлекать внимание и быть интересен пользователю. Пример корректно составленного H1:

Размер и длина заголовка H1

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

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

По запросу "Купить мужские джинсы" в ТОП-5 выдачи Яндекс (на момент написания статьи) присутствует один из лидеров E-commerce интернет-магазин Lamoda.ru. На скриншоте видно, что заголовок первого уровня "Мужские джинсы" гораздо меньше по размеру, чем описательный блок

, и другие текстовые элементы, размещенные на странице.

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

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

Сколько заголовков H1 может быть на странице?

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

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

Цель статьи: показать основные правила того, как нужно оптимизировать статьи под ключевые слова.

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

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

Заголовки будем делить на 3 группы:

  • Подзаголовки в теле страница (H2-H3).

Метатег Title – находится в верхней части браузера и чаще всего появляется в выдаче поисковой системы (в снипете).

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

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

Но обычно статьи оптимизируются не только под 1 ключевое слово, их может быть 3, 5, 10, 15 и даже 50 и 100, но чем частотнее запрос (чем чаще его запрашивают в поисковой системе), тем он ценнее для сайта, а самое популярное ключевое слово является основным .

Как сказано выше, основное ключевое слово размещаем в начале Title, далее добавляем дополнительные ключевые слова, которые бы лучше раскрывали статью на предмет его содержания. Не более 2-3. Если таких ключевых слов нет, то добавляем слова, которые лучше расскажут пользователю, что он «получит», перейдя по ссылке, и выгодно отстроит статью от страниц конкурентов.

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

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

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

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

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

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

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

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

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

Если основной ключевой запрос «Антидепрессанты без рецепта», то заголовок H1 может быть «Лучшие антидепрессанты без рецепта врача».

Также можно и изменить ключевое слово более значительно «ТОП 10 безопасных антидепрессантов», то есть тут слово «врач» исключили вовсе. Но с этим приемом лучше пользоваться осторожнее.

Но иногда можно включить и основной ключ без изменений. «Антидепрессанты без рецепта: лучшие безопасные препараты».

К тому же, тут позволяется использовать и синоним основного ключевого слова вместо него самого. Синоним слова «препарат» - «успокоительные». Синоним подбирается из контекста. Вместо синонима можно внедрить и обобщение – «препарат». А можно использовать и синоним/обобщение, и основной запрос.

Это не все приемы, здесь также нужно смотреть конкурентов и отстраиваться от них.

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

Подзаголовки в теле статьи (H2- H3) – эти подзаголовки структурируют текст на тематические разделы. Во многих сайтах на основе этих подзаголовков формируется «содержание» страницы, которая служит навигацией.

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

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

К тому же, иногда содержание подзаголовков попадает в сниппет поисковой системы вместо Title. Иногда туда попадает и H1, но редко.

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

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

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

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

H2 – означает подзаголовок второго уровня, а H3 – третьего (подподзаголовок). При оформлении подзаголовков очень важно сохранять иерархию. То есть сначала идет H2 и только потом H3. Заголовков каждого уровня должно быть не менее 2-х.

Считается хорошим тоном, что на каждые 700 – 1000 знаков есть 1 подзаголовок. Подзаголовки H3 можно употреблять и чаще, если это требуется для структуризации текста.

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

Здесь важно уметь пользоваться статистикой поисковых запросов от Яндекса wordstat.yandex.ru и анализировать конкурентов.

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

Первый заголовок, на который часто посетитель сайта не обращает внимание — тот, который показан на вкладке браузера (). Для поисковой системы он самый главный, так как именно его Яндекс, Google и др. чаще всего () используют в качестве заголовка сниппета.

Второй заголовок находится в теге h1 . Далее подзаголовки меньших размеров. Если собрать их все, то должна быть чётко видна структура веб-документа подобно главам школьного учебника. Такая раздробленная на разделы и подразделы информация легко воспринимается, найти необходимый материал на странице не вызывает затруднений.

Важные замечания:

  • заголовок доступно поясняет содержание страницы, раздела, подраздела. Это не инструмент оформления текста. Не нужно им выделять пункт меню, который ничего не содержит, кроме заголовка.
  • заголовок — это слово, фраза, предложение. Он не должен быть длинным.
  • заголовок — это всё предложение, а не его часть. Для оформления одного-нескольких слов существуют такие теги как strong , mark , em и др. ().
  • если статья строится в формате "вопрос-ответ" и ответ в большинстве случаев короткий (например, инструкция лекарственного препарата), то вместо тегов h правильней использовать тройку dl , dt , dd .

Проверить h1 страницы

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

Разница в использовании h1 , h2 , h3 , h4 , h5 , h6 в HTML5 и HTML4

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

Один h1 на странице (версия HTML4)

  • Пошаговое решение судоку
    • Программа решения судоку с объяснениями (онлайн)
    • Правила игры
    • Алгоритм заполнения ячеек кроссворда
      • Способ 1. «Скрытые одиночки»
      • Способ 2. «Одиночки»
    • Методы решения судоку
      • Стратегия 1. Кандидат в двух-трёх клетках одного квадрата
      • Стратегия 2. Группы кандидатов

Название сайта

Заголовок

Утверждение 1: заголовок страницы или его часть не должны быть ссылкой (см. здравый смысл и справка Новости.Google). Отсюда следствие: название веб-проекта на Главной также не должно быть ссылкой. В целом не нужно чтобы страница ссылалась сама на себя (искл. ). А вот так допустимо (на Авито на странице объявления каждой похожей записи дан h3):

Процентные ставки от 1% до 5%

...

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

только текст

весь блок (прямоугольная область)

Должен ли title отличаться от h1 ?

"Может ли title быть таким же как h1 ?" — да, может.

"Различный title и h1 полезны для SEO?" — да, полезны. В рассматриваемые теги можно добавить дополнительные ключевые слова, чтобы увеличить хвост запросов, по которым приходят на сайт. Или чтобы сделать более привлекательный сниппет, в title внести, скажем, название компании, коли фирма на слуху, или номер телефона (для такси, например).

Примечание: для того, чтобы страница могла присутствовать в Новостях Google или быстрых ссылках Яндекса , основная часть title и h1 должны совпадать. Это может быть вызвано тем, что посетители ожидают увидеть на странице сайта тот же заголовок, что в выдаче поисковиков. На данный момент стоит обратить внимание информационным сайтам.

Нужно ли заголовки боковых блоков брать в h ?

Если заголовки индексируются (см. ), то пусть лучше будут в теге h . Всё равно они употребляются на каждой странице сайта и вес этих слов ("Реклама", "Последние сообщения", "Подписка" и т.п.) завышен. Можно предположить, что родитель aside должен уменьшать их значение.

К тому же для слабовидящих будет понятно что к чему, а не сплошные untitled .