Как оптимизировать H-заголовок поста в шаблоне блога на Blogger (blogspot) под поисковые системы?

Дорогие друзья, в прошлом своём посте об оптимизации шаблона блога на Blogger под поисковые системы я остановился в основном на редактировании тега title. В этот раз я предлагаю продолжить тему оптимизации и поговорить об H-заголовке постов в шаблоне блога на Blogger (blogspot).

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

Т.к. речь пойдёт о постах блога на Blogger (blogspot), обратимся к их H-заголовкам. По умолчанию они обычно имеют следующий вид:

<h3 class="post-title entry-title" itemprop="name">{название поста}</h3>

И так. Мы имеем тег H3, что вполне приемлемо для списка постов в том же архиве. В случае же со страницей поста мы можем получить нарушение иерархии содержания. Я говорю о том случае, когда и в тексте поста имеются заголовки. Очевидно, что название поста должно быть помещено в тег H1, а в самом посте должны использоваться заголовки H2, H3... Hn.

Оптимизация H-заголовка поста в шаблоне блога на Blogger

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

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

резервное копирование шаблона на Blogger

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

Шаг 2. Далее нажмем кнопку «Изменить HTML» на странице «Шаблон».

как изменить (редактировать) шаблон в Blogger

Шаг 3. В открывшемся окне выберите из списка «Список виджетов» виджет «Blog1».

выбираем из списка виджетов виджет Blog1

Шаг 4. Кликните по стрелочке (вправо) на серой полоске с номерами строк для раскрытия кода виджета «Blog1».

раскрытие виджета(виджетов) в новом HTML редакторе шаблона на Blogger

Шаг 5. В списке инклудов (includable), входящих в виджет «Blog1», нас интересует тот, что с id='post' – кликаем стрелочку для его раскрытия.

раскрытие инклуда(includable) в новом HTML редакторе шаблона на Blogger

Шаг 6. В открывшемся коде, найдите следующий фрагмент:

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

Для наглядности я специально выделил жирным произведенные изменения. Таким образом, заголовок на странице поста у нас будет в теге H1, а в том же архиве H3.

Шаг 7. Нажмите кнопку «Сохранить шаблон», а после сохранения кликните крестик в окне «Изменить HTML».

Twitter Facebook ВКонтакте Одноклассники Google+

27 комментариев:

Анна Шефер
Хм, не знала, спасибо за совет
Константин Кирилюк
@Анна Шефер ну, это просто чистая логика, а вообще все эти заголовки как в книгах, например:

1. Заголовок (это H1)
Здесь текст

1.1. Подзаголовок (это H2)
Здесь текст

1.1.1. Подподзаголовок (это H3)
Здесь текст

Всё это учитывают и поисковые системы, а значит нужны соответствующие изменения и в шаблоне сайта.

Отмечу и то, что в самом посте, с учетом использования тега H1 для названия поса, стоит использовать H-теги начиная с H2 и т.д. Как-то так.
Александр Платонов
У меня возникла проблема со строкой - ее попросту нет =(
Владимир Стариков
Спасибо за совет. Попробую. Всегда менял h2 на h1 вручную.

Хотелось бы еще узнать как в подзаголовке h2 заменить текст из ЗАГЛАВНЫХ букв на обычные. У меня, почему-то этот подзаголовок воспроизводится так, остальные нормально.

Спасибо.
Константин Кирилюк
@Александр Платонов А вы установили галочку "Расширить шаблоны виджета" (см. шаг 3)?
Константин Кирилюк
@Владимир Стариков давайте по пунктам:

1. зачем меня что-то вручную? Уточните эту ситуацию, а то не пойму о чем идет речь.

2. по всей видимости в CSS вашего блога для тега H2 прописано свойство text-transform: uppercase; его надо убрать или добавить дополнительное правило в том через тот же дизайнер шаблона (см. Настройки > Шаблон > Настроить) там в Дополнительно > Добавить CSS можно прописать, например так:

h2 { text-transform: none; }

если речь идёт о заголовках в посте то лучше уточнить свойство:

.post-body h2 { text-transform: none; }

В общем, если что пишите на мыло, будем разбирать ваш случай отдельно.
Александр Платонов
Все сделал,я видимо глазами по посту пробежался и не заметил 3й шаг. Спасибо большое=)
Gari Forman
Я вначале не понял в чем проблема-то. Сам я живу на Тумблере, а тут я зашел в Блогспот, открыл первый попавшийся шаблон и обалдел. Теперь понятно почему столько шуму вокруг H-заголовков.
Спасибо, за статью, теперь есть с чего начинать изучать Блогспот.
Владимир Стариков
Изменился редактор шаблонов. Теперь пункта "Расширить шаблоны виджета" нет. А как добраться к этому коду я так и не понял.
Константин Кирилюк
@Gari Forman проблема с H-заголовками и структуризацией контента присуща любому сайту на любом сервисе или движке... имхо. Впрочем, соглашусь... после Тумблера шаблоны Блоггера выглядят очень навороченными... наверное. Удачи!
Константин Кирилюк
@Владимир Стариков спасибо за новость! Внёс соответствующие изменения в заметку.
Aleks
Здравствуйте, Константин. Внес изменения в код для замены h3 на h1, как Вы рекомендовали в своем посте. Теперь при нажатии ЧИТАТЬ ДАЛЬШЕ заголовок сообщения из центра съехал влево. Не подскажите как вернуть заголовок поста в центр? Александр.
Константин Кирилюк
@Aleks внешний вид заголовка описывается через CSS. Понятно, что при использовании тега H1, вместо H3 он будет выглядеть как H1 а не как H3. Другими словами, надо смотреть и в идеале задавать свойства для класса .post-title, например:

.post-title {text-align:center}

В общем, надо смотреть по обстоятельствам и не забывать делать дубли! Если что свяжитесь со мной по e-mail - постараюсь помочь.
Aleks
Подкорректировал CSS с помощью .post-title {text-align:center}. Заголовки сообщений выравнялись, как надо.

Спасибо Вам за совет.
Василий Полтава
Если изменения вступают в силу сразу, то не помогло. Но буду надеяться что после посещения роботом.
Константин Кирилюк
@Василий Полтава изменения появятся сразу после сохранения, а поисковик да, узнает о них когда проиндексирует.
Василий Полтава
Спасибо, но после изменения я опубликовал статью, как было h3 так и осталось.
Константин Кирилюк
@Василий Полтава значит вы сделали что-то не то или не так, как видите, на моем блоге все именно так как я описал.

Проверьте еще раз, може вы внесли изменения в includable и id='mobile-post', а не id='post' ?
Василий Полтава
В том-то и дело что вижу, а у себя понять не могу почему.
Василий Полтава
Костя Вы звените, я-бы до сих пор голову ломал-бы, а загвоздка была вот в чём, я не этот id='post' искал, а сразу , вот и выдало мне вообще другой код, спасибо Вам.
вика
Константин. Разобралась благодаря Вам. Спасибо а то в сети столько разночтений по этому поводу. А есть ли у Вас пост о том надо или нет прописывать ключевые слова в шаблон.Мнения тоже разнятся.
Константин Кирилюк
@вика тут и поста не надо. Метатег keywords уже давно не используется ни в одной современной системой... вообще. Просто у сеошников осталось ностальгическое правило хорошего тона, указывать таковые... ;-)
Анонимный
Дружище!!!
Огромнейшее спасибище!
Я танцевал с бубном два дня. У тебя самая толковая статья из всех какие я перепробовал за это время!!!!
Занес в закладки.
Удачи во всем!
Спасибо!
В знак благодарности посмотрел "твой квадрат" под заголовком.
Александр Дмитриевич
Получилось, спасибо
Андрей Боголюбов
Огромное Спасибище!!!
Вчера, день угрохал, и так и эдак.
Успехов во всем! В благодарность жмакнул 336-й ;-)
Владимир Воробьёв
Всё сделал.Сейчас буду проверять в Бинге...Отпишусь
Константин Кирилюк
2Владимир Воробьёв результаты будут не сразу, на переиндексацию может уйти много времени, в зависимости от количества контента на сайте. Да и нельзя сказать, что одно конкретное решение может сразу вывести в ТОП. SEO это достаточно комплексный подход, где важны не только и не столько отдельные моменты, сколько динамика развития сайта. Если интересно, рекомендую почитать статью: Массовый фильтр АГС-40 от Яндекс - там об этом достаточно понятно (имхо) сказано.
Отправить комментарий