416Skin — медицинская эстетика

Задача

Роскошная студия, которую стоило найти.

Исходная ситуация.

416Skin — студия медицинской эстетики в Торонто, где предлагают больше сотни процедур в пятнадцати категориях: уход за лицом, коррекция фигуры, лазер — всё меню. Прежний сайт выглядел достойно. Но у него была одна проблема.

Проблема.

Старый сайт был устроен так, что настоящее содержимое появляется только после загрузки страницы в браузере. Люди видят всё нормально, но программа Google, читающая страницы, часто не ждёт. Поэтому каждая процедура, каждая категория, каждый вопрос, который мог бы искать клиент, были фактически невидимы. Красивый сайт, пустая поисковая выдача.

Пересборка

Пересобрано страница за страницей, с сохранением только тех подвижных частей, которые оправдывают своё место.

Настоящие страницы, готовые ещё до вашего прихода.

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

Интерактивность только там, где нужно.

Большая часть сайта теперь — простой быстрый контент. Интерактивные элементы, которые остались, — те, которыми люди действительно пользуются: форма обратной связи, карусель отзывов клиентов, галерея фотографий и баннер cookie. Всему остальному не нужен запущенный код.

Каждый интерактивный элемент загружается в нужный момент.

• Сразу — Форма обратной связи готова сразу — это единственное, чем посетитель может воспользоваться до прокрутки.
• Когда попадает в поле зрения — Отзывы и галереи загружаются только когда вы до них прокрутили, без лишней загрузки заранее.
• Когда браузер свободен — Баннер cookie ждёт своей очереди и поэтому никогда не замедляет первый вид страницы.
• Или вовсе нет — Меню и подвал — обычный контент с десятистрочным скриптом, ничего тяжёлого рядом с ними нет.

Карта страниц

Двадцать страниц, собранных за один раз.

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

Одна сборка создаёт всё: четыре основные страницы (Home, About, Services, Contact), страницу с вопросами и ответами и пятнадцать страниц категорий процедур, которые автоматически создаются из одного шаблона и списка. У каждой страницы свой веб-адрес, свой заголовок и своё описание для поисковиков.

Что несёт каждая страница.

• Своя поисковая карточка — У каждой страницы свой заголовок, описание и карточка предпросмотра для случаев, когда ею делятся, а также данные о местоположении для поиска в Торонто.
• Машиночитаемая сводка — Каждая страница содержит структурированную сводку в точном формате, который предпочитает Google: бизнес, его услуги, цены, отзывы.
• Полный список процедур, читаемый для Google — Страница Services содержит каждую категорию, каждую процедуру и каждое описание обычным текстом для поисковиков.
• Пятнадцать страниц из одного шаблона — Один шаблон и список из пятнадцати категорий превращаются в пятнадцать настоящих страниц во время сборки.

На языке Google

Структурированные сводки на каждой странице.

Написано один раз, используется везде.

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

Звёздный рейтинг настоящий.

Рейтинг, который видит Google, берётся из того же списка отзывов клиентов, который видят посетители на экране. Никаких цифр, набранных вручную, и никакого разрыва между тем, что читают пользователи, и тем, что читает Google.

Ремесло

Детали, которые не видны в тесте скорости.

Небольшие решения с долгой жизнью.

• Шрифты отдаются с нашего же сайта — Два шрифта идут вместе с самим сайтом: никаких обращений к внешним сервисам шрифтов, на одну задержку первого вида меньше.
• Одна палитра — один файл — Все цвета бренда — кремовый, розовый, коричневый, шалфейный, золотой — лежат в одном файле. Изменили один раз — весь сайт следует за ним.
• Анимации прокрутки без тяжёлой техники — Мягкое появление при прокрутке работает на двадцати строках обычного кода, без библиотеки анимации.
• Никакой слежки без спроса — Все три инструмента аналитики стоят за одними воротами. Ничего не загружается, пока посетитель не примет баннер cookie.

Публикация

Каждое обновление выходит само.

Один конвейер, никаких ручных шагов.

Когда изменение сохранено, автоматический конвейер собирает сайт и публикует его во всемирной сети Cloudflare. У изменений в работе есть своя закрытая ссылка предпросмотра, чтобы студия могла утвердить изменение до выхода в эфир.