Заголовки и подзаголовки в Blogger

В этой статье расскажу, как оптимизировал заголовки в моем блоге.

Для чего нужны заголовки и подзаголовки в статье?

В первую очередь, чтобы выделить основные мысли текста. Заголовки записываются тегами <h1>...<h6>. То есть самый важный по значимости — это заголовок, заключенный в тег <h1>пример заголовка</h1>. Его лучше всего использовать один раз, в названии статьи.
По умолчанию в Blogger h1 используется в названии блога, причем на всех страницах блога. По идее, лучше всего оставить заголовок блога только на главной странице, а на внутренних в заголовке должны присутствовать названия размещенных на них статей. Этот момент я разобрал в статье про оптимизацию title.

Но тут у меня появилась следующая проблема. Заголовки статей по умолчанию были в <h3>, соответственно они выводились в таком невзрачном формате. Чтобы сделать их более значимыми, нужно немного подправить код шаблона. Ищем в настройки blogger → шаблон → изменить html следующий фрагмент:

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <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>

и заменяем на

 <b:if cond='data:post.title'>
    <b:if cond='data:blog.pageType != &quot;index&quot;'>
      <h1 class='post-title entry-title'>
          <data:post.title/>
      </h1><b:else/>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if></b:if>

Да-да, берем и заменяем весь код. Это даст нам заголовки сообщений в <h1> на всех страницах, кроме главной. На главной заголовки будут в <h3>. Все это применимо, если вместо заголовка и описания блога у нас стоит картинка (логотип). Использование логотипа я подразумеваю как обязательное, ибо узнаваемость блога должна быть чисто визуальной, если в шапке блога выводится просто текст, то нужно срочно это исправлять! Про логотип напишу в одной из следующих статей.

Про заголовки гаджетов

Далее. Названия гаджетов на блогспоте выводятся в <h2>. Это неприемлемо, так как нет нужды придавать им значимости, поэтому я просто никак не обзываю гаджеты, и все дела. Возможно, я изменю свое мнение со временем и тогда опишу процесс замены <h2>  на что-нибудь более полезное.

Почему я не стал выводить названия статей на главной в <h2>? Ну, видимо я посчитал, что это более логично, так как главная блога постоянно меняется, да и вообще, была у меня проблема, когда вместо целевой страницы у меня в выдачу попадала постоянно именно главная, поэтому я и сделал на всякий случай названия в <h3> Это наблюдалось в конкурсной статье про Seocafeинфошность. Сути это не меняло, а эффект был ошеломляющим, по крайней мере, для меня.

Параметры (шрифт, размер) заголовков меняем в настройках шаблона Blogger. В этой статье есть примеры использования заголовка в <h2>, для него я подправил шаблон, а именно css-стиль, отвечающий за отступы от основного текста. Ищем:

h2 {
  margin: 0 0 1em 0;


  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}

и заменяем на

h2 {
  margin: 2em 0em .5em;


  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}

margin: 2em 0em .5em; задает отступы сверху, сбоку и снизу. За шрифт отвечает настройка заголовков гаджетов, вкладка "Дополнительно".

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

Мне еще не довелось использовать теги <h3>...<h6> в статьях, пока не вижу в них смысла, так как статьи не настолько развернуты и содержательны, чтобы делать всякие там подпункты. Для привлечения внимания читателей к определенной части статьи достаточно использования тегов  <h2>, <b>, <strong> и <em>, а также использования различных шрифтов и цветов.

Я только учусь применять заголовки, но понял, что если статья более-менее объемная, то делать это нужно в обязательном порядке! На этом все!