Разработка сайтов и последующая техническая поддержка — наша основная специализация, поэтому нас регулярно просят посчитать стоимость проекта без технического задания или просто показать, как такое задание должно выглядеть. Именно поэтому мы собрали и выложили в открытый доступ типовой пример полноформатного ТЗ на создание интернет-магазина электроники и бытовой техники. Это третья часть документа: макеты страниц и полный блок SEO-требований. На его основе клиенты могут составлять собственные задания под свои проекты.
Макеты страниц
Полноформатное техническое задание обязательно содержит макеты — чтобы и заказчик, и команда разработки одинаково понимали, что именно будет на экране. В этом примере описаны макеты тринадцати ключевых страниц магазина.
- Главная страница
- Страница каталога
- Детальная страница товара
- Сравнение товаров
- Корзина
- Оформление заказа, шаг №1
- Оформление заказа, шаг №2
- Оформление заказа, шаг №3
- Личный раздел «Данные покупателя»
- История заказов
- Личный раздел «Список желаний»
- Личный раздел «Лист ожидания»
- Страница «Результаты поиска»
Адреса страниц (URL) и структура сайта
Дублирование URL
- Каждой странице сайта — статической или сгенерированной динамически — присвоить только один уникальный адрес.
- Каждый товар сделать доступным только по одному адресу, даже если его отнесли сразу к нескольким категориям товаров.
- Фильтры должны давать один конечный URL независимо от последовательности, в которой их выбирал пользователь.
Требования к формату URL
По возможности новую структуру адресов рекомендуем реализовать по такому принципу.
| Тип страницы | Формат URL |
|---|---|
| Главная | [домен].[доменная зона]/ |
| Портальная страница (Смартфоны и телефоны — если в ассортименте появятся стационарные и другие виды телефонов) | [домен].[доменная зона]/[портальная страница]/ |
| Раздел (Смартфоны и аксессуары) | [домен].[доменная зона]/[раздел] |
| Категория (Смартфоны) | [домен].[доменная зона]/[раздел или портальная страница]/[категория]/ |
| Фильтр (Android) | [домен].[доменная зона]/[категория]/[фильтр]/ |
| Карточка товара (Смартфон LG D325 L70 Dual Black) | [домен].[доменная зона]/[категория]/[карточка товара].html |
| Информационные страницы (О магазине) | [домен].[доменная зона]/[информационная страница].html |
В соответствии со структурой стоит создать несколько портальных страниц — в частности те, на которые будут вести ссылки в мегаменю. Если на сайте есть поиск или сложная фильтрация по параметрам, в адресе допускается использовать символы ? и = не более одного раза. Все остальные небуквенные и нецифровые символы, а также пробел, кроме -, _ и # (для перехода внутри страницы), не использовать.
URL страниц оформления заказа
Адреса корзины, формы заказа и страницы подтверждения заказа («спасибо за заказ») должны быть статическими и неизменными для всех пользователей и для покупки любого товара. Идентификаторы заказа и посетителя в URL передавать нельзя.
Скорость загрузки и редиректы
Для стабильной и быстрой индексации время отдачи HTML-кода страницы должно быть не больше 200–300 мс, а полная загрузка страницы — не дольше 2–3 секунд. Рекомендации по оптимизации собраны в справочнике Google PageSpeed.
Если требования не выполняются, в работу идёт стандартный перечень мер.
- Настроить кеширование сайта.
- Оптимизировать код генерации страниц.
- Сменить хостинг на более производительный: например, с виртуального перейти на VDS или Dedicated.
- Оптимизировать размеры картинок, js- и css-файлов.
- Объединить множество js-файлов в один.
- Объединить множество css-файлов в один.
- Использовать CDN для статического контента.
- Добавить заголовки Expires для изображений, css, js и другого статического содержимого.
301-редирект
На сайте должны быть настроены правила переадресации 301. У каждой страницы только один доступный пользователю и поисковой системе адрес, а все остальные её вариации, которые автоматически генерирует CMS, перенаправляются на основной адрес описанного выше формата. У сайта должен быть один основной домен: если к нему прикреплены другие, с них тоже ставим 301-редиректы. У каждого сайта есть как минимум одно зеркало с www.
В файле .htaccess это делается связкой RewriteEngine On, набора условий RewriteCond по значению HTTP_HOST для каждого зеркала и итогового правила RewriteRule с флагами [R=301,L], которое переадресовывает все страницы зеркал на основной домен.
- Дубли со слешем. Сделать редирект с адреса без слеша на адрес со слешем — например, с /catalog/smartphones на /catalog/smartphones/. При этом проверить, чтобы для страниц с расширением (скажем, /goods/smartphones/asus-zenfone-5-a501cg-16gb-charcoal-black-16gb.html) редиректа на вариант со слешем в конце не было.
- Дубли главной страницы. Исключить адреса /index.php и /index.html, перенаправив их 301-м на корень сайта.
- Множественные слеши. Адрес вроде /catalog/////smartphones/ свести к /catalog/smartphones/ одним редиректом.
- Первая страница пагинации. Для категорий и разделов адрес /catalog/smartphones/page1/ перенаправить на /catalog/smartphones/.
Если входной точкой CMS является скрипт index.php, чтобы избежать циклического перенаправления, удобнее сделать редирект на уровне PHP: прочитать REQUEST_URI, найти в нём index.php, отдать заголовок 301 и Location уже без этого фрагмента. Такой код заодно обработает и внутренние страницы: /category/index.php превратится в /category/. Точно так же стоит поступать с множественными слешами: большинство готовых примеров для .htaccess обрабатывают эту ситуацию неправильно и убирают лишние слеши целой цепочкой редиректов, тогда как регулярное выражение в точке входа (шаблон #/{2,}# и замена на один слеш) делает это за один шаг.
Несуществующие URL и страница 404
Любая несуществующая страница сайта должна показывать страницу 404 и отдавать код 404. Для проверки стоит внести ошибки в разные части адреса и для разных модулей сайта — их могут обрабатывать совершенно разные механизмы.
- Ошибка в названии информационной страницы: /cXntacts
- Ошибка в названии товара: /catalog/obXect1.html
- Ошибка в названии раздела каталога: /cXtalog/object1.html
- Ошибка внутри стороннего модуля: /other-module/itXm.html
- Выход за пределы пагинации: если в каталоге 10 страниц, подставьте 11 — должна отдаваться 404, а не пустая страница /catalog/11
Технически страница 404 должна иметь один постоянный адрес — например, /404.html. Если пользователь попадает на /catalog/smartphones/error-page1515, делаем 301-редирект на /catalog/smartphones/404.html. Когда в панели для вебмастеров появляются ошибки 404, надо отслеживать, на какие именно адреса они ведут, и создавать для них правила перенаправления.
Уникальный контент и шаблоны метаданных
На страницах разделов, категорий товаров, брендов внутри категорий, а также на страницах фильтров нужно внедрить возможность размещать уникальные оптимизированные тексты и метаданные: оптимизированный текст в категории под списком элементов, заголовок страницы первого уровня (на любой странице такой элемент должен быть только один), а также title, description и остальные служебные теги.
Шаблонные метаданные
Отдельно реализуем шаблонные оптимизированные метаданные — на всех страницах сайта. Это набор шаблонов: для разных групп страниц применяются разные, а внутрь в зависимости от содержимого страницы подставляются значения переменных.
- Раздел — Смартфоны и аксессуары
- Категория товара — Смартфоны
- Бренд — Смартфоны Samsung
- Фильтры или наборы фильтров — Смартфон Samsung белый
- Название модели — Смартфон Samsung Galaxy S6 32Gb White Pearl; в большом количестве категорий эта переменная должна быть суммой переменных {категория товара} {бренд товара} {название товара}
Пример шаблона для категорий. Title: [Название категории]. Купить [название категории в единственном числе, родительный падеж] в интернет-магазине, лучшая цена в Азербайджане. Meta name="Title": [Название категории]. [Название категории в единственном числе] по лучшей цене в Баку. Description: [Название категории] в интернет-магазине. Хотите купить в Баку [название категории в единственном числе, родительный падеж] по низкой цене с доставкой по Азербайджану?
Подставив переменные, получаем: «Планшеты. Купить планшет в интернет-магазине, лучшая цена в Азербайджане» или «Кофеварки. Купить кофеварку в интернет-магазине, лучшая цена в Азербайджане» — и соответствующие description с названием магазина Integralplus.
По тому же принципу строятся шаблоны для связок категория + бренд, категория + фильтр и категория + два фильтра: в заголовок и описание дополнительно подставляются название бренда или параметры фильтра. Для страниц пагинации к базовым title, meta title и description добавляется «Страница №2», «Страница №3» и так далее.
Заголовки и дублирование контента
На каждой странице сайта реализуем основной заголовок первого уровня. Он должен задаваться и автоматически, и вручную и содержать SEO-ориентированное название страницы или название товара. Заголовки текстов берём в теги второго уровня, а заголовки, которые не относятся к SEO, — в теги третьего и более низких уровней.
Все тексты и метаданные на сайте должны существовать в единственном экземпляре. Проверяем и убираем дублирование в четырёх типичных местах.
Пагинация
Текст и метаданные, размеченные на первой странице каталога, дублируются на всех страницах пагинации.
Уровень вложенности n+1
Уникальный текст и метаданные со страницы раздела переносятся на подразделы и страницы брендов внутри категорий.
Фильтрация
Текст и метаданные категории не должны попадать на страницу результата фильтрации.
Альтернативное отображение
Каталог, показанный более чем в одном виде со сменой URL — списком и сеткой изображений, — создаёт пары страниц-близнецов.
Пагинация, robots.txt и карты сайта
Атрибуты rel=next и rel=prev
Для категорий товаров со страницами пагинации внедряем генерацию метаданных rel=next и rel=prev — по рекомендациям Google. Логика простая.
- Первая страница. Содержит только rel=«next» — ссылку на следующую страницу пагинации.
- Страницы со второй до предпоследней. Содержат и rel=«next», и rel=«prev».
- Последняя страница. Содержит только rel=«prev».
Значения href могут быть относительными или абсолютными адресами; если в документе объявлен base, относительные пути будут считаться от базового URL. В качестве альтернативы разрешено использовать значение rel=«previous». При неправильной разметке Google продолжит индексировать контент собственной эвристикой, не опираясь на указанный rel. Что это даёт: передачу веса естественных ссылок с внутренних страниц пагинации на продвигаемую первую страницу.
Файл правил индексирования robots.txt
Сайт должен содержать файл robots.txt по адресу /robots.txt. Директива Host указывает основной домен сайта, директива Sitemap — расположение карты сайта. Директивами Disallow закрываем служебные и мусорные разделы.
- Результаты поиска по сайту — например, Disallow: /search?q=*
- Корзину и форму заказа
- Результаты сортировки в категориях
- Альтернативное отображение каталога (например, списком)
- Страницы со специфическими GET-параметрами
- Административную часть сайта и другие служебные страницы, доступные поисковому роботу
Каждую директиву Disallow желательно сопроводить комментарием — скажем, «Disallow: /admin — запрещает индексировать админпанель» или «Disallow: /*filter=* — страницы фильтров».
Карта сайта в формате .xml
По адресу /sitemap.xml должна лежать карта в формате .xml — по спецификации sitemaps.org. Для больших карт, которые генерируются дольше 200 мс, делаем скрипт обновления и ставим его в cron раз в сутки или обновляем по изменению контента; небольшие карты можно отдавать на лету.
В файле указываем все продвигаемые и информативно полезные страницы проекта: главную, страницы разделов, категорий товаров, брендов внутри категорий, страницы моделей и информативные страницы вроде контактов и «О магазине». Для каждой страницы обязательны адрес, частота изменения и приоритет сканирования.
| Тип страницы | changefreq | priority |
|---|---|---|
| Главная страница | always | 1 |
| Разделы, категории товаров, бренды в категориях | daily | 0.8 |
| Страницы моделей | weekly | 0.6 |
| Информативные страницы | monthly | 0.4 |
Если в файле будет больше 50 000 адресов, карту надо разбить на отдельные файлы, каждый из которых не превышает 10 МБ. Тогда корневой sitemap.xml будет содержать перечень остальных файлов — sitemap_1.xml, sitemap_2.xml и так далее.
Карта сайта в формате .html
Отдельно создаём карту сайта в формате HTML и ставим сквозную ссылку на неё со всех страниц сайта. Карта должна включать все страницы и быть многоуровневой — не более 100 ссылок на одной странице. На последнюю страницу карты добавляем мета-тег, который закрывает её от дальнейшего обхода.
SEO-элементы: перелинковка и микроразметка
Блочная перелинковка
На странице товара выводим два блока: «Похожие товары» — товары из той же категории, и «С этим товаром покупают» — товары, которые заказывали в одном заказе с текущим. Блоки содержат 3–5 товаров в зависимости от дизайна и компоновки сайта; каждый элемент — это изображение, название ссылкой и цена. Категории товаров и разделы также должны содержать блоки «Новинки» и «Популярные товары».
Расширенные описания и семантическая разметка
Чтобы в поисковой выдаче показывались расширенные сниппеты, на страницу товара добавляем разметку отзывов и разметку товаров, а на все страницы сайта — разметку навигации. Мы рекомендуем именно метод schema.org: большинство сайтов, у которых расширенные описания действительно отображаются, используют его.
Микроформаты официально не поддерживаются на территории Украины. Они находятся в режиме бета-тестирования и ведут себя непредсказуемо — могут появляться и исчезать в разное время или отображаться только на определённых страницах сайта.Из текста технического задания
Хлебные крошки
На всех страницах сайта выводим блок хлебных крошек (breadcrumbs) и располагаем его над заголовком страницы. Содержимое блока — путь к текущей странице, начиная с главной и заканчивая текущей, причём текущая уже без ссылки. В самом коде блока сразу закладываем микроразметку — детали описаны в справке Google о навигационных цепочках.
Изображения, исходящие ссылки и информационная часть
Атрибуты alt и title изображений
Для всех изображений на сайте прописываем атрибуты alt и title. Для изображений товаров alt полностью дублирует название товара, а title формируется по шаблону [название товара] + [дополнительное слово]. Перечень дополнительных слов: купить, цена, продажа, описание, фото, заказать, приобрести, цены. Для логотипа сайта прописываем title картинки «интернет-магазин Integralplus.az».
Исходящие ссылки
Все исходящие ссылки на сайте должны быть закрыты от индексации поисковыми системами. Кроме того, рекомендуем технически реализовать возможность автоматически закрывать как все имеющиеся ссылки, так и те, что появятся позже.
Информационная часть проекта
Создаём информационные разделы «Новости», «Обзоры» и «Статьи» и добавляем ссылки на них в навигацию сайта. Анонсы материалов из этих разделов должны выводиться в специальных блоках на главной странице, в разделе, в категории товара и на странице бренда внутри категории — с прямыми ссылками на полные версии материалов.
На странице категории товаров выводим блок с анонсами привязанных информационных разделов. Например, анонсы новостей о смартфонах должны показываться только в разделе «Смартфоны», а новости о смартфонах Apple — только на странице бренда «Смартфоны Apple».
Коды отслеживания
Отдельным пунктом технического задания идёт перенос кодов аналитики: Google Analytics, код электронной коммерции и Google Tag Manager. Это та часть, о которой чаще всего вспоминают уже после запуска — и теряют историю данных, поэтому фиксируем её в ТЗ заранее.
