30 июл. 2013 г.

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

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

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


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

Средствами blogger выбираю шрифты, цвета, фон, favicon, разметку страницы, картинку в шапку, вбиваю сразу в CSS оформление цитаты скажем такое:
blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #ffffff url(http://4.bp.blogspot.com/-sZsuABwWZ84/UfgcciZJcxI/AAAAAAAABQ0/0ZdZtUTZnDo/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