«

»

Май 20 2013

Распечатать Запись

SEO оптимизация заголовков блога на Blogger (blogspot.com)

Некоторое время назад я писал про разработку шаблона для Blogger (blogspot.com). Многие наработки я успел воплотить в жизнь на тестовом блоге, но дело заглохло из-за основной работы. Сейчас же вновь появилось немного времени заняться блогом на Blogger или шаблоном для оного и я решил перенести некоторые наработки из будущего шаблона в блог про ремонт. Одной из важнейших наработок с точки зрения СЕО стала оптимизация заголовков.

Давно не секрет, что заголовки h1, h2, h3 во всех стандартных шаблонах применяются, мягко говоря некорректно. Кроме того, Title на страницах со статьями тоже не лучшим образом сформирован. Будем исправлять =)

Суть проблем или что не устраивает в стандартных шаблонах Blogger

  1. Заголовки виджетов сделаны тэгами h2. Имхо, слишком сильный заголовок, для не самого важного контента на странице.
  2. На страницах с записями/статьями/постами хотелось бы видеть в тэге h1 не название сайта в шапке, а название статьи. h1 — самый важный заголовок, а на странице со статьей заголовок оной явно важнее названия сайта.
  3. На страницах с записями/статьями/постами в <title> сначала идет название сайта, а затем уже название статьи. По тем же причинам, что и в предыдущем пункте надо, чтобы сначала шло название статьи, а затем уже название сайта. Кроме того поисковик в заголовок сниппета берет ограниченную начальную часть тайтла — будет очень обидно, если из-за названия сайта туда не влезет полное название статьи.

Проблемы обрисовали, перейдем к решению…

Общая схема использования заголовков на блоге

Тэг H1

Используем в названии сайта на всех страницах, кроме статических страниц и постов.

На страницах постов и записей название сайта заключаем в обычный <p> с нужными классами. H1 используется для названия статьи/страницы/записи.

Тэг H2

На статических страницах и в статьях блога H2 используем для разбиения текста на крупные блоки.

На остальных страницах в теге H2 должны находиться названия статей.

Тэг H3

Используем для мелкого разбиения внутри статей и в качестве заголовков виджетов.

3 шага для оптимизации заголовков блога на Blogger

Оптимизируем Title блога

Ищем в своем шаблоне код, отвечающих за вывод Title. Обычно он выглядит так:

 А должен выглядеть вот так:

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

Оптимизируем заголовок блога и статей

С технической точки зрения тут три связанных действия:

  1. Изменить используемые тэги в заголовке сайта и заголовках статей в зависимости от типа текущей страницы.
  2. Поправить стили CSS после первого изменения, так как во многих шаблонах стили привязаны к тегам, а надо будет как минимум переделать их на классы.
  3. Переписать все статьи, так как раньше для разбиения оных на разделы вы скорее всего использовали h3 (так как h1 и h2 использовались в других местах сайта и заголовок статьи был в тэге h2).

На счет второго я могу только посоветовать сохранить исходный вариант вашего блога (главной страницы и страницы с любой статьей), чтобы после изменения тэгов суметь переписать CSS стили так, чтобы внешне блог не изменился. Стили лучше именно переписать в самом шаблоне, а не добавлять новые перекрывающие старые CSS правила, дабы не раздувать объем страницы и не напрягать браузер при отображении.

Подробно опишу как сделать первый пункт — изменить используемые тэги. Менять надо в двух местах: в заголовке сайта (виджет Header1 в шаблоне Blogger) и в заголовках статей (includable-секция Post виджета Blog1 в шаблоне Blogger).

Оптимизация заголовков блога на Blogger - быстрый переход к виджету в новом редакторе шаблона BloggerДля начала поменяем в шапке сайта. Благодаря новому редактору шаблонов Blogger быстренько переходим к виджету Header1. В нем целиком заменяем секцию <b:includable id=’title»> на две новые со следующим кодом:

 Как видите, первая выводит название сайта в тэге <h1>, а вторая в тэге <p>.

После этого меняем код основной inludable секции виджета <b:includable id=’main’>. В ней ищем три почти одинаковых места, отвечающих за вывод названия сайта. Обычно этот код выглядит так:

 Нам же надо его заменить на чуть более сложную конструкцию:

Тут я использую добавленные ранее includable-секции виджета для вывода названия сайта либо в тэге <h1> либо в тэге <p>, в зависимости от ситуации.

После изменений в заголовке блога, надо изменить тэг в заголовках статей. За вывод последних, как я уже говорил, отвечает includable-секция Post виджета Blog1. Изначально код, отвечающий за вывод заголовка статьи будет примерно таким (с точность вариаций h2/h3):

 Меняем сие стандартное творение на такой код, чтобы оптимизировать наши заголовки как было описано ранее:

 Если редактор будет ругаться то заменить в выше приведенном коде &lt; на < (знак меньше), &gt; на > (знак больше), &#39; на (одинарная кавычка). Кроме того. обратите внимание, что я использую канонический URL статьи. Если вы не делали изменений в шаблоне для перенаправления пользователя на домен .com, то оставьте использование обычного url как в исходном коде.

Оптимизация заголовков виджетов

Тут все совсем просто. Заходим в код каждого виджета (благо теперь в редакторе есть выпадающий список для перехода к любому виджету). Ищем там код (иногда его нет, так ка не  у всех виджетов выводится заголовок):

 И заменяем h2 на h3.

Спасибо за внимание жду ваших комментариев и вопросов, если что не понятно!

5 комментариев

Перейти полю для комментария

  1. Д-бомж

    Дельная статья

  2. Павел Ключевой

    Пункт 3 порадовал: «..переписать все статьи..») А если их несколько сотен)

    1. Stonekeeper

      Могу предложить частичную автоматизацию данного процесса. Редактор NotePad++ позволяет написать небольшие простые макросы. Пишем макрос из нескольких автозамен (алгоритм несложный — сами продумаете).
      Для каждой статьи копируем исходный код в редактор, выполняем макрос и копируем получившееся копируем обратно в исходный код статьи.

  3. Пепа Табакова

    Спасибо за статью. Я из Болгарии и мой русский не является хорошим.
    Я последовала за все шаги и все получилось. Скажите, как сохранить стиль шрифта зоголовки посты и виджеты. После изменения в шаблоне они не подлежат индивидуализации. И я вернулась на старую копию до изменения.
    Спосибо.

    1. Stonekeeper

      Хороший вопрос.
      Если за три года с момента написания статьи ничего кардинального не изменилось, то надо сделать аналогичные изменения и в части определения стилей шаблона (в начале поста есть ссылка на пост со структурой шаблона).
      Я про стили забыл здесь написать, так как эту часть сам почти полностью переделывал.
      Точнее ответить сейчас, к сожалению, не смогу — уже давно не возвращался к Blogger.

Добавить комментарий для Д-бомж Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *