Заголовки H1 и TITLE. Делать ли их одинаковыми или разными? Использование и оптимизация мета тега h1: примеры использования ключа в теге h1
Должны ли H1 и TITLE
совпадать или нужно их делать разными? Давний вопрос, который обязательно возникает на каждой встрече, где есть сеошники. Откуда он появился сказать сложно. Возможно, из несоответствия рекомендаций поисковых систем и примеров в ТОП10.
Доводы за разные теги тайтла и H1: мол, поисковик “подумает”, что мы хотим усилить двойным употреблением значение ключевого слова, за что обязательно накажет 🙂
Доводы за одинаковые теги: цитата в помощи Яндекса для вебмастеров.
Чтобы робот, анализирующий ваш сайт, смог правильно выделить наиболее важные разделы и ключевые страницы, нужно чтобы… текст в теге TITLE
для ключевых страниц совпадал с ее названием (с заголовком страницы, выделенным, например, тегом H1) и с текстами ссылок, указывающих на эту страницу.
Как же на самом деле, делать их одинаковыми или разными? По большому счету - без разницы. Но стоит учесть несколько моментов.
— H1 и TITLE
должны пересекаться
Если тайтл об одном, а H1 о другом, то поиску сложней определить, каким именно ключевым словам релевантна страница, да и пользователи будут в затруднении. Также эти участки кода помогают поисковикам формировать специальные элементы в сниппете, типа хлебных крошек или быстрых ссылок. Другими словами, не нужно делать TITLE
и H1 совсем разными. Посмотрим несколько примеров (просто в качестве демонстрации, без предварительного анализа семантики).
Сайт представляет из себя салон итальянской мебели в Москве. Основные ключевые запросы: салон итальянской мебели, итальянская мебель…
TITLE
:
Салон итальянской мебели в Москве. Купить мебель из Италии | Название-Салона
H1:
Добро пожаловать
Неоптимальный вариант, так как в H1 вообще нет продвигаемых ключевых слов. Приветствие можно написать в тексте.
H1:
Эксклюзивная мебель из Италии
Уже получше, так как теги пересекаются по ключу “мебель из италии”. Но его может не быть в приоритетных запросах.
H1:
Салон итальянской мебели Название-Салона
Нормальный заголовок для основного запроса, ничего лишнего.
Как видим, здесь нет смысла делать полностью одинаковыми H1 и TITLE
, но они должны все же пересекаться.
— H1 и TITLE
виден пользователями на разных этапах взаимодействия с сайтом
TITLE
пользователь чаще видит еще до перехода на сайт. H1 видит уже тогда, когда находится на странице. В связи с этим, H1 лучше делать коротким и максимально описывающим суть посадочной страницы, многое зависит от её предназначения. Что касается TITLE
, помимо содержания ключевых слов, он должен мотивировать пользователя на клик (переход). В противном случае можно оптимизировать текстовую релевантность, но не оптимизировать конверсию в клики и, соответственно, получать не весь трафик.
Например, раздел радиоуправляемых вертолетов на сайте.
H1:
Радиоуправляемые вертолеты (логично)
TITLE
:
Купить радиоуправляемые вертолеты с доставкой по Москве
Здесь слово “купить” призывает к действию, а “доставка по Москве” снимает ряд вопросов перед кликом.
Информационная тема: как плести браслеты из резинок
H1:
Как плести браслеты из резиночек на станке
TITLE
:
Браслеты из резиночек: пошаговые инструкции и схемы плетения с фото и видео
“Пошаговые инструкции и схемы” не только расширяют семантику, но и повышают вероятность клика на заголовок. Человек, который ищет “как плести” как раз подразумевает пошаговые инструкции с фото, но может не включать это в свой запрос.
— TITLE
подтягивается в соцсети
Если код дополнительно не настраивать, то при расшаривании пользователями страницы в соцсети, заголовок берется из тайтла. Если он спамный, то это препятствует как переходу из соцсетей, так и расшариванием в принципе. Если же будет просто коротким как и H1, то это тоже плохой вариант.
Этот пункт наиболее актуален для информационных и новостных проектов. Но некоторые из них только и работают на соцсети, поэтому брать пример с заголовков типа “Эта женщина больше не могла смотреть на себя в зеркало. И вот что она сделала…” не всегда корректно для SEO
. Просто при составлении тайтлов помните, что они могут попадать заголовками в соцсети.
— TITLE
может содержать дополнительные ключевые фразы
Чтобы продвигать страницу не только по выбранным среднечастотным фразам, но и по смежным, а также большому пулу низкочастотных фраз, в тайтл можно добавлять некоторые слова из сем.ядра. Соответственно, это будет отличать его от тега H1.
Например, у нас пул запросов: монтаж битумной черепицы, монтаж гибкой черепицы, инструкция по монтажу черепицы, технология монтажа черепицы, технология укладки битумной черепицы, укладка битумной черепицы, монтаж гибкой черепицы видео и др. и пр.
H1:
Инструкция по монтажу гибкой битумной черепицы
TITLE
:
Монтаж гибкой черепицы, технология укладки. Цена, видео
Здесь тайтл и H1 вовсе различаются, пересекаются лишь некоторыми словами (монтаж, битумная, черепица). Вставлять все слова из ядра в тайтл или в H1 нет смысла, это будет выглядеть спамным, а разделение слов по участкам кода (в том числе по другим заголовкам) - хорошая стратегия.
Заголовочные теги
...
должны быть на каждой странице сайта. Важность каждого заголовка зависит от цифры:
- самые важные заголовочные теги
- менее значимые чем первый
...
- последние по важности
К этим тегам нужно относится с осторожностью, поскольку они оказывают больше влияние на ранжирование сайта . При грамотном использовании тегов
...
зачастую можно добиваться хороших позиций сайта по запросам только на внутренних факторах. И обратная ситуация: в случае неправильного использования можно попасть под санкции поисковых систем. В этой статье мы как раз и поговорим как правильно использовать эти теги.
Синтаксис тегов ..
Название статьи
Подзаголовок1
...
Подзаголовок2
Подзаголовок3_1
...
Подзаголовок3_N
Подзаголовок3
и т.д.
Каждый заголовок по умолчанию имеет разный размер. Например, код
Заголовок h1
Заголовок h2
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h6
На странице превращается в следующее:
Значимость тегов ..
По весу и значимости в продвижение сайтов заголовочные теги h1-h6 находятся на втором месте после тега
. Во многом правила составления тайтла схожи с h1.</p>
<h2>Правила использования тега <h1></h2>
<ul><li>Тег <h1>
должен присутствовать в одном экземпляре на каждой странице сайта. Это правило должно не вызывать никаких вопросов, ведь у каждой страницы сайта должно быть только одно название. А если названия вообще нет, то тогда вообще зачем нужна такая страница?</li>
<li>Заголовок <h1>
должен быть где-то вверху html-кода страницы</li>
<li><h1>
должен быть уникальным в пределах сайта, т.е. не должно быть так, что некоторые страницы называются одинаково</li>
<li>Заголовок должен отражать суть статьи, не быть очень длинным</li>
<li>Не должен содержать какие-то еще элементы кроме названия страницы (т.е. нельзя использовать внутри h1 ссылки, элементы span, font, картинки и т.п.)</li>
<li>Плохо использовать заголовки не по назначению. Например, часто в шаблонах теги h3 используются для заголовков "Теги", "Комментарии" в сайдбарах. Это не правильно. Заголовочные теги должны использоваться в статье, чтобы правильно структурировать контент и помочь, как поисковым систем, так и <a href="/security/komandnaya-stroka-kak-otkryt-sozdaem-yarlyk-komandnoi-stroki-na.html">обычным пользователям</a> разобраться быстро в статье.</li>
<li>Желательно использовать заголовки без параметров class и id</li>
<li>Важно соблюдать иерархию заголовочных тегов. На этом моменте нужно остановиться более подробно.</li>
</ul><h2>Важность иерархии <h1>..<h6></h2>
<p>В <a href="/graphics-card/kody-cvetov-v-html-cvetovye-kody-v-minecraft.html">html коде</a> страницы первым должен быть тег <h1>
. Нельзя сначала делать заголовок <h2>
, потом <h1>
. Аналогично и с другими номерами тегов. Вот правильное использование тегов:</p>
<blockquote><h1
>Название статьи
</h1
>
...
<h2
></h2
>
<h3
></h3
>
<h4
></h4
>
...
<h4
></h4
>
<h3
></h3
>
...
<h3
></h3
>
<h2
></h2
>
...
<h2
></h2
>
<h3
></h3
>
</blockquote>
<p>Т.е. каждый более низкий тег всегда располагается во вложении более высокого. Это и есть правильная иерархия. При этом не допускаются резкие переходы с <h1>
на <h4>
, с <h2>
на <h5>
и т.п.</p>
<p>Помимо такой иерархии нужно еще соблюдать и иерархию в плане размеров шрифтов. Т.е. более важные заголовки должны иметь более большой шрифт. Хотя подтверждающих фактов тому, что поисковые системы анализируют стили, которые находятся в.css файлах пока никто не объявлял, но негласно есть такое правило среди вебмастеров и оптимизаторов.</p>
<p><b>Может ли заголовок <h1> и <title> совпадать?
</b>
<br>На этот вопрос сейчас разгораются споры. С одной стороны логично, чтобы <title>
и <h1>
совпадали. Но с другой стороны это как бы дублирование название страницы. Вообще чаще всего заголовки будут разными, поскольку в <h1>
вряд ли можно и имеет смысл писать слова "Купить, цена, фото", а в тайтле такие слова наоборот используются. Отвечая на вопрос - делайте так, чтобы было все понятно пользователю и смотрелось естественно.</p>
<p><b>Сколько может быть заголовков <h2>, <h3>?
</b>
<br>Заголовочных тегов <h2>
-<h6>
может быть несколько на странице, все зависит от размера контента. Количество контента на один заголовок должно быть адекватным. Другими словами не должно быть так, что после заголовка <h2>
идет 5 предложений, потом опять <h2>
и опять маленький абзац. В таких случаях скорее всего лучше вообще не использовать заголовочные теги.</p>
<p>Не стоит путать заголовочные теги <head> и h1-h6. Одни нужны для поискового робота, другие для поискового робота и пользователей.</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>Заголовки призваны в одной фразе или даже слове выделить основную суть, идею последующего текста. Обычно на них человек обращает свое внимание в первую очередь, решая, стоит ли читать остальной материал. Особенно важное значение заголовки имеют в <a href="/monitors/prizyv-k-vnimaniyu-primery-prizyvov-k-deistviyu-v-reklamnyh-tekstah.html">рекламных текстах</a>, письмах, и служат главным инструментом по привлечению внимания целевой аудитории.</p>
<p>В коде тег выглядит так: <h1>, где буква h происходит от слова «header», что в переводе значит «заголовок». Каждый уровень обозначается соответствующей цифрой.</p>
<h3><span>H-теги глазами людей
</span></h3>
<p>Текст, разбитый на подзаголовки, смотрится более «опрятно», его проще читать. <a href="/security/kak-v-kievstare-zakazat-vneocherednoe-nachislenie-onlain-tarify-dlya.html">Современный пользователь</a> уже давно научился сканировать статьи буквально за несколько секунд и оперативно делать выводы, стоит ли читать весь текст, есть ли в нем та <a href="/case/na-racii-15-kanal-kakaya-chastota-obzory-i-poleznaya-informaciya-dlya.html">полезная информация</a>, которую он ищет. Заголовки цепляют глаз, выделяя главное и давая юзеру возможность проанализировать материал.</p>
<p>Теги h1, h2, h3, h4, h5, h6 позволяют создать для читателя некую карту, по которой он сможет быстро сориентироваться в тексте. И если этими выделениями удалось зацепить внимание, то человек задержится на странице и наверняка прочтет всю статью. Проверить результат можно по <a href="/monitors/povedencheskie-i-kommercheskie-faktory-ranzhirovaniya-povedencheskie.html">поведенческим факторам</a>. Если люди задерживаются на странице, совершают какие-либо действия – значит работа по 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 – это тоже заголовок, но прописывается он не только для людей, но и для роботов. Он отображается не на самой станице, а только во вкладке браузера и в сниппете в качестве <a href="/security/kak-sdelat-skaip-aktivnym-sozdanie-skype-ssylki-poprobuite-obshchenie-s-botami.html">активной ссылки</a> на сайт. Фактически title является альтернативным, но главным заголовком для html-документа. Если он отсутствует, то поисковая система берет за основу h1 и использует его в серпе.</p>
<h3><span>Почему h1 должен различаться с Title
</span></h3>
<p>Довольно важно понимать, что h1 и Title — это <a href="/security/zagolovki-h1-i-title-delat-li-ih-odinakovymi-ili-raznymi-anatomiya.html">разные заголовки</a>. И их соответственно надо умело комбинировать. Вот азы на эту тему:</p>
<p><span class="U6ODRKPEJ_M"></span> <span class="U6ODRKPEJ_M"></span></p>
<p>Пренебрежение правилами уникализации и релевантности заголовков может привести к тому, что сайт попадет под фильтр. <a href="/the-winchesters/kak-v-vk-ubrat-vremya-poslednego-poseshcheniya-kak-zaiti-v-vk-i-ne-byt.html">Последнее время</a> поисковые системы стали уделять <a href="/power-supply/kak-sdelat-shapku-v-yutube-ustanovka-shapki-na-kanal-dannyi-servis-zasluzhivaet.html">особое внимание</a> качеству контента и его SEO-настройкам. Дубли, переспам, хаотичное расставление заголовков, их несоответствие содержимому карается.</p>
<h3><span>Требования по длине H1
</span></h3>
<p>H1 рекомендуется делать более лаконичным, чем Title, не превышая количество символов более, чем 50. Но не случится катастрофы, если заголовок получится длиннее, когда не удается втиснуть всю суть в обозначенное количество.</p>
<p>Специальные плагины для WordPress позволяют проанализировать <a href="/windows-8/tvitter-registraciya-russkom-bez-elektronnoi-pochty-aliekspress.html">правильное заполнение</a> всех мет прямо в редакторе.</p>
<h4><span>Правила для грамотного написания h1
</span></h4>
<ul><li>Должен быть уникальным для всего сайта и абсолютно читабельным;</li>
<li>Не повторяет <a href="/monitors/kak-pravilno-pisat-tegi-title-description-i-atributy-alt-i-title.html">тег title</a>, но и не противоречит ему;</li>
<li>Не стоит делать его слишком длинным (более объемным можно делать title);</li>
<li>Используется только 1 раз на каждую страницу;</li>
<li>Релевантен тексту и отображает смысловую суть материала;</li>
<li>Интересен, привлекателен для пользователя;</li>
<li>Нельзя ставить в конце точку и рекомендуется по минимуму использовать знаки препинания.</li>
</ul><h4><span>Применение ключей
</span></h4>
<p>Главные <a href="/multimedia/luchshie-programmy-dlya-raboty-s-klyuchevymi-slovami-programma-dlya.html">ключевые фразы</a>, в первую очередь, должен содержать title. Но следует их писать и в h1. И там, и там лучше это делать в самом начале. Но лучше бы ключевые слова не дублировали друг друга в этих двух тегах. Нужно использовать разные словоформы или разбавленные вхождения в 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>В первом случае мы четко обозначаем проблему и предлагаем <a href="/monitors/kak-udalit-tachpad-na-noutbuke-asus-resheniya-dlya-konkretnyh-modelei-kak.html">конкретное решение</a>. Во втором случае проблема задета косвенно и варианты ее решения размыты.</p>
<h3>Заинтриговать
</h3>
<blockquote><p>Пример удачного заголовка: «Раскрываем секрет самого эффективного рецепта от выпадения волос».<br>
Пример неудачного заголовка: «<a href="/windows-7/7-sei-info-recepty-recept-na-million-ot-anastasii-skripkinoi.html">Лучший рецепт</a> от выпадения волос».</p>
</blockquote>
<h3>Прием «экзамен»
</h3>
<p>Предложение, составленное в такой форме, бросает вызов читателю, предлагая ему проверить себя.</p>
<blockquote><p>Пример удачного заголовка: «Вы уверены, что правильно боритесь с выпадением волос?»<br>
Пример неудачного заголовка: «Все ли вам известно о выпадении волос».</p>
</blockquote>
<p>Конечно, это далеко не все методы, которые помогают воздействовать на восприятие человека и привлечь его интерес. Читайте книги по маркетингу, чтобы вычитать больше, если интересна эта тема. Кстати title тоже может быть «заманивающим». Тем более что скорее всего именно он высвечивается в <a href="/ram/poziciya-v-poiskovoi-vydache-proverit-pozicii.html">поисковой выдаче</a>. Проверить его отображение можно будет после индексации страницы.</p>
<h2><span>Зачем нужны подзаголовки h2-h6
</span></h2>
<p>Теги от h2 до h6 располагаются уже в теле самой статьи, структурно разделяя ее на тематические абзацы, и в коде HTML-документа, выделяя его значимые элементы. Они также идентифицируются поисковыми роботами для семантического анализа страницы.</p>
<p>Нужны для того, чтобы иерархично обозначать все важное и <a href="/processors/kakaya-veb-kamera-podoidet-dlya-kompyutera-osnovnye-harakteristiki-na.html">стоящее внимания</a> пользователя на странице. Такая структура помогает человеку быстрее сориентироваться в информации и оценить ее соответствие своим запросам.</p>
<p>h2 – акцентирует внимание пользователей и поисковых систем на основном содержании статьи. Показывает самое значимое в тексте.</p>
<p>h3 – является подпунктом для информации, идущей под H2, раскрывая ее еще глубже.</p>
<p>h4, h5, h6 – определяются, как вложенные подзаголовки (раскрывают детально суть H2 или H3) и используются в тексте, в качестве выделяющих мелкие пункты и <a href="/monitors/drobnaya-cherta-mezhdu-slovami-znachit-ili-slash-i-backslash-vehi-na-puti.html">значимые слова</a>, а также в меню, сайдбаре и других составляющих веб-документа.</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>Есть еще более простой способ – можно набрать текст в Ворде, используя нужные разметки и просто копипастом перенести статью в редактор вордпресса. Выделенные в <a href="/processors/kak-sdelat-numerovannyi-mnogourovnevyi-spisok-v-word-sozdanie.html">Word заголовки</a> автоматически отобразятся в <a href="/internet/kak-ustanovit-razmer-fotografii-v-fotoshope-kak-sdelat.html">нужных размерах</a>. При необходимости можно подправить их, используя инструменты редактора CMS WordPress.</p>
<h2>SEO разметка текста.. или семантическая верстка сайта.</h2>
<p>Семантическая верстка сайта - за этим страшным определением скрывается одна <a href="/case/kak-peredelat-parol-na-elektrony-pochty-kak-izmenit-parol-v-maile-prostye.html">простая истина</a>: сайт должен быть не просто сверстан, а свёрстан логично! Так что можно сказать примерно так: <a href="/power-supply/osnovy-semanticheskoi-verstki-na-html5-ispolzuite-korrektnyi.html">семантическая верстка</a> это - логичная верстка.</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> и если бы это были заголовки двух <a href="/ram/kak-pomenyat-raspolozhenie-stranicy-word-raznaya-orientaciya.html">разных страниц</a> то при прочих равных условиях <a href="/graphics-card/poiskovaya-mashina-informacii-chto-takoe-poiskovaya-mashina-ili-kak.html">поисковая машина</a> по запросу пользователя <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>Всем-всем привет!<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. Если будет иначе, то <a href="/multimedia/poiskovoi-pauk-krauler-vidy-i-funkcii-chasto-zadavaemye-voprosy-o-poiskovyh.html">поисковый робот</a>, который видит только HTML-код, не правильно воспримет страницу, чего мы не хотим.</li>
</ul><p>Коротко об этих правилах я уже писал в уроке, посвященному . Обязательно прочитайте, там много полезного!</p>
<h2>Как понять правильно ли использованы заголовки?</h2>
<p>Вы знакомы с браузером <a href="/graphics-card/tonkaya-nastroika-brauzera-browser-mozilla-firefox-brauzer-mozilla-firefox-osnovnye.html">Mozilla Firefox</a>? Наверное, да. Так вот, этот браузер, благодаря одному плагину с хорошим функционалом, предоставляет шикарные возможности для анализа страниц. Название этому плагину — <a href="/windows-7/skachat-i-ustanovit-rds-bar-rds-bar-dopolnenie-dlya-mozilla-firefox-yandeks.html">RDS bar</a>. Скачать его можно по этой ссылке , но сделать это необходимо в Firefox, поэтому, если <a href="/power-supply/obnovit-dannyi-brauzer-kak-obnovit-yandeks-brauzer-do-poslednei.html">данный браузер</a> у Вас не установлен, быстрее скачивайте его и устанавливайте.</p>
<p>RDS bar можно установить и на другие браузеры, но именно в Mozilla Firefox его функционал гораздо шире.</p>
<p>Прежде, чем мы перейдем к анализу страниц сайта, необходимо внести <a href="/processors/tip-podklyucheniya-routera-zyxel-keenetic-proverka-setevoi-karty.html">небольшие настройки</a> в плагин:</p>
<img src='https://i0.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://i1.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://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/issledovat-element.png' height="246" width="342" loading=lazy>Наведите курсор на определенный элемент, нажмите <a href="/graphics-card/menyu-pravoi-knopki-myshi-kak-otkryt-dopolnitelnoe-menyu.html">правой кнопкой</a> мыши на него и выберите пункт «Исследовать элемент». В нижней части окна появится область, где можно увидеть и стилевой класс 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++, в <a href="/security/gugl-hrom-odnoklassniki-socialnaya-set-moya-stranica-esli-otkryvaetsya-chuzhaya.html">верхнем меню</a> найдите пункт «Поиск» и в выпадающем меню выберите «Найти в файлах»:<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://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/poisk-v-failah.png' width="100%" loading=lazy>После того, как я нажму на кнопку «Найти все», пойдет процесс поиска файла:<br><img src='https://i0.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://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/zagolovok-v-poiske.png' width="100%" loading=lazy>Чтобы перейти непосредственно к файлу в котором содержится <a href="/processors/pochemu-vord-ne-daet-sdelat-zagolovok-sozdanie-zagolovka-s.html">данный заголовок</a>, достаточно сделать <a href="/internet/kak-izmenit-nastroiki-myshi-v-windows-10-rasshirenie-vozmozhnostei-myshi-s.html">двойной щелчок</a> по результату поиска;</li>
<li>Далее я просто меняю теги <h5></h5> на теги <h3></h3>:Обязательно сохраняю файл;</li>
<li>Смотрим результат на сайте:<br><img src='https://i0.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://i1.wp.com/context-up.ru/wp-content/uploads/2017/04/style-zagolovka.png' width="100%" loading=lazy>В стилевое правило нужно добавить свойство font-size (размер шрифта) с нужным, на Ваш взгляд, значением. В моем случае, <a href="/security/kakoi-razmer-kesha-optimalen-dlya-brauzera-kak-izmenit-mesto-hraneniya.html">оптимальным размером</a> шрифта будет 14 px:<br><img src='https://i0.wp.com/context-up.ru/wp-content/uploads/2017/04/razmer-shrifta.png' width="100%" loading=lazy></li>
<li>Смотрим результат:<br><img src='https://i2.wp.com/context-up.ru/wp-content/uploads/2017/04/rezultat-izmenenj.png' width="100%" loading=lazy>Как видите, заголовки стали отображаться нормально.</li>
</ol><p>Таким же образом работаем с другими заголовками. Как только закончите работу, не забудьте отправить изменения на сервер. Сделать это можно через FileZilla, о которой рассказывал</p>
<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>
</article>
<div class='yarpp-related'>
<div class="title">Похожие публикации</div>
<ul class="related">
<li class="related__item">
<div class="related__item-img"> <img src="/uploads/5fb17e8a04e229b543ce3f876f16308e.jpg" width="150" height="95" alt="Пошаговый мануал как ввезти технику, на которую отсутствует нотификация фсб" / loading=lazy></div> <a href="/other/v-rossii-uprostili-vvoz-gadzhetov-bez-notifikacii-skoree-zakazyvaem-poshagovyi-manual-kak-vvezti-teh.html">Пошаговый мануал как ввезти технику, на которую отсутствует нотификация фсб</a></li>
<li class="related__item">
<div class="related__item-img"> <img src="/uploads/e3894d2e796dc518b3ba1981c6598a80.jpg" width="150" height="95" alt="Бонусная программа МТС «20% возвращаются" / loading=lazy></div> <a href="/corps/20-vozvrashchayutsya-otzyvy-bonusnaya-programma-mts-20-vozvrashchayutsya.html">Бонусная программа МТС «20% возвращаются</a></li>
<li class="related__item">
<div class="related__item-img"> <img src="/uploads/b0b2bc40ddf5070f27a9da53810a0e06.jpg" width="150" height="95" alt="Обзор программ для проектирования дома или дачи своими руками" / loading=lazy></div> <a href="/ram/programma-dlya-sozdaniya-zdanii-i-sooruzhenii-obzor-programm-dlya.html">Обзор программ для проектирования дома или дачи своими руками</a></li>
<li class="related__item">
<div class="related__item-img"> <img src="/uploads/706eb8b76a9ed175dfdfba4479989a21.jpg" width="150" height="95" alt="Программы для самостоятельного проектирования дома на компьютере" / loading=lazy></div> <a href="/motherboards/top-10-programm-dlya-proektirovaniya-domov-programmy-dlya.html">Программы для самостоятельного проектирования дома на компьютере</a></li>
</ul>
</div>
</main>
<aside class="sidebar">
<div class="section section_widget lambda_1"></div>
<div class="section section_widget widget_text">
<div class="textwidget"></div>
</div>
<div class="sidebar-menu">
<div class="title">Рубрики</div>
<ul>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/internet/">Интернет</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/safety/">Безопасность</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/windows-7/">Windows 7</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/multimedia/">Мультимедиа</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/power-supplies/">Блоки питания</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/monitors/">Мониторы</a></li>
<li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="/category/motherboards/">Материнские платы</a></li>
</ul>
</div>
</aside>
</div>
</div>
<footer class="footer">
<div class="mygrid footer-grid">
<div class="container-fluid">
<div class="row">
<div class="col-sm-5">
<div class="about-site">
<img src="/img/logo.png" loading=lazy><br> Мультимедиа, интернет, видеокарты, материнские платы. Windows
</div>
</div>
<div class="col-sm-5">
<div class="flink-wrapper">
<div class="flink"> <a href="/feedback.html">Контакты</a></div>
<div class="flink"> <a href="">Реклама и сотрудничество</a></div>
<div class="flink"> <a href="">Политика конфидициальности</a></div>
<div class="flink"> <a href="/sitemap.xml">Карта сайта</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="copyright">© 2024 </div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<script type='text/javascript'>
var tocplus = {
"smooth_scroll": "1"
};
</script>
</body>
</html>