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

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

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

Стоит ли обращать внимание на дизайн в отношении SЕО? Оказывает ли дизайн влияние на ранжирование сайта в выдаче поисковых систем? Для ответа на этот вопрос разберем наиболее популярные направления современного веб-дизайна и проследим, как он может влиять на его продвижение.

Параллакс

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

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

Бесконечный скролл

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

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

Фиксированная панель навигации

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

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

HTML5

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

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

Инфографика

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

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

Адаптивный дизайн Адаптивный дизайн позволяет сайту определить тип устройства посетителя и адаптироваться в соответствии с размером экрана устройства (ПК, планшет, смартфон и т.д.), методу ввода и т.д. Обычно, для такого вида дизайна создаются специальные версии, заточенные под размер экрана устройства.

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

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

Наложение (оверлей) Dropdowns

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

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

Вывод

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

По материалам Lunametrics.com и SearchEngineJournal