РАЗРАБОТКА ИНТЕРНЕТ-МАГАЗИНОВ
Шаблон полноформатного технического задания
на создание интернет-магазина
Получить техническое задание на разработку интернет-магазина,
и начальный функционал e-commerce маркетинга
Пример технического задания (ТЗ) на создание интернет-магазина электроники и бытовой техники
Поскольку разработка сайтов, как и последующая техническая поддержка сайтов — наша основная специализация, нам часто предлагают просчитать стоимость проекта без ТЗ и/или просят показать, как оно должно выглядеть. Поэтому мы разработали и выкладываем в открытый доступ типовой пример полноформатного ТЗ на создание интернет-магазина, чтобы на его основе наши клиенты могли создавать собственные ТЗ по своим проектам.
7. Макеты страниц
Главная страница
Страница каталога
Детальная страница товара
Сравнение товаров
Корзина
Оформление заказа шаг №1
Оформление заказа шаг №2
Оформление заказа шаг №3
Личный раздел «Данные покупателя»
История заказов
Личный раздел «Список желаний»
Личный раздел «Лист ожиданий»
Макет страницы «Результаты поиска»
8. Требования SEO
8.1. Адреса страниц (URL) и структура сайта
Дублирование URL

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

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

Фильтры на сайте, не зависимо от последовательности выбора фильтров должны иметь один конечный URL.

Требования к формату URL

По возможности новую структуру URL рекомендуется реализовать по такому принципу:

Главная:

[домен].[доменная зона]/

Портальная страница (Смартфоны и телефоны) (в случае, если в ассортименте магазина появятся стационарные и другие виды телефонов):

[домен].[доменная зона]/[портальная страница]/

Раздел (Смартфоны и аксессуары):

[домен].[доменная зона]/ [раздел]

Категория (Смартфоны):

[домен].[доменная зона]/[раздел или портальная страница]/[категория]/

Фильтр (Android):

[домен].[доменная зона]/[категория]/[фильтр]/

Карточка товара (Смартфон LG D325 L70 Dual Black):

[домен].[доменная зона]/[категория]/[карточка товара].html

Информационные страницы (О магазине):

[домен].[доменная зона]/[информационная страница].html

В соответствии со структурой рекомендуется создать некоторые портальные страницы, в частности, необходимые страницы, на которые будут стоять ссылки в мегаменю.
В случае присутствия на сайте функции поиска или сложной фильтрации по параметрам, допускается использование в URL символов "?", "=" не более одного раза. Все остальные, не буквенные и цифирные символы, а так же " " (пробел), кроме "-", "_", "#" (для ссылки на переход внутри страницы) не использовать.


URL страниц оформления заказа
  • URL страниц:
  • корзины
  • формы заказа
  • страницы подтверждения заказа (спасибо за заказ)

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

Важно! Если на новом сайте URL адреса будут меняться, то необходимо будет настроить постраничный 301 редирект со старых URL на новые, чтобы не потерять трафик и позиции.

1. Скорость загрузки страницы

Для стабильной и быстрой индексации проекта, время отдачи html кода страницы должно быть не более 200-300 мс. Полное время загрузки страницы не должно превышать 2-3 сек. Рекомендации по оптимизации можно посмотреть здесь: https://developers.google.com/pagespeed/
Если требования не соблюдаются:

  • Настроить кэширование сайта.
  • Оптимизировать код генерации страниц.
  • Сменить хостинг на более производительный (к примеру, если используется виртуальный хостинг – сменить на VDS или Dedicated).
  • Оптимизировать размеры картинок, js и css файлов.
  • Объединить множество js файлов в один.
  • Объединить множество css файлов в один.
  • Использовать CDN для статического контента.
  • Добавить Expires заголовки для изображений, css, js и прочего статического содержимого.

2. 301 редирект

На сайте должны быть настроены правила переадресации "301 редирект".
Каждая страница имеет только один доступный пользователю и поисковой системе URL. При этом все остальные его вариации (которые автоматически генерируются CMS), перенаправляются на основной URL, формат которого описан в пункте 1, с помощью 301 редиректа.
Сайт должен иметь 1 основной домен, если к нему прикреплены другие домены, с них должны стоять 301 редиректы. У каждого сайта есть хотя бы одно зеркало с www.

Пример настройки 301 редиректа в файле .htaccess:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^site\.com\.ua$ [OR]
RewriteCond %{HTTP_HOST} ^www\.site\.com\.ua$ [OR]
RewriteCond %{HTTP_HOST} ^www\.site\.com$
RewriteRule ^(.*)$ http://site.com/$1 [R=301,L]

где производится переадресация со всех страниц site.com.ua, www.site.com и www.site.com, на site.com.



Дубли страниц со слешом

Все дублирующие страницы сайта также должны перенаправляться с кодом 301 на основную страницу.
Необходимо сделать редтирект с URL без слеша на URL со слешом, то есть, к примеру, с www.site.com/catalog/smartphones на www.site.com/catalog/smartphones/
Проверить, чтобы для страниц с расширениями, например, www.site.com/goods/smartphones/asus-zenfone-5-a501cg-16gb-charcoal-black-16gb.html не было редиректа на www.site.com/goods/smartphones/asus-zenfone-5-a501cg-16gb-charcoal-black-16gb.html/



Дубли главной страницы

Исключить дубли главной страницы, URL:
www.site.com/index.php
www.site.com/index.html
Перенаправить с помощью 301 редиректа на:
www.site.com/

Если входной точкой CMS служит скрипт /index.php, во избежание циклического перенаправления, можно использовать php редирект:

$url = $_SERVER['REQUEST_URI'];
if(strpos($url,'/index.php') !== false) {
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".str_replace('index.php', '', $url));
exit();
}

Этот код, помимо прочего, будет редиректить и внутренние страницы с index.php.

Например:
http://site.com/category/index.php на http://site.com/category/


Множественные слеши в URL

Убрать дублирующие множественные слеши в адресе с помощью 301 редиректа:

www.site.com/catalog/////smartphones/

заменить на
www.site.com/catalog/smartphones/

Большинство примеров редиректов для htaccess обрабатывают эту ситуацию неправильно, и убирают множественные слеши целым циклом редиректов.

Этого недостатка лишен подобный php код для точки входа вашей CMS (обычно корневой index.php):

$url = $_SERVER['REQUEST_URI'];
if(preg_match('#/{2,}#',$url) ) {
$url = preg_replace('#/{2,}#', '/', $url);
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".$url);
exit();
}


Первая страница пагинации

Для категорий или разделов сделать редирект первой страницы на корневую.

Например:

www.site.com/catalog/smartphones/page1/
должно перенаправлять на
www.site.com/catalog/smartphones/


3. Обработка несуществующих URL


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

К примеру:

http://site.com/cXntacts
http://site.com/catalog/obXect1.html
http://site.com/cXtalog/object1.html
http://site.com/other-module/itXm.html

Разные модули могут по-разному обрабатывать отдачу 404. Кроме того, на страницах с пагинацией, нужно проверить значения, выходящие за рамки, например, в каталоге 10 страниц, подставьте 11 в параметр – правильно должна отдаваться 404, а не http://site.com/catalog/11


Техническая настройка страницы 404

Страница 404 должна обладать одним постоянным адресом, например:

www.site.com/404.html


В случае, если пользователь попадает, к примеру, на страницу:

www.site.com/catalog/smartphones/error-page1515

сделать 301 редирект на страницу:

www.site.com/catalog/smartphones/404.html


При возникновении 404 ошибок в google webmasters панели, нужно отслеживать, на какие URL ведут такие ошибки, и создавать правила перенаправления для них.



4. Уникальный контент и метаданные


На страницах разделов, категорий товаров, производителей категорий товаров (брендов), а так же страницах фильтров внедрить возможность размещения уникальных оптимизированных текстов и метаданных:

оптимизированного текста (в категории под списком элементов)

заголовка страницы в теге

Заголовок

(любая страница должна содержать только 1 такой элемент)

тега содержимое
тега
тега
тега


Шаблонные метаданные


Реализовать возможность размещения шаблонных оптимизированных метаданных. Возможность размещать шаблонные метаданные должна быть реализована на всех страницах сайта.

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

? раздел (Смартфоны и аксессуары)
? категория товара (Смартфоны)
? бренд (Смартфоны Samsung)
? фильтры или наборы фильтров (Смартфон Samsung белый)
? название модели Смартфон Samsung Galaxy S6 32Gb White Pearl, в большом количестве категорий товаров данная переменная должна быть результатом сложения переменных {категория товара} {бренд товара} {название товара}


Пример шаблона для полей title и description:

Шаблон для категорий

NEW Title: [Название категории]. Купить [название категории в ед. числе род. падеж] в интернет-магазине, лучшая цена в Азербайджане.

Meta name="Title" content=: [Название категории]. [название категории в ед. число] по лучшей цене в Баку.

NEW Description: [Название категории] в интернет-магазине ??? Хотите купить в Баку [название категории в ед. числе род. падеж] по низкой цене с доставкой по Азербайджану? ?


Пример 1:

NEW Title: Планшеты. Купить планшет в интернет-магазине, лучшая цена в Азербайджане.

Meta name="Title" content=: Планшеты. Планшет по лучшей цене в Баку.

NEW Description: Планшеты в интернет-магазине.??? Хотите купить в Баку планшет по низкой цене с доставкой по Азербайджану? ?.
Пример 2:

NEW Title: Кофеварки. Купить кофеварку в интернет-магазине, лучшая цена в Азербайджане.
Meta name="Title" content=: Кофеварки. Кофеварка по лучшей цене в Баку.

NEW Description: Кофеварки в интернет-магазине Integralplus.??? Хотите купить в Баку кофеварку по низкой цене с доставкой по Азербайджану? ?*



Страницы пагинации

Для страниц пагинации к базовому title, meta title и description добавляем Страница №2, Страница №3 и т.д.


Шаблон для категория + бренд

NEW Title: [Название категории] [Бренд]. Купить [название категории в ед. числе род. падеж] [Бренд] в интернет-магазине, лучшая цена в Азербайджане.

Meta name="Title" content=: [Название категории] [Бренд]. [название категории в ед. число] [Бренд] по лучшей цене в Баку.

NEW Description: [Название категории] [Бренд] в интернет-магазине Integralplus.??? Хотите купить в Баку [название категории в ед. числе род. падеж] [Бренд] по низкой цене с доставкой по Азербайджану? ?*


Шаблон для категория + фильтр

NEW Title: [Название категории] [параметр фильтра]. Купить [название категории в ед. числе род. падеж] [параметр фильтра] в интернет-магазине, лучшая цена в Азербайджане.

Meta name="Title" content=: [Название категории] [название фильтра]. [название категории в ед. число] [параметр фильтра] по лучшей цене в Баку.

NEW Description: [Название категории] [параметр фильтра] в интернет-магазине Integralplus.??? Хотите купить в Баку [название категории в ед. числе род. падеж] [параметр фильтра] по низкой цене с доставкой по Азербайджану? ?*



Шаблон для категория + 2 фильтра (бренд + фильтр)

NEW Title: [Название категории]. Купить [название категории в ед. числе род. падеж] в интернет-магазине, лучшая цена в Азербайджане. | [параметр фильтра], [параметр фильтра].

Meta name="Title" content=: [Название категории] . [название категории в ед. число] по лучшей цене в Баку.| [параметр фильтра], [параметр фильтра]

NEW Description: [Название категории] в интернет-магазине.??? Хотите купить в Баку [название категории в ед. числе род. падеж] по низкой цене с доставкой по Азербайджану? ?*9494. Интегралплюс | [параметр фильтра], [параметр фильтра]



Шаблон для товаров

NEW Title: [Название товара]. Купить [название товара] в интернет-магазине, лучшая цена в Азербайджане.

NEW Description: [Название товара] в интернет-магазине .??? Хотите купить в Баку [Название товара] по низкой цене с доставкой по Азербайджану? ?*

При задании шаблона, предусмотреть возможность склонения переменных по падежу и числу, к примеру: [brand_name:`ЕЧ`,`РП`], где ЕЧ – единственное число, а РП – родительный падеж. Для сайтов, написанных на php, для этой цели можно использовать библиотеку phpMorphy http://phpmorphy.sourceforge.net/dokuwiki/.


5. Заголовки

На каждой странице сайта реализовать основной заголовок, заключенный в теги

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

. Заголовки, не имеющие отношения к SEO, заключить в теги

-

.

6. Дублирование контента и метаданных

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

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

? уровня вложенности n+1 (уникальный текст и метаданные, размещенные на странице раздела, дублируется на страницы подразделов и производителей категорий товаров)

? фильтрации (текст и метаданные категории не должны переноситься на страницу результата фильтрации)

? не основного способа отображения каталога товаров (при отображении каталога товаров более чем в одном виде со сменой URL, например, в виде списка и сетки изображений)

Важно! Страницы сортировки, сочетание однотипных фильтров, сочетание более двух фильтров, два фильтра одного параметра, альтернативное отображения каталога - закрыть от индексации с помощью мета тега и/или disallow записи в robots.txt .



7. Атрибуты rel=next|prev

Для категорий товаров со страницами пагинации внедрить генерацию Meta-данных rel=next|prev в соответствии с рекомендациями Google https://support.google.com/webmasters/answer/1663744?hl=ru
Основная суть

Допустим, у вас есть контент, и он представлен следующим образом:
www.site.com/catalog/pc/
www.site.com/catalog/pc/page2/
www.site.com/catalog/pc/page3/
www.site.com/catalog/pc/page4/

На первой странице www.site.com/catalog/pc/, необходимо включить следующий блок:

www.site.com/catalog/pc/page2/" />

На второй странице www.site.com/catalog/pc/page2/:

www.site.com/catalog/pc/>
www.site.com/catalog/pc/page3/" />


На третьей странице www.site.com/catalog/pc/page3/ :

www.site.com/catalog/pc/page2/" />
www.site.com/catalog/pc/page4/" />

А на последней странице www.site.com/catalog/pc/page4/:

www.site.com/catalog/pc/page3/" />


Несколько замечаний:

Первая страница содержит только rel=«next».
Страница со второй до последней содержат и rel=«next», и rel=«prev».
Последняя страница содержит только rel=«prev».

Значения href могут быть либо относительным, либо абсолютным URL. И, если вы объявили base в документе, относительные пути будет просчитаны в соответствии с базовым URL.
Разрешено использование значения rel=«previous» как альтернативы.
В случае не правильной разметки, Google продолжит индексировать ваш контент собственной эвристикой, не опираясь на указанный rel.


Что нам это даст:

Передачу веса естественных ссылок на внутренние страницы пагинации на продвигаемую (первую) страницу.


8. Файл правил индексирования robots.txt


Сайт должен содержать файл robots.txt с содержимым:
User-Agent: *
Disallow: /
Host: site.com. Sitemap: www.site.com/sitemap.xml

Где директивой Disallow должны быть закрыты:
  • результаты поиска по сайту, к примеру «Disallow: /search?q=*»;
  • корзину и форму заказа;
  • результаты сортировки в категориях;
  • альтернативное отображение каталога (например, список);
  • страницы со специфическими GET-параметрами;
  • административная часть сайта и прочие служебные страницы доступные поисковому роботу.

Директива Host – указывает основной домен сайта, в нашем случае site.com. Директива Sitemap – указывает расположение карты сайта.

Каждую директиву Disallow желательно описать комментарием, к примеру:

Disallow: /admin #комментарий — запрещает индексировать админпанель

Disallow: /*filter=* #страницы фильтров

Расположить файл по адресу:

www.site.com/robots.txt



9. Карта сайта в формате .xml


По адресу www.site.com/sitemap.xml должна находиться карта в формате .xml (подробнее http://www.sitemaps.org/protocol.php).

Для больших карт, которые генерируются более 200мс, сделать скрипт по обновлению и поставить его в cron (на 1 раз в сутки), либо обновлять по изменению контента. Для небольших карт, которые быстро генерируются, можно отдавать содержимое на лету.

В данном файле указать все продвигаемые и информативно полезные страницы проекта:

? главная страница

? страницы разделов

? страницы категорий товаров

? страницы производителей категорий товаров

? страницы моделей

? информативные страницы (контакты, о магазине и подобные)


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

? URL страницы (<loc>)

? Частота изменения страницы (<changefreq>) - в данном элементе должно указываться:
? главная страница - always
? страницы разделов, страницы категорий товаров, страницы производителей категорий товаров - daily
? страницы моделей - weekly
? информативные страницы – monthly

? Приоритет сканирования (<priority>)
? главная страница - 1
? страницы разделов, страницы категорий товаров, страницы производителей категорий товаров - 0.8
? страницы моделей - 0.6
? информативные страницы - 0.4


В случае, если в файле будет более 50 000 URL, необходимо разбить карту сайта на отдельные файлы, каждый из которых не должен превышать 10 МБ. Тогда корневой файл sitemap.xml будет содержать упоминания других файлов карты сайта:
http://www.sitemaps.org/schemas/sitemap/0.9">

http://www.site.com/sitemap_1.xml



http://www.site.com/sitemap_n.xml





10. Карта сайта в формате .html

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

На последнюю страницу карты сайта необходимо добавить мета-тег

Пример реализации: http://www.gismeteo.ua/sitemap/



11. SEO-элементы

Блочная перелинковка

На странице товара сделать вывод блоков:

1. «Похожие товары» - товары с этой же категории
2. «С этим товаром покупают» - товары, которые покупали в одном заказе с этим.


Блоки содержат 3-5 товаров в зависимости от дизайна и компоновки сайта. Каждый элемент это – изображение, название ссылкой и цена.
Категории товаров или разделы также должны содержать блоки «Новинки», «Популярные товары».


12. Расширенные описания веб-страниц и семантическая разметка с помощью schema.org

Google

Для того чтобы сниппеты отображались нужно на страницу товара добавить следующую разметку:
http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=146645 – отзывы

http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=146750 – товары

На все страницы сайта добавить следующую разметку:
http://support.google.com/webmasters/bin/answer.py?hl=ru&answer=185417 – навигация
Яндекс
Для того чтобы добавить расширенные описания для Яндекса нужно:

Создать yml файл и разместить его в корне сайта, подробнее здесь http://help.yandex.ru/webmaster/?id=1111247
После этого добавить информацию о магазине в яндекс.вебмастер, подробнее здесь
http://help.yandex.ru/webmaster/?id=1112437
Проверить правильность разметки можно здесь: http://www.google.com/webmasters/tools/richsnippets

Внимание! Стоит отметить, что нет 100% гарантии того, что расширенные описания будут отображаться.


Микроформаты официально не поддерживаются на территории Украины. Они находятся в режиме бета-тестирования и ведут себя непредсказуемо – могут появляться и исчезать в разное время, или отображаться только на определенных страницах сайта и не отображаться на других.
Мы рекомендуем метод разметки schema.org (http://schema.org/docs/gs.html ), т.к. большая часть сайтов, у которых отображаются микроформаты, используют именно schema.org, и соответственно большая вероятность того, что микроформаты будут отображаться на Вашем сайте.

Как размечать контент с помощью schema.org читайте тут:
https://help.yandex.ru/webmaster/schema-org/intro-schema-org.xml



Хлебные крошки

Вывести на всех страницах сайта блок «хлебные крошки» (breadcrumbs). Блок расположить над заголовком страницы.

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

Пример html-кода:

/


/


Страница



Приведенный код сразу содержит разметку микроформатов для «хлебных крошек». Подробнее желательно прочитать тут: https://support.google.com/webmasters/answer/185417?hl=ru
14. Исходящие ссылки
Все исходящие ссылки на сайте должны быть закрыты от индексации поисковыми системами.

Пример закрытой ссылки от индексации поисковыми системами Google и Yandex:
текст

Рекомендуется реализовать технически возможность автоматического закрытия все существующих ссылок и тех, что будут появляться позднее.
15. Информационная часть проекта
Создать информационные разделы «Новости», «Обзоры» и «Статьи». Добавить ссылку на эти разделы в навигацию сайта. В нашем случае уже реализовано.

Анонсы материалов, размещенных в данных разделах должны анонсироваться в специальных блоках на страницах:
? главная страница
? раздел
? категория товара
? производитель категории товара и содержать прямые ссылки на полные их версии.


На странице категории товаров вывести блок с анонсами привязанных информационных разделов. Например, анонсы новостей об смартфонах должны выводиться только на странице раздела "Смартфоны", новости о смартфонах Apple только на странице производителя категории товаров " Смартфоны Apple ".
16. Атрибуты "alt" и "title" изображений
Для всех изображений на сайте прописать атрибуты «alt» и "title".
Для изображений товаров атрибут alt должен полностью дублировать название товара, атрибут title должен формироваться по шаблону: [название товара] + [доп. Слово].

Перечень дополнительных слов представлен ниже:
  • купить
  • цена
  • продажа
  • описание
  • фото
  • заказать
  • приобрести
  • цены


Для логотипа сайта необходимо прописать title картинки «интернет-магазин Integralplus.az»
17. Перенести коды отслеживания
Необходимо перенести код Google Analytics, код E-commerce, код Google Tag Manager.
Можем выслать данный документ в виде исходного файла
Понравилась статья? Поставьте свою оценку, чтоб мы понимали о чем писать еще.
Пример технического задания на создание интернет-магазина. Часть #3
Нет голосов
image
У Вас есть проект?

Давайте обсудим его. Придумаем. И сделаем!

Оставить заявку

Не пропустите. Похожие публикации