Продающая карточка товара: состав, дизайн, полезные фишки

Переключение вида карточек товаров

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


По клику на кнопки у списка товаров удаляется и добавляется класс .

Таким образом, прописав стили для карточек-дочерних элементов блока , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:

Далее абсолютно позиционированные элементы занимают свое «естественное» положение. Например, так происходит с кнопками.

Это был последний момент, которым хотелось с вами поделиться. С праздниками и всего доброго.

Карточка товара на сайте

Нашла для вас еще несколько примеров хороших карточек товара на сайте. Смотрите оформление, подмечайте понравившиеся моменты и реализуйте у себя.

Магазин спорттоваров Decathlon:

  • использует приемы социального доказательства — рейтинг и отзывы;
  • помогает выбрать размер и сориентироваться в российских и европейских мерках;
  • выносит главные детали в описание;
  • сразу дает опции покупки — онлайн или бронь в магазине.

Карточка настольной игры «Монополия» в магазине «Детский мир». Мне нравится, что все лаконично: много места под картинки, есть вся нужная информация про наличие в магазинах и доставку. При этом можно легко выйти в отзывы или описание товара — ссылки на них расположены прямо под названием.

Карточка украшения в ювелирном магазине Sunlight. Тут тоже все здорово оформлено: есть и отзывы, и возможность найти ближайший магазин, и сохранить товар в избранное. Особенно нравится кокетливая кнопка «Намекнуть». И функция полезная, и сама формулировка забавная :).

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

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

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

Выбор дополнительных опций товара в превью карточки на сайте магазина Hoff

Создание специальных «кастомных страниц»

Необходимо разработать функционал создания специальных страниц с определенными наборами параметров фильтрации товаров. При создании такого элемента для него задаются параметры, выбирается категория выводимых товаров и т.д. Также для него должна быть возможность задать произвольные h1, title, description, текст с описанием и символьный код (по желанию).

Если пользователь выбирает в каталоге фильтр, абсолютно совпадающий с теми параметрами, которые заданы для такого элемента, то такой странице фильтрации задаются h1, title, description, текст с описанием – не автосгенерированные, а заданные у элемента. Помимо этого, если у элемента задан символьный код, то происходит 301 редирект с адреса страницы фильтрации на адрес такой кастомной страницы. Если символьный код не задан, то просто странице фильтрации с ее адресом задаются указанные h1, title, description, текст с описанием.

С помощью таких страниц удобно создавать подборки товаров из нескольких свойств или нескольких значений одного свойства. Кроме того, можно создать такие подборки, как, например, «недорогие» – т.к. цена, как было определено выше, будет задаваться с помощью GET-параметров, то можно создать страницу с нужным диапазоном цены.

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

Выбор подходящего шаблона для интернет-магазина автозапчастей

Шаблоны WordPress

Chromium — популярная специализированная тема. Преимущества шаблона:

  • подробная документация;
  • быстрая работа сайта;
  • простая система установки демонстрационных данных;
  • адаптивный дизайн;
  • стильное и лаконичное оформление;
  • наличие функциональных опций и плагинов.

Шаблон Chromium

Car Repair Services — адаптивная и современная тема WordPress, которая имеет следующие достоинства:

  • простой и чистый дизайн;
  • разнообразие стилей и макетов оформления страниц;
  • функциональность;
  • возможность указания локации;
  • удобная настройка в режиме визуального редактора;
  • простой и понятный алгоритм работы.

Шаблон Car Repair Services

Шаблоны InSales

Auto Land — адаптивный шаблон для небольшого сайта по продаже автозапчастей. Преимущества шаблона:

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

Шаблон Auto Land

  • поддержка многочисленных виджетов;
  • возможность изменять цветовое оформление сайта;
  • возможность редактировать шрифты и их параметры;
  • два типа логотипа: текстовый и графический;
  • настраиваемый блок контактов в верхней части сайта;
  • наличие слайдера;
  • простой и понятный алгоритм работы;
  • лаконичный дизайн.

Шаблон Бамблби

Шаблоны Joomla

OmegaTheme Car Accessories — адаптивный и функциональный шаблон для создания магазина автозапчастей.

Особенности:

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

Шаблон OmegaTheme Car Accessories

SmartAddons Autoparts — адаптивный шаблон с гибкими и легкими настройками. Достоинства шаблона:

  • быстрая работа сайта;
  • потрясающая цветовая схема;
  • расширенная типографика;
  • несколько видов меню;
  • более 30 позиций для расположения модулей;
  • возможность изменения фонового изображения под основной цвет темы;
  • понятный интерфейс;
  • актуальный и безопасный код, последних версий PHP и MySQL.

Шаблон SmartAddons Autoparts

Чем семантика поможет в составлении структуры сайта

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

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

В остальном же создание новой категории (или подкатегории) на сайте обусловлено:

  • спросом на определенную группу товаров;


  • большим количеством товаров в будущей категории;

  • наличием такой категории на сайте конкурента.

Характеристики и выгоды

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

Как это сделать?

  • Выделите самые частые характеристики товаров на сайте.
  • Пропишите для каждой характеристики выгоду.
  • Настройте автоматическую генерацию выгоды в описание товара.

Например, одна из возможных характеристик товара — «кружевное белье». Мы один раз написали текст выгоды для «кружевного белья»:

«Изюминка Вашего облика — кружево. Сейчас оно обрело «второе дыхание». Кружево — это воплощение шика и благородства, изысканности и нежности. Готовы ловить завистливые взгляды? Подберите одежду с кружевом».

Если в карточке товара появляется характеристика «кружевное белье», сайт автоматически генерирует описание. В нём — наш стандартный текст с выгодой.

Значение «Главной» страницы

Однако данный подход не достаточно эффективен. Согласно статистическим данным, Главную страницу посещает лишь пятая часть покупателей. Остальные открывают определенные разделы или сразу отыскивают необходимый товар.

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

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

Создать карточку товара

Шаг 1) Добавить HTML:

<div class=»card»>  <img src=»jeans3.jpg» alt=»Джинсы из денима» style=»width:100%»>  <h1>Скроенные джинсы</h1>  <p class=»price»>$19.99</p>  <p>Некоторый текст о джинсах..</p>  <p><button>Добавить карточку</button></p></div>

Шаг 2) Добавить CSS:

.card {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  max-width: 300px;  margin: auto;  text-align: center;  font-family: arial;}.price {  color: grey;  font-size: 22px;}.card button {  border: none;  outline: 0;  padding: 12px;  color: white;  background-color: #000;  text-align: center;  cursor: pointer;  width: 100%;  font-size: 18px;}.card button:hover {  opacity: 0.7;}

Карточка продукта – ваш продавец

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

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

Здесь же специалисты советуют размещать информацию о подарках за приобретенный товар.

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

Оформление

Обязательные элементы в ней:

  • логотип;
  • контактные данные (телефон лучше выделить крупно);
  • условия оплаты и доставки;
  • ссылка на корзину;
  • поисковая строка (желательно);
  • ссылка на авторизацию;
  • слоган (под логотипом) для того, чтобы было понятно, что вы продаете;
  • помощь;
  • выбор города/страны (если работаете не в одном регионе);
  • ссылки на основные разделы.

Подвал» (нижняя часть сайта) тоже необходимо правильно оформить. В нем должны быть:

  • ссылки на соц. сети;
  • контактные данные;
  • правовая информация (о сайте и компании в целом);
  • блоки ссылок на все полезные и служебные статьи.

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

Страница товара

Под конец более подробно остановлюсь на том, что в идеале должно быть на отдельной странице товара:

  • заголовок;
  • крупное фото товара;
  • дополнительные фото, увеличивающиеся при наведении;
  • стоимость (если акция, то прежнюю стоимость тоже написать, зачеркнуть и обозначить в процентах скидку);
  • характеристики товара: размеры, вес, цвет и т.д, чем больше, тем лучше;
  • отдельный текст о товаре, перечисляющий его основные характеристики, способ применения;
  • ссылки на информацию о доставке, оплате, гарантиях;
  • большая кнопка «Добавить в корзину» и дополнительная кнопка «Купить в 1 клик»;
  • добавление в список желаемого/список покупок/избранное;
  • доступность товара: в наличии, под заказ, нет на складе, поступит в ближайшее время и т.д.

Необязательно, но часто производит положительный эффект:

  • видео (если актуально для товара — реклама, пример использования, отзыв);
  • 3D-модель (полезно в магазине обуви, украшений и т.д.);
  • ссылки на похожие товары, на товары, которые можно порекомендовать, и на категории похожих товаров.

Организационная структура

Скрыть рекламу в статье

Организационная структура

Предлагаемая вашему вниманию структура не является единственно возможной, однако она неоднократно доказывала свою эффективность.

Главная задача руководителя на начальном этапе – подбор руководителей второго уровня, в первую очередь начальника отдела продвижения, главного редактора и технического директора. На рис. 9.1 показана структура руководящей верхушки небольшого сайта, на рис. 9.2 а, б – штатное расписание крупного контентного проекта.

Рис. 9.1

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

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

Рис. 9.2, а


Рис. 9.2, б

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

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

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

Главный редактор. Отвечает за создание контента – в первую очередь текстового, хороший редактор занимается также медийным и графическим контентом. Главный редактор не обязательно должен быть специалистом в предметной области, хотя это крайне желательно. Гораздо важнее для него владение языком (применительно к Рунету – русским), хороший слог и стиль, а также умение усваивать новую информацию (это позволит изучить предметную область в сравнительно сжатые сроки).

Основные задачи главного редактора портала – подбор контентщиков, распределение заданий, контроль их выполнения и, разумеется, редактура. При большом ежедневном объеме поступающего контента главный редактор должен иметь помощников – средняя норма вычитки в день составляет 40 000 знаков, включая пробелы.

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

Оглавление книги

Дублирование интентов

Речь идет о страницах, которые по своему назначению дублируют друг друга. Например, в разделе «Мебель для дома» есть такая категория, как «Стулья и кресла компьютерные», у которой есть типы товаров «Кресла компьютерные», «Кресла для руководителя», «Кресла для персонала» и т.д.

При этом в разделе «Мебель для офиса» есть категория «Офисные кресла и стулья», у которой есть подкатегории с таким же назначением:

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

Но эта проблема проявляется и на более простом уровне. Все подкатегории дублируются в фильтре в свойстве «Тип товара». Например, у категории «Мебель для кухни» есть подкатегория «Кухонные столы», имеющая адрес https://vobox.ru/catalog/kukhnya/ (помечена красным на скриншоте ниже). Помимо этого, в этом разделе в свойстве «Тип товара» есть вариант «Столы кухонные» (зеленое выделение), при фильтрации по которому попадаем на страницу https://vobox.ru/catalog/kukhnya/filter/tip_tovara-is-stoly-kuhonnye/minprice-from-1180-to-355200/apply/.

В результате имеем 2 страницы идентичные по смыслу, однако доступные по различным адресам (и одна из страниц не оптимизирована).

Ради справедливости отметим, что все страницы, содержащие в своем адресе /filter/, закрыты от индексации в файле robots.txt, поэтому конкретно в этом случае дублирования интентов не возникает. Однако это не позволяет использовать функционал смарт-фильтра и получать низкочастотный трафик по большому числу групп товаров.

Рекомендация. Необходимо избежать возникновения таких ситуаций. Как будет рассказано дальше, страницы фильтров необходимо будет оптимизировать, но даже в таком случае дублирование интентов недопустимо. Верным решением будет настройка 301 редиректов со страниц фильтров на страницы категорий – тогда это будет и удобно для пользователей (будут попадать на нужные страницы) и не будет проблем с поисковыми системами (не будет страниц, которые дублируют друг друга).

ЕЩЁ

Полноэкранное видеоМодальное окноШкала времениИндикатор прокрутки Индикатор выполненияПанель навыковПолзунок диапазонаПодсказки при наведенииВсплывающие окнаСкладная секцияКалендарьВключить HTMLСписок делЗагрузчикиЗвездный рейтингПользовательский рейтингНаложениеКонтактные чипыКарточкиФлип-картаКарточка профиляКарточка товараОкно тревогиВыноска сообщенияПримечаниеМеткиКругиHR Горизонтальная линияКупонГруппа списковОтзывчивый текстВырезанный текстСветящийся текстФиксированный подвалЛипкий элементРавная высота столбцовОчистка поплавкаОтзывчивые поплавкиСнэк-бар/тостПолноэкранное режимЧертеж при прокруткеПлавная прокруткаГрадиент фонаЛипкий заголовокИзменить заголовок при прокруткеОтзывчивые столбцы ценПараллаксСоотношение сторонПереключатель нравится/не нравитсяПереключатель скрыть/показатьПереключаель текстаПереключатель классаДобавить классУдалить классАктивный классДревовидное представлениеУдалить свойствоАвтономный режим обнаруженияСделать скрытый элементПеренаправление веб страницыУвеличить при наведенииФлип-боксЭлемент вертикально по центруПереход при наведении курсораСтрелкиФигурыСсылка для скачиванияПолная высота элементаОкно браузераПользовательская полоса прокруткиРазличные устройстваЦвет заполнителяЦвет выделения текстаЦвет макераВертикальная линияАнимированные иконкиТаймер обратного отсчетаПишущая машинкаСтраница заставкиСообщение чатаВсплывающее окно чатаРазделенный экранРекомендацииСчетчик разделаСлайд-шоу цитатЗакрываемые злементы спискаТипичные точки прерыванияПеретаскиваемый HTML элементМедиа запросы JSПодсветка синтаксисаJS анимацииПолучить элементы Iframe

Описание товара

Хорошее описание товара ёмкое и максимально полное. Содержит все возможные характеристики, которые вам только удалось собрать. Дополнено яркими рекламными буклетами и видео. Подкреплено отзывами реальных людей.

Обязательно

Кстати, новостями и статьями многие пренебрегают, а зря: эти материалы подогревают интерес у аудитории, которая ещё не созрела для покупки, и являются эффективным SEO-инструментом.

Поэтому, напоследок — 6 идей-форматов от блога goinflow.com:

  1. Материалы из разряда How-To: как выбрать горные ботинки, как подключить самостоятельно стиральную машину, как настроить стереосистему.
  2. Гиды и обзоры — как на один продукт, так и на несколько.
  3. Рейтинги товаров.
  4. Материалы, рассчитанные на узкую целевую нишу аудитории и низкочастотные запросы (например, обзор аудио-колонок для iPod).
  5. Инфографика.
  6. Интервью с экспертами или пользователями.

Видеодемонстрация продукта

Изображения товара – хорошо, но видео – еще лучше!

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

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

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

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

Пример

Стоит наглядно проанализировать пример структуры интернет – магазина. Для этого рассмотрим магазин Яндекс по продаже видео – регистраторов.

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

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

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

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

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


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

Что стоит запомнить

Карточка товара — это страница со всеми его характеристиками, фото, видео, ценой и кнопкой «Купить».

Обязательные элементы карточки товара:

  • название, производитель и модель товара;
  • цена;
  • иллюстрации;
  • кнопка «Купить»;
  • дополнительные опции (цвет, размер);
  • описание и характеристики;
  • гарантии, доставка, преимущества магазина.

Первые четыре элемента — главные на странице. Больше всего места по правилам занимают иллюстрации, а самый яркий элемент — кнопка «Купить».

Чтобы карточка товара была убедительнее, добавьте в нее элементы социального доказательства: отзывы, число купивших товар, отметки типа «Бестселлер». Чтобы удержать покупателя, которому некогда выбирать, сделайте в карточке опцию «Добавить в избранное». И позаботьтесь об удобстве выбора — добавьте опцию сравнения нескольких товаров.

Оптимизируйте карточки товаров для поисковых систем. Для этого пропишите теги:

  • Title — это заголовок страницы, который отображается в результатах поиска, в названии вкладки и при репосте в соцсети.
  • H1 — название самой страницы, которое видно на сайте.
  • Description — текст-описание страницы до 160 знаков с ключевыми словами.

Разметьте карточку товара по HTML микро-разметке Schema, чтобы она красиво отображалась в поиске. По возможности добавьте ключевые слова в описание товара.

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

Основные требования к тексту для главной страницы сайта

  1. Информационная. Предоставление покупателю максимума информации о самом магазине (если это главная страница сайта) или товаре (для карточек).
  2. SEO. Продвижение сайта, в том числе, главной страницы, с точки зрения поисковых систем – Яндекса, Гугла, Бинга и пр.

Какие требования предъявляются к текстам с информационной точки зрения? Они должны быть:

  • Грамотными. Грамматические, орфографические, стилистические и пунктуационные ошибки недопустимы;
  • Полезными для посетителей;
  • Тематическими;
  • Легко читаемыми.

С точки зрения продвижения сайтов в поисковой выдаче, текст для главной странице должен быть:

Структурированным — текст должен быть разбит на разделы и подразделы с использованием заголовков второго и третьего уровня (Н2 и Н3);

Включать в себя маркированные и нумерованные списки;

Содержать ключевые слова.

Количество ключевых запросов в тексте не должно превышать 5% для популярных (высокочастотных) запросов – например, «бытовая техника» и 1-2% для узких (низкочастотных) запросов – к примеру, «холодильник марки ХХХХ, Москва, недорого». Увеличение количества ключевиков приводит к переоптимизации текста. Это плохо отражается на выдаче сайта поисковыми системами.

  • Иметь минимум «стоп-слов». К ним относятся: предлоги, союзы и вводные слова: «в», «и», «на», «под», «благодаря», «однако», «все же», и так далее.
  • Не содержать нескольких прилагательных при одном существительном. Например, словосочетание «удивительный яркий запоминающийся праздник» плохо воспринимается поисковыми роботами Гугла и Яндекса.
  • Одно из главных требований – текст должен быть уникальным. Не стоит копировать тексты у сайтов-конкурентов и переносить их на свои страницы. Неуникальный контент может стать причиной того, что ваш сайт окажется под санкциями поисковиков. Для проверки текста существует несколько сервисов: Адвего, Etxt, Миратулс и др. В идеале, уникальность текста должна быть 95-100%.
  • Содержать как можно меньше «воды» — слов и фраз, которые не имеют прямого отношения к тематике текста.

Что такое шаблоны страниц сайта?

Определение и описание

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

Давайте еще посмотрим на картинку, на которой схематично отображена структура сайта:

За отображение главной страницы сайта отвечает шаблон страницы, который называется index.php. К этому шаблону подключаются остальные шаблоны. Проще говоря, главная страница собирается из из кусочков в единое целое. Зачем же так сделано? Для удобства и гибкости управления каждым отдельным элементом сайта.Согласитесь, ведь отремонтировать или доработать какую-то деталь в большом агрегате проще, когда эта деталь находится отдельно — например, перед вами на столе, а не когда вам приходится искать ее в массиве целого механизма и ремонтировать, не извлекая ее оттуда.

Теперь попробую ответить на некоторые вопросы, которые могли возникнуть у читателей:

ВОПРОС: обязательно ли главным шаблонам страницам сайта давать именно такие названия — header.php, sidebar.php, footer.php?

ОТВЕТ: Да, обязательно. Система управления WordPress по названию распознает шаблон страницы. Например, если вы назовете шаблон sidebar.php, Вордпресс будет знать, что это шаблон страницы для боковой колонки и никакой иной. Эти названия-вехи уже заложены в «мозгах» системы управления WordPress, и по ним она будет выстраивать структуру сайта.

ВОПРОС: зачем разбивать один общий файл на отдельные?

ОТВЕТ: Для гибкости структуры сайта. Например, на определенных страницах вы можете скрывать боковую колонку (сайдбар) или подвал сайта. К тому же разбиение ускоряет загрузку вашего сайта.

ВОПРОС: как подключить шаблоны подвала, шапки сайта, сайдбара и т.п. к главной странице?

ОТВЕТ: С помощью специальных команд на языке РНР. Пока для вас это темный лес, но когда мы дойдем до освоения РНР, вы наглядно увидите, как все это работает. Например, для того, чтобы подключить на главную страницу шапку сайта, в файле index.php достаточно прописать стандартную команду на языке РНР (см. ниже)

PHP

<?php get_header(); ?>

1 <?phpget_header();?>

Все, после этого подключится шаблон страницы с шапкой сайта. Также к основной странице подключается и сайдбар, и подвал и т.п.

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


С этим читают