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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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