Как сделать Ваш блог привлекательней. Часть 1

Доброго времени суток мои дорогие читатели!

Сегодня я начинаю цикл постов о том как я изменяла свой блог, что добавляли и что убирала.

Я уже делала краткий обзор о том как мы с Константином Кирилюком переделывали мой блог и как я продолжала издеваться над своим блогом. И вот теперь по просьбе Кости:

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

И так начнёмс:

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

для этого:

1.      Заходим на страницу "Шаблон"

2.      Вверху справа находим кнопку "Резервное копирование и восстановление" - жмём её.

3.      В открывшемся окне нас сейчас интересует кнопка "Загрузить шаблон полностью" -жмём её.

4.      В открывшемся окне вам будет предложено "Открыть в..." или "Сохранить файл". Выбираем второй вариант (т.е. "Сохранить файл") и жмём кнопку "ОК". Если кнопка "ОК" не активна (по ней нельзя нажать), попробуйте в начале выбрать точку "Открыть в", а потом снова "Сохранить файл".

5.      Файл будет сохранён в соответствующей папке, обычно это "Загрузка", которая находится там же где и "Документы", "Изображения" и т.д. Если вы используете браузер Firefox, то должно появиться окно "Загрузки". В нём можно навести курсор мыши на загруженных файл (он будет иметь вид: template-*****.xml) и кликнуть правую кнопку мыши. В открывшемся меню, выберите пункт "Открыть папку с файлом" и вы сразу найдёте загруженный файл у себя на компьютере.

Меняем и/или  улучшаем Дизайн блога

• Второе и не мало важное - фоновая картинка, она должна быть маленькой и "легкой" (то есть иметь маленький вес).  Так как при использовании огромной картинки, которая весит очень много,  блог будет грузится медленно. Хотя этим нюансов в исключительных случаях можно и  пожертвовать в случае если фон очень гармонично дополнял дизайн. 
• Что можно сделать что бы фон не был просто белым? Константин рекомендовал нам с подружкой посетить сервис http://bgpatterns.com/ и сгенерировать себе фоновый узор. Подробней о сервисе и том как им пользоваться можете почитать тут: http://wmas.msk.ru/archives/bgpatterns  

• Занимаемся дальше приведением в порядок дизайна блога - есть такой баг (или не баг а так задумано, но режет глаз) - Видимая всеми каждому Панель навигации. Для этого добавим в  CSS  ещё одну строку: 

#navbar {display:none}

Что она делает? Она скрывает тот самый блоггерский бар вверху бога. Поясню. Сам бар представляет собой кусок HTML-кода размещённый в теге DIV с атрибутом id="navbar". Мы указали для него свойство display (отображение) со значение none (скрыть).

• Моей же подружке  Костя рекомендовал  отказаться от тёмных тонов (у неё изначально блог был в черных тонах и с  белым текстом) , т.к. они угнетающе действуют на посетителей блога. К тому же гораздо удобней читать именно чёрный текст на белом фоне.
• Стоит убрать левую колонку (оставить только правую, если их две или перенести колонку с лева на право). А то с левой колонкой получается, что код левой колонки находится выше кода средней колонки с содержанием. Это плохо сказывается на релевантности. Релевантность - это соответствие страницы заданному пользователем запросу в поисковой системе. Другими словами, код с основным содержанием должен быть как можно выше.
• Далее следует убрать все не нужные и захламляющие блог Виджеты.  Это позволить сделать страницу меньше и легче, следовательно она будет быстрее загружаться. Оставить только те которые подходят по тематике к вашему блогу ( у нас с Натальей в совокупности было много мусора такого как : часики, музыка, анекдоты, новости, погода......). Ниже опишу как и какие Виджеты мы делали.
• Текст постов лучше делать например 14px, а то при большом кажется что всё выделено жирным, а при маленьком хочется взять в руки лупу что затрудняет чтение.

Настраиваем ретрансляцию  PSS канала 

• Для того что бы читатели Вашего блога могли быстро и легко подписаться на обновления Вашего блога вам нужно будет организовать ретрасляцию RSS-ленты вашего блога через сервис FeedBurner.  Он создаёт ретрансляцию вашего фида и собирает статистику по подписчикам, а также многое другое  

          Что такое RSS? 

RSS - это формат данных ваших постов (записей в блогах), которые специальные программы и/или сервисы могут агрегировать (собирать) и показывать в удобном для пользователя виде. Примерами таких сервисов могут служить Google Reader, Яндекс.Подписки и т.д. Впрочем, эти данные можно использовать и другим способом. Например, для автоматического копипаста (копирования чужих данных и их размещения на своём блоге). Поэтому, перед тем как создать ретрансляцию, надо подготовить наш RSS. Он у вас доступен по адресу: http:// название Вашего блога .com/feeds/posts/default?alt=rss

  Подготовка RSS

Перейдите на страницу "Настройки" вашего блога и выберите пункт "Другое". На открывшейся странице нас интересует секция "Фид сайта". В списке "Разрешить фид блога" выберите вариант "До перехода". Это значит, что в RSS будет отображаться часть поста (записи в блоге) до разделителя (тег <!--more-->), если таковой есть (его советую использовать). Будет не лишним также прописать "Нижний колонтитул канала сообщений" - это HTML-код, который будет выводится в конце каждого сообщения в RSS-ленте. Здесь можно указать, например, такой код:

<p>С уважением, <a href="URLвашего блога>Ваше Имя</a>.</p>

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

Подробнее о том как зарегистрировать ретранслировать свой RSS через FeedBurner вы можете узнать из статьи Константина: 

Как создать RSS в FeedBurner?

Прикрепляем фид к блогу:

В панели управлением блога, в разделе "Настройки" нас интересует подраздел "Другое". Здесь есть секция "Фид сайта". Теперь по пунктам:

1. Разрешить фид блога -  рекомендую выбрать "до перехода", речь идёт о такой штуке как <!--more--> в посте блога - это разделитель. Как я понял вы его уже используете. Это хорошо, потому что на странице со списком постов и в RSS лучше выдавать анонсы постов, т.е. их первую часть. Так мы получаем заход на блог, в том случае если читателя заинтересовал анонс. Вот почему вступительная часть - это замануха :)

2. URL переадресации канала сообщений - вот здесь мы и прописываем полученный адрес.

3. Нижний колонтитул - это HTML-код, который будет автоматически вставляться в конец анонса каждого поста в RSS. Лично я рекомендую поставить что-то вроде:

<p>С уважением, <a href="URL вашего блога/сайта">Ваше имя</a></p>

С одной стороны это выглядит красиво, а с другой - ссылка. 

И так теперь пойдем дальше и  рассмотрим пошагово какие Виджеты нам понадобятся и как их лучше сделать:

•  Заменяем стандартную Виджетку "О себе" на более удобную и красивую. Для этого удаляем стандартную и на ее место ставим гаджет  HTML/JavaScript 

В содержание вначале ставим фотку. Её тоже можно закачать на Picasa Web Albums. Интересный нюанс, в адресе картинки можно задавать ограничение её размеров. Например:  http://go-url.ru/28p

( Для укорочения длинной ссылки я пользуюсь сервисом http://go-url.ru/ )

Здесь ограничение s912, т.е. 912 пикселей. Вам нужно будет поставить ограничение для фото в 150-170 пикселей, т.е. s150 или s170, посмотрите что будет лучше смотреться.

Вставить фото в виджет понятно как, но на всякий случай:

<p align="center"><img alt="{например, ваше ФИО}" src="{URL картинки}" border="0" /></p>

Дальше уже пишите сам текст приветствия:

 <p>Привет меня зовут... вы находитесь... этот блог о... <a href="URL странички  О Вас">подробнее</a> &raquo;</p> 

• Следующим нашим шагом будет вставка кнопочек на социальные аккаунты.  В принципе, стандартными являются Facebook, ВКонтакте и Twitter, но может вы хотите и ещё какие-то добавить или каких-то у вас нет. Тут мы снова прибегаем к   гаджету  HTML/JavaScript.  Начинаться он должен тегом строки <p align="center"> здесь атрибут align выравнивает содержание по center (центру). Далее сами кнопки. Используем тег <a href="" target="_blank"> для создания ссылки, в атрибуте href прописываем URL соответствующего социального аккаунта, атрибут target="_blank" указывает на то что ссылка будет открыта в новом окне или вкладке. Далее идёт тег <img alt="" src="" border="0" /> это тег картинки. В атрибуте alt прописываем название, например "ВКонтакте", в src - скопированный ранее URL адрес картинки, атрибут border="0"  задаёт нулевое значение рамки вокруг картинки. Затем закрываем тег ссылки </a>. Так с каждой кнопкой. В конце закрываем тег строки </p>. Общий конечный вариант будет иметь такой формат:

<p align="center">

<a href="{URL адрес соц.аккаунта}" target="_blank"><img alt="{альтернативный текс, например - название соц.сети}" src="{URL адрес картинки}" border="0" /></a><a href="{URL адрес соц.аккаунта}" target="_blank"><img alt="{альтернативный текс, например - название соц.сети}" src="{URL адрес картинки}" border="0" /></a>...</p>

• Список рубрик (меню), как таковой не предусмотрен в blogger, поэтому я использовала стандартный Ярлыки, выбрав в настройках - Выбранные ярлыки > В алфавитном порядке >Список  после чего настроила какие Ярлыки мне необходимы для показа в рубриках. 
• Так же я все таки решила установить и виджет с кнопками поделиться в соц. сетях (хотя Костя не рекомендовал это делать). Делала я его опять таки через   HTML/JavaScript  прописав в Содержании следующее:. 

          <!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style "><a class="addthis_button_preferred_1"></a><a class="addthis_button_preferred_2"></a><a class="addthis_button_preferred_3"></a><a class="addthis_button_preferred_4"></a><a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a></div><script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-5014321e0c18048e"></script><!-- AddThis Button END --></p>

•  Установила виджет с подпиской на PSS ленту своего фида сгенерировав код для вставки ТУТ >>>
•  Для поощрения тех читателей которые часто оставляют свои комментарии в моем блоге я решила установить Виджет "ТОП 5 комментатор", как я это делала подробнее в посте Как я сделала ТОП комментаров у себя в блоге....
• Можно установить у себя красивые виджеты Фэйсбука и ВКонтакте  (как это лучше сделать опушу в следующем посте)

Теперь займемся учетом статистики посещений:

• Для учета посещаемости Вам нужно зарегистрировать блог в Google Analytics - это система статистики Google. Там всё достаточно просто, если что вот полная инструкция  http://go-url.ru/28q

Потом надо будет прописать идентификатор веб-рессурса на блоггере - вот инструкция: http://go-url.ru/28r

• Также можно установить счётчки Яндекс.Метрика (подробней тут: http://go-url.ru/28s), для улучшения индексации Яндексом. Вот его то проще вставить в виджет HTML/JavaScript - выбирайте вариант - невидимый. Видимым счётчиком и тем, что вы будете пользоваться проверки статистики будет LiveInternet (регистрируемся тут: http://www.liveinternet.ru/add

А теперь, самое страшное для непосвященных, необходимо поработать напрямую с кодом шаблона:

• по умолчанию в теге TITLE  (это текст отображается в заголовке окна браузера) название поста идёт перед название блога - это не очень хорошо. Дело в том, что этот текст используется в качестве текста ссылки в поисковой выдаче.  Для того чтобы это исправить следуйте инструкциям в этом посте: http://go-url.ru/28t

Маленькие, но не менее полезные рекомендации на по следок: 

• При добавлении поста можно указать "Пользовательский URL" в настройке сообщения "Постоянная ссылка". Речь идёт о ЧПУ, подробней читайте тут: http://go-url.ru/28u . ЧПУ придает релевантность странице. 
• Ещё одна важная настройка сообщения "Описание для поисковых систем", вот её можно и нужно прописать для всех постов старых и новых, но это потребует время так что просто примите к сведению. Это краткое описание содержания поста, которое будет публиковаться в мета теге description. Фактически этот текст используется в качестве описания к ссылке в поисковой выдаче. Понятно, что он должен содержать ключевые слова, но главное - быть "заманухой". Посмотрите, разберитесь.

Полезные в обиходе блогера программки:

• для проверки на уникальность текста  
• для проверки на уникальность картинок  

Ну вот наверное и все основные моменты которые следовало бы учесть при создании своего блога и его оптимизации для поисковых систем.
Ещё раз хочется сказать: 

"Константин ОГРОМНОЕ тебе СПАСИБО

 за твою помощь и твое терпение ко мне и подружке) 

Ты просто Суппер!"

А Вам мои читатели могу порекомендовать еще внимательно изучить те рекомендации которые дает Костя в своем блоге  вебмастера перфекциониста и естественно воспользоваться ими))))

!Желаю удачи в блогосторении

!Ваша Велерея 

Короткая ссылка на данный пост -  http://go-url.ru/28v
_____________________________________________

P.S. в посте использовались материалы и рекомендации, которые давал мне и Натальи Щеповой Константин Кирилюк автор "Блога вебмастера перфекциониста".