В погоне за вниманием клиентов компании стремятся сделать свой сайт необычным, интересным и цепляющим. Дизайнеры рисуют 3D-графику, используют сложную анимацию и броские цвета. К сожалению, при этом забывают о технической стороне вопроса и удобстве для пользователя. Как итог - сайт похоронен на 2-3 странице поисковой выдачи.
Как же не допустить таких ошибок и сделать сайт не просто красивым, а продающим? Все просто: нужно привлечь SEO-специалиста еще на стадии разработки дизайна, а не после неудачного запуска сайта.
О том какие основные требования SEO-оптимизации необходимо учесть мы и поговорим в статье.
Для начала разберемся, чем занимается SEO-специалист и какая тут связь с дизайном.
SEO – это комплекс мероприятий по внутренней и внешней оптимизации для улучшения позиций сайта в поисковой выдаче. Он включает работу с технической частью: скорость загрузки, «чистота кода», микроразметка, sitemap, Robots.txt и другое. Помимо этого, специалист работает с юзабилити, то есть насколько пользователю легко и удобно взаимодействовать с сайтом: найти нужную информацию, оставить заявку или добавить товар в корзину. Это как раз вотчина дизайнера.
Уже на этапе разработки технического задания для сайта вам понадобятся данные, которые собирает seo-специалист:
Семантическое ядро
Это набор ключевых запросов, по которым пользователь попадает на ваш сайт. В идеале разработка любого сайта начинается со сбора семантики, так как на ее основе разрабатывается структура сайта.
Структура сайта
Это логическое расположение страниц и их связь. Она должна быть проста и понятна пользователю и поисковым роботам, помогать быстро найти то, что нужно.
Здесь следует ответить на вопросы: что ищет пользователь и что еще ему может быть интересно. Так вы поймете, какие страницы необходимо связать, а дизайнер – что, собственно ему нужно отрисовывать.
Имея структуру сайта, дизайнер делает вайрфрейм (прототип) – это черно-белые блоки с основными элементами и навигацией. В нем легко поменять блоки местами или добавить новые, не ломая концепцию.
Навигация
Даже неопытный пользователь должен понимать, как ориентироваться на сайте. На каждой странице расположите меню и ссылки на главные блоки. Не забудьте про «хлебные крошки» (путь до конкретной страницы) и фильтр для каталогов.
Если на сайте много статей или товаров, предусмотрите поиск. Добавьте возможность перехода вперед, назад, а также на первую и последнюю страницы.
SEO-текст
Это полезный контент, который ориентирован не только на пользователей, но и на поисковых роботов. Цель такого текста – привлекать трафик на сайт.
Однако, поисковые алгоритмы намного умнее, чем были лет 5 назад, и длинный текст, забитый ключевыми фразами, не продвинет ваш сайт, а, наоборот, отберет позиции.
Как писать такие тексты – тема для отдельной статьи, а как дизайнер должен учитывать эти тексты, мы обсудим. В первую очередь, при разработке макета необходимо предусмотреть место под seo-текст на главной странице. Он может быть достаточно объемным, а значит надо продумать его размещение, чтобы он гармонично вписался и был адаптивным под разные устройства. Где еще можно встретить seo-тексты? В интернет-магазинах в описании карточек, каталогов, seo-статьи в блогах и т.д. Везде дизайнеру необходимо разработать решение, удобное для пользователя и полезное для поисковика.
Информативная шапка сайта
Именно в шапке сайта пользователь ищет меню, контакты, каталог, корзину и другую важную информацию. Задача seo-специалиста подготовить контент, который будет размещен здесь так, чтобы учесть пожелания пользователя, но при этом не перегружать шапку.
Большое количество текста в шапке создает визуальный шум и мешает найти главное. Кроме того, такая шапка мало адаптивна. Этот пункт часто становится яблоком раздора между дизайнером и seo-специалистом. Один пытается предоставить максимально много информации для поисковых роботов, другой борется за гармоничное отображение: необходимо найти консенсус. Что можно сказать точно, так не забудьте про логотип и контакты.
Информацию из шапки дублируют в подвале, зачастую давая подробное описание пунктов.
Заголовки Н1-Н6
Поисковые роботы считывают заголовки, поэтому важно соблюдать иерархию и продумать текст так, чтобы заголовки содержали ключевые запросы.
Дизайнер выставляет на странице один заголовок Н1. Далее заголовки по иерархии: Н2, после него Н3 и т.д.
Уникальное торговое предложение(УТП)
Это то, чем вы отличаетесь от конкурентов. Эту информацию обычно предоставляет маркетолог, но seo-специалисты во время изучения сайтов-конкурентов часто помогают сформулировать их четче, а задача дизайнера сделать акцент на этом блоке.
Все пункты должны быть читабельными, понятными и заметными.
Конверсионные кнопки
Все же сайт нам нужен для продажи товаров и услуг, а значит у пользователя должна быть возможность заказать ваш товар. Именно seo-специалист определяет, где необходимо расположить кнопку и какую конкретно: купить, заказать звонок, скачать презентацию и т.д.
Задача дизайнера здесь сделать на кнопке акцент: пользователь должен видеть ее сразу и понимать, что ее можно и нужно нажать.
Скорость загрузки
Учтите, что тяжелые картинки и анимация увеличат время загрузки, а это еще один минус для поисковика. Не дайте красивому дизайну перекрыть удобство, пользуйтесь сервисами для сжатия изображений и проводите оптимизацию.
Опыт конкурентов
Выше уже отмечалось, что seo-специалист изучает сайты конкурентов, занимающие лидирующие позиции в поиске. Дизайнер также изучает эти сайты: какие UX-патерны используют, какая структура, блоки и элементы удержания внимания.
Для интернет-магазина рекомендуем использовать похожую навигацию и карточки товаров, т.е. сыграть на пользовательском опыте.
Ошибки и неудачные решения конкурента – это тоже ценная информация, так вы узнаете, как делать точно не надо.
Ссылки на соц сети
Предусмотрите на сайте место под виджеты социальных сетей: ссылки на них также активно считываются поисковиком.
Мы перечислили основные требования, применимые в разработке каждого сайта. В действительности их может быть больше, поэтому прежде чем приступать к разработке дизайна, необходимо провести подготовительную работу.
Ох уж эти анимации, огромные (или многочисленные) картинки и 3D объекты... Сколько геморроя, чтобы они не тормозили скорость загрузки сайта