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

Более сложной задачей является оценка «привлекательности» кода для поисковых систем, того, насколько код веб-страниц способствует быстрой индексации сайта (некоторый flash-сайты могут испытывать с этим проблемы: они могут выглядеть потрясающе, но вывести в ТОП их бывает очень сложно из-за неудачного кода). Стоит ли обращать внимание на дизайн в связке с SЕО? Ведь сегодня существует большое количество современных трендов в оформлении интернет-страниц. Может ли дизайн оказать влияние на ранжирование сайта в выдаче поисковых систем?

Давайте разберем ряд наиболее популярных направлений в современном веб-дизайне и проследим, как дизайн сайта может влиять на его продвижение.

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

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

Если необходимо разместить весь контент сайта на одной странице, но при этом хочется обеспечить быструю загрузку этой страницы, вполне может сгодиться знакомая всем по Facebook или Twitter технология «бесконечной перемотки». Все видели, как при перемотке ленты новостей в социальной сети контент автоматически подгружается по мере перематывания страницы вниз. Такое решение очень удобно для владельцев блога, однако, как такая перемотка влияет на SЕО?

Как правило, веб-дизайнеры реализуют функцию бесконечной перемотки с помощью фреймворков, например, Backbone или Bootstrap, которые используют дружественный к роботам поисковой машины код AJAX. Это позволяет не беспокоиться о каких-то санкциях со стороны Google при реализации этого решения, оно придется очень кстати владельцам блогов , различных сообществ и т.д.

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

И снова встает вопрос о том, как такое меню скажется на продвижении проекта? К счастью, эффект от подобного визуального решения минимальный. Однако, при реализации подобного меню необходимо убедиться, что его код будет доступен для индексации, чтобы Google смог найти внутренние страницы сайта.

HTML5 медленно, но верно превращает интернет в более приятное место для пользователя. Новый стандарт HTML позволяет встраивать в веб-страницы видео и анимацию, которая загружается быстрее flash, кроме того, поисковики тоже любят HTML5.

HTML5 – это, безусловно, хороший способ создания веб-сайтов, хотя для того, чтобы освоить HTML5 и понять ряд его существенных отличий, придется потратить некоторое время. Некоторые элементы, например, тэг h1, в HTML5 отличаются от HTML4, о чем необходимо помнить. Чем больше времени будет посвящено изучению HTML5, тем лучший результат будет получен в итоге.

Очередной тренд, набирающий в последнее время силу, это использование инфографики вместо обычного контента. Такие изображения привлекают внимание и очень нравятся посетителям сайта. Однако, необходимо помнить, что инфографика – это всего лишь изображения, которые поисковик не индексирует (по крайней мере, на данный момент...). Так что не забывайте сопровождать инфографику необходимым количеством текста, проставляйте нужные ключи в тегах Alt и используйте все доступные методы, позволяющие поисковику понять, о чем идет речь на этой странице.

Адаптивный дизайн позволяет веб-сайту определять тип устройства посетителя и адаптироваться согласно размеру экрана устройства (ПК, планшет, смартфон и т.д.), методу ввода и т.д. Как правило, такой вид дизайна подразумевает создание специальных десктопных и мобильных версий, заточенных под размер экрана устройства. Может ли создание нескольких версий навредить ранжированию сайта? Совсем недавно Google предупредил, что будет понижать в выдаче сайты, не имеющие мобильные версии, так что на сегодня адаптивный дизайн – уже, пожалуй, обязательное требование для каждого сайта. Данный процесс особенно активно развивался в 2013 году, а наступивший 2014 год подхватил эту эстафету.

Стоит отметить также, что адаптивный дизайн, с точки зрения SEO, гораздо эффективнее создания двух отдельных версий (мобильной и десктопной). Единственное, о чем стоит беспокоиться, это отсутствие вообще какой-либо оптимизации для работы с мобильными устройствами на сайте (неправильно проведенная оптимизация может нанести неменьший вред). Адаптивный дизайн – весьма удачное решение в большинстве случаев, позволяющее избежать неизбежного дублирования контента при создании нескольких версий сайта (мобильной и десктопной) на разных URL-адресах. Короче говоря, адаптивный дизайн – правильный выбор, который пойдет на пользу сайту и его аудитории.

Как видите, SEO и дизайн очень тесно переплетены друг с другом, однако, определяющим при выборе дизайна должно быть максимальное удобство для пользователей. Дизайн должен максимально удовлетворять нуждам посетителей сайта и целям интернет-проекта. Только так можно добиться максимального результата. А Google сделает все остальное!

Источник SearchEngineJournal