SEO дизайн сайта или что должен знать дизайнер кроме дизайна

SEO (англ. search engine optimization) – комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определённым запросам пользователей, с целью увеличения сетевого трафика.

Что может относиться ко внутренней оптимизации и что влияет на продвижение сайта:

Семантическое ядро
ЧПУ
Скорость загрузки
Оптимизация кода и графики
Атрибуты типа Alt и Title
SSL
Перелинковка
Микроразметка
robots.txt и XML
Отсутствие дублей страниц и т.д.

Чем занимаются сеошники

Проводят технический аудит сайта, выявляют ошибки, составляют тех.задание для разработчиков и контролируют исполнение. Есть специалисты, которые сами устраняют недочеты (обычно это веб-мастера и сеошники в одном лице).
Работают со ссылочной массой. Это отзывы, форумы, пресс-релизы и так далее..
Делают анализ юзабилити. Сюда относится умение анализировать топ выдачи сайтов конкурентов. Затем с учетом анализа составляется план для развития клиентского сайта.

Вот как раз третий пункт – про юзабилити и пересекается у дизайнера и сеошника.

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

Сайт медленно грузится – лови предупреждение. На мобилке шрифты слишком мелкие – лови предупреждение. Высокий показатель отказов? Значит есть проблемы со структурой, навигацией или контентом – понижаем ваш сайт в выдаче. Ну и далее по списку…

Должен ли дизайнер разбираться в SEO

Безусловно, дизайнер имеющий представление обо всем перечисленном выше, зарабатывает дополнительные очки в глазах клиента, так как может дать совет и проконсультировать по основным моментам. Но знать и разбираться в этом он не должен. Продвижение сайта – это совсем другая услуга. И такие работы ведутся, когда сайт уже залит на хостинг, а уж точно не на этапе дизайна.

С другой стороны, сейчас появилось много Tilda дизайнеров. И если вы из тех, кто делает сайты под ключ (пусть и в конструкторе), то обязаны знать seo хотя бы на базовом уровне.

Пример того, что доступно для оптмизиции в настройках Tilda Publishing:

H1-H3
Alt
Title
Description
Keywords
Open Graph
Sitemap
Robots.txt

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

У большинства сайтов отсутствуют H1. У других он есть, но идет после H2 и так далее… Похоже, что дизайнеры о базовой оптимизации вообще не слышали.

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

Как заголовки делать не надо:

Как должны выглядеть заголовки в коде сайта:

Тексты

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

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

Будет плюсом умение редактировать присланные тексты. Я например часто это делаю. Могу что-то перефразировать, что-то сократить, что-то дописать, поменять местами. Но речь не идет о написании текста с нуля длинной 1000+ знаков.

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

Что такое seo-тексты и seo-копирайтинг

SEO-текст — это текстовый материал, который оформлен по правилам поискового маркетинга: вписаны ключи, соблюдена структура и соблюдены критерии качества контента.

Текстами занимаются копирайтеры. Вы удивитесь, но не каждый копирайтер пишет seo-тексты. Есть отдельная каста сео-копирайтеров. Они знают и разбираются в таких понятиях как:

Ключевые запросы
Прямое/непрямое вхождение
Уникальность
Водность
Частотность
Необходимые объемы
Сниппет
Баден-Баден
LSI- запросы

Ну и другие…

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

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

Семантическое ядро чаще составляется для крупных сайтов. Новостники, тематические блоги, интернет-магазины, информационные порталы. Семантика может собираться как ДО создания сайта, так и ПОСЛЕ. Это зависит от владельца и серьезности проекта.

Если дизайнеру предоставили такие данные, то он обязан учитывать частотности при проектировании навигации в дизайне сайта. Разделы, категории, уровни вложенности страниц…

Основная мысль – разделы ВЧ в иерархии сайта должны находится выше СЧ и так далее. Повторюсь, это применимо в основном для интернет магазинов, тематических порталов/блогов и новостников. Ну или для корпоративных сайтов с глубокой разветвленной структурой.

Должен ли дизайнер писать SEO-тексты

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

Если вам уже дали SEO текст и он выглядит отвратительно (написан для роботов, а не для людей) то у вас, как у грамотного дизайнера будет два пути:

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

SEO дизайн или как дизайнер может повлиять на дальнейшее продвижение сайта

Если планируется много статей, предусмотрите в дизайне поиск по сайту. Сделайте его удобным и разместите на видном месте.
Уточните как много рубрик планируется в блоге и исходя из этого проектируейте их вид и расположение.
Обязательно добавьте хлебные крошки. Это дополнительная навигация и перелинковка.
Отрисуйте удобную пагинацию с возможностью перехода не только назад/вперед постранично, но и сразу на первую или на последнюю страницу. А сайтам на которых планируется огромное количество контента, подойдет вариант с возможностью выбора конкретной страницы для перехода.
Предусмотрите на сайте места для виджетов соц. сетей, если конечно компания активно ведет группы.
Не забудьте про кнопки шаринга. Это тоже влияет на далнейшее продвижение.
Не усложняйте структуру сайта, если это возможно. Больше трех уровней вложенности уже существенно усложняет взаимодейстивие. Логика структуры влияет на поведенческие факторы, а от них зависят позиции сайта в поисковой выдаче.
В макете необходимо придерживаться правильной иерархии заголовков. Пишите подробные гайды для разработчиков, если макет сложный по типографике и сетке.
Правильные адаптивы. Размер шрифтов должнен быть комфортен для чтения с мобильных устройств. Поисковые роботы умеют это анализировать.
Блоки и поп-апы перекрывающие контент это плохо. Если поп-ап, то аккуратный и с заметной кнопкой «закрыть».
Предусмотрите в дизайне (особенно это касается главной страницы) возможность клиенту разместить достаточное количество текста. Он необходим для поисковых роботов. Только без крайностей, пожалуйста. Выше был пример.
Не перегружайте сайты тяжелой графикой и анимациями. Это увеличит время загрузки и усложнит оптимизацию.