8 простых советов для разработки успешного SEO дизайна вебсайта

Один из наиболее сложных вопросов при разработке вебсайта –   как создать “супер” дизайн с учетом требований поисковой оптимизации.

Чаще всего бывает как-то так: заказчик сказал “хочу крутой дизайн, чтоб все супер-флеш и классную картинку на весь экран, чтоб кнопки мигали, а вот тут снеговик выскакивал, и в подвале котики. А текстов не надо, никто их не читает.” Отличная идея. Даже если клиенту повезло, и его разработчик оказался дизайнером, копирайтером и сеошником в одном флаконе, не всегда удается убедить его жену, секретаршу и его самого в том, что такой “богатый” дизайн не оставляет ни одного шанса для поисковой оптимизации, а, значит, и для получения приличной видимости в поисковой выдаче.
Поэтому вменяемым заказчикам (и некоторым дизайнерам) советую прочитать и поверить этим советам (тут букав не так уж и много). А невменяемым заказчикам лучше пойти к флешерам и купить себе котиков, не читая всех этих “текстов”.

Совет №1: Макет страницы должен быть простым, а навигация – и того проще.

Кнопки навигации должны быть доступны для поисковиков, чтобы паучки-роботы могли легко перескакивать с одной ссылки на другой, понятны для пользователей и видны с любого мобильного девайса. Чем проще реализована навигация, тем лучше. Поэтому “просто текст” – это лучший вариант! Если хочется супер-кнопок, а не текстовых ссылок – сделайте себе одну, большую, красивую, во флеше или на скриптах, с надписью “моя крутая кнопка” – но где-нибудь пониже. Только не забудьте, что на айпэдах ее, возможно,  никто не увидит.

Заголовки (уж сколько раз твердили миру!) должны быть как можно ближе к началу страницы, в текстовом виде, без выкрутас и в тегах h1/h2. Если вы хотите сделать “карусель” с картинками, выставьте ее под основным заголовком, а не после нее. Навигационные элементы тоже желательно расположить ниже основного заголовка! Чем меньше кода отделяет h1 от <body> – тем лучше. Совет кодерам – убирайте скрипты в отдельные файлы, если это возможно.

Совет №2: Управляйте шрифтами с помощью CSS

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

Совет №3: Используйте смену картинок на текст при наведении курсором

Оживить контентом богатый изображениями макет страницы поможет mouse-over – изменение объекта при наведении курсором. Для пользователя это выглядит так, что картинка меняется на простой текст при наведении мыши, а для поисковичков-паучков появляется вполне себе съедобный текстовый контент.

Совет №4 Экспериментируйте со стандартными шрифтами

В стандартном наборе шрифтов достаточно вариантов, которые позволяют обычному тексту выглядеть вполне декоративно. Вы получаете стильный дизайн, а поисковики – индексируемый контент на странице. Можно, в принципе, использовать подгружаемые шрифты – но подумайте, нужно ли это? Лишнее время загрузки, не всегда адекватное отображение в разных системах…  Уж лучше тогда использовать картинки, чем подгружаемые шрифты. Я придерживаюсь стойкого убеждения, что никакие красоты не стоят лишнего килобайта ожидания страницы и, тем более, неудобства пользователя. Идеология “не нравится мой сайт, пусть идет лесом” – глупа, если вы хотите получить успешный проект.

Совет №5 : Создавайте мобильные версии сайтов

Нет смысла говорить, что доступ в интернет с мобильных устройств становится “все более популярным”. Да он просто захватывает рынок! Прежде чем создавать “богатый” дизайн для своего сайта, подумайте о пользователях, которые захотят вас читать с телефонов, самсунгов и прочих айпэдов. Будут ли ваши “красоты” отображаться на этих устройствах и как быстро?  Не найдя навигации или пытаясь загрузить очередную расчудесную рекламную картинку, они могут не только уйти с вашего сайта, но и сказать потом про него что-нибудь недоброе. Готовы ли вы пожертвовать таким количеством пользователей?

Совет №6: Хороший дизайн не имеет права грузиться долго

Слишком “богатый” дизайн сайта может весьма замедлить его загрузку. Если это происходит – пора пересмотреть макет и оптимизировать его в сторону упрощения и облегчения. Проверьте, так ли уж нужны вам лишние скрипты, дополнительные шрифты или плагины, а также картинки с высоким разрешением.

Совет №7: Конверсия дороже понтов

Уж извините, но по-моему, “дорогой дизайн”, “супер-вау” и вариант “да, дизайнер потрудился” – все это дешевые понты. Настоящий “дорогой” дизайн сайта прост, прозрачен,  понятен и юзерам, и поисковикам (старо, как мир), стоит дорого, но того стоит. В итоге важнее окажется позиция в поисковой выдаче и конверсия – сколько пользователей (случайных или нет) позвонили, написали, заказали. Заманить и удержать посетителя на сайте одной красотищей не получится. Уж про поисковики и не говорю.

Совет №8: Бонусный

Сайт с этим самым “хорошим SEO-дизайном” изначально оптимизирован под поисковые машины, а не требует разных ухищрений после того, как все уже сверстано и запущено. Часто, вместо того, чтобы изначально интегрировать SEO в дизайн, заказчик делает “дорого и стильно” у разработчика, а потом, удивляясь, почему в поисковой выдаче по его вожделенному запросу поперед его шедевра выходит “какой-то зачуханный сайт с кучей текста”, бежит к сеошнику и кричит “спасите-помогите”. Да именно потому и выходит перед ним такой сайт без особого “дизайна”, но зато с хорошо оптимизированным текстовым контентом и простейшей навигацией. Поэтому совет №8, бонусный – поручайте разработку “стильного” сайта дизайнеру только в том случае, если в компании у него есть SEO-специалист, который имеет право влиять на процесс разработки макета, или же он сам может похвалиться знанием основных принципов поисковой оптимизации.