оптимизация заголовков

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

• h1
• h2
• h3
• h4
• h5
• h6

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

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

По умолчанию в блогcпоте заголовок блога выводится в теге h1, а заголовки постов в тегах h3. И это неправильно по двум причинам. Первая причина – это непонятно, куда затерялся тег h2 между названием блога и названием поста. А вторая –  малозначимость тега h3 для поисковых систем в сравнении с тегом h1 и h2.

В моём личном случае, учитывая то, что я люблю писать оптимизированные статьи с использованием заголовков и подзаголовков(h2-h3), мне бы подошла следующая структура блога:

Название блога на главной странице – тег h1, на внутренней – простой ссылкой, которая возвращает на главную (без тега)

Название всех постов на внутренних страницах – тег h1, а в анонсах, которые размещены на главной — все названия постов в теге h2

Заголовки и подзаголовки, которые я использую при написании статей – теги h2 и h3 (соответственно, заголовок – h2, подзаголовок – h3)

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

Пример использования ключевых слов в названиях виджетов:

у меня кулинарный блог с рецептами, на котором есть виджеты под названием АРХИВ БЛОГА, ЧИТАТЬ и КОММЕНТАРИИ. Все эти виджеты я бы заковала в тег h6, а оставшиеся h3-h4-h5 лучше бы использовала в самих постах. Но если я АРХИВ БЛОГА переименую в КУЛИНАРНЫЕ РЕЦЕПТЫ, ЧИТАТЬ в  КУЛИНАРНЫЙ РЕЦЕПТ ПОЛНОСТЬЮ, а КОММЕНТАРИИ в ПРОКОММЕНТИРОВАТЬ КУЛИНАРНЫЙ РЕЦЕПТ, то тогда бы я все эти виджеты заковала в h4, тем самым сказав роботам, что это тоже важно. А в статьях, для SEO эффекта я бы использовала все оставшиеся теги до h4 и после h4. Но это в моём случае, поскольку я теги h2-h3 использую в заголовках и подзаголовках статей для усиления SEO-эффекта. Вы же ориентируетесь по своей собственной структуре блога и постов. Главное, чтобы не было пропусков в тегах и логически всё было правильно. Все теги должны идти по порядку. То есть нежелательно употребить теги h1 и h2, пропустить h3-h4, а потом использовать h5 и h6.

Собственно приступаю к первым двум.

Оптимизация заголовка блога h1 в blogspot

Перед тем как влезть в код, если у вас уже внушительный блог, не забудьте сделать бэкап. Также, чтобы не тратить часы на поиски необходимого участка кода, и при условии, что вы вообще мало понимаете в html, научитесь сразу пользоваться поиском. Делается это очень просто. Находясь уже в коде html нужно нажать сочетание клавиш Ctrl+F и в появившееся окно вставить кусочек кода, который пытаетесь найти для замены.  Благодаря этой функции вы за секунду найдёте необходимый участок кода и при этом не ошибётесь.

Итак, начнём с того, что нам необходимо оптимизировать заголовок. По умолчанию он закован в тег h1. В принципе, правильно! Но! Нам необходимо, чтобы заголовок в h1 был только на главной странице, но не на внутренних. Ибо на внутренних мы планируем заковать в тег h1 названия постов. Стало быть, название самого блога на внутренних страницах приобретёт ссылочный вид, и при нажатии на заголовок блога мы будем возвращаться на главную страницу. Для этого нам необходимо найти следующий кусок кода (ищем с помощью ctrl+F):


<h1 class='title'>
 <b:include name='title'/>
</h1>

Который необходимо заменить на следующий кусок кода (при копировании, чтобы не зацепить лишний код с сайта, на всякий случай воспользуйтесь для форматирования обычным блокнотом):


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <h1 class='title'><b:include name='title'/></h1>
<b:else/>
 <a href='/' expr:title='"На главную страницу «" + data:title + "»"'><data:title/></a>
</b:if><b:else/>
 <a href='/' expr:title='"На главную страницу «" + data:title + "»"'><data:title/></a>
</b:if>

Более подробно, как это делается, смотрите в прилагаемом видео (разверните плеер на весь экран и выберите в настройках высокое качество HD)

Следующим моментом, необходимо найти такой кусок:


<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>

Который нужно заменить на:


<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
              <b:if cond='data:blog.pageType != &quot;item&quot;'>
              <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                <h1 class='title' style='background: transparent; border-width: 0px'>
                  <b:include name='title'/>
                </h1>
              <b:else/>
                <a href='/' expr:title='"На главную страницу «" + data:title + "»"' class='title' style='background: transparent; border-width: 0px'><data:title/></a>
              </b:if><b:else/>
                <a href='/' expr:title='"На главную страницу «" + data:title + "»"' class='title' style='background: transparent; border-width: 0px'><data:title/></a>
              </b:if>

Ну вот, теперь заголовок блога у нас имеет важное значение в теге h1 только на главной странице, а на внутренней — он становится простой ссылкой, ведущей на ГЛАВНУЮ, потому что на внутренней странице мы это важное значение отдадим заголовку статьи. Стало быть, если заголовок статьи на внутренней странице у нас будет в теге h1 и будет считаться важным, то на главной странице мы его лишим этой важности, потому, не забываем, что на главной странице у нас самый важный – заголовок блога.

Для того чтобы внести вышеописанные изменения, необходимо использовать следующие коды:

Оптимизация заголовка статьи h1 в blogspot

Необходимо найти вот этот кусочек кода:


<a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Который, необходимо заменить на:


<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
 <b:if cond='data:post.link'>
  <h2 class='post-title entry-title' itemprop='name'>
   <a expr:href='data:post.link'><data:post.title/></a>
  </h2>
 <b:else/>
  <b:if cond='data:post.url'>
   <b:if cond='data:blog.url != data:post.url'>
    <h2 class='post-title entry-title' itemprop='name'>
     <a expr:href='data:post.url'><data:post.title/></a>
    </h2>
   <b:else/>
    <h1 class='post-title entry-title' itemprop='name'>
     <data:post.title/>
    </h1>
   </b:if>
  <b:else/>
   <h1 class='post-title entry-title' itemprop='name'>
    <data:post.title/>
   </h1>
  </b:if>
 </b:if>
</b:if>

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

оптимизация гаджетов в blogspot

Оставшиеся названия гаджетов из тегов h2 переформатируем на теги h4, так как они особой важности не несут.

Для этого ищем кусок кода:


<b:if cond='data:title'><h2><data:title/></h2></b:if>

Который меняем на:


<b:if cond='data:title'><h4><data:title/></h4></b:if>

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

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

Это всё хорошо, однако, не забывайте про логическую разметку:

• Заголовки h2
• Подзаголовки h3
• Теги <strong> и <em>
• А также не брезгуйте маркировать и нумеровать списочки, вставлять таблицы, картинки (не забываем их прописывать), делать перелинковку в тексте статьи наподобие вики разметок.

Всё это обязательно принесёт свой положительный эффект и прибавит вам трафика из поисковой выдачи яндекса.

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

Автор статьи: Алеся Левитская

Для написания статьи частично использовался следующий источник: оптимизация заголовка h1,h2,h3