{"id":14274,"url":"\/distributions\/14274\/click?bit=1&hash=fadd1ae2f2e07e0dfe00a9cff0f1f56eecf48fb8ab0df0b0bfa4004b70b3f9e6","title":"\u0427\u0435\u043c \u043c\u0443\u0440\u0430\u0432\u044c\u0438\u043d\u044b\u0435 \u0434\u043e\u0440\u043e\u0436\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430\u043c?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"6fbf3884-3bcf-55d2-978b-295966d75ee2"}

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

Главная страница — это лицо сайта и оно должно быть в полном порядке. Особенно, если речь идет об интернет-магазине. 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, в противном случае, пользователи могут подумать, что сайт заброшен и все труды пойдут насмарку.
Пример футера

Самое важное

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

Шаблон. Скачать здесь

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

0
80 комментариев
Написать комментарий...
JohnReed

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

Ответить
Развернуть ветку
Алексей Медведев

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

Ответить
Развернуть ветку
Жанна Павлова

Так так так... Увидела своё имя и не поняла: а я тут каким боком, а?
Поподробнее с этого места, молодой человек. Или вы, как очередной недотролль гадите и испаряетесь?

Ответить
Развернуть ветку
Алексей Медведев

Жанна, ну а то не видно, кто плюсует Маше))) 

Ответить
Развернуть ветку
Жанна Павлова

И? Других там имён нет? Если только это ваше объяснение - то... Ну как бы да, очередной недотролль, который не может нормально аргументировать свою позицию. Окей.

Ответить
Развернуть ветку
Алексей Медведев

Я не тролль))

Ответить
Развернуть ветку
Алексей Медведев

Ваш коммент, буквально: "комментарий ради комментария", адресованный пользователю 'привет', говорит сам за себя))) 

Ответить
Развернуть ветку
Алексей Медведев

За молодого, спасибо!)))

Ответить
Развернуть ветку
Алексей Медведев

Далее, ничего не гадил. Маша написала, как в лужу пукнула. Море - синее!!! И все кинулись плюсовать.... Что, зачем, кому... ? Ей плюсиков набрать нужно?))) 

Ответить
Развернуть ветку
Жанна Павлова

Камон, выдыхайте. Иначе скорую вызывать придётся, чего то прям сильно эмоционируете.
Там же написано - для новичков. А, ну и да, лично я (имхо) не нашла подобный шаблон.
Вишенка на торте - а че, вы где то на vc видели супер уникальную статью? Вроде здесь сидят разные люди, с разным уровнем знаний. 
Написали вредное что то? Вроде нет. Так че залупаться то (извините за жаргон)? 

Ответить
Развернуть ветку
Алексей Медведев

По жаргон, не дай бог мне начать так писать))
По сути, "Машенька" накорябала нерелевантную заголовки статью. Что угодно, ui, ux, маркетинг, но никак, блядь не seo она описала.
На SEO в этой статье и намёка нет.))) 

Ответить
Развернуть ветку
Жанна Павлова

Там выше в комментариях писали же, что SEO это не только про оптимизацию текста.
Да и тот материал, что я читала (опять же имхо, не претендую на супер знания) - очередность блоков, их наполнение, также имеет значение.

Ответить
Развернуть ветку
Алексей Медведев

Забудьте слова "имхо", "камон". Либо извольте изъясняться нормальной лексикой, либо будьте на самом деле СПЕЦИАЛИСТОМ.
По тому что вы читали - Википедия в помощь, шо есть такое SEO. Разжевывать детям понятие поисковой оптимизации я не собираюсь. Вам рекомендую - смените источники. Иначе будет у вас не SEO, а обычная ЖОПА.

Ответить
Развернуть ветку
Алексей Медведев

И не забываем читать Google, руководство для асессоров. 

Ответить
Развернуть ветку
Жанна Павлова

Эм... Вы, незнакомый человек, некто из интернета пишущий гадости и никак не аргументирующий свою позицию, будете мне указывать как изъясняться?
Ничего не перепутали, дедушка?)))
И порекомендую вам - вылезайте из Википедии и пещеры. SEO уже давно больше, чем просто работа с ключевиками. Проработка пользовательского опыта - одно из трендов в SEO 2020 года.

Ответить
Развернуть ветку
Алексей Медведев

Модное слово, "тренды", что значит? Именно слово "тренд"? Только быстро ответь.
И что оно значит в SEO, раскроешь?))) 

Ответить
Развернуть ветку
Алексей Медведев

Только быстренько, без литературы!)) 

Ответить
Развернуть ветку
Жанна Павлова

Откройте википедию, дедушка 😉

Ответить
Развернуть ветку
Алексей Медведев

Блин, мне не надо, я знаю!)) а вот вы, знаете?)) 

Ответить
Развернуть ветку
Алексей Медведев

Проработка пользовательского опыта... Вы хоть представляете что это и по каким метрикам оценивается?))) 

Ответить
Развернуть ветку
Алексей Медведев

При чем сеошник и дизайн магазина?))) вы пытаетесь смешать эти понятия, потому что далеки и от первого и от второго. 

Ответить
Развернуть ветку
Алексей Медведев

И это не "гадость", это истина))) 

Ответить
Развернуть ветку
Жанна Павлова

Ох... Я не сторонник дискуссий «ни о чем». Все то, что вы написали - даже не глупость, а настоящее вредительство. SEO - это инструмент для продвижения. И здесь важно абсолютно все: от структуры страницы до ее наполнения (не говорю уже о метатегах и пр. Тут и так понятно)
Из ваших комментариев не видно, что вы эксперт. И на вашем профиле нет ни одной статьи, которая бы могла подтвердить вашу экспертность. Поэтому далее продолжать пустой разговор не намерена и пойду, пожалуй, займусь полезными делами.
А вам советую почитать свежие материалы по SEO и все таки выйти из пещеры. Не википедией единой, знаете ли.
Удачи!

Ответить
Развернуть ветку
Алексей Медведев

Жанна, идите. С богом.)) 

Ответить
Развернуть ветку
Алексей Медведев

На вашем профиле тоже нет статей))) 

Ответить
Развернуть ветку
77 комментариев
Раскрывать всегда