Розробка сайтів і подальша технічна підтримка — наша основна спеціалізація, тому нас регулярно просять порахувати вартість проєкту без технічного завдання або просто показати, як таке завдання має виглядати. Саме тому ми зібрали й виклали у відкритий доступ типовий приклад повноформатного ТЗ на створення інтернет-магазину електроніки та побутової техніки. Це третя частина документа: макети сторінок і повний блок 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. Це та частина, про яку найчастіше згадують уже після запуску — і втрачають історію даних, тому фіксуємо її в ТЗ заздалегідь.
