четверг, 7 января 2010 г.

SEO-friendly заголовок блога

Заголовок, описание блога

Речь пойдет о том как сделать заголовок блога более SEO-привлекательным. И в частности, – заголовок первого типа.

Тюнинг заголовка Blogger: Изображение вместо названия и описания


Напомню, что в шаблонах Blogger доступно три варианта заголовка:

  1. Изображение вместо заголовка и описания
    только изображение
  2. Изображение после названия и описания
    фоновое изображение + текст
  3. Без изображения
    только текст


В своем блоге я использую вариант «номер раз» – изображение вместо заголовка и описания. И недавно заметил, что стандартный заголовок Blogger не удовлетворяет требованиям поисковой оптимизации. Да и структуре страницы вообще. Поэтому, как говорится, «будем лечить» или тюнинговать – кому как больше нравится.



Структуру заголовка я рассматривал здесь: Виджет заголовка Blogger. При желании можешь ознакомиться подробнее. Меня же интересует следующий фрагмент кода.


Исходный код заголовка

# Листинг 1: Фрагмент виджета «Заголовок» – только изображение.


<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>

И тут я вижу две проблемы:


  1. Отсутствует заголовок верхнего уровня (h1) на странице блога;

  2. Отсутствует описание блога.

Тюнинг заголовка Blogger

Следовательно, нужно добавить и то и другое.


  1. Заключить ссылку на главную страницу блога в теги заголовка верхнего уровня <h1> и </h1>;

  2. Добавить описание блога в тег ссылки как вычислимое выражение: expr:title='data:description'.

Вот что в итоге должно получиться:


# Листинг 2: Исправленный фрагмент виджета «Заголовок» – только изображение.


<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<div id='header-inner'>
<h1><a expr:title='data:description' expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a></h1>
</div>
<b:else/>

Не забудь сохранить шаблон.


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

6 Комментариев :

Давыдов комментирует...

Интересно было бы узнать эффект на практике. После таких изминений в коде были ли изменения в позициях? В любом случае спасибо - попробую.

Croaker комментирует...

Мысль, конечно, здравая. Но как правило эффект от таких мероприятий отследить довольно сложно, так как эксперимент получается довольно сильно «размазанным» во времени. И присутствуют «другие факторы» – новые статьи, комментарии, ссылки и т.п.

Yi-dam комментирует...

У меня не вышло. Шаблон после изменений не хочет сохраняться.

Croaker комментирует...

Yi-dam, обычно редактор шаблона выдает сообщение об ошибке, почему он не может сохранить.

Да, редактировать заголовок нужно в режиме Расширить шаблоны виджета и, – понятное дело, – заменять только нужную часть. Начиная с
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>

и по следующий
<b:else/>

Игорь Илюшин комментирует...

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

Web Affiliates комментирует...

Большое спасибо! Все получилось.
А не подскажите, можно ли добавлять мета данные (дискрипшн, кеи) к каждой странице/посту? Такой хак очень помог бы в плане оптимизации.

Отправить комментарий

Жги!