21 июн. 2012 г.

Оптимизация заголовков h1, h2, h3

Мой blogger. Seo оптимизация

tweetn

Опримизация заголовков h1, h2, h3 на blogspot

У меня есть уже два поста об оптимизации заголовков для блогов на blogspot, но все же еще один. Отличается от предыдущих методов тем, что если раньше мы создавали еще один заголовок(CSS) и использовали его на "неглавных" страницах, то тут мы делает в принципе тоже самое но с картинкой (эмблемой), которую мы ставим вместо названия блога на всех страницах кроме главной.
Придумываем логотип (картинка вместо названия) аналогичный вашему названию блога. Cвоё изображение добавляем в гаджет "Заголовок" ("Дизайн"-"Элементы страницы"), где "Местом размещения" указываем "Помещать описание под изображением".
Предварительно сохранив шаблон делаем мзменения шаблона. Идем в "Дизайн"-"Изменить 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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>

Стало:
<b:if cond='data:blog.pageType != &quot;index&quot;'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img alt='текст' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' 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>

В данном коде нужно прописать параметр 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 != &quot;item&quot;'>     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>       <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);
text-transform: none;
  margin: 0;
}
h1.post-title {
  font: $(post.title.font);
  color: $(header.text.color);
  margin: 0;
}

text-transform: none; 
Это чтобы текст выводилс так как он был написан, заглавные буквы заглавными, а прописные прописными.


Оптимизация заголовков h2 и h3


Тегами h2 обрамляются названия гаджетов,заменяем h2 на тег strong или h3.
Для улучшения стиля h2 в коде шаблона:

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
  margin: 0 0 .5em;
}

я изменила параметры строки: margin: .5em 2em .5em;, где .5em - это отступы сверху и снизу от текста, 2em - отступ слева. Всё остальные действия по подбору цвета, размера, шрифта можно сделать в "Дизайн"-"Дизайнер шаблонов"-"Дополнительно"-"Гаджеты"
Cделав изменения в шаблоне, обязательно проверьте результат, для этого удобно воспользоваться утилитой Web Developer и обязательно просмотреть HTML. Если результат по оптимизации заголовков вас чем то не устроил просмотрите мои два предыдущие поста от оптимизации заголовков (cмотрите ниже ссылки на них).
Из проведенных тестирований реакций google, были сделаны такие предположения(выводы). Если абзац выделен strong или b и в нем всетечается ссылка то эта сылка имеет больший вес. Description, strong(востринимается аналогично b), em, заголовки(h1,h2,h3) важны, различные title keys на каждой странице не оказывают влияние на ранжирование страницы. Это приблезительные выводы, тем более что у google все меняется. Наверное все же хорошо оптимизироваться страницу по всем параметрам, не переборщив с этим.
Блог о оптимизвции blogger
Пост подсмотрен, верее слизан с блога шпаргалки. Кстати смотрите там все что касается оптимизация заголовков h4.
Блог на blogger на своем домене