STWBH — сайт сервісу підбору репетиторів

Задача

Замовник прийшов з однією задачею: шукати клієнтів на уроки. Не «зробіть красиво», а знайти учнів.

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

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

Друга частина задачі приїхала разом з учнями. Вони пишуть з різних країн: хтось учиться в Україні, хтось поїхав і слухає курс польською або англійською. Тому сайт від початку робився на три мови, а форма мусила питати країну й мову занять, а не тільки «ім'я та телефон».

Що зробив

Три мови живуть в одному словнику

UA, RU і EN лежать одним файлом: 273 ключі, у кожного три переклади, і 327 місць у розмітці, які цей словник підставляє. Плюс окремо підписи полів форми й підписи для читалок екрана.

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

Одна адреса, дві збірки, вибір на сервері

Комп'ютерна версія і мобільна це два різні файли, але посилання в людини одне: stwbh.com. Що віддати, вирішує невеликий серверний скрипт, який дивиться на пристрій відвідувача.

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

AI-роботи їдуть окремим маршрутом

GPTBot, ChatGPT-User, OAI-SearchBot, PerplexityBot, ClaudeBot, Google-Extended і ще з десяток отримують комп'ютерну збірку примусово, за списком. Пошукові роботи Google і Bing у цей список я свідомо не вписав: вони індексують сайт за мобільною версією, і коли приходять з мобільним підписом, мусять отримати саме її.

До серпня логіки для роботів не було зовсім, і GPTBot їхав на десктоп випадково: у його підписі просто немає слова «Mobi». Досить було OpenAI завести другий, мобільний підпис, і бот мовчки переїхав би на іншу збірку. Помітили б ми це через місяці, коли модель почала б відповідати не тим, що на сайті.

Мобільна збірка не бідніша за комп'ютерну

Це я перевіряв окремо, бо «мобільна урізана» це звична історія. Різниця в тексті нульова, слово в слово; службового шуму в мобільній навіть менше, і словника на 65 КБ вона не тягне взагалі. Скрол-сцена, розрахована на широкий екран, на телефоні перетворюється на нескінченне гортання, тому мобільна проходить той самий шлях коротше, зберігаючи весь текст.

Шістнадцять напрямів навчання, названі поіменно

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

Чотири аудиторії і п'ять кроків

Аудиторій на сторінці чотири: школярі, студенти по світу, ті, хто переїхав, дорослі й бізнес. Далі рівно п'ять кроків: заявка, уточнення деталей, оцінка строків і формату, робота, результат. Це та частина, яку в цій ніші зазвичай замінюють словом «індивідуальний підхід», і саме її людина шукає очима, коли вирішує писати чи ні.

Команда названа прямо: зараз їх троє

На сторінці не «команда професіоналів», а троє людей з окремим підзаголовком «Чому саме вони?». Там же я лишив чесний рядок: ідеального репетитора для всіх не існує. Замовник приймає запит і добирає викладача під задачу, заняття ведуть викладачі практики.

Такі рядки страшно писати, бо вони ніби зменшують. Насправді вони єдині й працюють: людина, яка обпеклась на агрегаторі з тисячею анкет і рейтингом 4,9 у всіх, читає це як розмову з живими людьми.

Форма з десяти полів, обов'язкових два

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

Заявка не падає в пошту, яку ніхто не читає. Обробник збирає з десяти полів готове повідомлення й відкриває чат у Telegram, де воно вже написане. Кнопку «надіслати» людина тисне сама, і відповідає їй теж людина, а не автоматичне «дякуємо за звернення».

Ціна названа орієнтиром, і сказано чому

Урок від 800 грн, онлайн-оплати на сайті немає: точну ціну називають під мету, напрям і рівень учня. Але цікаве тут інше. У профілі на Buki висять старі цифри, нижчі за нинішні, і це не два прайси, а стара особиста ставка замовника за заняття, які він більше не веде сам.

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

Скрол-сцени прив'язані до скролу, а не до таймера

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

Оптимізація, якої на сторінці не видно

Три знахідки, які я вважаю найкориснішими в проєкті, зовні не видно взагалі.

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

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

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

Збірник знає про файли, на які нема жодного посилання

Бойова версія збирається скриптом у 129 файлів. Окремо в ньому виписані «невидимі» файли, яких немає в жодному посиланні розмітки: серверний скрипт вибору збірки, підтвердження для Search Console і ключ для IndexNow, де ім'я файла і є сам ключ, рівно 32 байти без зайвого символу в кінці. Автоматичний обхід їх не знаходить, тому я виписав їх окремим списком. Інакше одного разу вони просто не доїдуть на бій, а причину шукатимеш годину.

Технічно

• 273 × 3ключі словника, по перекладу на кожну мову
• 327місць у розмітці, які словник підставляє
• 16напрямів навчання, кожен окремий запит
• 129файлів у бойовій збірці

Сторінка важча за інші кейси розділу, це плата за відеофони й скрол-сцени. На швидкості це не позначилось: PageSpeed дає 99 на комп'ютері й 96 на телефоні, знімки заміру нижче. У цій ніші в тому й був сенс: агрегатори швидкі й однакові, тут швидко і не схоже на них. Типів розмітки на сторінці дев'ять: організація, сайт, послуга, питання й відповіді, людина, заклад освіти, місце, контакт і числова величина.

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

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

27 серпня я зняв попит по ніші, і замір вийшов неприємний, зате корисніший за будь-яку похвалу. Виявилось, що люди шукають зовсім не тими словами, які стоять на сторінці. Шукають з містом («репетитор з математики Дніпро»), шукають абревіатуру іспиту, ціну за годину, клас і мову занять. Слів НМТ, ЗНО, «абітурієнт» і «вступ» на сторінці не було жодного разу.

Технічно при цьому все чисто: сторінка в індексі, роботам нічого не заборонено, карта сайту обійдена. Причина не в поломці. Сайт просто не відповідає на ті запити, які люди справді набирають, і вся семантика звалена на одну сторінку, бо сторінка одна.

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

Результат

Роботу здано, сайт працює, заявка йде напряму в Telegram і три мови стоять. Після запуску він пройшов окремий UX-аудит з прямим порівнянням з Buki та Preply, знайдене я правив уже в бойових файлах.

Скажу чесніше, ніж прийнято в кейсах: з пошуку сюди поки не приходять. І справа не в тому, що мало часу минуло. Замір попиту показав причину пальцем: сайт не відповідає на ті слова, якими люди шукають, а вся семантика лежить на одній сторінці.

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

Інші кейси