Речь пойдет о том как сделать заголовок блога более SEO-привлекательным. И в частности, – заголовок первого типа.
Тюнинг заголовка Blogger: Изображение вместо названия и описания
Напомню, что в шаблонах Blogger доступно три варианта заголовка:
- Изображение вместо заголовка и описания
только изображение - Изображение после названия и описания
фоновое изображение + текст - Без изображения
только текст
В своем блоге я использую вариант «номер раз» – изображение вместо заголовка и описания. И недавно заметил, что стандартный заголовок Blogger не удовлетворяет требованиям поисковой оптимизации. Да и структуре страницы вообще. Поэтому, как говорится, «будем лечить» или тюнинговать – кому как больше нравится.
Структуру заголовка я рассматривал здесь: Виджет заголовка Blogger. При желании можешь ознакомиться подробнее. Меня же интересует следующий фрагмент кода.
Исходный код заголовка
# Листинг 1: Фрагмент виджета «Заголовок» – только изображение.
<b:if cond='data:imagePlacement == "REPLACE"'>
<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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
И тут я вижу две проблемы:
- Отсутствует заголовок верхнего уровня (h1) на странице блога;
- Отсутствует описание блога.
Тюнинг заголовка Blogger
Следовательно, нужно добавить и то и другое.
- Заключить ссылку на главную страницу блога в теги заголовка верхнего уровня
<h1>и</h1>; - Добавить описание блога в тег ссылки как вычислимое выражение:
expr:title='data:description'.
Вот что в итоге должно получиться:
# Листинг 2: Исправленный фрагмент виджета «Заголовок» – только изображение.
<b:if cond='data:imagePlacement == "REPLACE"'>
<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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a></h1>
</div>
<b:else/>
Не забудь сохранить шаблон.
Кстати, текстом заголовка верхнего уровня будет название блога. В первом варианте заголовка это альтернативный текст изображения – атрибут alt.
6 Комментариев :
Интересно было бы узнать эффект на практике. После таких изминений в коде были ли изменения в позициях? В любом случае спасибо - попробую.
Мысль, конечно, здравая. Но как правило эффект от таких мероприятий отследить довольно сложно, так как эксперимент получается довольно сильно «размазанным» во времени. И присутствуют «другие факторы» – новые статьи, комментарии, ссылки и т.п.
У меня не вышло. Шаблон после изменений не хочет сохраняться.
Yi-dam, обычно редактор шаблона выдает сообщение об ошибке, почему он не может сохранить.
Да, редактировать заголовок нужно в режиме Расширить шаблоны виджета и, – понятное дело, – заменять только нужную часть. Начиная с
<b:if cond='data:imagePlacement == "REPLACE"'>
и по следующий
<b:else/>
Спасибо за мануал! Я таких серьезностей относительно кода хтмл не знаю, мне подобные инструкции как нельзя кстати! Блог Ваш однозначно в избранное!
Большое спасибо! Все получилось.
А не подскажите, можно ли добавлять мета данные (дискрипшн, кеи) к каждой странице/посту? Такой хак очень помог бы в плане оптимизации.
Отправить комментарий
Жги!