У цій темі ми хотіли би розповісти про правильне проектування інтернет-магазину та про те, що варто врахувати при створенні магазину, щоб не довелося переробляти половину сайту для початку просування. Стаття розбита на дві частини:
- Теорія: про те, що в принципі можна врахувати в SEO інтернет-магазину і як це працює.
- Чек-лист: 80 пунктів, по яких легко перевірити, наскільки зручно буде просувати ваш сайт після розробки.
Отже, теорія
Основні вимоги до сайту можна згрупувати так
- Структура розділів і навігація;
- Структура сторінок;
- Нарощування семантики;
- Комерційні фактори;
- Технічні фактори.
Структура розділів
Пошуковики нормально ранжують сторінки сайтів на три рівня вкладеності (чотири, але ми не враховуємо головну). Тобто, сторінки, які не знайти в три кліка з головною, залишаються не вивченими та не займуть високих позицій у видачі.
Це не означає, що в каталозі може бути максимум три рівня вкладеності. Але це значить, що потрібно допомогти пошуковику дістатися до них в необхідне число переходів.
По-перше, 2-3 рівня каталогу можна вивести на головній у вигляді випадаючого меню.
Важливо, щоб меню завантажувалося разом зі сторінкою, а не завантажувалося динамічно при наведенні.
Ось приклад, як ми проектували меню для сайту одягу. З кожного пункту верхнього меню випадає кілька розділів, а з них — кілька підрозділів. Це дозволяє пошуковим системам індексувати кілька сотень сторінок “в один клік”
Якщо з якихось причин це зробити неможливо, то розділи перших двох рівнів каталогу можна продублювати в підвалі головної сторінки сайту. Ось приклад з того ж сайту.
Таким чином, пошуковик зможе зібрати основні сторінки каталогу в один перехід з головної та проіндексувати в 3 переходи каталог з п’ятьма рівнями вкладеності.
Структура сторінок
Яндекс ранжує сайти за допомогою алгоритму суть якого у визначенні загальних ознак сайтів, корисних користувачеві. Тому при проектуванні основних сторінок (головна, лістинг товарів і картки товару) важливо визначити, яким запитам вони повинні відповідати і які існують загальні ознаки сторінок, що займають топ видачі по цим запитам.
Google в цьому питанні влаштований дещо простіше: він як і раніше сильно орієнтований на тексти і посилання на ваш сайт. Так що місце під тексти на сторінках також важливо закласти.
Ось частина аналізу, виконаного нами для інтернет-магазину квітів.
Беремо запит “Купити букет з червоних троянд”.
Відкриваємо перші 4 сайту. Що їх об’єднує:
- Все це — списки товарів (запит не веде на окремий товар);
- Близько 30 товарів на сторінці;
- Фільтр з параметрами;
- Слово krasnye/chervoni в посиланні;
- Сортування по ціні і популярності;
- H1 і title із входженням слів “червоні” і “троянди”.
Що їх не об’єднує:
- Не на всіх є текст внизу;
- Різна довжина title;
- H1 і не title скрізь включають слово “букет”;
- Значить, ці параметри не критичні в даному запиті.
А ось як ми поклали зібрані вимоги у прототип сайту:
Що тут важливо:
- Місце під великий заголовок;
- Ланцюжок переходів;
- Фільтрація;
- Сортування;
- Теги для переходу з посадкових сторінок;
- Знижка та хіт;
- Інформація по доставці.
На що в принципі можна дивитися, аналізуючи сайти з топа видачі:
- Кількість товарів;
- Ціни товарів (не у всіх товарах їх допустимо публікувати);
- Наявність текстів;
- Наявність фільтрів;
- H1;
- Фото товарів;
- Наявність ланцюжка переходів.
Якщо відповіддю на запит є картка товарів, то додаються:
- Опис;
- Відгуки;
- Інструкції;
- Доставка (прямо в картці);
- Способи оплати.
Більш повний список буде далі у чек-листі за комерційним факторів.
Нарощування семантики
Прекрасне джерело додаткової семантики на сайті — властивості товарів.
Групуючи товари на основі властивостей, можна створювати тисячі сторінок під різні запити.
На сторінці з товарами, відібраними за властивостями, робляться людино-зрозуміла адреса (“человеко-понятный url” або ЧПУ), h1, title, відповідні запиту, description для фрагменту, іноді — текст.
Для цього варто спочатку закласти на сайті місце під теги для фільтрації. Їх можна використовувати як для індексації сайту пошуковими системами, так і для зручності користувача, доповнюючи ними вибір товарів по розділам. Наприклад, у розділі «ванни» можна створити теги по властивостям «сталева» «170х70» «kaldewei».
В результаті ми отримаємо сторінку, що ідеально відповідає на НЧ-запит де можна розмістити такі теги, а у невеликій кількості — вже над товарами (найпопулярніші). Їх же можна посилити картинками-поясненнями.
Ось фрагмент прототипу для сайту по доставці квітів. Тут я виділив “теги” для переходу на посадкові сторінки.
У великій кількості — під товарами. Це дозволить скоротити рівень вкладеності для таких сторінок.
Ще один варіант — у додаткових пунктах меню. Приклад — поле “привід” на тому ж сайті кольорів
Універсальний варіант — у фільтрі. Зазвичай фільтр на сайті не індексується пошуковими системами, так як являє собою форму, що передбачає відправку її користувачем. Однак, на властивості у формі можна прив’язати посилання, відкривають конкретні сторінки.
Комерційні фактори
Пошуковики чітко діляьб сторінки на інформаційні і комерційні. Як правило, комерційні видаються у відповідь на запити, що передбачають купівлю. Наприклад, запит може містити слово «купити» або топонім (географічна назва). Пасатижі в Києві — комерційний запит. А «Як вибрати пасатижі» — інформаційний. А от запит «Пасатижі» приведе нас на змішану видачу: тут і вікіпедія і магазини інструментів.
Для комерційних сторінок Google використовує так звані комерційні чинники ранжирування.
Я наведу тут 10 основних, а розширений список винесу в чекліст
- Наявність адаптивної версії;
- Наявність ціни товару;
- Наявність валюти (знак гривні при цьому він не сприймає);
- Варіанти оплати;
- Міський номер;
- Час роботи;
- Фото;
- Опис;
- Гарантії;
- Новини;
- Про компанію.
Поведінкові фактори
Пошукові системи використовують ПФ, щоб зрозуміти, наскільки сайт буде корисний відвідувачеві з того чи іншого запиту.
Що є поведінковими факторами?
- Час, проведений на сайті.
При цьому пошуковик враховує рухи мишею і прокрутку сторінок, щоб визначити зацікавленість відвідувача.
- Останній клік на пошуку.
Якщо відвідувач після візиту на сайт, закрив пошуковик, значить він знайшов те, що шукав. Сайт отримує «плюсик».
- Єдиний клік на пошуку.
Якщо віджет так залучив відвідувача, що він відкрив сайт першим. І при цьому сайт виявився настільки корисний, що відвідувач закрив пошук. Це теж «плюсик».
- Відмови.
Швидкий відхід з сайту після відкриття сторінки — це мінус для пошуковика.
Що важливо закласти при проектуванні для поліпшення ПФ
Для правильного проектування інтернет-магазину слід зв’язати сторінки смисловими посиланнями: в товарі розмістити аналоги і статті про використання. У лістингу товарів розмістити швидкі посилання на збірки товарів і «супові набори» для конкретних завдань (шуруповерт + зарядка + свердла + біти).
- Помітні кнопки дій і заклики до дії (CTA).
- Контент.
Розмістити максимум інформації, щоб її не доводилося «добирати» в інших джерелах: фото, відео, огляди, характеристики, відгуки, інструкції.
- Максимально помітний кошик.
В момент додавання товару у кошик, покупець повинен зрозуміти, де він знаходиться, побачити кількість товару і його вартість.
- Максимально зручне замовлення.
На етапі оформлення замовлення, всі поля повинні бути максимально логічні і повинно бути зрозуміло, для чого збираються ті чи інші дані. Нерозумно, наприклад, питати адресу покупця при доставці самовивозом. Найкраще рішення – це коли в один екран влазять всі потрібні поля: віджет кошика, способи оплати і доставки.
Технічні фактори
Хоча цей блок має дуже умовне відношення до проектування, його все ж варто вивчити на цьому етапі, щоб не перевантажувати сторінки понад необхідного, і правильно вибирати технології.
- Швидкість сайту.
На ринку існує міф, що Google Pagespeed вимірює швидкість сайту. Насправді це не зовсім так. GPS показує чек-лист оптимізації верстки сторінки сайту. Тобто:
Кешування браузером;
Стиснення передаваних даних;
Надмірність зображень;
Надмірність скриптів;
Це важливо, але це не швидкість.
Тому до його показників ставимося без фанатизму.
Ось ми довели сайт до 100 одиниць на ПК і мобільних. Ні на візуальну швидкість, ні на SEO-позиції це не вплинуло.
Так що якщо сайт не в «червоній зоні», то цього вже достатньо.
- Швидкість відповіді сторінки.
Можна поміряти браузером. Ось простий приклад. Тут чим менше, тим краще, але якщо сторінка віддається сервером менш ніж за півсекунди, то це вже непогано.
- Розмір сторінки.
Можна виміряти через pingdom tools (для сайтів з України обирайте Test from – Europe). Тут немає універсальних порад, але зазвичай якщо сторінка більше 3 мегабайт, то це привід насторожитися.
- Технології і навігація.
Сайт буде легко індексуватися, якщо посилання буде вести на сторінки, що містять запитаний контент. Якщо ж сайт побудований на AJAX, то важливо щоб при запиті даних змінювався URL сторінки і при відкритті цього URL (або оновленні сторінки), відкривалися ті ж дані, що і отримані без перезавантаження.
Проектування інтернет-магазину: Чек-лист
З теорії видно, що один і той же пункт може бути одночасно і комерційним фактором і фактором юзабіліті і технічним чинником. Тому чек-лист згрупований не за типами факторів, а за місцем їх застосування
Загальні фактори
- Легка адаптивна версія;
- Верстка без косяків;
- Відсутність орфографічних помилок;
- Відсутність нав’язливих спливаючих вікон;
- Рядок пошуку.
Головна сторінка
- Розгорнутий каталог;
- Контакти в шапці;
- Відгуки на головній;
- Великий банер з акціями;
- Рекомендовані товари;
- Хіти/акції;
- Копірайт угода в підвалі.
Про компанію/Контакти
- Міський номер;
- Гаряча лінія 8-800;
- Контакти відділів і співробітників;
- Адреси офісу та філій;
- Міста доставки;
- Реквізити;
- Facebook;
- Instagram;
- VK;
- Опис компанії;
- Відгуки про компанію;
- Сертифікати / ліцензії;
- Електронна пошта в домені сайту;
- Можливість залишити заявку;
- Онлайн-чат;
- Схема проїзду;
- Таблиця з цінами в послугах.
Логіка каталогу
- Каталог організований від загального до приватного;
- Очевидно, де шукати той чи інший товар;
- Товар доступний в 3 кліки з головної;
- Ланцюжок переходів;
- Фільтрація за властивостями товару;
- Посадочні сторінки під набори властивостей.
Список товарів
- Великі фото;
- Ціна;
- Валюта (гривні краще позначати як грн.);
- Знижки на товари;
- Рейтиг товару в зірочках;
- Індексується посторінкова навігація;
- Кількість товарів в списку аналогічно топовим сайтам по потрібному запиту;
- Сортування (ціна, популярність, відгуки);
- Функція порівняння товарів.
Картка товару
- Наявність товару;
- Строк поставки при відсутності;
- Умови доставки;
- Детальний опис;
- Максимум характеристик;
- Кілька фото;
- Відео;
- Інструкція;
- Пропозиція супутніх товарів (в межах 2 екранів від товару);
- Пропозиція товарів-аналогів;
- Відгуки на товар;
- Пропозиція залишити відгук;
- Питання-відповідь;
- Гарантія та повернення;
- Помітна кнопка “в кошик”;
- Покупка в один клік;
- Обране.
Кошик
- Віджет кошика помітний на сторінках;
- В віджеті є ціна;
- В віджеті є загальна кількість;
- Ціна за одиницю товару та за кількість товару (на сторінці кошика);
- Вибір кількості;
- Активні посилання на товар в списку;
- Фото товару в списку;
- Хоча б мінімальний опис товару;
- Можливість відкласти товар;
- Перерахунок без оновлення сторінки;
- Мінімальні умови доставки;
- Пропозиція супутніх товарів;
- Відсутність аналогів (не переконуємо, клієнт вже обрав).
Оформлення замовлення
- Кілька способів доставки;
- Наявність самовивозу;
- Наявність безкоштовної доставки;
- Кілька способів оплати;
- Захоплення контактів покупця;
- Логічна послідовність полів (спочатку місто, потім адреса);
- Відсутність зайвих полів (адреса не потрібна при самовивезенні);
- Підказка при заповненні полів;
- Видно загальну сума замовлення з доставкою;
- Оферта на видному місці.
В якості резюме хочу сказати, що без проектування інтернет-магазину, скоріш за все, при створенні сайту не будуть враховані вимоги до подальшого просування, як правило, це призводить до того, що вже готовий сайт доводиться на 30-50% переробляти і перезаповнювати, що віддаляє результати мінімум на півроку.
