30 июл. 2013 г.

Новый блог на blogger

tweetn
Новый блог на блоггер. Создаю новый блог на блоггер. Вдохновленная списком шпаргалкой от Сосновского решила записать все что буду делать. Возможно вначале это получится громоздко, попозже попробую записать более компактно. Попробую использовать минимальнве методы для создания и оптимизации блога и посмотреть что получиться из этого.
Создаю свой новый блог на моей любимой платформе blogger.


Хочу заметить что создаю "комерческий" блог на стандартном шаблоне blogger. Заранее подобрала и обработала картинки, а также ключевые слова и идею блога, набросала схему как будет это примерно выглядеть...

Средствами blogger выбираю шрифты, цвета, фон, favicon, разметку страницы, картинку в шапку, вбиваю сразу в CSS оформление цитаты скажем такое:
blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhibEyLo9xR9q9rnDBsUDt0A1y_gqO_ycsbBEZKYowzIaLqsifcLN7Tp7UlRABxR_b8WA2QRHBTU6FuJG9C1z440781d8pr-gHSTU-vqxOtuODuDBcTUHa0yJsdNeTuoSqIXNqDgboQrybY/s1600/01_14_t_e0%5B1%5D.GIF) no-repeat right top; font: bold .9em, arial, Helvetica,verdana, Georgia; color : #887e7e; border: 3px dashed #fd9207; } .post blockquote p { margin: 0; padding-top:10px; }

Пример цитаты здесь

Все можно конечно потом поменять, но все же будем еконемить время и сделаем терпимо или даже красиво

►Проходимся по настройкам блога средствами blogger: заголовок блога, описание, запрет комментариев, разрешаем индексацию (или временно не разрешаем на усмотрение), запрещаем индексацию архивов и search, добавляем 404 страницу, вводим описание страницы(c ключевыми словами), которое попадает в "description" на главную страницу блога.
►Переходим к HTML blogger. Для создания расширяемых кратких описаний сообщений смотрите здесь пункт 9
И все же что добавила я:


после
 ]]></b:skin>
 <style>
  <b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
  <b:else/>
   span.fullpost {display:none;}
  </b:if>
 </style>
перед
 </head>
После : < d a t a:p o s t .b o d y/> (пишется слитно что то у меня по другому не получилось) причем у меня в стандартном шаблоне это вчтречается три раза. Вставила после второго. Теперь на главной странице надпись появляется, на страницах нет, но можно доваблять в HTML и писать нужный вам контент и ссылки(очень удобно)...
<strong>Смотрите здесь полный текст<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'><data:post.title/>=&gt;<data:post.url/></a>
</b:if></strong>

Сделала сознательно в выделенном тексте ссылка цениться больше(google), вроде как...

<span class="fullpost"><!-- meta: description="Здесь описание страницы" --></span>

►Разбираемя с атрибутом rel=”canonical”
Говорят, что теперь Blogger автоматом задаёт данный атрибут и нет необходимости его задавать.
Действительно стоит в html...
Раньше вставлялся код после тега <head>
но так чтобы он относился только к главной странице:
<link expr:href='data:blog.homepageUrl' rel='canonical'/>
Теперь у каждой страницы блога для Гугл указан основной домен.


Если ваш сайт имеет очень похожий контент, доступный по разным URL, тогда новый формат позволит указать тот URL, который должен возвращаться в поисковой системе и все характеристики, ссылочный вес и т.д. передадутся на нужную версию адреса.
Теперь вы можете добавить этот тег, для указания вашей версии адреса, внутри <head> на страницах с дублированным контентом:
<link href="http://uwblogger.blogspot.nl/p/html.html" rel="canonical"></link>
Google поймет, что все дубликаты ссылаются на канонический адрес, указанный в теге. Дополнительные свойства адреса, PR и связанные сигналы тоже перенесутся с дублированных страниц на указанную.


В blogger мы делаем это больше для www и значит для этой цели можно ничего не вставлять в код, так как это делается автоматически. Но вообще надо подумать... Расширенную информацию по этому тегу можно посмотреть на этом блоге

В вебмастер программа указываю карту сайта:
/atom.xml?redirect=false&start-index=1&max-results=100
/atom.xml?redirect=false&start-index=101&max-results=200 и т.д.

Через http://feedburner.com/ создаю RSS ленту на блоггер. Смотрю какие опции могу там использовать: описание, краткие сообщение,ping, автоматический пост в твиттер, пост через email. (twitter акк и блог куда я пощу по этой теме у меня уже был) Можно о feedburner посмотреть тут но все меняется кое что уже не работет кое что добавляется так что лучше все читать и пробовать, тем более там все или почти все на русском. Указываю RSS feedburner в настройках на blogspot.

► Убираю меню вверху , после head вставляю

<style type="text/css">
#navbar-iframe {display: none !important;}
</style>
и в титле меняю порядок названия поста и названия блога, возможно добавляю пару ключевых слов (вместо <title><data:blog.pageTitle/></title>):
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/>lalala</title>
<b:else/>
<title><data:blog.pageName/> / <data:blog.title/></title>
</b:if>
<title><data:blog.title/> lulalo/title>
Больше инфо по оптимизации блога на блоггер смотрите здесь

► Заголовки H1,H2,H3 принципиально не оптимизирую...
но все же убираю дату из H2 (H2 заменяю на p):
<p class='date-header'><span><data:post.dateHeader/></span></p>

Отмечу для просмотра и пробного изменения СSS сайта и не только очень удобно пользоваться данной утилитой: http://uwblogger.blogspot.com/2012/02/firefox-web-developer.html

►Добавляю пару элементов для оформления:

.code1 {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfTYgi-9t8yhr3c-tytv6kvFyf6dM7xX96ndqqDV4XoFR7UpNNXLOVEY_cLtTEeJeq3CBByJDwmPc5ZpVjdbFu7bHiEGirSjNeKCROMJhFSUT7zMzl5Aaunap6YD0aebjlxD5L61tXQOa5/s1600/katenhoekklein.png) no-repeat right bottom;
border : 4px solid #dddddd;
color : #7D7D7D;
}

и/или

.code2 {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TPBe3iywdt97DyphinA2Vg6MiiQ22mXXM8mW8b0ugsULZtVzrAsqATzg_m7Qgb_Anfby2WbbZVAwRQJUyFxCloi0UQYu1ii4LqE6aGMW1zthnO2SdedSXmfbQVtw7GbLShb9jkjgCT_b/s320/bg.jpg);
border : 2px solid #dddddd;
color : #7D7D7D;
}
]]></b:skin>

Теперь если мы в HTML зададим:

<div class="code1">
текст
</div>
то получим примерно такое

Делаю меню на блоггер с картинками код вставляю в CSS. Делаю еще пару меню по более узким тематикам.

► Теперь смотрю какие виджеты на какой странице должны появляться и внедряю это в свой блог с помощью оператора if. Как это делается можно посмореть здесь



Шпаргалка по созданиё блога blogspot

Читать далее продолжение поста Новый блог на blogger

23 июл. 2013 г.

SEO-шпаргалка от Сосновского. Ноу-хау

tweetn

SEO-шпаргалка от Сосновскогою Ноу-хау

Люблю шпаргалки. Спасибо Сосновскому за проделанную работу и за то что делиться своим опытом и наработками.
С удовольствием размещу их(шпаргалки) на свой блог, тем более собираюсь начать новый проект. В заглавии поста я написала ноу-хау, но Сосновский пишет:" Вся сфера SEO не сводится только к этим пунктам. Существует еще множество индивидуальных особенностей интернет-ресурсов, которые необходимо учитывать при оптимизации. Если вам есть что добавить, то с удовольствием прочитаю..."

1. Перед продвижением (аудит)


  • Добавление сайта в Яндекс.Вебмастер и Google Webmaster.
  • Установка сервисов статистики: liveinternet, Яндекс.Метрика, Google analytics (все не обязательно).
  • Проверка на бан, АГС и другие фильтры поисковых систем.
  • Анализ индексации страниц (здесь же supplemental index гугла). Соотношение количества проиндексированных документов к реальному количеству страниц ресурса. Удаление дублей. Полезное – “Внутренние дубли страниц сайта: последствия, поиск, удаление“.
  • Употребление атрибута rel=”canonical” на главный документ для идентичных страниц (например, сортировка).
  • Наличие и полнота карты сайта (sitemap.xml).
  • Наличие и корректность robots.txt. Указание пути до карты сайта, директивы host (определение главного зеркала).
  • Проверка на наличие малоинформативных и малоконтентных страниц (например, галереи). Их запрет к индексации в robots.txt.
  • Проверка разделов ресурса, с которых можно ставить внешние ссылки (например, профили пользователей). Их запрет к индексации в robots.txt – защита от seo-спама.
  • Корректность обработки 404-ошибки.
  • Доступность ресурса только с www или только без www (301-редирект в помощь).
  • Анализ показателей ресурса: возраст домена, сайта, тиц, pagerank, наличие в авторитетных каталогах (Яндекс.каталог, DMOZ).
  • Проверка скорости работы сервера и загрузки сайта, варианты ускорения (оптимизация количества скриптов, изображений и так далее).
  • Оценка кода страниц. Удаление лишнего и избыточного кода. Здесь же качество верстки, по возможности валидность. Один h1 на документ (он же главный заголовок). Названия разделов и блоков на сайте оформлять классом, а не увеличением за счет тега h или шрифта. Основной контент как можно выше в коде.
  • Присвоение нужного региона в Яндекс.Вебмастере. Если регионов много, то “Продвижение сайта в разных регионах“.
  • Для магазинов и организаций наличие данных о компании на картах и адресах Яндекс, Google.
  • Страница с указанием наиболее полных контактов с компанией (“стационарные” номера приоритетнее сотовых). Сквозной номер телефона лучше текстом, а не картинкой.
  • Наличие на сайте черных методов оптимизации: скрытый текст, клоакинг, свалки ссылок и так далее.
  • Оценка качества контента: проверка на переспам, уникальность, качество, полезность, необходимость, конверсионность.
  • Наличие продвигаемых запросов в тексте страниц, их естественность употребления.
  • Анализ внешних ссылок со страниц проекта, удаление ненужных и добавление атрибута rel=”nofollow” (либо редиректа) для остальных (по возможности).
  • Анализ внутренних ссылок – их необходимость, разнообразность, расположение. Наличие больших сквозных элементов (по возможности их сокращение, удаление, либо запрет к индексации). Внутренние ссылки не закрывать атрибутом rel=”nofollow”. По возможности прописывать релевантный title для линков.
  • Стремление к правилу “С одной страницы не более 1 ссылки на другой внутренний документ”.
  • Оценка структуры ресурса. Какой уровень вложенности имеют продвигаемые страницы? Какой внутренний вес они получают?
  • Наличие ЧПУ. По возможности внедрение человеко-понятных URL. На заметку “Всегда ли обновление CMS, дизайна и ЧПУ положительно влияют на ранжирование?”.
  • Анализ тегов title, description. Они должны быть уникальны в пределах проекта, наиболее полно описывать страницу и иметь вхождения продвигаемых поисковых запросов. В теге title повторяющаяся часть не должна быть больше уникальной. Рекомендуемая длина тега тайтл – до 60-70 символов, description – 140-160.
  • Проверка сниппетов в поисковой выдаче по продвигаемым ключевым словам. Корректировка неудачных сниппетов.
  • Использование микроформатов.
  • Для интернет-магазинов использование YML-карты для Яндекса.
  • Наличие на проекте социальных кнопок: лайки, расшаривания.
  • Оценка ссылочной массы на ресурс. Ее количество, качество.
  • Фавикон.
  • Продажа сайтом ссылок. Какие, где и сколько?

2.Внутренняя оптимизация

Этот раздел предназначен для уточнения первого и для правил создания контента.

  • Структуризация контента: заголовки (h2-h4), нумерованные (маркированные) списки.
  • Разнообразие контента: текст, картинки, видео и так далее.
  • Уникальность контента. По максимуму интересности, полезности и релевантности.
  • Использование тегов strong, b, em там, где это необходимо для обращения внимания пользователя, а не поисковой системы.
  • Использование внутренней перелинковки.
  • Контекстная перелинковка полезная для пользователя. Ссылки ставятся на разные документы, используются различные анкоры (на 1 страницу ведут с других внутренних документов разные тексты ссылок).
  • Следить за отсутствием переоптимизации в текстах. Продвигаемые поисковые запросы используются в человеко-ориентированном виде (не “оптимизация сайта москва”, а “оптимизация сайта в Москве”).
  • Продвигаемое ключевое слово встречается в контенте документа минимум 1 раз, максимально – так, чтобы не было противоречий с читабельностью и 7-м пунктом.
  • Размер контента, количество пассажей, вхождений запросов не обязательно, но можно ориентироваться на среднее по ТОП 10 в продвигаемой поисковой системе. Помощь – бесплатный анализ в ссылочных агрегаторах.
  • Продвигаемая страница имеет текстовый контент (хотя бы 500-1000 символов).
  • Максимальное представление сайта в поисковой выдаче. Полезно - 10 способов улучшить свой сайт в SERP.
  • Поведенческие факторы ранжирования на уровне не ниже средних показателей по тематике (в помощь alexa и/или ресурсы с открытой статистикой liveinternet). Привлекательные сниппеты в поисковых системах.

3.Внешняя оптимизация


  • Плавное наращивание ссылочной массы - Графики и динамика роста ссылочной массы.
  • Для размещения ссылок необходимо выбирать наиболее качественные площадки. Полезно – “Как не купить ссылку с плохого сайта?” и “10 способов как сэкономить на покупке ссылок“.
  • Разнообразие ссылочной массы – 17 источников обратных ссылок. Тематические площадки, порталы, новостники, форумы, социальные сети и так далее.
  • По максимуму стремиться к естественной ссылочной массе. В анкоре-листе сайта преобладают естественные тексты анкоров (в виде URL ресурса, названия компании и так далее). Полезно – “Анкоры: виды, примеры, назначения” и “Околоссылочный текст и анкор-листы“.
  • По возможности релевантный title у обратной ссылки.
  • Организация конкурсов и информационных событий, как метод наращивания обратных линков.

Ссылка на оригинал, где вы найдете больше информации
http://uwblogger.blogspot.com/


Читать далее продолжение поста SEO-шпаргалка от Сосновского. Ноу-хау

26 авг. 2012 г.

SEO-shop провинциального самурая от Ласто

tweetn

Шоп провинциального самурая от Ласто: Гугловый Референт, Блог, который любят поисковики, Модуль импорта контента с RSS лент и многое другое


Доступные цены и очень полезные SEO-скрипты Немного позднее опубликую весь список предлагаемых продуктов. На блогспот использовать их вряд ли получиться, так как написаны программы на PHP. О своем хостинге за 50 центов в месяц я писала в своем посте, тем более есть много бесплатных хостингов, которые предоствляют нужные для работы ресурсы 
http://uwblogger.blogspot.com/
Варианты размещения партнерских ссылок

Читать далее продолжение поста SEO-shop провинциального самурая от Ласто

21 июн. 2012 г.

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

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 на своем домене

Читать далее продолжение поста Оптимизация заголовков h1, h2, h3

15 февр. 2012 г.

Blogger optimization. Удаляем лишние ссылки из шаблона

tweetn

Удадяем лишние ссылки со страницы

Так как мы пользуемся Feedburner и у нас уже стоит симпатичная ссылка справа вверху, то убираем ссылку внизу страницы: "Подписаться на: Сообщения (Atom)", убираем часть кода:
<b:include name='feedLinks'/>

После удаления верхней панели навигации, остаются ссылки, которыми нельзя воспользоваться. Закоментируем их.

Было:
<b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>


Меняем на:

<!--<b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>-->

После этой корректировки пропала иконка на редактирование поста, так что я вернула в начальное состояние

Для линков на редактирование гаджетов  существует несколько вхождений строки:
<b:include name='quickedit'/> 

удаляем или закомментируем: (до кода добавляем: <!--
После кода: -->

<!--<b:include name='quickedit'/>-->
Строка встретилась в моем шаблоне два раза, я закоментировала второй .

Аналогично для удаления комментария(значок урны:
Было:
<b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
        <img src='//www.blogger.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
Меняем на код:
<b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <!--<b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
        <img src='//www.blogger.com/img/icon_delete13.gif'/>
      </a>-->
    </b:if>

Убираем ссылку на автора шаблона.

<!--<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
        <data:attribution/>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>-->

После этойй манипуляции меня спросили хочу ли я оставить или удалить виджет Attribution1
Я выбрала удалит
ь.

Удаляем ссылку времени отправки комментария, часть кода закомментируем, чтобы он не учитывался:
Было:
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
Стало:
<!--<a expr:href='data:comment.url' title='comment permalink'></a>-->
                  <data:comment.timestamp/>
Вышестоящее изменение blogger у меня не пропустил

Убраем "Самые последние сообщения с ярлыком..."
Закоментируем, окончательный вид:
<!--<b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>-->

Оптимизация блога на blogspot
Все это и еще кое-что на блоге шпаргалки по оптимизации платформы blogger
Меняющиеся картинки


Читать далее продолжение поста Blogger optimization. Удаляем лишние ссылки из шаблона

11 февр. 2012 г.

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

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

заголовок статьи на блоге (сайте) должен быть заключен в 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 == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<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 == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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 == &quot;item&quot;'>
<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 - генерация ява скриптом



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

23 янв. 2012 г.

H1 H2 H3 blogspot more SEO friendly

tweetn

Попробуем оптимизировать seo-заголовки для blogger

В зависимости от шаблона, в заголовки попадает странный контент, не несуший смысловой нагрузки для нашего блога. В моем случае названия постов попадают в тег <h3> , а в теге <h2> разместилось что-то непонятное (в том числе и названия гаджетов). Минимум, что мы можем сделать дать названия гаджетам включающие ключевые слова. Максимум подправить код шаблона.

Попробуем оптимизировать seo-заголовки вернее шаблон  для поисковых систем.
Оптимизация  главной страницы.

В title должны находится все необходимые  ключевые слова по теме блога.
 <h1> –  дублирует основные ключевые слова из title.

В заголовках <h2> - названия последних постов, (я оставила заголовки разделов сайдбара/футера добавивв них ключевые слова)

В заголовках <h3> идут заголовки разделов сайдбара/футера (h3 заголовки формирую вручную при вводе текста поста).


Схема главной страницы блога.


Title – название/тематика блога.

<h1> – ключевые слова из названия/тематики блога.
<h2> – заголовки постов
<h3> – заголовки внутри постов, заголовки разделов сайдбара/футера.
<strong> – ключевые слова из названиятематики блога – лучшевсего добавить в футер.

Оптимизация страниц постов.

Каждый пост – это отдельная страница блога, которая оптимизируется под запрос (key).
В начале title вставляем все ключевые слова для данного поста  далее фразу с title главной страницы, дабы однозначно показать источник контента.

<h1> – «Заголовок поста». Наличие одинаковых фраз/слов в title и в <h1>  повышают вероятность попасть в топ по ключу из title без использования внешних факторов ранжирования, только засчет внутренней оптимизации.
<h2> – по возможности используйте их в тексте поста, но это уже происходит при написаниипоста.

Желательно автоматизированно вставить в страницу в теги <strong> ключевые слова. Ключевыми словами является заголовок поста. Можно предложить перед формой комментариев  фразу: «Комментарий к посту – <strong>Заголовок
поста</strong>»?  Все же хочеться отметить что тегом strong не стоит злоупотреблять как и всем остальным впрочем. Где  то прочла что лучше абзац текста выделить стронг(или часть текста) и уже внутри выделения сделать ссылку с нужным анкором, так google больше понравиться.

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

Схема страницы поста.

Title – заголовок поста – названиетематика блога

<h1> – заголовок поста
<h2> – заголовки внутри поста
<h3> – заголовки разделов сайдбара/футера
<strong> – ключевые слова из названия/тематики блога

<em>  логическое <b>

Оптимизация страницы тегов(это в blogspot реализовать трудно или невозможно, и так как заложено что search страницы не индексируются).

Текстовое облако тегов желательно использовать, чтобы предоставить
вашему блогу возможность дополнительно собрать низкочастотный трафик с
поисковых систем.

В title в самом начале – полное совпадение с названием тега.

Заголовок <h1> – «Название тега» – дублирует название тега из title.
Далее в заголовках <h2> идут названия последних постов.
Желательно внизу добавить в тегах <strong> название тега.

Схема:

Title – название тега – название/тематика блога

<h1> – название тега
<h2> – заголовки постов
<h3> – заголовки разделов сайдбара/футера
<strong> – название тега


  • Последовательность расположения заголовков на странице очень важна.
  •  В заголовок должны попадать голые теги, только текст. 
  • ...Такие требования мы выдвинем и попробуем добиться максимального соответствия им.

Если мы проанализируем свой блог на предмет заголовков (h1, h2, h3), то мы возможно удивимся http://uwblogger.blogspot.com/p/soft.html.
И еще...шаблоны все разные и прежде чем править разумеется надо сохранить работающий шаблон, оценить(проанализировать) свой шаблон и прикинуть что бы мы хотели исправить. В этом нам поможет Плагин для Firefox - Web Developer
Воспользовавшись рекомендациями из ниже приведенных блогов, проанализировав шаблон своего блога сделала выводы и ниже приведенные изменения.

Начинаем оптимизацию заголовков:
(об оптимизации 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 == &quot;static_page&quot;'>
<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 == &quot;item&quot;'>
<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'>

Теперь надо навести порядок со шрифтами, чтобы они своим различаем не резали глаза пользователю.
За внешний вид заголовка поста твечает такой код:

h2.post-title {
font: $(post.title.font);
margin: 0;
}
Дублируем его для h1:

h1.post-title {
font: $(post.title.font);
margin: 0;
}
Если же у вас нет еще заголовка, то ищем

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

В общем от ваших потребностей делайте их или совсем одинаковыми(лучший вариант) или манипулируйте со щрифтами и цветом
Также просмотрев свой код убираю из тега 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 - не производит смены регистра;  по умолчанию.


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


Читать далее продолжение поста H1 H2 H3 blogspot more SEO friendly

19 янв. 2012 г.

Оптимизация blogger

tweetn
Индексация блога идет полным ходом. Пора сделать изменения в HTML коде, чтобы не индексировалось что не надо и наоборот.

Итак, домохозяйки... Решила я еще раз расписать для домохозяек, что же я меняю в HTML коде шаблона. Повторимся немного.

1. Для того чтобы убрать верхнюю строчку меню от blogger, после head вставляем
<style type="text/css">
#navbar-iframe {display: none !important;}
</style>



2. Ищем header1 и т. п. Меняем (выделено ), для получения возможности добавлять виджеты в различные места блога, в том числе для вставки баннера в заголовок блога

<b:section class='art-Header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Notebooks' type='Header'/>
</b:section>


3. Этот пункт можно пропустить если вы используете шаблон от blogger. Стаким галочку расширенный виджет, перед этим идем структуру блога и там добавляем социальные иконки. 

Вставляем после:  <data:post.body>
в любое удобное вам место ,НО до кода:
<div class="post-footer-line post-footer-line-3">
</div>

<div class="post-share-buttons">
<b:include data="post" name="shareButtons">
</b:include></div>
</div>



4. Этот пункт однозначно пропускаем, так как сейчас Favicon вставляется более правильно средствами blogger вне зависимости от шаблона. Раньше Favicon вставлялся так:
Перед </head>
<link href='YOUR-FAVICON-URL' rel='shortcut icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>
Свои favicon-ы я поместила в sites-google:
https://sites.google.com/site/bondel*/bon/*og.ico

5. Чтобы название поста страницы шло перед названием блога

вместо:  <title><data:blog.pageTitle/></title>

вставляем:
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/> я вставила сюда еще пару слов </title>
</b:if>

Или лучше, так как в блогспоте терепь появились и страницы!
Смотрим ниже, т е... если мы на главной то то-то, а если не на главной то другое, в сравнении с предыдущим вариантом все наоборот:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/>пару слов к описанию блога</title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>


6. Запрещaем индексацию архивов:
<b:if cond='data:blog.pageType == "archive"'>
<meta content='NOINDEX,FOLLOW' name='ROBOTS'/>
</b:if>
Если мы посмотрим файд robots.txt, то увидим  такую строчку Disallow: /search , запрет индексирования страниц поиска, так что search страницы индексироваться не будут и вставлять в html ничего не надо.

7. Редирект 301.
Говорят, что теперь Blogger автоматом задаёт данный атрибут и  нет необходимости его прописывать (посмотрите исходный  код и проверьте)
После <head> но так чтобы он относился только к главной странице
<link expr:href='data:blog.homepageUrl' rel='canonical'/>
Теперь у каждой страницы блога для Гугл указан основной домен.


8. Как лучше вставить мета теги пока не нашла Обычно вставляла только для главной страницы... на блогах blogspot видела динамические, но пока как лучше сделать и к чему привязать не очень разобралась...

Вот как предлагают сделать настройки на сайте oт google:

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Your home page description' name='description'/>
<meta content='your keywords, keywords1, keyword2' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, your keywords, keywords1, keyword2 &quot;' name='keywords'/>
</b:if>
<b:skin><![CDATA[/*

или так

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName + data:blog.title + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + data:blog.title + data:blog.pageName' name='Keywords'/>
</b:if>

или так

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName+ " / название вашего блога http://адрес вашего блога/"' name='Description'/>
<meta content='INDEX,FOLLOW' name='ROBOTS'/>
</b:if>
вариант как вставить мегатег кейворд используя метки. Предлагают вставить виджет выше Неаd и поправить HTML:
смотрим здесь  merabheja.com/lets-design-meta-tags-and-title-of-your-blogspot-blog/

Не знаю есть ли смысл в этом - хотелась бы описание оригинальное, а кеи, как говорят, не так и важны...

Так же (как вариант) теги <h3> <h4> можно вставлять непоредственно в посте в HTML (зависит от ситуации)

9. Внесу еще небольшое дополнение о том как надо изменить HTML для  Как создания расширяемых кратких описаний сообщений:

 Add it following the main stylesheet and wrap it in <style></style>.
 ]]></b:skin>

 <style>
  <b:if cond='data:blog.pageType == "item"'>
   span.fullpost {display:inline;}
  <b:else/>
   span.fullpost {display:none;}
  </b:if>
 </style>

 </head>

Далее, в этом же шаблоне, после слов <data:post.body/>
вставляем следующий код:
<b:if cond='data:blog.pageType != "item"'><br />
   <a expr:href='data:post.url'>Read more!</a>
</b:if>

И в Настройкax - Форматирование и в поле Шаблон сообщения вставляем следующий код:
<span class="fullpost"></span>

Если вы хотите прижать текст к правому краю то второй кусок кода будет таким:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;">Read More !</div></a>
</b:if>
Убедитесь в правильном закрытии тегов: например если вы положите вот так , т. е. DIV закрытие первой и оболочки в этом не будет работать, потому что пролет был начал внутри DIV, поэтому он должен быть закрыт в течение DIV тег, пример:
<div style="text-align: left;">Post in brief, may include pictures too
<span class="fullpost">Hidden part</span>
</div>

10. Еще один момент ,  при индексировании комментарии, это снова индексы полного сообщения и снова дублирование  конткнта

По  вопросу (дублировать названия)  найдите (CTRL + F) этот код:
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</ a>

Замените весь код с этой новой код:
<b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>



В конце концов вставила такой код вместо <title><data:blog.pageTitle/></title>:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='INDEX,FOLLOW' name='ROBOTS'/>
<link expr:href='data:blog.homepageUrl' rel='canonical'/>
<title><data:blog.title/> Все о платформе blogger</title>
<meta expr:content='data:blog.title + &quot; / Настройка и оптимизация  blogger  http://uwblogger.blogspot.com/&quot;' name='Description'/>
<meta content='Html, blogger, blogspot, оптимизация, блоггер, настройка, основы seo оптимизации, продвижение сайта бесплатно, seo продвижение раскрутка ' name='keywords'/>
<b:else/>
 <b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='NOINDEX,FOLLOW' name='ROBOTS'/>
 </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta content='INDEX,FOLLOW' name='ROBOTS'/>
<title><data:blog.pageName/> | <data:blog.title/> Создать блог на blogspot может каждый</title>
<meta expr:content='data:blog.title + &quot; / Мой любимый blogger  http://uwblogger.blogspot.com/&quot;' name='Description'/>
<meta content='Html, blogger, blogspot, полезности, software, оптимизация, блоггер, настройка, seo' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='INDEX,FOLLOW' name='ROBOTS'/>
<title><data:blog.pageName/> | <data:blog.title/> Создай свой blogger</title>
<meta expr:content='data:blog.title + &quot; / Оптимизация блоггер это просто http://uwblogger.blogspot.com/&quot;' name='Description'/>
<meta content=' blogger, blogspot, полезности, software, оптимизация, блоггер, настройка, оптимизация блога, поисковое продвижение, раскрутка ' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='NOINDEX,FOLLOW' name='ROBOTS'/>
</b:if>
P.S. Код работает  не совсем корректно, на статических страницах появляется надпись Читать далее, что в общем быть не должно и подправить собственно не трудно (в пункте 9), но я решила оставить, так как между <span class="fullpost"></span>можно написать что-нибудь для поисковиков.

Карта сайта для blogger(sitemap)
http://uwblogger.blogspot.com/

Читать далее продолжение поста Оптимизация blogger