Даже полностью соответствующий всем передовым тенденциям в области дизайна сайт без вовремя включившего голову оптимизатора — не претендент на органический трафик. Равно как и самый идеальный с точки зрения требований поисковых систем, но отталкивающий внешне, проект со временем перестанет выполнять свою функцию.
Далее поговорим о связи дизайна с продвижением, оптимизации как части процесса разработки и факторах ранжирования сайтов поисковыми системами. Ну, и разберем некоторые распространенные ошибки.
Зачем сайту правильный дизайн
Прежде всего, хороший дизайн — это не качественно проработанные тени и симпатичные цвета. Такой дизайн в первую очередь полезен — пользователь оперативно находит нужную ему информацию. Ему не приходится для этого напрягаться, как на контрольной по матанализу.
В 2018 году эксперты из McKinsey отчитались о проведенной оценке экономического эффекта от дизайна, изучив перед этим подходы в трех сотнях компаний по всему миру. Сказать, что есть прямая зависимость роста продаж только от качественного оформления, конечно, было бы неверно. Но у лидеров по части дизайна, действительно, и финансовые результаты получше.
Еще один вывод: правильный дизайн работает вне зависимости от специфики, сферы и типа обслуживания (в ходе исследования рассматривались компании из самых разных областей, например, медицины, банковских услуг, торговли и т. д.).
Зависимость темпов роста компании от уровня MDI (индекса оценки качества дизайна McKinsey)
Так или иначе, цель редизайна — повышение конверсии проекта и, как следствие, рост прибыли. Но само по себе создание красивого сайта — не гарант достижения этой цели, направление не может работать в одиночку.
Дизайн — это проектирование, которое обладает огромным количеством источников, позволяющих получать обратную связь от потребителя и определять точки роста.
Роль оптимизатора в разработке
Фактически, веб-дизайн — составляющая часть маркетинга, как и SEO. При этом эффект от разработки сайта с качественным дизайном и ориентацией на SEO-продвижение очевидно будет сильнее, когда оба этих инструмента применяются комплексно, дополняя друг друга.
Между поисковым продвижением и визуальной составляющей проекта есть тесная связь, поскольку сейчас многое определяют поведенческие факторы сайта. А веб-дизайн, в свою очередь, ориентирован на то, чтобы сделать площадку удобной для пользователя.
Однако продвижение сайта в поисковых системах начинается не с анализа того, как пользователь ведет себя на нём, а с определения соответствия проекта требованиям поисковых систем. Ведь сначала пользователя нужно привести на этот сайт. Значит следует сделать последний привлекательным и для поисковиков.
С чего начинается родина
Существуют как универсальные правила SEO, так и специфические, применимые лишь для сайтов определенной тематики. Чтобы сформулировать стратегию продвижения проекта в поисковых системах, нужно определить сегменты поиска, к которым он относится:
- Тип контента. Новостные сайты, блоги и другие информационные проекты не будут успешны, если там мало, собственно, информационного контента. А вот для интернет-магазина долю такого содержимого можно сводить к минимуму, приоритет отдается представлению товаров на страницах.
- Особенности тематики. Фактически, тематика отражает все тот же тип контента, но более тонко. Например, оформление страниц каталога у дилера автомобилей BMW будет отличаться от книжного интернет-магазина.
- Региональная принадлежность. Можно выявить ряд закономерностей в зависимости от того, насколько широка география деятельности компании, или проанализировав другие проекты конкретного интересующего региона.
Предмет анализа — именно лидеры поисковой выдачи по запросам из семантического ядра нашего проекта. Для SEO в какой-то степени тоже применимо правило бенчмаркинга, когда «лучшие» в своем сегменте проекты задают правила «успешности».
Определив проекты с самой большой видимостью в поиске, можно начать анализировать, что позволяет им эффективно получать трафик поисковых систем. Обращать внимание нужно на все: чем больше разных закономерностей будет выявлено, тем выше шансы проекта соответствовать требованиям поисковиков и быть полезным для пользователя.
Повлиять на успех может как содержимое отдельной страницы, так и структура, удобство навигации по сайту в целом. Анализируются такие показатели, как количество элементов на странице, объем информации (например, оптимальное количество символов в описании товара), расположение элементов на странице сайта, способ технической реализации.
Поисковая выдача в тематике интернет-магазинов автомобильных запчастей. Для объективной оценки лидеров поисковой выдачи следует проводить анализ по наибольшему числу поисковых запросов
Что проверить в первую очередь
Универсального рецепта по продвижению сайта в различных кластерах поиска пока, увы, нет. В зависимости от исходных данных проекта чаще всего применяется индивидуальный подход, формируется собственная стратегия SEO-продвижения.
Однако есть база вполне конкретных элементов и технических показателей сайта, на которые следует обращать внимание при его проектировании. Т. е., реализуя определенные вещи, дизайнер может сделать кое-что полезное для ранжирования сайта поисковыми системами.
Как вся информация о компании, услугах / товарах распределена по страницам сайта? Удобно ли ориентироваться в разделах, определять, где именно прячется то, за чем пользователь пришел на сайт?
При разработке структуры сайта нужно также определить уровень вложенности страниц в соответствии с их значимостью относительно друг друга.
Отдельно стоит обратить внимание и на то, как технически реализовано формирование вложенности. В идеале url-адреса страниц должны полностью соответствовать иерархии навигационной цепочки. Т. е. когда у всех внутренних страниц сайта одинаковый уровень вложенности — не лучший вариант.
Базовый элемент навигации — меню, оно визуально отражает структуру сайта и помогает пользователю быстро перемещаться между разделами. Поэтому оно должно быть доступно со всех страниц и содержать ссылки на все основные разделы.
Помимо меню к навигации можно отнести и такие элементы, как «хлебные крошки», фильтры и сортировки товаров, блоки ссылок на похожие материалы или товары и т. д. Все, что помогает пользователю быстро получить необходимую информацию.
Все основные ссылки должны быть читаемыми для человека и подлежащими индексации поисковыми системами.
Пример удобной навигации, которая включает в себя ссылки на все основные разделы каталога. Строительный гипермаркет Isolux.ru
Контент — основа поискового продвижения. Определение оптимального количества и вариантов контента на посадочных страницах — это непросто. Чтобы привести страницы сайта в полную боевую готовность, требуется анализ, о котором говорилось выше. Так что обозначим только самые необходимые элементы, на которые стоит обращать внимание:
- Информация о товарах и услугах. Все, что касается вашей деятельности: стоимость, технические характеристики, примеры работ и т. п.
- Медиа. Это наглядное представление вашей деятельности. В первую очередь, изображения, но все большую актуальность приобретает информация, представленная в формате видео.
- Тексты. Да, они нужны не всегда, но очень часто это объективно необходимый элемент. Грамотное представление может заинтересовать в услуге. Сюда же относятся и заголовки H1-H6.
Классическое для интернет-магазина представление продукции в формате листингов — компактное распределение товаров по странице со всей необходимой информацией, под товарами размещено описание и блоки с перелинковкой. 220-volt.ru
Начнем с того, что заголовки на страницах должны быть. При этом есть ряд правил:
- На одну страницу — один главный заголовок H1. С главной фразой или словом, описывающим суть.
- Нужно соблюдать иерархию заголовков. К примеру, H1 никогда не должен располагаться ниже заголовка H2.
- Заголовки применимы к контенту. Сквозные элементы сайта должны быть оформлены за счет CSS стилей, а никак не при помощи H-заголовков.
Вообще, с точки зрения верстки страницы эти же правила предусмотрены и в законах типографики, но опыт показывает, что почему-то соблюдать все это на стадии технической реализации получается не всегда.
Речь идет о композиционной расстановке главных элементов каждой страницы. В зависимости от задач, необходимо определить приоритет каждого элемента и расставить акценты.
К примеру, первое, что должно бросаться в глаза пользователю интернет-магазина — это листинг товаров с фото, ценами и кратким перечислением основных характеристик. А человек, попавший на страницу информационного ресурса, должен сразу понимать, найдет ли он ответ на свой вопрос среди кучи предлагаемой информации.
Вероятно, в будущем, с появлением данных об эффективности страницы её архитектура будет правиться для улучшения результата. Но базовые элементы должны быть определены заранее и иметь больший «вес» среди прочего контента.
Этот технический показатель имеет все большее значение для поисковых систем и влияет на позиции сайта напрямую. Его уже сейчас вполне можно назвать самостоятельным фактором ранжирования.
Оценка скорости сайта Vc.ru при помощи сервиса PageSpeed Insights (Google)
Главный принцип: нужно реализовать визуальную составляющую и функциональные элементы сайта так, чтобы они оказывали на него как можно меньше нагрузки. Для пользователя важно первое впечатление о площадке, а долгая загрузка может его существенно подпортить.
Оптимальное время загрузки страницы — не более двух секунд.
После того, как Google в 2018 году ввел mobile-first индексацию, которая отдает предпочтение мобильной версии сайта, вопрос целесообразности адаптивной версии сайта отпал сам по себе. Нужно отметить, что эта инновация не возникла на ровном месте и не навязывается поисковиками от нечего делать. Еще два года назад 50 % аудитории некоторых стран пользовались интернетом при помощи мобильных телефонов.
Таким образом, сайт должен одинаково хорошо решать задачи пользователей десктопа и мобильных, т. е., все описанные выше пункты реализуются с ориентиром на пользователей разных устройств.
Пример адаптивной версии сайта для экрана с небольшим разрешением. Интернет-магазин «М.Видео»
Важный момент: нет необходимости в разработке отдельной версии сайта для смартфонов. Технологии веб-разработки уже давно позволяют реализацию сайтов с адаптивным дизайном, который автоматически настраивается под любые разрешения экранов и типы устройств.
Когда подключать seo-специалиста
Уже на начальной стадии разработки сайта специалист по поисковой оптимизации может внести свою лепту: провести анализ и подготовить базовые рекомендации.
Место SEO-оптимизатору найдется на каждом этапе работы над веб-проектом:
- Исследование. Анализ текущей ситуации, целей и задач проекта, лидеров выдачи поисковых систем в интересующих сегментах. Подготовка требований к проекту. Подбор семантического ядра поисковых запросов, соответствующих деятельности компании.
- Идея и структура. Формирование структурной схемы проекта и обязательных требований касательно размещения информации на сайте и навигации.
- Прототип. Участие в подготовке «набросков» проекта с внесением необходимых правок по части оптимизации под поисковые системы.
- Контент. Подготовка контента для размещения на основных и посадочных страницах сайта.
- Дизайн. Проверка соответствия готового макета визуальной части сайта требованиям из предыдущих этапов разработки.
- Реализация. Предварительная проверка итогов разработки и формулировка техзадания к запуску проекта. В частности — технический аудит и устранение недостатков и ошибок.
- Запуск. Итоговая проверка сайта и выполнение задач, которые позволят сделать процесс обновления безболезненным: настройка 301-редиректов со старых версий страниц на новые, формирование карты сайта, файла robots и т. д.
Сценарий разработки дизайна. Tilda Publishing
Такой подход призван минимизировать издержки. Ведь гораздо проще вносить корректировки в проект порционно на каждой стадии. Проигнорировав SEO до этапа релиза, можно затянуть процесс разработки, поскольку потребуется дополнительное время на правки оптимизатора. Соответственно, шансы на успешное поисковое продвижение, на скорое достижение результатов снижаются. Тем более, что порой на устранение выявленных недостатков оказывается недостаточно ресурсов.
Ошибки, мешающие привлечению трафика
Поговорим о технических моментах, тесно связанных с визуальной составляющей проекта — его дизайном.
Основная проблема дублирования связана с ошибочным определением релевантности посадочной страницы ключевым фразам. Процесс труднопредсказуем, и не факт, что приоритет получит правильная страница. Еще меньше шансов, что при наличии нескольких одинаковых страниц хотя бы одна попадет в топ поисковой выдачи.
В отдельных случаях контент дублируется только частично, когда на разных страницах сайта есть одинаковые блоки.
Часть дублируемого контента со страниц /insurance/kasko/form/ и /ins/kasko-product/. Сайт Tinkoffinsurance.ru
Весь значимый контент сайта должен быть представлен в формате, доступном для индексации. К примеру, такие элементы страниц, как описания, цены, технические характеристики нельзя размещать на баннерах и других изображениях. Вся важная информация должна быть сверстана в текст.
Контент, не отображаемый на странице, может быть воспринят как метод так называемого «черного SEO». И поисковики навесят на страницу санкции.
Также не стоит прятать важный контент под спойлеры. Особенно, если он ориентирован, в том числе, на индексацию поисковым роботом.
Страница «Страхование КАСКО» на сайте Tinkoffinsurance.ru. Часть контента спрятана под табы (вкладки)
Страницы с динамическим обновлением контента, реализованные при помощи JavaScript, не индексируются поисковиками. Содержимое элементов ajax не имеет собственных страниц и игнорируется поисковыми системами (специалисты, конечно, заявят,что эту проблему можно решить через подстановку индексируемой HTML-версии страницы со всем необходимым контентом (escaped fragment), но мы рассматриваем классический подход к этой теме).
Чаще всего в формате динамического контента реализованы фильтры и сортировка в каталоге.Такое решение не позволяет в полной мере сформировать из них полноценные страницы с собственными ЧПУ адресами и провести внутреннюю оптимизацию.
Фильтры в каталоге интернет-магазина Ozon.ru: без собственного ЧПУ адреса страницы и возможности внутренней оптимизации
Что еще роднит seo и дизайн
Поисковые алгоритмы совершенствуются за счет машинного обучения. Сейчас сайту нужно быть не только релевантным поисковым запросам — он должен соответствовать User eXperience, UX. Т.е. полагаться на опыт пользователя, быть понятным и полезным для него.
Опыт пользователя — это большое количество метрик, их сложная совокупность, которая влияет на длину клика, скорость скроллинга и другие параметры взаимодействия пользователя с сайтом.Чтобы сделать эти метрики положительными, нужно проектировать сайты таким образом чтобы они были удобными для пользователя.
Часто разработка дизайна выстраивается линейно, главная страница позиционируется как первый этап. В действительности же значительная часть органического трафика инициируется внутренними страницами. SEO позволяет рассмотреть реальные сценарии взаимодействия пользователя с сайтом, положительно влияя на поведенческие показатели проекта. Это благоприятно скажется на его дальнейшем продвижении.
Крайне редко в редизайне сайта участвует UX-эксперт. В такой ситуации грамотный SEO-специалист — едва ли не единственный эксперт, который поможет спроектировать действительно эффективный сайт. Именно он владеет данными о реально работающих решениях конкурентов, т. к., сайты, которые находятся в топе, наиболее качественно закрывают потребности пользователя по мнению Яндекса.
Полагаясь на оптимизатора, вы полагаетесь на точность огромной аналитической машины Яндекса в определении качества сайтов (парадигма Яндекса — кто выше, тот лучше). Это куда эффективнее, чем ориентироваться на субъективное «я так вижу».
При помощи тепловой карты кликов Я.Метрики можно определить самые «рабочие» элементы сайта
Таким образом, сегодня SEO — это больше о UX, т.е. о том, как сделать сайт привлекательным для пользователей и выстроить его информационную архитектуру, а не просто о правильной расстановке тегов.
Примеры успешного взаимодействия
Фактически SEO-продвижение сайта началось именно с обновления дизайна. Специалист по поисковому продвижению Original Works активно участвовал в процессе разработки — он сформировал ряд обязательных требований касательно структуры, содержания и технической реализации новой версии сайта.
Уже за первые полгода был получен ощутимый результат — органический трафик вырос более, чем в 10 раз.
График трафика из поисковых систем сайта типографии. На январь 2019 года количество поискового трафика превысило отметку 3000 человек в месяц
Для данного проекта «переезд» на новую версию сайта состоялся уже в ходе процесса его продвижения. Основной задачей оптимизатора при редизайне было сохранение текущих позиций и поиск точек роста для привлечения поискового трафика за счет смены дизайна.
В результате трафик в момент пика сезонного спроса вырос более чем в 2 раза относительного того же периода годом ранее.
График поискового трафика магазина строительных материалов. Поскольку для тематики характерна сезонность спроса, следует сравнивать показатели отдельных месяцев в разные годы
Проект с грамотным дизайном — эффективный маркетинговый инструмент. Его разработка должна основываться на потребностях пользователя и требованиях главного источника трафика — поисковых систем.
Сотрудничество дизайнеров с SEO-специалистом должно быть взаимодополняемым, причем на каждом из этапов разработки, с самого начала.
Спрос на комплексный подход гарантирует профит!
