Проектирование интернет-магазина для SEO: (теория + чеклист)

в 15:09, , рубрики: e-commerce, usability, веб-дизайн, интерфейсы, проектирование, Проектирование интернет-магазинов, проектирование интерфейсов, проектирование сайтов, прототипирование, Разработка под e-commerce

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

Статья разбита на две части.
Теория: о том, что в принципе можно учесть в SEO интернет-магазина и как это работает.
Чек-лист: 80 пунктов, по которым легко проверить, насколько удобно будет продвигать ваш сайт после разработки

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

Итак, теория

Основные требования к сайту можно сгруппировать так

  • Структура разделов и навигация
  • Структура страниц
  • Наращивание семантики
  • Коммерческие факторы
  • Технические факторы

Структура разделов

Поисковики нормально ранжируют страницы сайтов на три уровня вложенности (четыре, но мы не считаем главную). То есть, страницы, которые не найти в три клика с главной, останутся не изученными и не займут высоких позиций в выдаче.

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

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

Вот пример, как мы проектировали меню для сайта одежды. Из каждого пункта верхнего меню выпадает несколько разделов, а из них — несколько подразделов. Это позволяет поисковикам индексировать несколько сотен страниц “в один клик”

Проектирование интернет-магазина для SEO: (теория + чеклист) - 1

Если по каким-либо причинам это сделать невозможно, то разделы первых двух уровней каталога можно продублировать в подвале главной страницы сайта. Вот пример с того же сайта

Проектирование интернет-магазина для SEO: (теория + чеклист) - 2

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

Структура страниц

Яндекс ранжирует сайты при помощи алгоритма Матрикснет суть которого в определении общих признаков сайтов, полезных пользователю. Поэтому при проектировании основных страниц (главная, листинг товаров и карточки товара) важно определить, каким запросам они должны соответствовать и какие общие признаки у страниц, занимающих дон выдачи по этим запросам.

Google в этом вопросе устроен сильно проще: он по-прежнему сильно ориентирован на тексты и ссылки. Так что место под тексты на страницах также важно заложить.

Вот часть анализа, выполненного нами для интернет-магазина цветов.
Берем запрос “Купить букет из красных роз”.

Проектирование интернет-магазина для SEO: (теория + чеклист) - 3

Открываем первые 4 сайта

Что их объединяет

  • Все это — списки товаров (запрос не ведет на отдельный товар)
  • Около 30 товаров на странице
  • Фильтр по параметрам
  • Слово krasnye в ссылке
  • Сортировка по цене и популярности
  • H1 и title с вхождением слов “красные” и “розы”

Что их не объединяет

  • Не на всех есть текст внизу
  • Разная длина title
  • H1 и title не везде включают слово “букет”
  • Значит эти параметры не критичны в данном запросе

А вот как мы уложили собранные требования в прототип сайта.

Что здесь важно:

  • Место под большой заголовок
  • Цепочка навигации
  • Фильтрация
  • Сортировка
  • Теги для перехода по посадочным страницам
  • Скидка и хит
  • Мини инфа по доставке

Проектирование интернет-магазина для SEO: (теория + чеклист) - 4

На что в принципе можно смотреть, анализируя сайты из топа выдачи

  • Количество товаров
  • Цены товаров (не во всех товарах их допустимо публиковать)
  • Наличие текстов
  • Наличие фильтров
  • H1
  • Фото товаров
  • Наличие цепочки навигации

Если ответом на запрос является карточка товаров, то добавляются

  • Описание
  • Отзывы
  • Инструкции
  • Доставка (прямо в карточке)
  • Способы оплаты

Более полный список будет далее в чек-листе по коммерческим факторам.

Наращивание семантики

Прекрасный источник дополнительной семантики на сайте — свойства товаров.

Группируя товары на основе свойств, можно создавать тысячи страниц под различные запросы.
На странице с товарами, отобранными по свойству, делаются человеко-понятный адрес (ЧПУ), h1, title, соответствующие запросу, description для сниппета, иногда — текст.

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

Например, в разделе «ванны» можно создать теги по свойствам «стальная» «170х70» «kaldewei»
В итоге мы получим страницу, идеально отвечающую на НЧ-запрос.

Где можно разместить такие теги

В небольшом количестве — над товарами (самые популярные). Их же можно снабдить картинками-пояснениями.

Вот фрагмент прототипа для сайта по доставке цветов. Здесь я выделил “теги” для перехода на посадочные страницы.

Проектирование интернет-магазина для SEO: (теория + чеклист) - 5

В большом количестве — под товарами. Это позволит сократить уровень вложенности для таких страниц.

Еще один вариант — в дополнительных пунктах меню. Пример — поле “повод” на том же сайте цветов

Проектирование интернет-магазина для SEO: (теория + чеклист) - 6

Универсальный вариант — в фильтре. Обычно фильтр на сайте не индексируется поисковиками, так как представляет собой форму, предполагающую отправку ее пользователем. Однако, на свойства в форме можно привязать ссылки, открывающие конкретные страницы.

Коммерческие факторы

Яндекс четко делит страницы на информационные и коммерческие. Как правило, коммерческие выдаются в ответ на запросы, предполагающие покупку. Например, запрос может содержать слово «купить» или топоним (географическое название). Пассатижи в Краснодаре — коммерческий запрос. А «Как выбрать пассатижи» — информационный. А вот запрос «Пассатижи» приведет нас на смешанную выдачу: тут и википедия и магазины инструментов.

Проектирование интернет-магазина для SEO: (теория + чеклист) - 7

Для коммерческих страниц Яндекс использует так называемые коммерческие факторы ранжирования.

Всего их более 150 и наиболее подробно о них рассказывается в докладе Ашманова за 2018 год.

Я приведу здесь 10 основных, а расширенный список вынесу в чеклист

  • Наличие адаптивной версии
  • Наличие цены товара
  • Наличие валюты (знак рубля при этом он не воспринимает)
  • Варианты оплаты
  • Городской номер
  • Время работы
  • Фото
  • Описание
  • Гарантии
  • Новости
  • О компании

Поведенческие факторы

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

Что является поведенческими факторами

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

Последний клик на поиске
Если посетитель после визита на сайт, закрыл поисковик, значит он нашел то, что искал. Сайт получает «плюсик».

Единственный клик на поиске
Если виджет так привлек посетителя, что он открыл сайт первым. И при этом сайт оказался настолько полезен, что посетитель закрыл поиск. Это тоже «плюсик».

Отказы
Быстрый уход с сайта после открытия страницы — это минус для поисковика.

Что важно заложить при проектировании для улучшения ПФ

Связать страницы смысловыми ссылками: в товаре разместить аналоги и статьи об использовании. В листинге товаров разместить быстрые ссылки на подборки товаров и «суповые наборы» для конкретных задач (шуруповёрт + зарядка + сверла + биты).

Заметные кнопки действий и призывы к действию (CTA)

Пример с того же магазина цветов.
На странице: 2 кнопки покупки (стандартный и в 1 клик), кнопка избранного и преимущества магазина

Проектирование интернет-магазина для SEO: (теория + чеклист) - 8

Контент

Разместить максимум информации, чтобы ее не приходилось «добирать» в других источниках: фото, видео, обзоры, характеристики, отзывы, инструкции.

Максимально заметная корзина

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

В качестве примера: виджет корзины с интернет-магазина одежды

Проектирование интернет-магазина для SEO: (теория + чеклист) - 9

Максимально удобный заказ

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

На фото — пример, как мы проектировали заказ для интернет одежды. В один экран влезают все нужные поля, виджет корзины, способы оплаты и доставки.

Проектирование интернет-магазина для SEO: (теория + чеклист) - 10

Технические факторы

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

Скорость сайта

На рынке существует миф, что Google Pagespeed измеряет скорость сайта.

На самом деле это не совсем так. GPS показывает чек-лист оптимизации верстки страницы сайта.
Кеширование браузером.
Сжатие передаваемых данных.
Избыточность изображений.
Избыточность скриптов.
Это важно, но это не скорость.
Поэтому к его показателям относимся без фанатизма.

Вот мы довели сайт до 100 единиц на ПК и на мобильных. Ни на визуальную скорость, ни на SEO-позиции это не повлияло.

Проектирование интернет-магазина для SEO: (теория + чеклист) - 11

Так что если сайт не в «красной зоне», то этого уже достаточно.

Скорость ответа страницы

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

Проектирование интернет-магазина для SEO: (теория + чеклист) - 12

Размер страницы

Можно измерить через pingdom tools. Тут нет универсальных советов, но обычно если страница больше 3 мегабайт, то это повод насторожиться.

Технологии и навигация

Сайт будет легко индексироваться, если ссылки будут вести на страницы, содержащие запрошенный контент. Если же сайт построен на AJAX, то важно чтобы при запросе данных менялся URL страницы и при открытии этого URL (или обновлении страницы), открывались те же данные, что и получены без перезагрузки.

Чек-лист

Из теории видно, что один и тот же пункт может быть одновременно и коммерческим фактором и фактором юзабилити и техническим фактором и оцениваться яндексом в рамках Матрикснет. Поэтому чек-лист сгруппирован не по типам факторов, а по месту их применения

Общие факторы

  1. Легкая адаптивная версия
  2. Верстка без косяков
  3. Отсутствие орфографических ошибок
  4. Отсутствие навязчивых всплывающих окон
  5. Строка поиска

Главная страница

  1. Развернутый каталог
  2. Контакты в шапке
  3. Отзывы на главной
  4. Большой баннер с акциями
  5. Рекомендованные товары
  6. Хиты/акции
  7. Копирайт и пользовательское соглашение в подвале

О компании/Контакты

  1. Городской номер
  2. Горячая линия 8-800
  3. Контакты отделов и сотрудников
  4. Адреса офиса и филиалов
  5. Города доставки
  6. Реквизиты
  7. Facebook
  8. Instagram
  9. VK
  10. Описание о компании
  11. Отзывы о компании
  12. Сертификаты / лицензии
  13. Электронная почта в домене сайта
  14. Возможность оставить заявку
  15. Онлайн-чат
  16. Схема проезда
  17. Таблица с ценами в услугах

Логика каталога

  1. Каталог организован от общего к частному
  2. Очевидно, где искать тот или иной товар
  3. Товар доступен в 3 клика с главной
  4. Цепочка навигации
  5. Фильтрация по свойствам товара
  6. Посадочные страницы под наборы свойств

Список товаров

  1. Большие фото
  2. Цена
  3. Валюта (рубли лучше обозначать как руб.)
  4. Скидки на товары
  5. Рейтиг товара в звездочках
  6. Индексируемая постраничная навигация
  7. Количество товаров в списке аналогично топовым сайтам по нужному запросу
  8. Сортировка (цена, популярность, отзывы)
  9. Функция сравнения товаров

Карточка товара

  1. Наличие товара
  2. Срок поставки при отсутствии
  3. Условия доставки
  4. Подробное описание
  5. Максимум характеристик
  6. Несколько фото
  7. Видео
  8. Инструкция
  9. Предложение сопутствующих товаров (в пределах 2 экранов от товара)
  10. Предложение товаров-аналогов
  11. Отзывы в товаре
  12. Предложение оставить отзыв
  13. Вопрос-ответ
  14. Гарантии и возврат
  15. Заметная кнопка “в корзину”
  16. Покупка в один клик
  17. Избранное

Корзина

  1. Виджет корзины заметен на страницах
  2. В виджете есть цена
  3. В виджете есть общее количество
  4. Цена за единицу товара и за количество товара (на странице корзины)
  5. Выбор количества
  6. Активные ссылки на товар в списке
  7. Фото товара в списке
  8. Хотя бы минимальное описание товара
  9. Возможность отложить товар
  10. Пересчет без обновления страницы
  11. Минимальные условия доставки
  12. Предложение сопутствующих товаров
  13. Отсутствие аналогов (не переубеждаем уже выбравшего)

Оформление заказа

  1. Несколько способов доставки
  2. Наличие самовывоза
  3. Наличие бесплатной доставки
  4. Несколько способов оплаты
  5. Захват контактов покупателя
  6. Логичная последовательность полей (сначала город, потом адрес)
  7. Отсутствие лишних полей (адрес не нужен при самовывозе)
  8. Подсказка полей при заполнении
  9. Видна общая сумма заказа с доставкой
  10. Оферта и соглашение на видном месте

В качестве резюме хочу сказать, что когда при разработке сайта не учтены требования к последующему продвижению, как правило, это приводит к тому, что готовый уже сайт приходится на 30-50% переделывать и перезаполнять, что отдаляет результаты минимум на полгода.

P.S. Чтобы быть в курсе новых публикаций, подписывайтесь на меня в Facebook.

Автор: iarga

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js