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

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

Заголовки и подзаголовки в статье в блоге на 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!= "index"'>

<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>, а также использования различных шрифтов и цветов.

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

CorelDraw – отличный графический редактор, неплохая замена (вполне приемлемая по цене) фотошопу и другим аналогам. Купить Corel можно, в частности, на сайте компании "Оскомп".


Карта сайта


Информационный сайт Webavtocat.ru