ПЛЕТІНКА — сайт для майстрині плетених виробів

Задача

До сайту у Вікторії не було нічого, що можна показати цілісно, — тільки інстаграм. При цьому в неї вже були домовленості з кількома магазинами про викладку виробів, і щоразу бракувало простої речі: посилання, яке можна лишити замовнику замість добірки фото в месенджері.

Що видно з ніші без розпитувань: у handmade головна проблема не в тому, що роботи погані, а в тому, що їх ніде подивитись цілісно. Інстаграм показує стрічку, де вчорашній кошик уже під десятком сторіс, ціни в директі, а на пошуковий запит «плетені кошики ручної роботи» акаунт не знаходиться взагалі.

Є ще одна складність, якої в інших нішах немає. Паперова лоза — матеріал, про який більшість чує вперше, і перша реакція завжди однакова: «це ж папір, він розлізеться». Поки людина не зрозуміла, з чого зроблена річ, ціну вона не сприйме, хоч би яке гарне було фото.

Тому сайт мав зробити три речі: зібрати роботи в одному місці, пояснити матеріал і стати тим, що взагалі можна знайти в Google.

Що зробив

Вітрина й каталог — різні речі

На сторінці два різні блоки, і це навмисно. Міні-вітрина показує вибрані роботи великими кадрами, вона працює на враження. Каталог «У наявності зараз» відповідає на питання «а що ще буває», він працює на замовлення. Змішувати їх в одну сітку означає програти обидві задачі одразу. Категорій у майстрині п'ять: кошики та кашпо, настінний декор, сервірування столу, подарункові набори, для улюбленців. Шоста лінія, світильники й люстри, робиться тільки під замовлення, тому я виніс її на другу сторінку.

Каталог, дошка майстерні й галерея — окремі файли в рамці

Три найважчі секції сайту живуть окремими документами і підвантажуються у iframe лише тоді, коли ви до них доскролили. Кожен зі своїм набором бібліотек. Так jQuery, GSAP і Draggable не лежать у головному потоці сторінки й не гальмують перший екран.

Стіна фотографій зібрана з трьох колонок кадрів, які їдуть назустріч одна одній; клік відкриває великий знімок з описом. Дошка майстерні — це п'ятнадцять фотографій, розкиданих по столу, їх можна тягати мишею і пальцем, підписи рукописним шрифтом: «Пшеничні колоски», «Плетений світильник», «Торшер-колона». Обертова галерея показує двадцять робіт, вони розгортаються по скролу, клік відкриває лайтбокс.

Одна геометрія на два екрани — але без вгадування

Стіна фото на телефоні не поміщається: на комп'ютері вона зсунута вправо й нахилена, на телефоні це три вузькі колонки по центру без нахилу. Раніше версію вибирав сам вкладений файл, і на комп'ютері він встигав на мить побачити себе вузьким, будував мобільну стіну, а потім вона стрибала в десктопну. Я прибрав вгадування зовсім: потрібний вигляд тепер передає батьківська сторінка прямо в адресі рамки. Стрибка немає.

Текстовий дублер каталогу — заради пошуку

Каталог живе в рамці, а пошукові роботи й мовні моделі вкладені документи не читають і JS не виконують. До 17 серпня в коді самої сторінки не було жодного слова про товари: ні Google, ні AI не бачили, що тут узагалі щось продають. Тому під рамкою каталогу я поклав звичайний текстовий список: шість виробів з вагою і габаритами. Він тримається синхронним з розміткою і з файлом для мовних моделей, і саме він робить товари існуючими для пошуку.

Шість виробів — з вагою і сантиметрами

Кошик для квітів важить 430 г при розмірі 40 × 18 × 9 см. Вазон-декор на дерев'яній основі: 450 г, висота 32 см. Кашпо-пузатик: 185 г. Кошик-декор на дерев'яній основі: 1 кг при довжині 47 см. Панно кругле на стіну: 1,225 кг, діаметр 63 см. Лежанка для собак і котів: 700 г. Ці ж числа я тримаю однаковими в трьох місцях одразу — на сторінці, в розмітці й у текстовому списку. У ручній роботі габарити не формальність: людина купує річ у конкретний куток, і «десь такий кошик» її не влаштовує.

Цін на сайті немає — і це рішення власниці

16 серпня Вікторія попросила зняти ціни, і я зняв. Замість цінника на кожній роботі стоїть бирка «У продажу», а в розмітці лишилась валюта без суми: так пошуковик розуміє, що це магазин, і не показує неіснуючої ціни. Вартість Вікторія називає сама, у Telegram: замовлення йдуть напряму до майстрині, без менеджерів між нею і замовником. Це свідоме рішення, а не недороблена сторінка: у handmade ціна часто залежить від розміру й кольору, які замовник назве.

Друга сторінка — «на замовлення»

Сайт не односторінковий. Друга сторінка називається «Що ще можемо сплести з паперової лози»: світильники й абажури, хлібниці, кошики для сервірування, настінний декор. Наявності там немає: це приклади форм, які майстриня повторить під ваш розмір і колір. Розмітку я дав їй свою (добірка, послуга і хлібні крихти), тому в пошуку вона живе окремою сторінкою, а не хвостом головної.

Дев'ять питань, на які відповідають до листування

FAQ тут не для галочки. Що таке паперова лоза; чим вона відрізняється від ротангу й натуральної лози; чи можна саджати квіти прямо в кашпо; чи безпечні вироби й світильники; терміни виготовлення (прості речі 3–7 днів, світильники й люстри 2–6 тижнів); свій розмір і колір; доставка; догляд; оплата. Два питання, про ротанг і про посадку квітів, я дописав уже після запуску, 26 серпня: виявилось, що люди шукають саме це.

Обличчя майстрині

Окремий блок про Вікторію і про те, як народжується виріб. У handmade купують не товар, а конкретну людину: анонімний магазин у цій ніші програє сторінці з ім'ям і фото навіть при кращих цінах. У розмітці я виніс майстриню окремою сутністю зі своїм досвідом, а не рядком у контактах.

Окрема мобільна версія

На телефоні відкривається окрема збірка, зроблена під вузький екран. Комп'ютерна версія на вузькому екрані передає вас мобільній, мобільна на широкому повертає назад; пороги розведені так, що зациклитись неможливо. Для перевірки я лишив обидва прямі входи.

Розмітка магазину

На головній три блоки: магазин з майстринею і сайтом одним графом, список із шести виробів з вагою й габаритами, і дев'ять питань FAQ. Ще один набір — на другій сторінці. Google бачить не блог про плетіння, а магазин; відповіді з FAQ можуть показуватись прямо у видачі.

Власний домен

Не піддомен на моєму сервері, а pletinka.com. Для магазину це не марнославство: домен третього рівня в адресному рядку читається як «тимчасово», і на етапі оплати це має значення.

Технічно

• 11змістових секцій + друга сторінка
• 35фотографій у трьох інтерактивних блоках
• 6виробів з вагою і габаритами в розмітці
• 9питань у FAQ, усі з розміткою

Фотографії я пережав у WebP з 9,81 до 6,70 МБ; на око різниці немає, я звіряв по числах якості. Рукописний шрифт порізаний до потрібних символів: 258 → 84 КБ. Другий рукописний прибрав зовсім, бо кирилиці в ньому немає взагалі: всі п'ятнадцять українських підписів на дошці він і так не малював, а 35,5 КБ з чужого домену качались щоразу. GSAP, jQuery і Draggable лежать на своєму сервері, тому чужих доменів у критичному шляху стало п'ять замість семи. Google-теги відкладені: у сторінці лишається легка заглушка, а сама бібліотека на 166 КБ вантажиться після першої дії відвідувача, і жодна подія при цьому не губиться. Разом сторінка полегшала на 132 КБ за візит. Відео теж вантажаться за призначенням: головне одразу, решта коли доїжджає до екрана, а два фонові віддає зовнішній плеєр, бо канал сервера такого фону не витягне. Що з цього вийшло по швидкості — видно нижче, на знімках PageSpeed з живого сайту.

Щоб знайшли — і люди, і моделі

Крім звичайного SEO на сайті лежить файл-вижимка для мовних моделей: що це за майстерня, шість виробів з габаритами, категорії, матеріал, терміни, доставка, оплата. Це рівно те, що модель може процитувати у відповіді, не розбираючи вёрстку. Разом з текстовим дублером каталогу він робить сайт читабельним для AI-пошуку, а не тільки для Google.

У файлі для роботів я прописав, що можна робити зі скачаним вмістом: пошук дозволено, відповіді моделей дозволені, навчання теж. Це рішення власниці від 21 серпня, вона дозволила все, включно з навчанням на текстах і фото майстерні. AI-роботи перелічені поіменно й пущені: GPTBot, ChatGPT-User, PerplexityBot, ClaudeBot, anthropic-ai, Google-Extended. Заборонив я одного, робота TikTok: для української аудиторії ручної роботи він марний, а канал сервера вузький.

26 серпня я зняв попит по ніші за рік. Виявилось, що в handmade не шукають ані по матеріалу, ані по категорії: шукають конкретний предмет або привід. «Вазон» і «кашпо» попит мають, а «плетений декор», «бохо декор» і «подарунковий кошик» дають нуль. Після цього я перейменував усі шість виробів у чотирьох місцях одразу: на сторінці, в текстовому списку, в розмітці й у файлі для моделей. Слово «кашпо» додав в опис сторінки, бо до того його не було в жодному з семи полів.

Результат

Тепер є сайт, який не соромно показати — знайомим, потенційним клієнтам і магазинам, з якими Вікторія домовляється про викладку товару. Замість добірки фото в директі вона лишає одне посилання, де зібрані і роботи, і матеріал, і відповіді на питання, які раніше доводилось писати руками кожному.

Щодо замовлень з пошуку скажу чесно: поки сайт працює як вітрина, а не як канал трафіку. Це лендінг з базовим SEO, у Google він тільки починає свій шлях. Щоб з пошуку йшли замовлення, потрібен багатосторінковий сайт з окремими сторінками під типи виробів — це наступний крок, і замір попиту вже показав, під які саме запити ті сторінки робити.

Інші кейси