Содержание.
- Оптимизация заголовка h1.
- Делаем логотип для блога на Blogger.
- Задаём условие: если выводится Главная страница, заголовок блога = h1, иначе - выбранный вами логотип.
- Задаём условие: если выводится Главная страница, то заголовок сообщения = h2, иначе - h1.
- Теперь последний штрих - правим css стиль.
- Оптимизация заголовков h2 и h3.
- Оптимизация заголовка h4.
- Проверяем результат.
Первый элемент, который оценивается участниками интернета - это заголовок статьи.
Он должен быть:
- Уникальным для каждой статьи. Его повторение может сказать поисковой системе о дублировании содержания этих страниц в целом.
- Включать ключевые слова.
- Привлекать внимание.
- Быть содержательным.
- Максимальная длина не превышать 65 символов.
- Наиболее важное слово должно находиться слева (быть первым).
- Внутри тега h не должны содержаться другие теги, в том числе <img />, форматирование осуществляется с помощью стилей CSS.
Для поисковых систем определяющим критерием является уровень заголовка (h1-h6). На одной странице желательно использовать заголовки не превышающие трёх уровней вложенности. Не совершайте пропуск уровней заголовков, например, h1»h2»h3, а не h1»h3.
Оптимизация заголовка h1.
Наиболее важен первый, далее по убывающей. Заголовок уровня h1 должен употребляться на странице не более одного раза (искл. HTML 5), располагаться выше заголовков других уровней и иметь самый большой размер шрифта. Правильно оптимизированный заголовок: для Главной страницы h1 = Заголовку блога, иначе Заголовку сообщения/страницы. Увы, стандартные шаблоны на платформе Blogger не чтут данное правило, но позволяют исправить эту оплошность вручную.
Делаем логотип для блога на Blogger.
Перво-наперво, разрабатываем логотип аналогичный вашему названию блога, воспользовавшись, например, онлайн-сервисом Cool Text или онлайн-сервисом Logo Maker (не поддерживает кириллицу). Подбор цветов можно упростить, применив программу ColorPicker.
Затем картинку следует оптимизировать, то есть сократить объёма её файла.
И, наконец, своё изображение добавляем в гаджет "Заголовок" ("Дизайн"-"Элементы страницы"), где "Местом размещения" важно указать "Помещать описание под изображением".
 |
| Добавить логотип для блога на Blogger. |
Логотип готов. Теперь нужно внести ряд изменений в шаблон блога. Предварительное его сохранение избавит вас от случайной потери информации. В "Дизайн"-"Изменить HTML" устанавливаем галочку "Расширить шаблоны виджета". Для поиска фрагментов в коде используем комбинацию клавиш CTRL+F.
Задаём условие: если выводится Главная страница, заголовок блога = h1, иначе - выбранный вами логотип.
Код:
<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>
меняем на: <b:if cond='data:blog.pageType != "index"'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img alt='текст' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<b:else/>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
</b:if>
 |
| Оптимизация заголовка h1. При главной странице, заголовок блога=h1, иначе - логотип. |
В данном коде нужно указать параметр alt.
Если вам не нравиться, что логотип являлся ссылкой для перехода на Главную страницу с динамических страниц, то можно удалить <a expr:href='data:blog.homepageUrl' style='display: block'> и </a>.
Задаём условие: если выводится Главная страница, то заголовок сообщения = h2, иначе - h1.
Код:
<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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
меняем на:<b:if cond='data:post.title'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <h2 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> </h2> <b:else/> <h1 class='post-title entry-title'> <data:post.title/> </h1> </b:if> <b:else/> <h1 class='post-title entry-title'> <data:post.title/> </h1> </b:if></b:if>
Здесь я посчитала нужным сделать заголовки статей h1 текстом, а не ссылкой.
Теперь последний штрих - правим css стиль.
Код:
h3.post-title {
font: $(post.title.font);
margin: 0;
}
меняем на:h2.post-title {
font: $(post.title.font);
margin: 0;
}
h1.post-title {
font: $(post.title.font);
color: $(header.text.color);
margin: 0;
}
Выше произведенные действия желательно осуществлять в совокупности с корректировкой тега title в выдаче поисковой системы.
Оптимизация заголовков h2 и h3.
Заголовки гаджетов.
Тегами h2 обрамляются названия гаджетов. Не нужно этого делать. Поэтому заменяем h2 на тег strong.
Подзаголовки.
Если в тексте статей вы используете подзаголовки, то их желательно заключать в теги h2 и h3 по принципу иерархии. Помимо того, что вес ключевого слова в них выше, порой можно встретить их текст в выдаче Яндекса. Пример для статьи "IE и position: absolute"
При редактировании/написании сообщения, используя вкладку "Изменить HTML", обрамляем текст в данный тег: <h2>Подзаголовок</h2>, внутри которого может находиться <h3>Подзаголовок</h3>. Как видите, для качественного отображения, необходимо проследить, чтобы наш Подзаголовок не был оформлен другими тегами, такими как <span>.
 |
| Разместить подзаголовки h2 и h3 в сообщении блога на Blogger. |
Для улучшения стиля h2 в коде шаблона:
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
margin: 0 0 .5em;
}
я изменила параметры одной строки: margin: .5em 2em .5em;, где .5em - это отступы сверху и снизу от текста, 2em - отступ слева. Всё остальные действия по подбору цвета, размера, шрифта можно сделать в "Дизайн"-"Дизайнер шаблонов"-"Дополнительно"-"Гаджеты".Оптимизация заголовка h4.
h4 присвоен заголовку комментариев. Выглядит это как "0 коммент.". Для того, чтобы окончание всё же присутствовало, код между <h4>...</h4>:
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
меняем на:<b:if cond='data:post.numComments == 0'>
Нет комментариев.
<b:else/>
<b:if cond='data:post.numComments > 20'>
<data:post.numComments/> <script>
if(<data:post.numComments/> / 10 % 10 == 1) document.write("комментариев"); else
switch(<data:post.numComments/> % 10){
case 1: document.write("комментарий"); break;
case 2:
case 3:
case 4: document.write("комментария"); break;
default: document.write("комментариев");
}
</script><noscript><data:commentLabelPlural/></noscript>
<b:else/>
<b:if cond='data:post.numComments == 1'>
<data:post.numComments/> комментарий
<b:else/>
<b:if cond='data:post.numComments < 5'>
<data:post.numComments/> комментария
<b:else/>
<data:post.numComments/> комментариев
</b:if></b:if></b:if></b:if>
Далее я заменила в шаблоне все h4 на h3.
Изменяем внешний вид текста комментариев.
Код:
.comments h4 {
font: $(post.title.font);
margin: 1em 0 0;
}
заменяем на:h3 {
font: $(post.title.font3);
color: $(header.text.color);
margin: .5em 0 .5em;
}
.comments h3 {
font: $(post.title.font3);
color: $(header.text.color);
margin: .5em 0 .5em;
}
После строки:
<Group description="Post" selector=".post">пишем примерно такой код:
<Variable name="post.title.font3" description="Title Font3" type="font"
default="normal normal 17px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 17px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;"/>
Это мой аналог <Variable name="post.title.font"/>, в котором я скорректировала лишь размер шрифта (17px). У вас будет другой, но обязательно следует указать те же параметры name и description. |
| Внешний вид текста комментариев в шаблоне Blogger. |
Проверяем результат.
При просмотре своего блога, правой клавишей мышки выводим "Исходный код страницы". Используя CTRL+F, проверяем уровни заголовков h1, h2, h3.
Похожие статьи:
Отправить комментарий