Все що потрібно знати про дизайн сайту. Як впливає дизайн на SEO-просування сайту?

У більшості випадків кожен етап створення сайту замовник сприймає окремо. Прототип, макет, верстка, програмування, контент, дизайн, пошукова оптимізація, тестування. Як різні деталі одного механізму. Забуваючи про те, що пошукові системи сприймають сайт як одне ціле. І окремо докрутити в нього гайку під назвою “SEO-оптимізація”, коли все інше вже готове, не вийде.

У зв’язку з цим до дизайну і юзабіліті сайтів з боку пошукової мережі ставляться такі вимоги:

• Не перевищувати оптимальну вагу сторінки. Пошуковий робот не обробляє ту частину коду, яка перевищує встановлене значення (80 Кб). Надмірну вагу сторінки може додавати таблиця стилів, графічні елементи, файли скриптів. В результаті вона буде довго завантажуватися, перевищуючи оптимальну швидкість (2 секунди на десктоп і 3 секунди на мобільний пристрій).
• Не перевантажувати код. Це правило добре римується з попереднім. Перевірте (або доручіть перевірити) код сайту на наявність в ньому Java Script, динамічних тегів і т. Д. Їх краще перемістити в окремі модулі.
• Впровадити внутрішній пошук. Наявність пошукового рядка на сайті забезпечує користувачеві можливість швидко знайти інформацію або товар, а вашому сайту – зміцнення позицій у видачі.
• Забезпечити просту і зрозумілу навігацію по сайту. Щоб відвідувач розібрався в ній в перші ж секунди візиту. Заповнити текстовим контентом верхній відділ сторінки. SEO-фахівцям відомо, що чим вище знаходиться текст на сторінці, тим більшу вагу мають використані в ньому ключові слова. З іншого боку, зловживаючи цим правилом, можна відлякати відвідувачів. Яким складно сприймати відразу багато текстового контенту, не «розведеного” графічними елементами.
• Додати посилання на головну сторінку сайту при натисканні на логотип. Це інтуїтивно зрозумілий користувачеві спосіб повернутися до початку. І пошукові системи ретельно стежать за його впровадженням.
• Подбати про мобільний адаптації сайту. І зробити все можливе, щоб користуватися ним було однаково зручно на пристроях з різними діагоналями екранів.
• Реалізувати меню в футері і додати в цю частину сайту кнопку для повернення до початку сторінки.
• Ретельно структурувати текстовий контент. Правильно оформити абзаци (через кожну 1000 символів), заголовки і підзаголовки (H1, H2. H3).
• Додати посилання на інші сторінки. Оформити їх нижнім підкресленням.
• Протестувати сайт і добитися коректного відображення в будь-якому браузері.
• Відобразити контактні дані у верхній частині сторінки і в футері. Телефони, адреси, електронна пошта, час роботи. Номери для месенджерів теж вітаються.
• Додати до зображень опис Alt.

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

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

У міру появи позитивних характеристик (відвідуваності, глибини перегляду, позитивної поведінки на сайті) система оптимізації буде посилювати довіру до сайту, відкриваючи йому шлях в ТОП по низькочастотних запитах. Як тільки позитивних балів набереться достатня кількість, підозра буде знято і просування стане більш ефективним.

Фактори, за які пошукові роботи підвищують рівень довіри до сайту:

• Унікальний дизайн.
• “Вік” сайту: часовий проміжок з моменту реєстрації домена.
• Активність користувачів: чи читають вони тексти, роблять покупки, залишають коментарі, знаходять чи то, що шукали.
• Взаємодія з соціальними мережами.
• Дані з довідників і рекламних кабінетів в пошуковій мережі.
• Вказівка ​​контактних даних та номерів офіційної реєстрації підприємця / підприємства.

Mobile-first і Page layout

На Всесвітньому конгресі мобільних пристроїв в 2010 році Ерік Шмідт, генеральний директор Google, заявив, що дизайнери повинні слідувати правилу «спочатку мобільні» в дизайні продукту.

На основі цього правила був створений індекс Mobile-first, який впливає на ранжування сайтів і сьогодні. У чому суть цього правила і як працює індекс?

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

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

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

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

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

Вимоги Mobile-first:

• Наявність на мобільній версії всіх важливих елементів контенту, які присутні на десктопній (відео, текст, зображення з описом alt).
• Структуровані дані в обох версіях.
• Використання ідентичних метатегів в обох версіях.
• Зв’язок між версіями залишається незмінним. Для цього підходять діючі теги rel = canonical і rel = alternate.
• Для атрибута hreflang потрібно вказати посилання в рамках поточної версії сайту.
• Обраний сервер повинен бути здатним витримати додаткове навантаження краулінга (сканування сторінок)

Ідеальний веб-дизайн: який він?

Ідеальний веб-дизайн – це продукт злагодженої роботи дизайнера та SEO-фахівця на етапі розробки сайту. Компроміс по кожному параметру, в якому виграють обидві сторони.

Чек-лист для перевірки usability сайту

• Гармонійне візуальне оформлення. Приємне для ока і відповідне тематиці поєднання кольорів (максимум 4), красива типографіка.
• Відсутнє нагромадження текстової або графічної інформації, яку складно сприймати.
• Коректне відображення та зручність використання з мобільних пристроїв. Висока швидкість завантаження сторінок (1-2 секунди).
• Єдиний стиль для всіх сторінок. Однаковий хедер, слоган і меню на кожній сторінці.
• Логічний, зрозумілий, клікабельним логотип. При на натисканні на нього відвідувач потрапляє завжди на головну сторінку.
• Типове розташування основних елементів: логотип зліва вгорі, контакти – вгорі праворуч, рядок пошуку в хедері. У футері – наскрізний лінк на site map.
• Характерне підсвічування посилань при наведенні курсору.
• Відповідність логотипу та іконки сайту, які відображаються у вкладці браузера.
• Виділені кнопки заклику до дії. Які в достатній кількості розміщені на сайті.
• Ясний зміст меню. Присутність на сайті “стандартних” сторінок: “Про компанію”, “Каталог продукції”, “Відгуки” і т. д.
• Правильно оформлена сторінка 404: короткий текст, ідентичний дизайн, контакти і пошук по сайту.
• Відсутність таких елементів, як неробочі посилання, недоступні зображення і відео, не клікабельні кнопку, велика кількість спливаючих вікон і медійної реклами, яка перекриває основний контент.
• Захищений HTTPS протокол.