ГлавнаяБлог Веб-дизайнSEO дизайн сайта или что должен знать дизайнер кроме дизайна
Лого yanakhodkina.com
сео дизайн сайта. Что это

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

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

  • Как быть? Надо ли изучать что-то дополнительно или стоит привлекать специалистов?
  • А может сразу на первой встрече говорить клиентам, что ты в этом не разбираешься и давать контакты сеошника?

Дальше, девушке задавшей эти вопросы, прилетело несколько странных советов по типу: «Нет, ты не обязана в этом разбираться, для этого есть SEO специалисты».

Потом сказали, что это задача маркетологов.

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

Еще была такая фраза: «О том как гнать трафик на сайт ты точно не должна разбираться как дизайнер».  При чем здесь трафик, я не поняла 😳😄

Далее кто-то написал, чтобы она становилась менеджером своих проектов и отдавала такие задачи на аутсорс. И понеслось… Стали писать и про конверсию, и про основы маркетинга, и  как важен маркетинг при разработке крупных сервисов (хотя речь про них вообще не велась) и еще что-то про продуктовые исследования…

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

А по факту, заказчик всего-то хотел получить дизайн с учетом SEO.

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

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

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

Поэтому, я думаю что имею право высказать свою позицию относительно SEO.

Поехали.

Немного о SEO

В статье мне придется дать несколько энциклопедичных определений. Без них никак, извините.

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

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

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

Это не полный список. Привела в пример то, что вспомнилось сразу, без чек листа.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

картинка кликабельна

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

тег заголовка H1 в коде сайта

картинка кликабельна

Они должны быть не просто обернуты в div, а должны иметь теги h1-h6.

К слову, в Tilda есть только h1-h3.

Тексты

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

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

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

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

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

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

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

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

Ну и другие…

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

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

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

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

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

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

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

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

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

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

Пример из личного опыта. Длинный SEO текст о компании на главной странице, не несущий никакой ценности для посетителя, но напичканный ключевиками.

Что имел в виду клиент

Возвращаемся к вопросу. Что такое дизайн с учетом SEO, ведь именно об этом просил клиент…

Если заказчик говорит вам, что ему нужен дизайн с учетом SEO. Это не значит что он ждет от вас релевантные тексты или #недайбог трафик на сайт 😏

Это значит, что сайт планируется  продвигать не с помощью SMM, контекстной рекламы и другого платного трафика, а с помощью контента. И в данном случае важен органический трафик.

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

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

По фактам:

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

Вывод

Что же должен знать дизайнер кроме дизайна. Приведу свою же цитату с главной страницы:

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

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

У меня все.

 

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

UX/UI Веб-дизайнер. Занимаюсь дизайном и разработкой сайтов для бизнеса более 10 лет. Связаться со мной можно через страницу Контакты

Яна Ходкина

Комментариев: 5
  1. Яна спасибо, отличная статья, полезно и понятно! Пойду приводить свой сайт в порядок)))

    • Пожалуйста ) Только не лучшая идея полностью копировать тексты с чужого сайта.
      Во-первых это воспринимается поисковиками как неуникальный контент, а во-вторых, просто некрасиво так делать ;)

Оставить свой комментарий:

Ваш адрес email не будет опубликован. Обязательные поля помечены *

*Отправляя комментарий, вы даёте согласие на обработку персональных данных.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: