Как веб-дизайн влияет на продвижение сайта

Влияние дизайна на позиции сайта в поисковой выдаче

Яндекс и Google учитывают качество дизайна при ранжировании в поисковой выдаче. «Чистая» валидная верстка, понятная навигация, привлекательность, удобство важны как для пользователей, так и для поисковых роботов.

Ошибки, баги в дизайне и юзабилити влияют на отношение поисковых систем к проекту. Например, поисковики понижают в выдаче страницы с изображениями низкого качества, «слипшимся» текстом, неработающими интерактивными элементами. Закажите юзабилити-тестирование в сервисе AskUsers.

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

Наконец, самое главное. Привлекательная картинка, приятные цвета, дружелюбная навигация повышают лояльность клиентов, увеличивают CTR, конверсию, а значит, доходы компании.

Типичные ошибки

Распространенные проблемы, которые негативно влияют на SEO:

• Ошибки в верстке. Контент не помещается в экран. Гиперссылки работают некорректно. Текст «слипается». Подобные баги могут стать фатальными для проекта.
• Проблемы с адаптивностью на мобильных устройствах. Контент должен корректно отображаться на экранах любого размера. Шрифт должен быть читабельным, а интерактивные элементы — не слишком мелкими.
• Проблема кроссбраузерности. Страница некорректно отображается в одном или в нескольких браузерах: Google Chrome, Mozilla Firefox, Opera и так далее.
• Слишком мелкий или бледный шрифт.
• Изображения, анимация и видео низкого качества.
• Высокая плотность контента, отсутствие «воздуха».
• Неудобные навигационные элементы: форма поиска, фильтратор, меню. Они должны быть понятными и находиться в привычных местах.
• Навязчивая реклама: блоков слишком много, они закрывают контент, мешают просмотру.
• Неуместная яркость. Кричащие цвета и изображения раздражают, мешают фокусироваться на контенте.

Как проектировать структуру сайта

Структура сайта — основа, каркас, на котором строится проект. С ее создания начинается разработка сайта, это базовый этап продвижения в поисковой выдаче.

Внутренняя структура — это система расположения разделов, категорий, страниц сайта. Она отображает иерархию и связи между документами. Правильная архитектура помогает поисковым роботам и пользователям ориентироваться на интернет-площадке, легко находить нужные документы, переходя по ссылкам.

Структуру сайта для SEO выстраивают, опираясь не только на логику, но и на семантическое ядро — запросы пользователей.

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

Но если проанализировать семантическое ядро, то можно выделить большие группы запросов и создать категории на основе покупательского спроса, которые принесут SEO-трафик: «недорогие букеты», «большие букеты», «шикарные букеты», «нежные букеты».

Инструменты

Чтобы структурировать сайт, сначала создают прототип — визуальную схему. Для этого удобно использовать онлайн-инструменты:

• Odo Условно бесплатный генератор визуализирует карту уже существующего проекта. Структура сайта генерируется на основе sitemap.xml или из URL-адреса. На стадии разработки сервис поможет «подсмотреть», как выстроили свой проект конкуренты, и позаимствовать что-то для себя.
• Простой сервис, который позволяет создавать майндкарту с нуля. Легко добавлять и удалять блоки, выстраивать иерархию, связи.
• Позволяет выгружать структуру готового проекта, создавать схему с нуля или дополнять уже имеющийся прототип. Есть удобные шаблоны для новостных, коммерческих и корпоративных площадок. Сервис позволяет визуализировать будущие страницы.
• Условно бесплатный сервис. Простой функционал для формирования карты. Дополнительная полезная опция — возможность распределять контент по страницам.

URL

«Правильная» структура URL-адресов — простой способ понравиться поисковым системам и пользователям. ЧПУ (человекопонятные URL-ы) — лаконичные и легко читаемые, они максимально соответствуют тематике страницы, сообщают людям и поисковым роботам, о чем документ.

SEO-специалисты советуют включать в URL ключевые слова. Для поисковиков это дополнительный сигнал о релевантности страницы запросу.

Адрес может включать дату публикации, категорию, подкатегории, название поста или числовой код. Цифры не рекомендуется использовать из-за их неинформативности. Даты целесообразны в новостных СМИ или в новостных разделах.

Если документ имеет глубокий уровень вложенности (категория/подкатегория/подкатегория/ подкатегория/страница), не стоит отображать все уровни в адресе. Он будет слишком громоздким. Обычно достаточно стандартной структуры URL: категория/подкатегория/название поста.

Слова в URL принято разделять дефисами (а не нижним подчеркиванием).

Проводить оптимизацию URL-адресов на работающем проекте — непростая задача. Если массово поменять адреса и не настроить редиректы, документы могут выпасть из индекса.

Универсальные разделы

Почти все коммерческие проекты включают стандартные страницы и категории:

• Главная страница. Это «лицо» сайта и навигационный центр. Создает первое впечатление о компании и задает маршрут.
• О компании («О нас»). Для Google наличие бизнес-информации — важный E-A-T-фактор. Такой раздел повышает доверие и пользователей, и поисковых систем.
• Товары/ Услуги.
• Ответы на часто задаваемые вопросы (FAQ).
• Блог/Статьи. Качественный глубокий контент — показатель экспертности. Работает на репутацию компании. Привлекает трафик из поиска по информационным запросам.
• Контакты.
• Онлайн-форма заказа или обращения.
• Правовая информация (например, «Персональные данные и конфиденциальность»). Такая страница показывает, что сайт соблюдает юридические нормы. Один из важных факторов ранжирования в Google.

На коммерческих сайтах могут быть категории «Отзывы», «Сервисы», «Калькулятор», «Вакансии», «Схема проезда».

Навигация

Меню, фильтратор, форма поиска, метки, кликабельные кнопки, анкоры — все это элементы навигации, система ссылок, которая важна для SEO и для пользователей.

Схему внутренних ссылок нужно строить так же тщательно, как и структуру всего сайта. Поисковые роботы, изучая проект, переходят по ссылкам, как по лестницам. Если документ существует изолированно, бот может «не заметить» его, и страница не будет проиндексирована.

Интуитивно понятный интерфейс помогает посетителям быстро сориентироваться, найти нужный продукт или услугу. Улучшаются поведенческие факторы, растет конверсия.

Слишком креативный дизайн: непривычные иконки, кнопки необычной формы и размера, меню в нестандартных местах — могут затруднить навигацию, ухудшить ПФ. Не заставляйте людей ломать голову над интерфейсом.

Шаблон страницы

При разработке шаблона отдельной страницы важно придерживаться основных принципов веб-дизайна:

• Структура и оформление страницы должны соответствовать ее цели. Например, продающий лендинг выглядит более ярко и агрессивно, чем информационная статья.
• Анализ сайтов конкурентов поможет выявить общие закономерности в дизайне. Используйте чужой опыт и фишки (без прямого копирования). Покажите своему веб-дизайнеру удачные детали, пусть он их переосмыслит.
• Если у компании есть брендбук, логично, что цветовую гамму и отдельные визуальные элементы стоит взять оттуда.
• Все элементы должны соответствовать единому стилю и цветовой схеме.
• Современный веб-дизайн тяготеет к минимализму и визуальному комфорту. Мягкие цвета, удобный крупный шрифт, понятный интерфейс. Радикальные цвета и экстремально яркие изображения уместны лишь в немногих тематиках.

Итак, дизайн и структура интернет-проекта критически важны для продвижения. Внешний вид, функциональность и удобство влияют на позиции в поиске.

Читайте на Askusers

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

Оптимизация главной страницы: особенности семантики, юзабилити, внутренние и внешние факторы, распространенные ошибки.