пятница, 10 августа 2012 г.

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

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

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

Как сделать Ваш блог привлекательней. Часть 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. в посте использовались материалы и рекомендации, которые давал мне и Натальи Щеповой Константин Кирилюк автор "Блога вебмастера перфекциониста".


                          8 комментариев :

                          1. Ну, что я могу сказать. Ещё немного и можно оформлять методичку или даже книгу издавать ;) А в целом хорошо получилось. Теперь буду давать сразу ссылку на ваш пост. Спасибо!

                            ОтветитьУдалить
                            Ответы
                            1. Костя это тебе СПАСИБО)))) Ведь все это появилось только благодаря именно твоимрекомендациям, я их просто систематизировала)))

                              Удалить
                            2. Хорошо получилось! Коротко и ясно!:-)

                              Удалить
                            3. Спасибо Александр, я старалась

                              Удалить
                          2. Ната,отличная статья получилась. Нужная

                            ОтветитьУдалить
                          3. Очень интересная и полезная информация. Спасибо автору.

                            ОтветитьУдалить
                            Ответы
                            1. Не за что, я рада что Вам понравилось и Вы смогли найти что то полезное у меня в блоге.

                              Удалить
                          4. Анонимный13 июня 2014 г., 5:50

                            Admiring the dedication you put into your site and in depth information you offer.
                            It's good to come across a blog every once in a while that isn't the same
                            old rehashed information. Fantastic read! I've bookmarked your site and I'm including your RSS feeds to my Google
                            account.

                            Here is my web site; seo ()

                            ОтветитьУдалить