Зачем блогу нужен дизайн?

Уже довольно давно меня посещала мысль о реструктуризации и редизайне своего блога, так как мой старый сайт по очень многим параметрам меня не удовлетворял. В первую очередь хочу отметить, что в этой статье, когда я говорю "дизайн", я буду иметь в виду не только графический дизайн сайта, но и программную реализацию сайта. В этом плане мне очень нравится английское слово "design", которое кроме визуального дизайна подразумевает и некую разработку чего-либо. Итак, прошу немного внимания к статье 9 SEO-причин для создания хорошего дизайна сайта.

Вот как выглядел мой сайт до редизайна:

9 SEO-причин для создания хорошего дизайна сайта

Как видите, количество блоков на сайте сведено к минимуму. Мне раньше казалось, что это здорово, мол, ничего лишнего. Сверху в хедере на Flash'е я сделал интерактивный блочок, человек мог мышью рисовать разноцветные анимированные пятна. Также, при обновлении страницы логотип подгружался из папки с логотипами, таким образом каждый раз он выглядел немного по-другому. Меню выглядело как клавиши фортепиано, последние 2 издавали звук.

В то время, когда я создавал свой сайт, у меня практически не было никакого опыта веб-разработки, поэтому я основной упор сделал именно на визуальный дизайн и на его оригинальность и минимум внимания я уделил юзабилити или удобству, конечно же, я не особо думал и о SEO-оптимизации. Именно поэтому я не обратил никакого внимания на SEF-URL'ы или по-русски ЧПУ-ссылки (красивые человеко-понятные урлы или ссылки), вместо бреда со знаком вопроса и кучей параметров.

1. SEF-URL'ы Они важны не только для того, чтоб их понимал человек (все-таки, называется ЧПУ!), но и для красоты дизайна страницы. Также они имеют большое значение для поисковой оптимизации сайта, поисковики любят SEF-ссылки и умеют их понимать. 

Откровенно скажу, что лично меня постоянно раздражали на моем старом сайте эти длинные непонятные никому URL'ы. Итак, это первое, на что я обратил внимание при редизайне сайта. Конечно, при обновлении сайта пришлось серьезно повозиться над переносом старых ссылок вида "...?view=article&id=2&blah-blah-blah" на новые адреса, вида ".../blog/dizajn-sajta". Об этом написано много где, основное, что нужно сказать, что желательно сохранить накопленный багаж ссылок на ваш сайт с внешних ресурсов, поэтому желательно для этих целей использовать 301-ый редирект. Некоторые думают, что 301 редирект никак не влияет на посещаемость, раз ссылки остаются не битыми.

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

2. Блоки "Самое читаемое/обсуждаемое", "Еще по теме"Они необходимы для уменьшения показателя отказов, а также и для увеличения статической ссылочной массы на страницы со статьями, на которые ссылаются, что, как говорят, хорошо сказывается на продвижении.

Второе, что я решил поменять на сайте - это общую концепцию вывода информации. В Google Аналитике я заметил, что у меня просто громадный показатель отказов, более 90 процентов, это значит, что 9 из 10 человек, попав на определенную страницу сайта не переходит на другие страницы. Либо они находят нужную информацию, либо (что вероятней!) просто не знают, что делать после прочтения попавшейся им статьи. Для SEO это очень плохо. Я понял, что мне обязательно нужны такие блоки, как "Самое читаемое", "Самое обсуждаемое", "Еще по теме", "Последние комментарии". Такие блоки, если они правильно разработаны, могут вызвать желание у пользователя перейти еще куда-то по сходной тематике. К примеру, сейчас у меня каждой статье соответствуют определенные ключевые слова или метки (tags), поэтому зайдя на определенную страницу сайта, система предлагает прочитать еще что-нибудь по теме. Обратите внимание на эти блоки (они находятся справа на сайте).

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

Когда я делал редизайн сайта, я твердо решил использовать теги. Так как я выбрал CMS Joomla для создания сайта, то я переживал, что придется ставить сторонние компоненты или писать свои для реализации данного функционала. Как выяснилось, начиная, по-моему, с 3-ей версии Joomla по умолчанию в коробочном пакете имеет данный функционал, который там называются "метки". Конечно же пришлось поставить пару подпорок, так как по умолчанию роутер компонента меток немного глючит и вместо красивого УРЛ-а типа "tags/jazz-in-kiev" (как известно, если создать пункт меню с ссылкой на компонент, и дать ему алиас, то роутер должен правильно использовать данный алиас в создании ссылок) в некоторых местах создает ссылки типа "component/tags/tag/jazz-in-kiev". Я решил не терять время на допиливания роутера и просто сделал редирект с "component/tags/tag" на "tags". Решение не красивое, зато быстрое.

4. Карта сайта или SitemapОна помогает поисковикам правильно проиндексировать ресурс, а также позволяет пользователям переходить в 2 клика на любую страницу сайта.

Для создания карты сайта я создал специальное меню, которое назвал "Index-menu" где установил правильную иерархию всех страниц. Использовал сторонний компонент для Joomla "Xmap". Очень хороший компонент, содержит много дополнений, позволяющих создавать валидные карты страниц для, например, того же Virtuemart, K2 или меток (по умолчанию Xmap не вставляет метки в карту, нужно ставить специальное бесплатное расширение). Чем хорош компонент XMap - он создает как HTML-карту, так и XML-карту, которую нужно отправить поисковикам на анализ. Как оказалось, я почему-то не отправлял карту своего сайта в Google и Yandex, что есть плохо для SEO.

5. Четкая структура разделов, навигация Позволяет пользователям лучше ориентироваться на сайте. Должна быть подчеркнута правильными ссылками, например "/music/jazz/best-pianists". Также очень плохо, если на сайте есть дубли страниц.

Конечно же четкая структура разделов сайта должна быть подчеркнута правильными SEF-урлами, описанными в первом пункте. Лучше всего основную структуру разделов разместить в меню, при чем, чем проще оно будет, тем лучше.

Еще здесь упомяну дубли страниц, которые "размазывают" рейтинг определенных страниц на несколько урлов. Это плохо, и одна из причин, почему я не люблю Joomla - наличие этих дублей. При создании четкой структуры разделов с красивыми урлами, проверьте ваш сайт на наличие дублей. Один из самых распространенных дублей - сайт с "www" и без. Проблема дублей страниц с выводом контента на моем сайте до сих пор остается, даже после редизайна сайта, постараюсь решить ее в ближайшее время. Как решу, обязательно поделюсь, так как эта проблема, как я заметил, беспокоит многих Joomla-пользователей.

6. Использование HTML-тегов title, description, h1 Это всем известная старая истина многими случайно игнорируется, хотя правильно подобранный контент для этих html-тегов наряду с хорошими ключевиками в тексте статьи создают максимальный эффект для продвижения сайта.

Правильное содержание этих тегов не только повысит ваш рейтинг в поисковиках, но и будет полезен людям, ведь им будет очень удобно ориентироваться на сайте, в котором четко выделены тематика, название и т.д. В это трудно поверить, но я, хотя и знаю это с очень давних пор, почему-то при создании своего первого сайта упустил эту базовую истину из виду. Пожалуйста, не совершайте моей ошибки. Об использовании этих html-тегов написано массу статей, и если для вас это ново, первое, что вы должны сделать - прочитать о важности данных тегов.Также обратите внимание, что дизайн текста с html-тегом h1 должен соответствовать своему статусу, то есть должен иметь большой размер и, возможно, отличаться от основного текста цветом. Обратите внимание, как реализован тег h1 на этом сайте. На главной странице - это фраза "Юрий Галин | Блог о джазе, граффити и IT", на страницах же со статьями, эта фраза становится h2, а названия статей становятся h1. Правильное использование этих базовых тегов (а также alt и title для картинок) - также одна из причин для создания хорошего дизайна сайта

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

Есть много статей, в которых люди дискутируют на тему выбора лучшей системы комментирования. Лично я пока остановился на системе Disqus, как на самой распространенной и удобной. У системы много плюсов, как например, простая интеграция в сайт, но есть и минусы (невозможность сделать кастомный дизайн, некоторые глюки). Конечно же, лучшим вариантом системы комментирования на сайте является система, где целевой аудитории сайта пришлось бы тратить меньшее количество времени на регистрацию/авторизацию. К примеру, если человек, авторизирован во ВКонтакте или в Facebook'е, то его не стоит заставлять снова вводить свои данные. Такая реализация встречается на многих хороших сайтах. То есть, у человека есть возможность написать свой комментарий от аккаунта из своей социальной сети, при чем этот комментарий будет виден в общем списке комментариев, но с пометкой той сети, в которой он авторизирован. Пример такой реализации - livejournal. Согласитесь, это удобней и красивее с точки зрения графического дизайна и юзабилити видеть только одну систему комментирования, где около каждой аватарки стоит маленькая пометка откуда пользователь зашел, чем иметь 3 системы, одна под другой, что можно часто увидеть на разных треш-сайтах. Для SEO также важно, чтобы комментарии были индексируемы. Об этом также много написано в сети, кто об этом не слышал - советую почитать.

Кстати, забыл сказать, отдельной историей для меня стал перенос моих старых комментов с JComments в Disqus, и некоторые глюки при создании локальной версии сайта (Disqus подумал, что это мой настоящий сайт и все ссылки изменил, пришлось в ручную все переделывать и отпарвлять ему карту ссылок).

8. Социальная интеграция На сегодняшний день интеграция с Google+, как говорят умные люди - один из самых важных параметров для повышения интереса людей и поисковиков к сайту.

Я давно обратил внимание, что иногда когда находишься на некоторых сайтах, пусть даже с высокой посещаемостью, создается впечатление некоего одиночества. Обычно это происходит, когда на сайте нет активных обсуждений, статей 1-3 дневной свежести и большого количества лайков. Из-за эффекта отсутствия людей на сайте у пользователей создается впечатление, что они находятся где-то в Припяти.Таким образом, наличие социальных иконок создают положительный эффект как для SEO так и для дизайна сайта. 

9. Цитаты в специальных блоках Такой вид подачи информации позволяет пользователям быстро просмотреть статью на наличие нужной им информации, а также позволяет расставить основные акценты.

Подобный вариант подачи контента превращает обычную интернет-статью в хорошо сверстанную журнальную, что придает ей законченный вид и рождает у пользователей доверие к ней. Такие блоки очень желательны для хороших публикаций. Я использую редактор контента TinyMCE, а он позволяет добавлять кастомные (пользовательские) стили в свой стандартный набор, поэтому создание блоков с цитатами теперь не требует от автора лезть в html-код, а позволяет в 2 клика добавить нужный стиль. Удобно!

Все эти пункты (и еще несколько) я внедрил на своем сайте, и уже вижу увеличение времени, которое пользователи проводят на сайте, а также уменьшение показателя отказа, а не это ли является показателем улучшения дизайна? Обратите внимание, что я намеренно не говорю о цветах и стилях, хороший дизайн сайта - это удобство и простота в первую очередь!

Таким образом, подытожу: красота дизайна графических интерфейсов - понятие субъективное, поэтому при их разработке нужно делать основной упор именно на юзабилити, а не на графическое решение, а для оценки дизайна можно использовать такие объективные SEO-параметры, как показатель отказов, количество просмотров страниц на одного пользователя, длительность пребывания на сайте, количество возвратов, также для больших проектов желательно использовать A/B-тестирование. Эти параметры можно отслеживать в статистиках от Google, Yandex или LiveInternet и это поможет добиться максимально красивого" (читайте удобного) дизайна сайта.

П. С. Также в проектировании дизайна блога или сайта советую обращать внимание на мелочи. Об одной из мелочей я рассказал здесь: Как правильно удалять | Улучшение web-интерфейса.