Просування красивого ресурсу: дизайн сайту для SEO

1. нескінченний скролінг
2. фіксоване меню
3. Parallax-scrolling
4. інфографіка
5. адаптивний дизайн
6. Читайте також:
7. Мобільні сторінки з прискореної завантаженням (Google AMP) і майбутнє мобільного Інтернету
8. Читайте також:
9. 7 ознак SEO-самогубці: помилки при просуванні сайту

Всім відомо, що для успішного SEO, життєво важливо написати якісний і корисний контент, створити пророблена семантичне ядро, оптимізувати кожен елемент сторінки, відповідати вимогам ніші і цільової аудиторії і багато іншого.

Найчастіше, деякі веб-майстри на цьому і зупиняються, прагнучи якомога швидше досягти бажаних результатів. Вони забувають про одне з найголовніших чинників ранжирування - оцінці користувача. А судячи з того, що майже всі користувачі візуали, а пошукові системи орієнтуються на їх думку, дизайн і гідне юзабіліті - це те, на чому слід зосередитися.

Ми згодні, що якщо дуже сильно постаратися, то в принципі просунути можна будь-яке диво-юдо-рибу-кит, але якщо пошукову систему ще можна якось обдурити (не радимо), то з користувачем розмова коротка. Йому не подобається сайт - він іде безповоротно і всі ваші маніпуляції втрачають сенс. Такі стратегії особливо забавні, коли справа стосується контекстної реклами і сайт просто платить за кліки, які ні до чого не приводять. Але зараз ми говоримо не про контекст, а про органічну видачу.

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

нескінченний скролінг

Якщо вам необхідно помістити весь контент в межах однієї сторінки, технологія нескінченної перемотування сторінки як у Facebook, Twitter і Instagram вам відмінно підходять. Суть її полягає в тому, що користувач прокручує контент, і опускаючись, переходить на все нові розділи сайту. Тепер не потрібно повертатися в головне меню і шукати потрібний розділ, він сам прогрузити в міру скролінгу.

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

Що стосується його впливу на SEO, проблем бути не повинно, якщо ви використовуєте такі фреймворки, як Backbone , Bootstrap .Вони, в свою чергу, використовують код Ajax , А він дуже навіть дружить з пошуковими ботами.

фіксоване меню

джерело зображення

Цей, здавалося б, несуттєвий дизайнерський трюк відмінно сприяємо розташуванню користувачів. Його фішка в тому, що меню залишається нерухомим в процесі перемотування сторінки і залишається в полі зору відвідувача під час усіх його дій. Таке фіксоване розташування меню дозволяє скористатися розділами в будь-який час, без повернення назад / вгору / на головну сторінку.

Цей дизайнерський хід однозначно спрощує використання сайту. Але що ж стосується SEO? Можна сказати, що фіксована панель має тільки позитивний ефект, головне, щоб її код був доступний для індексування та боти Google безперешкодно орієнтувалися у внутрішніх сторінках сайту.

Parallax-scrolling

Скріншот головної сторінки сайту

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

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

Однак, не варто засмучуватися раніше часу. Чим менше обсягу на сайті, тим простіше буде здійснити паралакс-скролінг. Наприклад, якщо ваш сайт присвячений одному проекту / конкурсу / акції і просувається за кількома ключовими словами, ботам буде легко його зрозуміти і навіть не сумнівайтеся, що ви завоюєте увагу цільової аудиторії.

До речі, ось кілька прикладів такого дизайну, надихайтеся із задоволенням)

інфографіка

Причому інфографіка до дизайну цілого сайту, запитаєте ви, адже це всього лише елемент візуалізації певної частини контенту. Але ми помітили, що деякі сайти почали використовувати інфографіку ... увагу - замість текстового контенту. Скажемо більше. Такий метод тільки набирає обертів. А чи знають вебмастера, що в гонитві за новинкою, вони ризикують втратити топові позиції?

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

адаптивний дизайн

Одне слово - універсальність. Зробивши свій сайт адаптивним, ви даєте користувачам можливість переглядати його на будь-якому пристрої: стаціонарному комп'ютері, ноутбуці, смартфоні, планшеті, і навіть телевізорі з підключенням до мережі. Такий дизайн автоматично адаптується під розміри екранів пристроїв, методи введення і інші особливості, відображаючи контент сторінок однаково для всіх.

Раніше, для нормального відображення на інших пристроях, створювалися окремі мобільні версії сайтів. Такий крок міг істотно вплинути на авторитетність ресурсу: контент часто дублювався, а сам сайт відображався по-різному і вводив в оману. Адаптивний же дизайн має на увазі одну єдину версію сайту.

Що стосується SEO, наявність адаптивного дизайну дає наступні переваги у видачі:

• Покращене юзабіліті. Google прагне максимально виправдовувати пошукові надії користувачів. І якщо у вашого сайту високий показник відмов (Bounce rate), пошукова система отримує сигнал про те, що з сайтом щось не так і він не відповідає очікуванням користувачів. З огляду на той факт, що більш 80% відсотків користувачів мають смартфони, окрема мобільна версія - це невиправданий ризик, який збільшує показник відмов. У той час, як адаптивний дизайн гарантує безперебійну роботу сайту з будь-якого пристрою
• Сам Google заявляє, що оптимізовані під мобільний пошук сайти мають перевагу в ранжируванні , Так що адаптивність сайту автоматично ставить його вище конкурентів
• Про дублювання контенту також можна не переживати, адже адаптивний дизайн не поділяє версії сайту і все інформація надійно зберігається в одному місці
• Економія бюджету. Маючи один адаптивний сайт, вам не потрібно витрачатися на створення, редагування і доопрацювання окремих версій сайту, розрахованих на різні види пристроїв.

Читайте також:

Шукати буде ще легше: новий мобільний індекс від Google

Мобільні сторінки з прискореної завантаженням (Google AMP) і майбутнє мобільного Інтернету

До висновків

Дизайн сайту для SEO - це великий і комплексне питання, задатися яким повинен кожен власник бізнесу з сайтом. Важливо пам'ятати, що дизайн - це не просто красива картинка, а безпосередній спосіб впливу як на пошукові системи, так і на цільову аудиторію. Юзабіліті завжди на першому місці. Зручність використання ресурсу відвідувачами безпосередньо впливає на місце у видачі, а індексування сайту залежить від рівня оптимізації елементів.

Так що зважившись на створення шикарного дизайну, пам'ятайте, що до творчого пориву потрібно додати зручну навігацію, адаптивність, якісний контент і перманентно працювати над усуненням технічних неполадок.

PS: щоб зрозуміти, наскільки обрана стратегія по дизайну відповідає вимогам користувачів, обов'язково враховуйте:

• час на сайті
• кількість переглядів сторінок
• глибина переглядів сторінок
• джерела трафіку
• показник відмов
• згадки сайту

Читайте також:

Один за всіх і всі за веб-дизайн: 7 трендів 2017 року

7 ознак SEO-самогубці: помилки при просуванні сайту

9 ефективних прийомів для підвищення СЕО-КЕП