Оптимизация заголовков в блоге h1 h2 , и последующие h3 h4 h5 h6 на блогах Blogger(blogspot). Для начала разберем зачем это нужно. Все заголовки (title) выстроены в шаблоне блога в иерархическом порядке, как бы виртуальная пирамида. В самом верху заголовок который помечен H1 – он может быть только один на странице. В основном в первоначальном виде в стандартных шаблонах Blogger тегом H1 помечен заголовок блога. H1 может быть лишь один на странице. Тегом H2 помечены заголовки гаджетов в блоге, тегом H3 помечены заголовки статей, H4 помечены комментарии , H5-H6 помечены дополнительные заголовки в блоге той части которая зовется "футер" то есть подвал блога, низ страницы. (H5-H6 есть не у всех, а лишь некоторых шаблонах).
Зачем нужна такая иерархическая система заголовков title в блогах ? – Эти теги нужны для поисковиков. Поисковых машин и роботов которые сканируют ваш блог чтобы он появлялся в выдаче их поиска. Действует это по принципу : поисковики считают самыми важными заголовками на странице те которые находятся на верхушке иерархической пирамиды. Они отличаются размерами шрифта. То есть H1 это самый главный заголовок и большой по размеру, H2 чуть менее важным чем H1 и меньше размером и так далее по лестнице.
Так вот то, что сделано с тегами H в стандартных шаблонах Blogger неправильно. Пара h1 h2 употреблена не просто не качественно а во вред пользователю который раскручивает свой блог. Думаю что конечно это не со зла , а просто потому что разработчики оставили пользователям самим доделывать как говориться “под себя” шаблоны, h1 h2, и сделать оптимизация заголовков. Сами понимаете что если заголовок статьи на вашей странице помечен как H3 то насколько важным его считает поисковик когда кто то ищет что-то в поиске ? Естественно поисковик считает что заголовки гаджетов на вашей странице которые помечены H2 важнее для поиска чем заголовки ваших статей которые помечены как H3. Такое неприемлемо. Нормальный шаблон должен выглядеть так : на вашей главной странице заголовок (название) блога должен быть помечен тегом H1 так как на главной странице выводиться не одна статья, а несколько заголовков а H1 должен быть только один на странице. Заголовки статей на главной странице должны быть обрамлены в теги H2. Гаджеты для всего блога помечаются в теги strong. Комментарии в тег H3. А вот на внутренних страницах для хорошей оптимизация заголовков нужно ставить в шапку блога не название, а картинку с названием (сделанную в фотошопе или онлайн сервисах) чтобы можно было поставить заголовок статьи в тег H1. Тогда для поисковиков самым главным заголовком из всех в вашем блоге будет приоритетом заголовки ваших статей а не гаджетов. h1 h2 не так уж и сложно сделать оптимизация заголовков если конечно знать как. Итак как нам это сделать наши h1 h2 : Многие лезут в шаблон и начинают искать все h1 h2 и начинают все вручную переименовывать, можно конечно и так, но так можно сильно запутаться и слишком это долго надо делать. Поэтому легче всего это сделать с помощью кодов CSS которым можно не только сменить теги H на то как должно быть, но и сделать все остальные настройки по тегам H ,- такие как запрещение ссылки с главной страницы на саму себя что очень важно, и сделать так чтобы на главной странице заголовки статей были в тегах H2 а на внутренних в H1. Что естественно в ручную невозможно , все равно придется лезть в CSS. Так что лучше уж сразу сделать все как надо. не переживайте и не бойтесь если вы неопытны в этом деле,- все что вам надо будет сделать это просто делать все по порядку, копировать коды с этой страницы и вставлять в свой шаблон блога. Это не сложно.
Итак приступим к оптимизация заголовков вашего блога, – первое что надо сделать это сделать копию вашего шаблона если она у вас не создана чтобы все можно было вернуть в первоначальный вид если что. Заходите в “шаблон”- “резервное копирование” и сохраняете шаблон себе не компьютер.
настраиваем заголовок H1 если у вас в шапке только картинка без текста
Находим в шаблоне с помощью клавиш Ctrl+f такой код :
<!--show the image only-->
<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>
выделяем его синим цветом (левой клавишей мыши) и удаляем нажав кнопку BackSpace , и на его место аккуратно вставляем скопировав этот код :<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>
<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<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'/>
<b:else/>
<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>
Все. Если у вас на блоге только картинка в шапке без текста, то для H1 на главной больше ничего делать не надо. А сразу переходите к оптимизация заголовков статей (h1 h2).<div id='header-inner'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<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'/>
<b:else/>
<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>
настроить заголовок блога где используется только текст
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
text-align:center
}
.Header h1 a {
color: $(header.text.color);
}
Полностью копируем код. У вас он будет свой, но Header неизменны так что не запутаетесь, все зависит от внешнего оформления вашего шаблона. Мой код брать не нужно берите свой в шаблоне такой же. Копируем свой и вставляем ниже вашего чтоб получилось 2 одинаковых куска (естественно все с новой строки ), и меняем в первых строках идентификатор Header во втором куске на shapkabloga Должно получиться так:font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
text-align:center
}
.Header h1 a {
color: $(header.text.color);
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
text-align:center
}
.Header h1 a {
color: $(header.text.color);
}
#shapkabloga {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
text-align:center
}
#shapkabloga a {
color: $(header.text.color);
}
Теперь переходим к следующему шагу :font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
text-align:center
}
.Header h1 a {
color: $(header.text.color);
}
#shapkabloga {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
text-align:center
}
#shapkabloga a {
color: $(header.text.color);
}
Ищем в шаблоне код:
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
удаляем его и на его место ставим этот :<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' id='shapkabloga'>
<a href='http://URL-главной страницы'>Заголовок блога, как он есть</a>
</p>
</b:if>
</div>
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' id='shapkabloga'>
<a href='http://URL-главной страницы'>Заголовок блога, как он есть</a>
</p>
</b:if>
</div>
Внимание ! в коде выше необходимо указать URL адрес (ссылку) вашего блога и вписать название блога, чтобы название было одинаковым, как для главной страницы, так и для внутренних страниц.
настройка заголовка блога где используется картинка и текст
Ищем такой код :
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
Внимание! такой код в шаблоне встречается два раза ! нам нужно поменять вариант, который находится ниже первого.
Заменяем его на такой код :
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
</div>
Нажимаем “сохранить шаблон”. Если вы все проделали правильно для вашего варианта заголовка блога, то визуально ничего не измениться, но все теперь изменилось для поисковых роботов, сканирующих ваш блог. Теперь у вас в блоге такие изменения :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
</div>
- На главной странице заголовок помечен тегами h1
- На главной странице заголовок блога не является ссылкой, потому что на сайте не должно быть страниц, которые ссылаются сами на себя, поэтому мы эту ссылку убрали.
- На всех внутренних страницах заголовок блога стал в обычном текстовом теге, как просто текст.
- На всех страницах заголовок является ссылкой на главную страницу потому что это удобно для посетителей и дополнительная помощь внутренней перелинковке блога.
оптимизация заголовков статей тегами h1 h2
Делаем что бы на главной странице заголовки статей были в h2 а на внутренних страницах в h1.находим часть кода в шаблоне :
<div class='post hentry'>
Нам нужно будет заменить всю часть кода, который находится между строками:
<div class='post hentry'>
Здесь находиться код который мы будем менять.
<div class='post-header'>
Внимание ! вставляйте код между <div class='post hentry'>Вставляем сюда<div class='post-header'>. Вставляем этот код:Здесь находиться код который мы будем менять.
<div class='post-header'>
<b:if cond='data:blog.pageType == "item"'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<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:if>
</b:if>
Сохраняйте ваш шаблон. Потом надо пройти на страницы вашего блога и посмотреть на что изменилось. В зависимости от вида вашего шаблона, у некоторых вид останется прежним, на других потеряет внешний вид.<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<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:if>
</b:if>
Для улучшения внешнего вида заголовка надо найти такой код:
h3.post-title {
font: $(post.title.font);
margin: 0;
}
ИЛИ вот такой код потому что у всех шаблоны разные :h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
h2.post-title, .comments h3 {
font: $(post.title.font);
margin: .75em 0 0;
}
h1.post-title, .comments h3 {
font: $(post.title.font);
margin: .75em 0 0;
}
Сохраняем шаблон. Теперь почти все сделали ,- единственное что осталось – это теперь надо заголовки гаджетов сделать чтобы они не выделялись тегами H2 а заменить эти теги на strong.
font: $(post.title.font);
margin: .75em 0 0;
}
h1.post-title, .comments h3 {
font: $(post.title.font);
margin: .75em 0 0;
}
Изменяем заголовки гаджетов с тегов h2 на strong
Для этого находим :<data:title/> справа и слева которого есть теги <h2> и </h2>
и меняем <h2> и </h2> на <strong> и </strong>ВЕЗДЕ где найдете ! кроме гаджета “страницы” если он у вас как горизонтальная строка установлен.
.sidebar strong {color: #f9f5ed; text-shadow: 2px 2px 2px #000; font-size:150%;}
Где : color – это ваш цвет
text-shadow это тень от букв 2px это размер тени а #000 цвет тени (000 это черный)
font-size- размер вашего шрифта.
покрутите как вам надо поставьте свой размер и цвета.
Ну вот и все. Тяжелая , но очень важная работа проделана. Вы молодцы что справились. Так как замечено многими людьми что после оптимизации заголовков блога и их переиндексации поисковиками заметно увеличивается посещаемость блога.
Читайте также как установить полезность газетный стиль для Blogger
h1 h2 , оптимизация заголовков
|
Хотите получать свежие статьи на свой E-mail ? |
|