Почему дизайн сайта может убить ваш SEO

Представьте, ваш сайт не только генерит органический трафик, но еще и красивый, разве такое возможно?

Возможно, если к разработке сайта подходить с полной ответственностью и пониманием. 

Делится опытом: 

Сергеев Владимир
Основатель студии sergeev.studio по разработке и продвижению сайтов.
За плечами многолетний опыт, более 150 реализованных проектов от производства дверей до установки имплантов.
Опыт взаимодействия с рынками США, Испании, Эстонии, Индонезии, ну и конечно же всей России.

SEO на старте – зачем?

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

А дизайнеры что? Дизайнеры любят делать красиво, их совсем не интересует наполнение. Им дают ТЗ на блоки, возможное наполнение этих блоков, и они пытаются сделать красоту. Но кто занимался наполнением блоков? Почему именно такое наполнение? Почему именно такой объем? Эти вопросы как правило остаются за скобками.

На выходе – действительно красивый дизайн, красивые фразы, но никакого эффекта для SEO.

Установка, много текста – это плохо для дизайна.

Если вы посмотрите дизайн проекты сайтов большинства исполнителей на каком-нибудь behance, вы заметите интересную историю – все они с минимальным количеством текста.

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

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

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

Сохраняем дизайн без SEO убийства

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

Вложенные элементы

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

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

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

3. Аккордеоны – самый простой вариант их реализации — это блок «Частые вопросы», который можно разместить в самом низу страницы, чтобы не мешать основной концепции дизайна. Огромный плюс этой истории, что этот блок можно использовать для микроразметки типа FAQ, что положительно скажется на SEO.

4. Всплывающие окна – например, у вас есть красивый блок с плиткой услуг, понятно, что описание по каждой услуге просто невозможно аккуратно вместить. Используйте кнопки «Подробнее» по клику выводите всплывающее окно с подробным описанием. Текста можно разместить сколько вашей душе угодно, он не будет мешать в дизайне самой страницы. ВАЖНО! Всплывающее окно должно быть добавлено в DOM страницы вместе с ее загрузкой, оно не должно появляться из ниоткуда, иначе это будет бесполезно для SEO, роботы просто не будут видеть весь текст.

5. Tooltip – небольшая подсказка, которая выскакивает при наведение на нужный элемент. Аналог всплывающего окна, но технически более легкий его формат и подходит лишь для небольшого количества информации. Если есть какая-то не сильно важная, но уточняющая информации по услуге/товару – есть смысл воспользоваться этим инструментом, он также прекрасно читается роботами и поможет включить запросы, которые на основной странице могут смотреться «не к месту».

Оптимизация

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

Что необходимо сделать:

1. Оптимизация картинок перед загрузкой их на сам сайт. По умолчанию в дизайн макете они все в максимальном разрешении, адаптируйте это под ваш сайт + прогоните по сервисам, например https://tinypng.com/. Вы удивитесь, увидев сколько кб вы оптимизируете. А чем меньше весит изображение, тем быстрее оно загружается и тем быстрее работает сайт.

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

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

Вывод

Дизайн и SEO – обычно это соперники, первые хотят сделать красиво, вторые хотят соблюсти все необходимые требования. И вот первые стараются, а вторые накидывают все больше и больше требований, а сайт то не резиновый.

Но даже в этом противостоянии можно найти компромиссы:

1. Используйте вложенность элементов. Дизайнеру придется поработать, зато SEO-шник будет спать спокойно.

2. Следите за скоростью загрузки страниц и общим количеством блоков. Чем больше «Красивых» блоков вы добавляете, тем дольше это все будет загружаться, а это важно для SEO и людей.

3. Если SEO-шник никак не успокоится и ему все мало текстов – предложите ему вариант создания дополнительного SEO раздела в самом конце страницы. Включите туда блоки FAQ и обычные текстовые блоки с заголовком. Это не помешает дизайну вашего сайта, так как находится в самом низу, но позволит роботам лучше понимать вашу страницу без потери качества в дизайне. Если ваш внутренний перфекционист все еще не готов воспринимать весь этот объем текста – спрячьте его за кнопку «Читать далее», по клику на которую будет открываться вся скрытая часть.