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

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

Не менш складним завданням є оцінка «привабливості» коду для пошукових систем, того, як код веб-сторінок сприяє швидкій індексації сайту (адже у деяких 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