Базовые принципы SEO для UX/UI дизайнера
Многие начинающие UX/UI дизайнеры не уделяют должного внимания SEO оптимизации на этапе проектирования. Как начинающий дизайнер, я столкнулась с этой же проблемой.
Летом 2024 года мне срочно понадобилось разработать сайт для гостиницы на WordPress. Это был первый опыт, когда мне пришлось самостоятельно учитывать не только дизайн, но и SEO, верстку, скорость загрузки и удобство использования. Оказалось, что недостаточно просто сделать сайт красивым — он должен быть удобным, быстрым и понятным для поисковиков.
В этой статье расскажу, как учесть SEO на этапе проектирования, чтобы сайт был не только визуально привлекательным, но и эффективным.
Почему важно учитывать SEO на этапе дизайна?
Прежде всего, нам надо рассмотреть основные понятия SEO.
SEO — это комплекс мер по улучшению видимости сайта для повышения органических результатов поисковых запросов. Данная практика нацелена на повышение трафика и узнаваемости бренда. Другими словами, это «яркая вывеска» на вашем магазине, которая привлекает внимание пользователей и побуждает их перейти на сайт. За это отвечает SEO-специалист.
SEO-специалист — это специалист, который работает в сфере поискового маркетинга, то есть проводит оптимизацию сайта под поисковые системы. Он проводит комплекс работ на сайте в соответствии с ранее проработанной стратегией продвижения. Его обязанности, в общих чертах:
- Проводит технический аудит сайта, выявляет проблемные точки и направляет их в виде технического задания разработчикам.
- Работает с ссылочной массой.
- Делает анализ юзабилити сайта.
По статистике, 75% пользователей не переходят на вторую страницу поиска, а значит, если сайт не оптимизирован, его просто никто не найдет. Чтобы этого избежать, стоит сразу учитывать базовые принципы SEO при создании макета.
Когда сайт делают несколько специалистов, каждый отвечает за свою часть работы: дизайнер за макет, верстальщик за адаптивность, SEO-специалист за оптимизацию. Но если вы работаете в одиночку, все эти задачи ложатся на вас.
В этом кейсе так и получилось, пришлось в срочном порядке идти гуглить, чтобы выполнить работу качественно. Далее я опишу те советы, которые узнала, и которые мне помогли.
6 советов для начинающих UX/UI дизайнеров по SEO
1. Структурируйте заголовки и текст
Что важно:
- Заголовки H1- H6 должны быть правильно распределены: H1 — главный заголовок страницы, H2 — подзаголовки, H3 — дополнительные заголовки. Пропуск уровней заголовков может ухудшить восприятие контента как пользователями, так и поисковыми системами.
- Тексты лучше разбивать на короткие абзацы, списки и подзаголовки. Это не только улучшает читаемость, но и помогает сайту лучше индексироваться.
- Проверяйте орфографию, так как орфографические ошибки могут снизить конверсию сайта до 20%.
Как это учитывать:
В макете сразу указывайте, где какой заголовок используется, чтобы не запутаться при переносе контента в конструктор сайтов. В Figma или Pixso используйте стили, так будет проще не запутаться и сохранить единство.
2. Оптимизируйте изображения
Что важно:
- Добавляйте Alt-теги — подписи к изображениям, которые помогают поисковым системам понять, что на них изображено. Теги особенно важны для SEO.
- Размер картинок влияет на скорость загрузки. Чем легче файл, тем быстрее подгружается сайт. Загрузка сайта влияет на пользовательское поведение, если долго грузится — до свидания.
Как это учитывать:
Используйте Google PageSpeed Insights, чтобы посмотреть скорость прогрузки и сразу получить рекомендации по ускорению. При загрузке изображений на сайт выбирайте форматы WebP или AVIF, а также указывайте alt-текст в редакторе сайта.
3. Сделайте UX удобным
Что важно:
- Пользователь должен быстро находить нужную информацию. Запутанная структура вынуждает людей уходить с сайта.
- Используйте ключевые слова в пунктах меню.
Как это учитывать:
Перед созданием макета полезно набросать структуру сайта — какие разделы будут, как они связаны между собой. Мы не всегда можем сразу угадать на сколько та или иная страница будет удобной, поэтому до публикации будет хорошо провести коридорные исследования и понять, удобно получилось или нет.
После выкатки нулевой версии необходимо сразу подключить метрику и через вебвизор Яндекса оценить удобство навигации. Если вы выкатили обновление — можно отслеживать по заявкам: стало их больше или меньше, дольше ли пользователи сидят над выполнением целевого действия и т.д.
4. Не забудьте про адаптивный дизайн
Что важно:
- Google, как и Яндекс (на момент написания статьи), учитывает mobile-first indexing, поэтому сайт в первую очередь должен быть удобным на мобильных устройствах. Поисковики топят сайты, где мобилка плохо работает, даже если в десктопе все хорошо.
- Текст должен легко читаться, кнопки — удобно кликаться, а элементы — не «скакать» при загрузке.
- Не во всех конструкторах есть разрешение под планшетную версию, но если у вас есть такая возможность — делайте, вопрос конечно спорный и заслуживает отдельной статьи, но из текущего личного опыта — это не лишнее, если есть капасити у дизайнера, но если нет времени и возможности — не страшно. А так, смотрите метрику и делайте выводы, исходя из процентного соотношения: пользователь — устройство.
Как это учитывать:
При создании макета в Figma или Pixso сразу проектируйте мобильную версию.
5. Упрощайте путь пользователя (User Flow)
Что важно:
- Если пользователю сложно выполнить целевое действие (например, оставить заявку), он просто закроет сайт. Старайтесь сделать так, чтобы пользователь мог быстро дойти до целевого действия, проверяйте на коридорках и метриках.
- На страницах без контента (например, в пустой корзине) стоит добавлять подсказки и призывы к действию. Если вам кажется, что это не относится к СЕО - вам кажется, потому что на пустых состояниях человек тупит и ему необходимо подсказать, что делать дальше. Искренне советую статью от озона по нулевым состояниям.
- Подсказка. Чем меньше шагов до нужной информации, тем выше вероятность, что пользователь совершит целевое действие.
Как это учитывать:
Делайте прототип сайта и тестируйте, удобно ли пользователям находить нужные разделы.
6. Добавляйте «доверительные элементы»
Что важно:
- Чем больше у пользователя доверия к сайту, тем выше конверсия. Это хорошо. Доверительные элементы учитываются поисковыми ботами, помогают в ранжировании в поисковой выдаче.
- Контакты, отзывы, сертификаты и другие социальные доказательства помогают показать, что сайт — не пустышка, а ваш заказчик не мошенник (не всегда, но да).
- Контактные данные можно разместить в футере, а не на отдельной странице.
Как это учитывать:
В макете сразу предусмотрите место под отзывы, контакты, логотипы партнеров и сертификаты, а также юридическую информацию.
Инструменты, которые помогут дизайнеру без команды
- Figma / Pixso — для адаптивных макетов.
- Google PageSpeed Insights — для проверки скорости загрузки.
- ChatGPT — для генерации alt-текстов, заголовков и описаний.
- Ahrefs или Ubersuggest — для подбора ключевых слов.
- Яндекс Метрика (вебвизор там же) — для анализа поведения пользователей.
Чек-лист перед запуском сайта
- Заголовки H1- H6 расположены последовательно.
- Тексты читаемы, структурированы, содержат ключевые слова и не имеют ошибок.
- Alt-теги прописаны для всех изображений.
- Навигация логична, в меню есть ключевые слова.
- Макет адаптирован под мобильные устройства, планшет на ваше усмотрение.
- Продуман удобный User Flow.
- Добавлены доверительные элементы (отзывы, контакты, юридическая информация).
- Заключение
Заключение
Если вы создаете сайты в одиночку, вам приходится совмещать роли дизайнера, верстальщика и SEO-специалиста. Это непросто, но если учитывать SEO на этапе проектирования, сайт сразу получится не только красивым, но и эффективным.
Сайты, которые быстро загружаются, понятны пользователям и адаптированы под мобильные устройства, занимают более высокие позиции в поиске. А значит, клиенты будут довольны, а ваш проект будет успешным.
В любом случае, пробуйте и изучайте. Успехов!