416Skin — Медична естетика

Завдання

Люксова студія, яка заслуговувала, щоб її знаходили.

Тло.

416Skin — це торонтська студія медичної естетики, що пропонує понад сотню процедур у п'ятнадцяти категоріях: догляд за обличчям, корекція контурів тіла, лазер, повне меню. Початковий сайт мав відповідний вигляд. Але мав одну проблему.

Проблема.

Старий сайт було побудовано так, що справжній контент з'являвся лише після того, як сторінка завантажиться в браузері. Люди бачать його чудово — але читальне ПЗ Google часто не чекає. Тож кожна процедура, кожна категорія, кожне питання, яке міг шукати клієнт, фактично були невидимі. Гарний сайт, порожня пошукова видача.

Перебудова

Перебудовано сторінку за сторінкою — лишили тільки ті рухомі частини, що виправдовують своє місце.

Справжні сторінки, готові ще до того, як ви прийшли.

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

Інтерактивність лише там, де вона важлива.

Більша частина сайту тепер — це простий, швидкий контент. Інтерактивні елементи, що вціліли, — це ті, якими люди справді користуються: контактна форма, карусель відгуків клієнтів, фотогалерея й банер про cookie. Усьому іншому не потрібен жодний код, що працює.

Кожен інтерактивний елемент завантажується в потрібну мить.

• Одразу — Контактна форма готова негайно — це єдине, чим відвідувач може скористатися ще до прогортування.
• Коли потрапляє в поле зору — Відгуки й галереї завантажуються лише тоді, коли ви до них прогортуєте, — жодного марного завантаження наперед.
• Коли браузер вільний — Банер про cookie чекає своєї черги, тож ніколи не сповільнює перший показ сторінки.
• Або взагалі ніколи — Меню й підвал — це простий контент із десятирядковим скриптом; нічого важкого і близько немає.

Карта сторінок

Двадцять сторінок, зібраних за один прохід.

Одна команда — увесь сайт.

Одна збірка створює все — чотири головні сторінки (Головна, Про нас, Послуги, Контакти), сторінку запитань і відповідей та п'ятнадцять сторінок категорій процедур, згенерованих автоматично з одного шаблону та списку. Кожна сторінка отримує власну вебадресу, власний заголовок і власний опис для пошукових систем.

Що несе кожна сторінка.

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

Говоримо мовою Google

Структуровані описи на кожній сторінці.

Написано раз, використано всюди.

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

Зіркований рейтинг справжній.

Рейтинг, який бачить Google, береться з того самого списку відгуків клієнтів, що бачать відвідувачі на екрані. Жодних вписаних руками чисел, жодного розриву між тим, що читають користувачі, і тим, що читає Google.

Майстерність

Деталі, яких не видно в тесті швидкості.

Маленькі рішення з довгим життям.

• Шрифти з нашого власного сайту — Обидва шрифти їдуть разом із самим сайтом — жодних звернень до сторонніх шрифтових сервісів, на одну річ менше, що сповільнює перший показ.
• Одна палітра, один файл — Усі фірмові кольори — вершковий, рожевий, коричневий, шавлієвий, золотий — живуть в одному файлі. Змініть його раз — і весь сайт іде слідом.
• Анімації прогортування без важкої машинерії — Делікатне проявлення під час прогортування працює на двадцяти рядках простого коду — без жодної бібліотеки анімацій.
• Ніщо не стежить за вами без запиту — Усі три аналітичні інструменти стоять за одними ворітьми. Нічого не завантажується, поки відвідувач не прийме банер про cookie.

Публікація

Кожне оновлення публікує себе саме.

Один конвеєр, жодних ручних кроків.

Щойно зміну збережено, автоматичний конвеєр збирає сайт і публікує його у всесвітній мережі Cloudflare. Зміни в роботі отримують власне приватне посилання-прев'ю, тож студія може схвалити зміну, перш ніж вона вийде наживо.