Как должна выглядеть главная страница интернет-магазина? Структура + примеры

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

Как должна выглядеть главная страница интернет-магазина? Структура + примеры

Мы в Bquadro более 19 лет занимаемся разработкой и продвижением сайтов (в том числе SEO, например, здесь рассказываем про классическое продвижение промышленного сайта)

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

В целом, главная страница должна отвечать на вопросы:

  • Что продают?
  • Кто продает?
  • Как купить?

Правильная структура:

  • Шапка или хедер

  • Меню
  • Промо-блок с акциями и спецпредложениями
  • Блок «Повышение лояльности» с отзывами, лицензиями, сертификатами, наградами и пр.
  • Информационный блок с основными ключевиками и преимуществами компании
  • Футер

А теперь подробнее разберем каждый из этих пунктов.

Шапка

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

Элементы шапки:

  • логотип компании
    Располагаем в левом верхнем углу сайта. Его площадь не должна занимать более 20-25% всего хедера. Рекомендуем «зашить» в него ссылку на главную страницу (на большинстве сайтов делают именно так, поэтому пользователи уже привыкли к такому сценарию.)
  • краткая информация о компании

    Здесь можно написать о деятельности компании или специфике сайта. Это также поможет пользователю сориентироваться и понять, а туда ли он попал. Например: «интернет-магазин одежды”/”Оборудование для лазерной обработки материалов»

  • телефон
    Его место справа или в центре. Можно разместить один основной номер (например, 8-800…), настроить автоматическое отображение номера для отдельных регионов (актуально, если ваш магазин работает по всей стране или миру) или сделать раскрывающийся список с выбором подходящего номера. Не забудьте подключить набор номера, чтобы пользователь мог позвонить вам при нажатии на номер телефона.

  • корзина
    Во-первых, это подтверждение того, что ресурс — интернет-магазин. Во-вторых, неплохой психологический ход. «Ваша корзина пуста! Наполните ее скорее» — как бы намекает, что пора наполнить ее товарами с сайта.

Для ранжирования по коммерческим факторам важным будет добавление следующей информации и функционала:

  • часы и график работы;
  • адрес компании;
  • заказ обратного звонка;
  • поиск;
  • блок «О компании”, «Контакты», “Доставка и оплата»;
  • вход в «Личный кабинет” и “Регистрация».
Пример шапки
Пример шапки

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

Меню

Этот блок также отвечает за навигацию на ресурсе. В меню обязательно размещаем ссылки на разделы каталога, новинки, акции. Если в хедер не поместились ссылки «О компании”, «Контакты» и “Доставка и оплата», смело добавляйте их в меню.

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

На главной может быть 2 меню: горизонтальное и вертикальное. В первом — основные разделы каталога, во втором — подробная структура каталога с разбивкой на категории товаров. Такой подход рекомендуется интернет-магазинам с более 1000 товаров.

Пример расположения меню на главной странице интернет-магазина
Пример расположения меню на главной странице интернет-магазина

Промо-блок

Именно здесь мы размещаем промо-материалы. Свежие акции, спецпредложения, информация о конкурсах — все сюда!

Обычно промо-блок представляет собой слайдер с 3-5 рекламными баннерами. Его можно листать вручную и настроить автоматическое пролистывание.

Здесь важно учитывать тайминг скролла: элементы слайдера не должны перелистываться слишком быстро, но и не могут «зависать» по несколько минут. Оптимальное время задержки баннера — около 5 секунд.

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

Контролируйте количество товаров в промо-блоке. Рекомендуем ограничиться 5-10 продуктами. Если очень нужно показать больше товаров, разбейте их на несколько вкладок.

Пример размещения товаров в промо-блоке
Пример размещения товаров в промо-блоке

Какие товары размещать на главной:

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

Блок «Повышение лояльности»

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

Пример наполнения блока "Повышение лояльности"
Пример наполнения блока "Повышение лояльности"

Информационный блок

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

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

Футер

Или нижняя часть страницы сайта. Его еще называют «подвал».

Можно точно сказать, что футер — неотъемлемая часть любого сайта и он важен вне зависимости от специфики сайта. Но в случае с интернет-магазином, подвал становится полноценным инструментом продаж: он работает с уже «теплыми» посетителями, стимулирует их на продолжение знакомства с сайтом и дальнейшим заказам.

Что должно быть в футере:

  • Ссылки на страницы сайта
    Помогите пользователю найти ответы на свои вопросы. Разместите здесь информацию о доставке, оплате, компании, возвраты и обмен товара и т.д. Вариантов размещения ссылок несколько: отдельные страницы, которые отвечают на основные запросы вашей ЦА или ссылки на основные разделы сайта;
  • Контактная информация
    Здесь будет уместно продублировать информацию из шапки, но футер позволяет разместить больше данных. Поэтому, можете смело добавлять дополнительные номера и не забудьте про ссылку на страницу «Контакты»
  • Call-to-action
    Или форма обратной связи. Футер — самое логичное место размещения кнопки призыва к действию. Пользователь уже зашел, уже ознакомился с основной информацией и теперь хочет связаться с вами — а кнопка уже здесь! Ждет его и как будто шепчет «Нажми на мен…. »
  • Ссылки на ваши социальные сети
    Во-первых, это повышает лояльность и вовлеченность молодой аудитории, которой удобнее получать информацию из соц. сетей. Во-вторых, связь сайта с социальными сетями и последующая работа бренда в соц. сетях (отзывы, комментарии и т.д.) положительно влияют на позиции сайта в поиске (частично прорабатываются пункты «Добросовестность” и “Авторитетность» принципа E-A-T от Google. Основные требования можно прочитать здесь)
  • Политика конфиденциальности
    Наличие страницы с прописанными правами и возможностями сайта, порядок использования предоставленных контактных данных — обязательное условие. Это помогает избежать ряда проблем с законом и пользователями. А еще это повышает доверие со стороны посетителей интернет-магазина.
  • Логотипы и бренды
    Говорить об известных партнерах — правильно. Сотрудничество с популярными брендами «прокачивает» доверие пользователей, повышает вас в глазах потенциальных клиентов и одновременно помогает им сориентироваться в общей массе товаров (например, когда ищут вещи определенного бренда). На некоторых ресурсах логотипы партнеров выносят в отдельный блок. Это также допустимо, но может отвлечь от промо-материалов и преимуществах вашего интернет-магазина.
  • Возраст сайта
    Еще один показатель, влияющий на лояльность и доверие пользователей. А также подтверждение надежности интернет-магазина.Стандартный формат: XXXX – YYYY, где XXXX – год запуска сайта (открытия интернет-магазина), а YYYY – текущий год.Не забывайте обновлять значение YYYY, в противном случае, пользователи могут подумать, что сайт заброшен и все труды пойдут насмарку.
Пример футера
Пример футера

Самое важное

Если сложить все вышеперечисленные блоки, получится вот такой макет:

Шаблон. Скачать <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fbquadro.ru%2Fsites%2Fdefault%2Ffiles%2Fuploads%2FEcommerce_shablon.png&postId=155049" rel="nofollow noreferrer noopener" target="_blank">здесь</a>
Шаблон. Скачать здесь

Разумеется, не стоит забывать про наполнение и визуальное оформление. Пишите просто и понятно, показывайте (и продавайте) качественные товары, не забудьте про общую дизайн-концепцию сайта и то, что главная страница — хоть и важная, но все-таки часть сайта. Используйте качественные графические элементы и адаптируйте сайт под мобильные устройства. И помните: каждый сайт требует индивидуального подхода. Шаблоны и структура — основа, которая помогает облегчить процесс создания, но полностью его не исключает.

2222
80 комментариев

Текст ради ссылки

14
Ответить

Комментарий ради комментария?

6
Ответить

Разве это с точки зрения SEO? Это скорей про структуру с точки зрения маркетинга и юзабилити. Я думал тут будет про заголрвки H1 на главной , перелинковки, или текста. Заголовок статьи как по мне нерелевантен. Но многим мож будет полезно.. Это так. ИМХО

10
Ответить

Здравствуйте!
Юзабилити, на наш взгляд, неотъемлемая часть SEO. И да, к маркетингу это также относится.
Что касается именно SEO: оно не сводится только к оптимизации текста. Мы учли информационный блок, но не стали акцентировать на этом внимание (поскольку если вы учитываете этот блок изначально, то правильно наполнить контентом не составит труда).
И к тому же, в заголовке написали “Структура + примеры”, как раз для того, чтобы подчеркнуть о чем будет речь в статье.

К сожалению, многие вещи не учитываются при разработке сайта, а в дальнейшем их довольно трудоемко и затратно править (H1 можно исправить в пару кликов, а вот переверстать блок - нет), поэтому было решено писать “в эту сторону”)
При этом, структура страницы и ее содержание напрямую влияют на поведенческие метрики (глубина просмотров, показатель отказов и пр.) и конверсии - а это, опять же на наш взгляд, ключевое при продвижении интернет-ресурса (особенно интернет-магазина).
P.S. Если вам действительно интересно наше мнение по этому поводу, мы готовы написать отдельную статью про оптимизацию главной страницы интернет-магазина. Дайте знать, если нужно =)

6
Ответить

Хорошая статья и все по делу, нет воды. Порадовало возможность скачать шаблон. Спасибо.🤝

9
Ответить

Спасибо за отзыв! Нам очень приятно)

2
Ответить

Вы хоть что нить читать пытались? А смотреть?? Шаблон вам? Да их в инете - любой магазин!!!
Хотя, что распинаться, это ж группа поддержки Маши и Жанны.... 🤣🤣🤣🤣

Ответить