Як дизайн сайту впливає на SEO

Дизайн є головною візуальною візитівкою будь-якого сайту. WEDEX розповість як саме дизайн впливає на SEO та на що варто звернути увагу.

Web та SEO: який звʼязок?

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

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

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

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

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

І саме на цьому моменті стає зрозуміло, що SEO має прямий звʼязок із дизайном та web-розробкою, адже вищенаведені метрики мають значний вплив на ранжування в мережі. Давайте спробуємо розібратися докладніше в тому, як саме дизайн та швидкість роботи сайту впливає на його SEO-оптимізацію

Які головні цілі для розробки сайту

Кожен сайт для чогось існує. Один створений для продажу товарів та відноситься до виду e-Commerce, інший є класичним блогом. Що обʼєднує ці та будь-які інші напрямки, для яких розробляється веб-ресурс та його дизайн? Відповідь: наявність конкретних цілей.

Абсолютна більшість сайтів має конкретну ціль, під яку підлаштовується все інше. Починаючи від системи рейтингу і завершуючи формами звʼязку — все це підпорядковується початковій цілі сайту. Ось деякі приклади цілей:

• Продажі. До них можна віднести більшу частину існуючих інтернет-магазинів та навіть односторінкових сайтів з швидким замовленням одного товару. Для дизайну таких ресурсів характерна наявність карток товарів, кошику, підключених платіжних систем та e-mail розсилок для постійних користувачів.
• Збір лідів. Такі ресурси створюють для того, щоб отримати контакти користувачів для подальшої взаємодії. Наприклад: сайти послуг, консалтингу, клінік, будівельних компаній. Зазвичай дизайн містить форми зворотного звʼязку, кнопки «Замовити консультацію», іноді — безкоштовні матеріали в обмін на e-mail.
• Підтримка користувачів. Сайт підтримки здійснює, неочікувано, підтримку користувача шляхом надання якихось даних. Такі ресурси є сховищем для сервісної інформації, баз знань тощо. Дизайн у них відповідний — чимось схожий на довідник.

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

Характерний дизайн — перший гачок для будь-якого користувача, який зрозумілою мовою асоціацій пояснить доцільність використання саме цього сайту.

Дизайн сайту: UX та його вплив

User Experience — складова веб-дизайну, ціллю якою є створення не тільки корисного, а й зручного та зрозумілого для користувача сайту. UX-складова будь-якого дизайну є важливою частиною SEO, адже саме завдяки зрозумілості дизайну інтерфейсу та донесенню важливості наявної інформації користувач вирішить, чи залишатися йому на сайті, чи ні.

Так, до UX зазвичай відносять:

• Архітектуру інформації. Сайт повинен мати зрозумілу структуру розподілу інформації. Якщо ресурс довідковий, то необхідно розробити такий дизайн, який дозволяє легко орієнтуватися у великому обсязі тексту. Дизайн інтернет-магазину варто розробити орієнтованим на картки та швидкий перегляд товарів. Дизайнер має не тільки розбиратися з тим, наскільки красиво сайт виглядає, а й з тим, наскільки користувач легко зможе в ньому орієнтуватися та шукати необхідне.
• Дизайн ресурсу. Будь-який різнокольоровий сайт з надлишком візуальних дизайн-ефектів програє «сірому» сайту, в якому реалізована зручна навігація з конкретними розділами. Тому для дійсно влучного дизайну, який відповідає поставленим цілям, варто зберігати єдність стилю. Наприклад, дизайн лендінгу для продажу одного єдиного виду кормів для собак буде сильно відрізнятися від електронної версії якогось журналу.
• Контентне наповнення. Якщо дизайн це перше, за що хапається погляд, то контент — та сама частина про «по розуму проводжають». Пошукові роботи уважно вивчають не тільки семантику текстів, а й реальну користь контенту для користувача. Гарно структурований контент, наповнений різними посиланнями, оптимізований для пошуку матиме велику перевагу серед аналогічних за тематикою сайтів для пошуковика.

Основні вимоги до дизайну сайту: не тільки front, а й back

Влучний дизайн є лише частиною айсбергу, який називається usability (тобто зручність користування сайтом). Цим терміном пояснюють те, наскільки користувачу комфортно користуватися веб-ресурсом, наскільки user-friendly інтерфейс тощо. В цілому, існує декілька основних вимог до дизайну сайту, щоб він відповідав принципам usability для більшої частини потенційних клієнтів.

• Важливість оптимальної ваги сторінки. Чи задумувались ви про те, скільки «важить» сторінка вашого сайту? А це один з найважливіших показників для пошукових систем. Чим важча сторінка, тим більше часу браузеру знадобиться, щоб її відтворити на пристрої користувача, а значить й більше часу у користувача займе скролінг сторінок. Google гірше ранжує сайти з довгими завантаженнями (довгі це більші за 2-3 секунди до появи основного масиву контенту на desktop та 3-4 секунд для смартфону).
• Чистота похідного коду сайту. Дизайн це не тільки те, що бачить клієнт, а й увесь «внутряк» сторінок: скрипти, API, бази даних. Зазвичай сайти, які мають перевантажений код ще й гірше та довше завантажується, що напряму впливає на SEO. Це не пряма вимога до дизайнера, радше до програміста: першочергово необхідно забезпечити швидку та чітку роботу всіх внутрішніх компонентів.
• Наявність пошуку по сайту. Майже будь-який сайт має бути оснащений внутрішнім пошуком. Таким чином користувач може швидко знайти необхідну інформацію серед контенту або товар. Наявність пошуку є плюсом до SEO-оптимізації ресурсу.
• Зрозуміла навігація. Як ми зауважили вище, для покращення SEO сайт повинен мати зрозумілу та зручну навігацію усіма розділами, сторінками, блогами, тощо. Так користувач зможе знайти будь-що, включно з необхідною інформацією навіть у найнезвичнішому дизайні.
• Дизайн меню: і хедер, і футер. Наявність меню і в шапці, і в підвалі сайту це не тільки приклад гарного тону для розробника, а й зручність користувача. Також хорошим варіантом буде встановити кнопки для швидкого повернення на головну сторінку або на початок поточної.
• Редагування всього контенту. Так, більшість контенту є текстом, але крім нього існує ще й медіа та вбудований контент по типу програвачів відео та музики. Весь контент сторінки та сайту повинен бути підпорядкований тематиці, чітко структурований та SEO-оптимізований. Ключові слова, мета-теги, alt-атрибути для зображень мають використовуватися доцільно.

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

Як пошукові системи сканують дизайн сайту?

Пошукові роботи не оцінюють дизайн сайту як ми — вони не мають очей та відчуттів, проте спираються на конкретні дані. Так, Google може зробити висновок про якість дизайну та його вплив на SEO за:

• відвідуваністю сайту — як часто користувачі заходять на сайт, повертаються до нього через деякий час;
• глибиною перегляду — як далеко може зайти користувач, мандруючи сторінками сайту, що напряму залежить від якості SEO та зручності дизайну;
• часом, проведеним на сторінці та взаємодією — скільки часу витрачає користувач, вивчаючи статті, замовляючи товари тощо.

Пошукова система визначає за цими параметрами довіру до сайту. Чим вища довіра — тим ймовірніше сайт опиниться в топі пошукових запитів.

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

Головні фактори довіри пошукових систем:

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

Мобільні версії сайтів

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

Але сьогодні багато розробників дотримується старого підходу: спочатку desktop, потім все інше. Сказати точно, який з цих підходів більш правильний не можна. Єдиний стовідсотковий момент — для кращого SEO та ранжування сайт повинен мати мобільну версію. Як саме вона буде зроблена? Це вже інше питання, головне, щоб справно працювала та заохочувала користувачів.

Проблему створення мобільної версії вирішує адаптивна верстка. Такі конструктори сайтів, як WordPress, Framer, Weblium та Webflow підтримують цей режим, дозволяючи швидко адаптувати настільні версії до мобільних.

Вимоги до мобільних версій

Вимоги до дизайну мобільної та desktop-версії в цілому схожі, але мають деякі нюанси:

• До дизайну мобільної версії повинні бути адаптовані всі важливі елементи сторінки, тобто відеопрогравач, ширина та видимість тексту, зображення з alt.
• Структура версій повинна збігатися та бути однаково очевидною (зрозуміло, що через менший екран неможливо створити такий самий хедер, але меню повинно бути зручним).
• Мета-теги версій повинні збігатися.
• Важливо використовувати тег rel=«caninocal» для позначення звʼязку між версіями сторінок.
• Сервер, який містить мобільну версію, повинен витримувати велике навантаження під час сканування сторінок пошуковими роботами.

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

Висновки

Підсумовуючи все вищесказане, ось головні ознаки того, що дизайн сайту зможе допомогти покращити SEO:

• Візуальний стиль: очі потенційного клієнта не страждають від надмірних ефектів, банерів та реклами. Дизайн витриманий, але не аскетичний. Єдиний для всіх сторінок.
• Контент: не тільки корисний, а й якісно поданий, має структуру.
• Мобільна версія: стабільна робота, яка відповідає вимогам Google.
• Зрозумілість: навігація не викликає питань, всі розділи мають логічну структуру.
• Правильно оформлені технічні сторінки: мапа сайту, 404 чи інші кодові помилки, повідомлення про перенаправлення, реєстрацію, замовлення тощо.
• Наявність стандартизованих сторінок: «Про нас», «Головна», «Відгуки», «Блог» або «Новини». Це перевірені часом заголовки, які не варто змінювати без особливої потреби.

Павло Власюк

CMO

Сторінка автора