Снова об оптимизации заголовков H1,H2,H3 Blogger. Голые заголовки.

Для улучшения поисковой оптимизации блога (сайта)

заголовок статьи на блоге (сайте) должен быть заключен в Html тег H1 и что важно - должен быть «голым»

Я остановилась на таком варианте оптимизации заголовков, хотя там не совсем голые заголовки, по причине что была проблемма со шрифтами, этот блог оптимизирован по инструкции что приводиться ниже. Читайте, пробуйте, меняйте
Голый, т.е. не быть ссылкой, не включать код Css, а быть просто текстом.
Установив плагин WebDeveloper и проанализировав свой блог, пришла в ужас.
Посмотрев свой исходный код пришла к выводу, что мои заголовки не голые, а одеты по зимней погоде.
Перед корректировкой кода шаблона :

обязательно сделайте копию шаблона
поставьте птичку расширенного шаблона в правом верхнем квадратике

Итак какие же изменения я внесла, чтобы раздеть заголовки (дай бог не запутаться). Пишу все применительно к своему блогу, который вы видете и можете также его протестить.
Заголовок может отображаться тремя разными способами:
   1. Изображение вместо заголовка и описания – только изображение
   2. Изображение после названия и описания* – изображение + текст
   3. Без изображения – только текст

В зависимости от того, какой вариант размещения выбран в настройках виджета, ту часть Виджета Заголовок (Header) Blogger и следует изменять (если есть необходимость).

У меня в блоге второй вариант(изображение + текст) , следовательно все изменения относятся к этому варианту.
Ищем текст (в коде он втречается два раза и мы будем менять второй вариант):

<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>

Сделаем еще одно пояснение между делом:
Для Blogger тип групп страниц (data:blog.pageType) может принимать четыре значения:
•item - отдельные страницы, •archive - страницы архива, которые присутствуют внезависимости от одноименного гаджета, •static_page - статические страницы, в URL которого нет даты, •index - остальные страницы,главная, наверое search и в том числе ярлыков и навигации

меняем на:

<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='title' style='background: transparent; border-width: 0px'>
<h1><b:include name='title'/></h1>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='title' style='background: transparent; border-width: 0px'>
<h1>Мой blogger. Seo оптимизация</h1>
</div>
<b:else/>
<div class='title' style='background: transparent; border-width: 0px'>
<h2>Мой blogger. Seo оптимизация</h2>
</div>
</b:if>
</b:if>
</div>

Небольшие пояснения.Название блога прописано словами, для того чтобы в теги попадал чистый текст без ссылки. Код дает правильное формирование заголовков h1, h2 для главной страницы, страницы постов и статических страниц, остальные страницы search и архивы у нас по идее не индексируются. Если же у вас архивы индексируются, то надо дописать в вышестоящий код, как для статических страниц, так как сейчас на страницах архивов отсутствует тег h1. Если же вы хотите оставить ссылкой название блога на странице поста, что в общем то лцчше для пользователя, то оставьте <b:include name='title'/> вместо вручную прописаного названия блога. Надо еще посмореть может можно сделать голый заголовок, но все же оставить ссылку на главную страницу...

Находим такой участок кода, вернее между строчками, которые не выделены цветом вставляем код (который выделен цветом):

<div class='post hentry'>
<b:if cond='data:blog.pageType == "item"'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<div class='post-title entry-title'>
<b:if cond='data:post.link'>
<h1><data:post.title/></h1>
<b:else/>
<b:if cond='data:post.url'>
<h1><data:post.title/></h1>
<b:else/>
<h1><data:post.title/></h1>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<div class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><h2><data:post.title/></h2></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><h2><data:post.title/></h2></a>
<b:else/>
<h2><data:post.title/></h2>
</b:if>
</b:if>
</div>
</b:if>
</b:if>
<div class='post-header'>

Теперь название страниц поста попадает в тег <h1>, а заголовок блога в <h2>, для главной страницы, статических и других страниц наоборот. Раньше названия постов помещались в моем шаблоне в тег <h3>, а сейчас в <h2>.
Также я сделала такие изменения, так как у меня попадала дата в заголовок h2, меняю (строка встречается у меня в коде два раза, меняю вторую, хотя по идее можно и первую тоже заменить):

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

на

<p class='date-header'><span><data:post.dateHeader/></span></p>
</b:if>

Еще я заменила название страницы так как заголовок попадает в из тег h2 виджет страницы:

<b:widget id='PageList1' locked='false' title=' Страницы заменила на Blogger оптимизация' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>

Можно заголовок вообще убрать.

Также предлагаю "зашить в шаблон": читать далее продолжение поста

<strong><data:post.title/></strong>
или URL поста, если вы делаете их с ключевыми словами
<strong><data:post.url/></strong>

Теперь заголовки оптимизированы, надо разобраться со стилями.
Мы видим, что заголовки на главной странице и на страницах постов выглядят поразному. Подправляем css, а именно я продублировав для h1 то что было и есть для h2 , также если что-то не получается с внешним видом, то в крайнем случае можно ввести конкретные настройки: цвет, размер... хотя это не желательно, так как при изменении настроек в шаблоне вам снова придется лезть в этот ужасный css, лучше пользоваться относительными кодами, чем абсолютными ,скажем, если у вас цвет заголовка был цветом ссылки, то к этому коду надо добавить ещё цвет: color: $(link.color); ):

/* Headings
----------------------------------------------- */
h1 {
margin: 0 0 1em 0;

font: $(widget.title.font);
color: $(widget.title.text.color);
text-transform: uppercase;
}

h2 {
margin: 0 0 1em 0;

font: $(widget.title.font);
color: $(widget.title.text.color);
text-transform: uppercase;
}

P.S. Еще мне не нравиться, что после моей оптимизации нарушен порядок заголовков на странице поста сначала идет h2 а потом h1, насколько это важно не знаю.

Это очень важно поэтому советую прочитать пост об оптимизации заголовков который я подкорректировала здесь

P.S. В поисковой оптимизации нет мелочей. Небольшое, надеюсь что нужное отступление от темы blogger. В Wordpress важные SEO настройки делаются с помощью плагина All in One SEO ,позволяющие улучшить внутреннюю оптимизацию блога. Ну, а если при написании статьи вы будете еще и добавлять релевантное и уникальное контенту содержимое метатегов Title, Description и Keywords (окно с этими полями добавит плагин All in One SEO Pack в админку WordPress), то у вас будет все "Вуаля" в плане внутренней поисковой оптимизации блога.
Но все же попробуем внести еще пару дополнений в SEO оптимизацию нашего блога, "раздев заголовки" читаем о Wordpress кому интерессно на этом блоге
Плагин Web Developer (Mozilla Firefox)-оптимизация блога
http://uwblogger.blogspot.com/
==================================================================================
Черновик

Начинаем оптимизацию заголовков:

(об оптимизации title смотрите здесь)
Создаю CSS для нового заголовка.
Нахожу в CSS Header h1:

.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);
}

.Header h1 a {
color: $(header.text.color);
}

и копирую ниже стили для нового заголовка с именем zagl (имя может быть любым):

#zagl {
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);
margin:0; /* обнуляем */
}

#zagl a {
color: $(header.text.color);
text-decoration:none; /*вставляем чтобы не было подчеркивания при наведении мышки */
}

Для заголовка с текстом и картинкой. Ищу в HTML коде второй вариант ( так как код встречается два раза):

<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>

меняю ( на странице поста заголовок блога будет просто текстом c cсылкой не заголовком (p)):

<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='title' style='background: transparent; border-width: 0px'>
<h1><b:include name='title'/></h1>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='title' style='background: transparent; border-width: 0px'>
<h1>Hаш заголвок H1 (название блога, чтобы не было ссылки в заголовке прописываем текстом)</h1>
</div>
<b:else/>
<div class='title' style='background: transparent; border-width: 0px'>
<p class='title' id='zagl'>
<a href='http://URL-главной страницы'>Заголовок блога, как он есть текстом</a>
</p>
</div>
</b:if>
</b:if>
</div>

Вставляем между выделенными цветом строчками. Это окончательный мой код:

<div class='post hentry'>
<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/>
<h2><data:blog.title/></h2>
<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>

<div class='post-header'>

Пробовав получить голые заголовки, я сделала такой код, но была путаница со шрифтами:

<div class='post hentry'>
<b:if cond='data:blog.pageType == "item"'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>

<b:if cond='data:post.link'>
<h1><data:post.title/></h1>
<b:else/>
<b:if cond='data:post.url'>
<h1><data:post.title/></h1>
<b:else/>/*здесь можно добавить <h2><data:blog.title/></h2> но тогда на странице поста под заголовком поста будем видеть название блога, так что смотрите сами... Как вариант можно задать шаблон в настройках блога и сразу в начале поста ставить ваш h2*/
<h1><data:post.title/></h1>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<div class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><h2><data:post.title/></h2></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><h2><data:post.title/></h2></a>
<b:else/>
<h2><data:post.title/></h2>
</b:if>
</b:if>

</b:if>
</b:if>
<div class='post-header'>

Eще был такой вариант:

<div class='post hentry'>

<b:if cond='data:blog.pageType == "item"'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>

<b:if cond='data:post.link'>
<h1><data:post.title/></h1>

<b:else/>
<b:if cond='data:post.url'>
<h1><data:post.title/></h1>
<h2><data:blog.title/></h2>
<b:else/>
<h1><data:post.title/></h1>
</b:if>
</b:if>

</b:if>
<b:else/>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><h2><data:post.title/></h2></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><h2 class='post-title entry-title'><data:post.title/></h2></a>
<b:else/>
<h2><data:post.title/></h2>
</b:if>
</b:if>

</b:if>
</b:if>

<div class='post-header'>

Также просмотрев свой код убираю из тега h2 дату постов, второй вариант кода

<h2 class='date-header'>
<span><data:post.dateHeader/></span></h2>
меняю на
<p class='date-header'>
<span><data:post.dateHeader/></span></p>

Теперь нам надо навести порядок со стилями на странице поста для этого ищем раздел
/* Headings и дублируем стили для заголовка h1.

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
margin: 0;
}

h1 {
font: $(widget.title.font);
margin: 0;
color: $(link.color); /* цвет ссылки */
text-transform: uppercase;

}

Можно задать конкретные размеры и цвета (в крайнем случае), но лучше работать с относительными так как при изменении чего либо все меняется само мобой и не надо снова корректировать шаблон.
Можно создать свой шрифт скопировав скажем post.title.font и изменив название на post.title.font7 и вставив после <Group description="Post" selector=".post">

после оригинала, поменяв размер шрифта на нужный и используем его.

<Variable name="post.title.font7" description="Title Font3" type="font"
default="normal normal 15px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 15px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;"/>

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font7);
color: $(header.text.color);
margin: .5em 0 .5em;
}

h1 {
font: $(widget.title.font7);

color: $(header.text.color);
margin: .5em 0 .5em;
}

Приведу здесь по случаю выдержку из css про TEXT-TRANSFORM
C помощью этого свойства, можно видоизменять текст, а именно менять большие буквы на маленькие или наоборот.
capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными.
uppercase - делает из всех букв заглавные.
lowercase - делает из всех букв маленькие.
none - не производит смены регистра; по умолчанию.
Удобный плагин для браузера Firefox, Web-Developer

Блог amateurblogger
Блог шпаркалкаблоггер
Блог домохозяйки blogger. Home.
И снова о карте сайта blogger - генерация ява скриптом

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

Blogger оптимизация шаблона

Снова об оптимизации заголовков H1,H2,H3 Blogger. Голые заголовки.

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

заголовок статьи на блоге (сайте) должен быть заключен в Html тег H1 и что важно - должен быть «голым»

Начинаем оптимизацию заголовков:

nwin1

function nwin для blogger

Читатели блога о blogspot,seo blogger

Experiment

Подписка на блог о платформе blogger