×
Россия +7 (495) 139-20-33

Какие требования SEO-оптимизации нужно учитывать при разработке веб-дизайна

Россия +7 (495) 139-20-33
Шрифт:
0 5043
Подпишитесь на нас в Telegram

Альберт Зиязитдинов, директор компании «Аналитикум +», соорганизатор стажировок в Академии дизайн-профессий Pentaschool рассказал, как SEO-оптимизация связана с веб-дизайном и какие требования SEO нужно учитывать при разработке сайтов.

В погоне за вниманием клиентов компании часто стремятся сделать свой сайт необычным, интересным и цепляющим. Дизайнеры рисуют 3D-графику, используют сложную анимацию и броские цвета. К сожалению, при этом они нередко забывают о технической стороне вопроса и удобстве для пользователей. Итог – сайт похоронен на 2–3 странице поисковой выдачи.

Как же не допустить таких ошибок и сделать сайт не просто красивым, но и продающим? Все просто: нужно привлечь SEO-специалиста еще на стадии разработки дизайна.

Как SEO связано с дизайном? 

SEO – это комплекс мероприятий по оптимизации для улучшения позиций сайта в поисковой выдаче. Он включает работу с технической частью: скорость загрузки, микроразметку, sitemap, Robots.txt и другое. Помимо этого, SEO-специалист работает с юзабилити. То есть, определяет, насколько пользователю удобно взаимодействовать с сайтом: найти нужную информацию, оставить заявку или добавить товар в корзину.

Создание этих блоков, работа с юзабилити – зона ответственности веб-дизайнера. Поэтому данные, которые собирает SEO-специалист, нужны для разработки технического задания на дизайн. 

Дизайн сайта

Пример реального сайта по продаже текстиля. Очень много визуального шума, ярких картинок, среди которых потерялись УТП компании и важная часть шапки: черная строка не воспринимается глазом

Семантическое ядро

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

Структура сайта

Структура сайта – это логическое расположение страниц и их связь. Она должна быть проста и понятна как пользователям, так и поисковым роботам.

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

Когда собрана структура, дизайнер может приступить к созданию варфрейма (прототипа) – черно-белых блоков с основными элементами и навигацией. В нем легко поменять блоки местами или добавить новые, не ломая концепцию.

Навигация

Даже неопытный пользователь должен понимать, как ориентироваться на сайте. На каждой странице дизайнеру необходимо расположить меню и ссылки на главные блоки. Также следует продумать путь до конкретной страницы (например, как перейти из блога компании в раздел контактов), добавить фильтр для каталогов.

Если на сайте много статей или товаров, предусмотрите поиск. Добавьте возможность перехода вперед, назад, а также на первую и последнюю страницы.

Дизайн сайта

Хороший пример навигации и фильтров в каталоге: пользователь видит, как попал на страницу и может перейти на предыдущую

SEO-текст

Это полезный контент, который ориентирован не только на пользователей, но и на поисковых роботов. Цель такого текста – привлекать трафик на сайт.

При разработке макета необходимо предусмотреть место под SEO-текст на главной странице. Такой контент может быть достаточно объемным. А значит, текст надо разместить так, чтобы он смотрелся гармонично и был адаптивным под разные устройства (смартфоны, планшеты).

SEO-тексты также можно встретить в описаниях карточек товаров, в блогах, каталогах и т.д. Везде дизайнеру необходимо разработать решение, удобное для пользователя и полезное для поисковика.

Дизайн сайта клиники

Дизайн сайта

Небольшой SEO-текст, который аккуратно смотрится на компьютере и смартфоне

Информативная шапка сайта

В шапке сайта пользователь ищет меню, контакты, каталог, корзину и другую важную информацию. Задача SEO-специалиста – подготовить контент, который будет размещен здесь так, чтобы учитывать пожелания пользователя, но при этом не перегружать шапку.

Большое количество текста в шапке создает визуальный шум и мешает найти главное. Кроме того, такая шапка мало адаптивна. Этот пункт часто становится яблоком раздора между дизайнером и SEO-специалистом. Один пытается предоставить максимально много информации для поисковых роботов, другой борется за гармоничное отображение.

При создании шапки необходимо найти золотую середину между SEO-оптимизацией и красивым дизайном. Кроме того, информацию из шапки дублируют в подвале сайта, где часто дают более подробное описание пунктов.

Пример шапки сайта

Подвал сайта

Хороший пример: информативная шапка с большим количеством пунктов меню и контактами. Подвал сайта содержит ссылки на соцсети и приложения, частично дублирует шапку, но содержит больше информации

Заголовки Н1-Н6

Поисковые роботы считывают заголовки. Дизайнер выставляет на странице один заголовок Н1. Далее идут заголовки по иерархии: Н2, после него Н3 и т.д. Важно соблюдать иерархию и продумывать текст так, чтобы заголовки содержали ключевые запросы.

Уникальное торговое предложение (УТП)

УТП – это то, чем вы отличаетесь от конкурентов. Эту информацию обычно предоставляет маркетолог, но SEO-специалисты во время изучения сайтов-конкурентов часто помогают сформулировать УТП четче.

Задача дизайнера – сделать акцент на этом блоке. Все пункты в нем должны быть читабельными, понятными и заметными.

УТП на сайте

УТП на сайте

Объемный текст, который неудобно читать. При просмотре на телефоне сливается в большую ленту, которую пользователь просто пролистает

Конверсионные кнопки

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

Здесь задача дизайнера – сделать акцент на кнопке. Пользователь должен видеть ее сразу и понимать, что ее можно и нужно нажать.

Скорость загрузки

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

Опыт конкурентов

SEO-специалист изучает сайты конкурентов, занимающие лидирующие позиции в поиске. Дизайнер также изучает эти сайты: какие UX-паттерны используются, какая структура страниц, какие на них блоки и элементы удержания внимания.

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

Следует учитывать и неудачные решения конкурентов. Это тоже ценная информация, которая помогает понять, как делать точно не надо.

Ссылки на соцсети

Предусмотрите на сайте место под виджеты социальных сетей – ссылки на них также активно считываются поисковиками.

Мы перечислили основные требования, которые нужно учитывать при разработке каждого сайта. В действительности их может быть больше, поэтому прежде чем приступать к созданию дизайна, необходимо провести подготовительную работу.   

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Накрутка поведенческих факторов: дорого, сложно, но можно. Если очень хочется
Oleg_bobr2012
1
комментарий
0
читателей
Полный профиль
Oleg_bobr2012 - Мда...Может Анне сразу в Яндекс написать кейсы по накрутке ПФ. Я бы такого сотрудника гнал вон.
28 способов повысить конверсию интернет-магазина
Татьяна
1
комментарий
0
читателей
Полный профиль
Татьяна - Очень действенные рекомендации представлены в статье! Всё четко расписано и легко внедряемо в работу интернет-магазинов.Удобство и наглядность+различные бонусы и скидки-именно то, что и цепляет покупателя.
Какие сайты лидировали в поиске Яндекса и Google в 2023 году
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если что по рейтингу вы не правы, есть ядро по которому производиться оценка и вы можете по нему самостоятельно все посмотреть. Единственный объективный рейтинг по SEO. Других не знаю Ну я вам скажу что это не так и в предыдущие года сайт моего клиента попадал в рейтинг, при чем несколько раз. И я прекрасно знал еще до объявления результатов кто лидер - рейтинг прозрачный, есть фразы по которым набираются баллы. В этом году наш сайт не попал в рейтинг например и это было понятно, что не попадет (по статистике позиций)
Создали ресурс для металлургов, который позволяет следить за аналитикой рынка и осуществлять продажи
Наталья Сталь
3
комментария
0
читателей
Полный профиль
Наталья Сталь -
5 способов увидеть сайт глазами поисковика: анализируем скрытый контент и cloaking
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Сейчас клоаку прячут, так что под нее можно глянуть только с гуггловских ip. Сейчас только гуггл сервисами можно глянуть
7 актуальных сервисов для анализа сайта: сравнительная характеристика
Jenimeon
1
комментарий
0
читателей
Полный профиль
Jenimeon - SimilarWeb один из моих фаворитов, частенько им пользуюсь. Ценник не малый, но функционал хороший. Be1 тоже годный.
Насколько вечные – вечные ссылки?
daniilastaaahov
1
комментарий
0
читателей
Полный профиль
daniilastaaahov - Я где-то пару месяцев назад заказывал размещение вечных ссылок, до сих пор рабочие, не удалены. Буду надеется что и дальше с ними ничего не произойдёт.
Optimization 2023: текстовый анализ в 2024 году и методы увеличения релевантности страниц
Игорь
1
комментарий
0
читателей
Полный профиль
Игорь - это информация максимум уровня middle seo. что такой проходняк делает в секции hard seo когда-то великой ашмановки, еще и в исполнении токсичного инфоцыгана большая загадка)) ходил последние 5 лет на нее, но больше пожалуй не стоит
5 ошибок отдела продаж, из-за которых вы теряете клиентов
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Крутая статья! Можно еще указать: Работу без CRM-системы - я считаю, что это основа отдела продаж. Потому что не все компании решаются на внедрение отдельно системы для отдела продаж. Но зато можно что то многофункциональное внедрить аспро.клауд или что то подобное
Простые SEO-работы, которые могут увеличить прибыль компании. Часть 1
roma.lisov
1
комментарий
0
читателей
Полный профиль
roma.lisov - Воспользовался советом по проверке и настройке картинок на сайте – реально дельный совет. Вот вроде и просто, казалось бы, а мне в голову раньше не пришло. А такие нюансы, конечно, нужно знать)
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
386
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!