Урок 51. Дизайн главной страницы интернет магазина

Урок 51. Дизайн главной страницы интернет магазина

Создать главную страницу интернет магазина. Ознакомиться с популярными блоками для страницы. Провести базовую внутреннюю поисковую оптимизацию.

Урок будет полезен не только тем, кто только создает магазин, но и владельцам существующих магазинов.

Основная цель

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

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

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

Вопросы

  • Туда ли я попал? Предлагает ли сайт то, что я хочу?
  • Чем занимается компания? Можно ли ей доверять?
  • Как связаться с компанией? Как узнать больше о компании?

Чтобы оценить, качество главной страницы, можно рассмотреть статистику по ней в качестве страницы входа. Например, для Яндекс.Метрики это может выглядеть так:

Из отчета видно, что в среднем, показатель отказа для главной страницы выше на 10%, чем для всех остальных. Думаю, мне есть над чем задуматься.

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

Задачи

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

Речь идет о соответствии внешнего вида сайта занимаемой отрасли.

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

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

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

Проверьте, легко ли прочитать логотип. Виден ли логотип в левом верхнем углу страницы?

Если из логотипа непонятно, чем занимается организация, необходимо обозначить сферу деятельности.

Для этого понадобится слоган. Слоган на сайте - это как вывеска над торговыми рядами в супермаркете. Одного взгляда достаточно, чтобы понять.

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

  • Продукты, популярные в социальных сетях и которые рекламируются в СМИ
  • Ссылки на самые популярные вопросы пользователей
  • Контактные данные и связь со службой поддержки
  • Попробуйте предугадать, что может быть интересно пользователям в настоящее время
  • Посмотрите, что используют конкуренты на своих главных страницах. Думайте при копировании, не повторяйте чужих ошибок
  • Регулярно просматривайте отзывы и запросы в техническую поддержку. Эта информация является сигналом к действию
  • Не стоит игнорировать показатели. Для главной подойдут блоки популярных, бестселлеров и новинок, которые предлагает система uCoz. Сюда стоит добавить аналитику по поисковым запросам внутри вашего магазина

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

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

Шаблон

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

Именно с кода внутри них мы начнем работу с шаблоном главной страницы интернет магазина. Для этого перейдите в Панель управления - Дизайн - Дизайн (шаблоны). На открывшейся странице выберите шаблон Главная страница магазина:

В данной части урока мы подробно рассмотрим размещение следующих блоков:

  • Продукты, популярные в социальных сетях и которые рекламируются в СМИ
  • Ссылки на самые популярные вопросы пользователей
  • Контактные данные и связь со службой поддержки
  • Попробуйте предугадать, что может быть интересно пользователям в настоящее время
  • Посмотрите, что используют конкуренты на своих главных страницах. Думайте при копировании, не повторяйте чужих ошибок
  • Регулярно просматривайте отзывы и запросы в техническую поддержку. Эта информация является сигналом к действию
  • Не стоит игнорировать показатели. Для главной подойдут блоки популярных, бестселлеров и новинок, которые предлагает система uCoz. Сюда стоит добавить аналитику по поисковым запросам внутри вашего магазина

Для шаблонов главных страниц магазинов uCoz используется данный код:

Это, лишь, часть, помещенная в <!-- <body> --> . Где:

  • <?$CATALOG$(N,K)?> - выведет список категорий верхнего уровня в N-колонок с K-подкатегориями. Не используем его. С задачей этого справится меню в боковой колонке с $CATEGORIES$ или <?$SHOP_HMENU$('div')?> . Если вы еще не создали такое меню категорий, то воспользуйтесь уроком по созданию глобальных блоков. Главное помнить при создании дерева категорий, что их должно быть не более 8-9, все остальные - вложены в базовые категории
  • $TOP_VIEW$ - список самых просматриваемых товаров. Оставляем без изменений
  • $TOP_SOLD$ - список самых продаваемых товаров. Оставляем без изменений
  • $LAST_ADD$ - список новых товаров. Оставляем без изменений
  • /shop/all - ссылка для просмотра всех товаров. Эту ссылку можно перенести в блок с категориями $CATEGORIES$ или <?$SHOP_HMENU$('div')?> , например, так:

Не забыли, как это делается? Войдите на сайт как администратор, в админ баре выберите Конструктор - Включить конструктор:

Теперь давайте разместим блок с контактными данными. Для этого мы будем использовать микроразметку для адресов и организаций (подробнее). Пример:

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

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

Поисковая оптимизация

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

В наличии следующих тегов следует убедиться:

  • meta description
  • meta keywords
  • title
  • h1

В предыдущем пункте я говорил, что неизменной в шаблоне является часть заключенная в <!-- <body> --> . В самом верху шаблона в теге head должны быть description , keywords и <title>. </title> . Их мы тоже поменяем/добавим.

Вот, как это может выглядеть:

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

📎📎📎📎📎📎📎📎📎📎