Как делать блог

Использование мета-тегов Open Graph

2011-11-22T18:09:00.000-08:00

Использование мета-тегов Open Graph

Ребята, обращаю ваше внимание на протокол Open Graph, использование которого улучшит отображение вашего сайта в социальных сетях. Использование мета-тегов Open Graph позволит точно задать описание статьи (discription), ее заголовок, адрес и соответствующую статье картинку.
У себя в блоге Atlanta Travel я сделал следующее (на примере главной страницы).

В теге <html> добавил путь к xmlns:
<html xmlns:og='http://ogp.me/ns#'>

Описание статьи:
<meta content="Фото блог на русском. Atlanta Travel: Путешествия из города Атланта, Джорджия, США" property="og:description"/>

Заголовок статьи:
<meta content='Путешествия | Atlanta Travel' property='og:title'/>

Путь к картинке:
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzhj883DbdMMg3DXwypoIt5rs3OpXxloys-FpC1fFU6qLqW9lGbdo_rhjyoKZTdL7wGer-0WUpKJOvfwcNNBulYnJ0Y0DsAp8fBnxeX9IgsCDLBqqcZ1l2mCgqer2Bezq8BeE_32QY9Gc/s288/atlantatravel.jpg' property='og:image'/>

Адрес статьи:
<meta content='http://www.atlantatravelblog.com' property='og:url'/>

Имя сайта:
<meta content='www.atlantatravelblog.com' property='og:site_name'/>

Проверить, как всё работает, можно тут:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.atlantatravelblog.com

Теперь при публикации ссылки на мой сайт, например, в Фейсбуке, повались некоторая стройность в представлении информации.

Линки по теме:
http://ogp.me/
http://developers.facebook.com/docs/guides/web

Как я использую заголовки h1-h6

2011-11-02T07:57:00.000-07:00

Как я использую заголовки h1-h6

Подкрутил на своем блоге о путешествиях заголовки h1-h6 в страницах. Раньше стройности не было: на главной странице было несколько h1, в шапке был h1 тоже, с сайдбаре заголовки были h2, а h3 использовался в ссылках на статьи. На странице статьи было два h1... Не особо критично, но и не особо красиво.

Стал рыть Интернет. Среди тонны никчемных сайтов приходилось по крупицам отыскивать дельные советы. Остановился на подходе, описанном в этой статье:

> Необходимо соблюдать структуру заголовков, чем выше уровень, тем выше должен находиться заголовок. То есть заголовок h1 должен находиться выше других заголовков на странице.

> Размер шрифта должен понижаться по мере понижения значимости заголовка. То есть текст в теге h1 должен быть самым крупным, в теге h6 самым мелким.

>Считается, что в теге h не должно содержаться ничего кроме текста.

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

>Не допускается использование тега h совместно с другими тегами акцентирования (например strong).

>Не допускается использование тега h1 более одного раза на странице.

Также воспользовался таким советом - на главной странице заголовки организованы так:

h1 Заголовок сайта - h2 Заголовок сообщения - h3 Подзаголовоки страниц - h4 Сайтбар

Страница статьи:

h1 Заголовок страницы - h2 Подзаголовки страницы - h4 Сайтбар(тут выходит не очень красиво - будет что еще оптимизировать!).

Для пущей уверенности проанализировал HTML кода www.problogger.net известного блогера Darren Rowse - у него тот же подход.

Доработал немного шаблон, прописал проверку условий на то, показывается ли главная страница или нет, изменил шрифты для h2, h3 и h4, подправил главную страницу некоторые статьи (большинство еще ожидает обновления).

Внесения изменений в блог

2011-06-17T13:46:00.000-07:00

Внесения изменений в блог - Blog Change Management

При работе блога на платформе blogger (blogspot.com), как, наверное, и на любой другой, приходится что-то подкручивать, дописывать руками, иногда вставлять куски кода, взятые из разных источников. И потом, когда после этой настройки что-то перестало работать или ты хочешь вернуться к предыдущему варианту блога, начинаешь чесать голову и пытаться вспомнить, что ты менял и каким был код до изменений.

Чтобы минимизировать проблемы, связанные с внесением изменений в код блога, я придерживаюсь следующих простых правил:

1. Перед внесением изменения в шаблон я делаю резервную копию. файл резервной копии называю датой когда копия делалась
2. В Google Doсuments веду список вносимых изменений, где отмечаю дату, описание изменения и сохраняю изменяемый код. Если пользуюсь кодом из какой-нибудь статьи, указываю ссылку на первоисточник.

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

Такой вот у меня Blog Change Management.

Удалить Subscribe to: Posts (Atom)

2011-04-14T21:04:00.000-07:00

Где: bloggeruniversity.blogspot.com

Удалить Subscribe to: Posts (Atom)

В рамках сокращения линков на страницах решил отказаться от этой ненужной строчки.

Отказался от социальных кнопок

2011-03-30T10:36:00.000-07:00

Чтобы прийти к количеству 100 линков на странице, а также проанализировав нужность линков на странице, отказался от блока ссылок на не главные тэги, а также удалил социальные кнопки. А всё потому, что Яндекс понизил меня в выдаче...

Как так, что Яндексу нужно - непонятно... Буду думать.

У вас, друзья, как с ранжированием ваших сайтов?

Top 10 Must Have SEO Extensions for Google Chrome

2010-12-01T06:13:00.000-08:00

Где: http://www.seomoz.org

Top 10 Must Have SEO Extensions for Google Chrome

Как добавлять фрагменты кода в пост

2010-10-18T08:41:00.000-07:00

Где: http://bloggertak.blogspot.com/2010/09/syntax-highligher-blogger.html

Как правильно добавлять фрагменты кода в пост

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

Как правильно работать с Твиттером

2010-07-22T08:34:00.000-07:00

Где: http://glume.ru/archives/345.html#more-345

Как правильно работать с Твиттером

По моему скромному мнению Твиттер - гигантская... э... помойка? Так, пожалуй, назову этот динамично развивающийся сервис. И чтобы попробовать хоть как-то выбрать из Твиттера что-то нужное мне, попробую воспользоваться этим советом.

Кнопка добавления в Facebook для Blogger

2010-07-19T10:07:00.000-07:00

Где: http://blogohelp.blogspot.com/2010/07/facebook-blogger.html

UPD
Где: http://junksblogger.blogspot.com/2010/04/add-facebook-like-this-button-on.html

Установка кнопки добавления в Facebook для Blogger

СтОит или не стОит добавлять кнопку? Мне пища для размышления и практический совет, как конпку добавить.

И еще по теме. Товарищи рассказывают, как такие кнопки ставить и настраивать:
http://junksblogger.blogspot.com/2010/04/add-facebook-like-this-button-on.html
http://www.bloggerplugins.org/2010/04/facebook-like-button-for-blogger.html

И до кучи - информация от разработчиков Фейсбук:
http://developers.facebook.com/docs/reference/plugins/like

How to create facebook page

2010-07-16T10:58:00.000-07:00

Где: http://maxibiz.blogspot.com/2010/07/facebook-1.html
Где: http://maxibiz.blogspot.com/2010/07/facebook-2.html
Где: http://www.seomoz.org/blog/facebook-marketing-ultimate-guide

Как создать страницу на Фейсбуке

Вводный курс про то, как создать страницу на Фейсбуке, на что обратить внимание и как эту страницу продвинуть.

Воодушевившись статьею, я создал профиль на Фейсбуке

Мои русские социальные кнопки для Blogger

2010-07-09T09:59:00.000-07:00

Мои русские социальные кнопки для Blogger

После некоторых раздумий я решил объединить код русских кнопок, про которые говорил в предыдущей статье, с имеющимся кодом от сервиса AddToAny.

И внедрил в свой фото блог о путешествиях.

Как всё вышло можно посмотреть на примере статьи об Аквариуме в Атланте (самом большом аквариуме в мире кстати).

Что думаете? Удачно ли вышло?

traveler social networks

2010-07-08T20:57:00.000-07:00

Где: http://habrahabr.ru/blogs/social_networks/98530/

Обзор туристических блогосервисов

Что лучше для продвижения сайта про путешествия? Какая специализированная туристическая сеть поможет в этом? Ответы можно найти в обзоре на Хабре.

Foto blog - Howto handle photos

2010-07-07T22:26:00.000-07:00

Где: сайт MB-WORLD

Техника фотографии - Секреты обработки

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

BlogUpp! | the blog: Auto-Share on Social Web

2010-07-07T12:20:00.000-07:00

Где: BlogUpp! | the blog: Auto-Share on Social Web

Auto-Share on Social Web

Подключение к Фейсбуку

google top russuian travel blogs

2010-07-07T12:16:00.000-07:00

Где: http://www.google.com/Top/World/Russian/...

Дневники путешествий

Вот где надо искать интересные статьи о путешествиях!

Как попасть в список написано тут: http://www.dmoz.org/cgi-bin/add.cgi?where=World/Russian/Досуг/Туризм/Дневники_путешествий

Отмечу, что список интересных путешествий возле Атланты имеется здесь.

Оптимизация Blogger – свежий взгляд

2010-07-07T04:54:00.000-07:00

Где: http://amateurblogger.ru/2010/06/optimization-blogger-fresh-look.html

Оптимизация Blogger – свежий взгляд

Доводка блога волшебным рашпилем. Надо читать!

Google Maps Mania.RU

2010-07-06T04:56:00.000-07:00

Где: http://linkstore.ru/gmania/

Коллекция русскоязычных продуктов, использующих Google Maps API

Надо смотреть, вдруг какой ресурс окажется интересным! -)

Как стать успешным блоггером за два месяца

2010-07-06T04:45:00.000-07:00

Где: http://bablorub.blogspot.com/2010/07/blog-post_05.html

Как стать успешным блоггером за два месяца

Отличная статья. Которую следует перечитать на досуге.

Список русских блогов на Blogger (Blogspot)

2010-07-02T10:36:00.000-07:00

Где: http://rustop.blogspot.com

В блогах на Blogger (Blogspot) не так просто искать единомышленников. Каталог русских блогов на rustop.blogspot.com помогает найти интересные блоги.

Чтобы стать попасть в каталог, нежно оставить комментарий с описанием своего блога:
http://rustop.blogspot.com/2007/11/russian-blogspot-blogs-directory.html

Как в блоге сделать страницу «Содержание» (Table of Content)

2010-07-02T10:15:00.000-07:00

Где: http://blogohelp.blogspot.com/2010/06/table-of-content.html

Всегда хотелось иметь страницу с содержимым блога. И такая страница содержания на фото блоге есть. Но приходится ее формировать руками, что хлопотно.

Александр в своей статье рассказывает, как формировать страницу содержания блога автоматически.

Особенность работы скрипта - содержание строится на основе ярлыков (tags), поэтому одна и та же статья появляется в списке содержимого столько раз, сколько у нее ярлыков.

Плюс к этому скрипт добавляет ссылку на блог автора скрипта, Bismillah, Alhamdulillah: www.abu-farhan.com...

Что и смущает. Поэтому я пока эту фичу на фото блоге не внедрил. В отличие от этого блога ;-)

Бесплатные иконки штатов, в том числе Джорджия

2010-07-02T09:42:00.000-07:00

Где:
http://icons.mysitemyway.com/free-icons-clipart-tagged/map/748/
http://icons.mysitemyway.com/free-icons-clipart-tagged/georgia/748/

Если задумаю делать фавикон, иконки нужно будет брать на этом сайте. Но пока в планах.

Иконки для русских социальных сетей

2010-07-02T09:31:00.000-07:00

Где: http://a-brezhnev.ru/2010-03-ikonki-dlya-russkix-socialnyx-setej

Сразу же после установки кода для кнопок социальных сетей встал вопрос: Где найти иконки русских социальных сетей? Сайт фотогрофа Александра Брежнева дает ответ на этот вопрос. Там есть кнопки как для русских популярных сетей, так и для англоязычных.

Русские социальные кнопки для Blogger

2010-07-02T09:09:00.000-07:00

Где: http://seorussian.blogspot.com/2010/07/socialnye-knopki-dlya-blogger.html

В качестве сервиса для социальных кнопок для Blogger я пользуюсь сервисом www.addtoany.com. В котором много чего есть, но нет кнопок популярных российских сетей - В контакте, Блоги на mail.ru.

Прекрасная-распрекрасная статья подробно рассказывает, как это сделать. На тестовом блоге меня получилось вот так:

Теперь думаю, пришло ли время обновлять основной блог или нет. Как вы, друзья, думаете?

Навигации с номерами страниц для Blogger

2010-04-29T20:59:00.000-07:00

Навигации с номерами страниц для Blogger – интересная и долгожданная деталь Blogger блога. Возможно, вы видели подобную навигацию в блогах wordpress (wp-pagenavi by Lester Chan). Muhammad Rias из Techie Blogger разработал систему навигации по страницам для Blogger. В этой системе были некоторые недочеты, но Abu Farhan всё исправил, и теперь система выглядит также, как на скриншоте.

Если вы будете использовать эту настройку, такая навигация появится на главной странице блога и странице закладок label pages (придется немного доработать).

Установка навигация с номерами страниц в ваш Blogger блог

Для тех, кто плохо знаком с HTML достаточно просто кликнуть на приведенную ниже кнопку.

После завершения установки виджета перейдите к пункту доработки страниц закладок label pages.

Сложный метод

Если вы установили виджет, вы не должны это читать :-) Перейдите к пункту доработки страниц закладок label pages.

1.Зайдите в панель управления Blogger Dashboard и перейдите к пунктам Layout > Edit Html

2.Не щелкайте по галочке ‘Expand Widget Templates’

3.Найдите

]]></b:skin>

и замените кодом

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

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

4. Следующая часть – скрипт JavaScript. Найдите

</body>

и замените на

<!--Page Navigation Starts--> 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<script type='text/javascript'> 
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script> 
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> 
</b:if> 
</b:if> 
<!--Page Navigation Ends --> 
</body>

Как вы видите, тут есть несколько изменяемых параметров.

var pageCount=5;

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

var displayPageNum=5;

Этот код определяет количество дополнительных номеров страниц, которые будут отображаться на странице.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

Эти две линии определяют текст, который будет появляться вместо previous page и next page соответственно.

Доработка страниц закладок label pages

Сейчас перед нами еще одна проблема. По умолчанию в Blogger показывается 20 страниц закладок label pages. Наша задача изменить это значение на значение, указанное в pageCount (или постах на страницу). Для этого необходимо отредактировать шаблон.

Как отредактировать шаблон чтобы изменить количество постов на страницу?

Перейдите в меню Edit HTML и раскройте виджеты.

Далее найдите все вхождения

'data:label.url'

(включая кавычки) и замените на

'data:label.url + &quot;?&amp;max-results=5&quot;'

Здесь 5 - это число постов, показываемых на странице.

Далее если вы используете виджет для облака тэгов от phydeaux3, найдите

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

и замените на

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Где опять же 5 число постов, показываемых на странице.

Теперь навигация с номерами страниц в вашем блоге должна работать!

Эта инструкция основана на коде от Abu Farhan и Muhammad Rias. Пожалуйста, дайте на их ссылку.
Постоянный линк Numbered Page Navigation For Blogger

Перевод на русский язык сделал фото блог Atlanta Travel. Постоянный линк Навигации с номерами страниц для Blogger