Хостел моих друзей на 48 мест в Белграде. Старый сайт показывал комнаты на фото, новый отвечает на вопросы гостя до брони и передаёт в бронирование даты, гостей и комнату.
119
адресов: 17 типов страниц на семи языках. В карте старого сайта — 86
92 → 97
доступность главной по Lighthouse
14
отзывов сверены с площадками слово в слово. Из 12 цитат старого сайта дословно не совпала ни одна
0 → 4
параметра брони сайт передаёт в Cloudbeds: язык, даты, гости и комната. Старый не передавал ни одного
Сайт не запущен: демо второй версии закрыто от поиска, на домене хостела пока старый сайт. Результатов нет — ниже стартовые метрики старого сайта, с ними и буду сравнивать.
Чей проектМой: сделал по своей инициативе, хостел сайт не заказывал
Хостел48 мест: шесть дормов и апартаменты, коворкинг под крышей. Открыли мои друзья в 2023 году, я был с ними на всех этапах
СайтПервый сайт друзья сделали сами на конструкторе Duda. В 2026 году я взялся им помочь и всё улучшить: новый — свой код на Python, без конструктора и фреймворков
Моя рольПродукт, решения и приёмка — мои; код — с Claude Code по моим задачам
Структура, тексты на семи языках, фильтр и сравнение комнат, схема для групп, дизайн-система, логотип и иконки из исходников дизайнера. Вёрстку под телефон, генератор и функции Netlify писал с Claude Code по своим задачам и принимал сам.
Факты
Справочник фактов, сверка отзывов и рейтингов с площадками, маршруты по карте транспорта.
Сайты делаю время от времени. Если нужен похожий — напишите на max@kottov.net, отвечу, возьмусь ли.
01 · Старт
Почти все приходят с телефона — из рекламы в Instagram и Facebook
Стартовые метрики я снял до редизайна: Microsoft Clarity — за 30 дней на 16 октября, Google Search Console — за квартал на 13 октября. Около 8 000 из 9 574 сессий дали четыре рекламные кампании Meta: человек видит пост, нажимает и открывает сайт прямо в приложении соцсети.
Телефон
94%
сессий с телефона. Во встроенном браузере Instagram и Facebook — 84% просмотров.
Глубина
1,32
страницы за сессию. Активное время — 13 секунд из 52 секунд визита.
Скорость у живых людей
8,7 с
до главного на экране (LCP). Сдвиг вёрстки 0,34, у 12% сессий — ошибки JavaScript.
Поиск почти не приводит новых гостей · Search Console, июль — октябрь 2026
268 из 317
кликов из Google за квартал — по названию хостела. По запросу «hostel belgrade» сайт седьмой, а кликают по нему реже, чем раз на сотню показов.
Что ещё нашёл аудит старого сайта
Факты спорили друг с другом
Кухня с 7:00 и с 8:00, багаж до 21:00 и до 23:00, стирка 8 € и 5 € — на разных страницах по-разному.
Одна ссылка на бронь
Все 86 страниц вели в Cloudbeds по одному адресу: без языка, дат и выбранной комнаты. Всё это гость вводил заново.
Оценки без даты
На главной стояли 9,2; 4,7 и 9,1. На площадках сейчас 8,7 на Booking.com, 4,5 в Google и 8,7 на Hostelworld.
Разметка
Ровно один заголовок H1 — только на 28 страницах из 86. У 755 картинок из 2 486 нет описания.
02 · Было и стало
Первый экран — комната на фото и оценки трёх площадок, даты — чуть ниже
Кадры с телефона: старый сайт — 1 ноября, таким, каким его видит гость, с плашкой cookies внизу; вторая версия нового — 5 ноября 2026 года. Главная начинается с фото дорма с балконом — его я вернул со старого сайта — и оценок Booking.com, Google и Hostelworld с числом отзывов. Ниже — фототур, WhatsApp и форма дат с ценой «от 10 €». Кнопка брони появляется у нижнего края, когда гость начинает листать, и прячется, пока на экране форма.
Было · главная
Стало · главная
Было · комнаты
Стало · комнаты
Что было и что стало
Старый сайт на конструкторе
86 адресов в карте сайта, семь языков
все кнопки ведут в бронь по одной ссылке
цитаты отзывов без сверки
факты на разных страницах расходятся
один H1 — на 28 страницах из 86
→
Новый сайт на коде
119 адресов: 17 типов страниц на семи языках
новые страницы: события, дорога до хостела, памятка перед приездом
в бронь уходят язык, даты, гости и комната
14 отзывов, найденных на площадках, целиком
факты из одного справочника, спорные помечены
один H1 и описание у каждой картинки
все 87 старых адресов из исходников старого сайта ведут на новые
на телефоне кнопки от 44 px, поля от 52 px, фильтры без свайпа
03 · Ответы
На каждый частый вопрос — свой блок или страница
В моём задании на редизайн — пять сценариев гостя: выбрать дорм, найти женскую комнату с ванной внутри, перейти между страницами и не потерять даты, узнать цену и условия отмены, понять, что делать при позднем приезде. Отсюда и карта сайта.
Вопрос гостяГде ответ
«Кто живёт в дорме и где ванная?»
→
КомнатыКарточка на каждый из шести типов комнат: кто живёт, сколько мест, метры, где ванная. Фильтр и таблица сравнения
«Как доехать из аэропорта?»
→
Как добратьсяИз аэропорта, с вокзала и с автостанции: номера автобусов и троллейбусов, остановки, кнопки Google, Apple и Яндекс Карт
«Нас тридцать — поместимся?»
→
ГруппыСхема дома на 48 мест раскладывает группу по целым комнатам, запрос уходит в WhatsApp готовым текстом
«Можно пожить и поработать месяц?»
→
Коливинг и коворкингЭтаж под крышей открыт круглосуточно. Гость выбирает 7, 14 или 30 ночей — и бронь открывается с этими датами
«Что здесь вечером?»
→
СобытияДевять видов вечеров с фото и афишами: живая музыка, кино, квест, барбекю на крыше. Анонсы — в Instagram
«Можно отменить бронь?»
→
Перед приездомДва тарифа и что с каждым можно сделать, памятка по датам поездки, поздний заезд и хранение багажа
«А лифт есть?»
→
УдобстваДом по этажам: лифта нет, этажи связаны лестницами — и это видно до брони
Карта сайта · новые страницы
Выбрать и забронировать
Главная
Комнаты
Отзывы
Фото и тур по дому
Удобства и цены
Пожить подольше и с компанией
Коливинг и коворкинг
Группы
События
Волонтёры
О хостеле
Приехать и жить по правилам
Как добраться и что рядом
Перед приездом
Правила дома
Правила кухни
Официальная информация
Политика конфиденциальности
Карта сайта
Плюс страница «не найдено» на каждом языке. Где можно, адреса страниц те же, что у старого сайта в индексе Google, остальные старые адреса перенаправлены на новые.
Карточка комнаты. Кто живёт, сколько мест, где ванная, метры. Кнопка «Нижняя кровать» ведёт сразу в эту категорию Cloudbeds: нижняя кровать чуть дороже места без выбора яруса.
Сравнение. Гость отмечает две-три комнаты — в таблице остаются только они.
Как добраться. Из аэропорта, с вокзала и с автостанции — линии и остановки. Маршруты сверены по карте транспорта 22 октября, дата стоит на странице.
Группы. Гость пишет, сколько человек, — схема справа раскладывает их по целым комнатам. Запрос не уходит на сервер: открывается WhatsApp или почта с готовым текстом.
Неделя или месяц. Срок, дата заезда, гости, комната — и Cloudbeds открывается с этими параметрами. Цен на долгий срок сайт не придумывает: их показывает Cloudbeds или присылает команда.
Дом по этажам. Где коворкинг, гостиные и кинозал. Лифта нет, и гость узнаёт об этом до брони.
Вечера. Девять видов: фото с прошедших вечеров и афиши. Афиши нарисованы шаблоном в цветах сайта — один файл 4:5 и для Instagram, и для страницы.
04 · Бронь
Даты, выбранные на любой странице, доходят до Cloudbeds
Бронирование у хостела было и осталось в Cloudbeds. Изменилось то, что уходит туда с сайта. Ссылку на бронь собирает одна функция, а сайт дописывает в неё всё, что гость уже выбрал.
Даты и гостина любой странице
Комнатаили нижняя кровать
Языкв адресе ссылки
Cloudbedsсразу свободные места на эти даты
Язык
В адресе
Параметр языка в ссылке Cloudbeds не учитывает и открывает английский. Работает только путь: /ru/reservation/. Сербского у Cloudbeds нет — сербская версия ведёт в английскую.
Поездка
Запоминается
Даты, гости и комната хранятся в браузере. Человек выбрал на странице комнат даты и трёх гостей, перешёл на события, потом на русскую версию — ссылки брони уже с этими датами и тремя гостями.
Группа
9+
Онлайн можно забронировать до восьми человек. От девяти форма предлагает групповой запрос вместо Cloudbeds.
Внутри Instagram и Facebook · 84% просмотров
Здесь форма сразу предупреждает, что бронь откроется в браузере, и подсказывает: если ничего не произошло, нажать «···» и выбрать «Открыть в браузере».
Почему бронь не встроена прямо в страницу
Встройка — платная опция Cloudbeds
Окно бронирования поверх сайта входит в пакет Premium Embeds, у хостела его нет. Старую встройку через iframe Cloudbeds закрыл в начале 2026 года.
Код уже готов
Окно включается одним флагом сборки. Если скрипт Cloudbeds не загрузится за 4 секунды, кнопка сработает как обычная ссылка.
05 · Факты
Ни одной цифры, которую нельзя проверить
Часы, цены, метры, минуты пешком и рейтинги лежат в одном файле, и страницы на семи языках берут их оттуда. У каждого факта статус: проверен, спорный или неизвестен. Спорное сайт показывает с пометкой «уточняем», неизвестное не показывает вовсе.
Как это выглядит на сайте
Кухня 8:00–22:00 · уточняем. Источники расходятся, поэтому, пока команда не подтвердит часы, рядом с ними стоит пометка.
Цены завтрака и парковки не опубликованы, поэтому сайт их не называет и предлагает спросить у команды.
Даты вечеров не показываются, пока хостел не ведёт расписание. Анонсы — в Instagram.
Рейтинги — с площадкой, числом отзывов и датой сверки.
Минуты пешком и линии транспорта сверены по маршрутам 22 октября.
Отзывы
14
отзывов на сайте — все найдены на Google и Hostelworld и приведены целиком. Из 12 цитат старого сайта шести на площадках нет вовсе, ещё четыре склеены, дописаны или пересказаны, две с Booking.com проверить нельзя.
Оценки по категориям. Данные Hostelworld на 23 октября. Самая низкая оценка — атмосфера, 7,4, — тоже на странице.
ИИ-ассистент первой версии · как был устроен
Должен был отвечать по тому же справочнику фактов, что и страницы
Только по справочнику. Чего там нет — говорил бы, что не знает, и давал WhatsApp и телефон.
Спорное — с оговоркой. Про часы кухни и хранение багажа советовал бы уточнить на ресепшене.
Ссылку на бронь строил бы сервер, а не модель. Модель называла бы даты, число гостей и комнату, сервер проверял бы их и строил ссылку в Cloudbeds. Это сделано в коде, но на демо не выложено.
Без личных данных. Переписка хранилась бы только во вкладке браузера, не на сервере. С одного адреса — не больше 20 вопросов за 10 минут.
Почему его нет во второй версии
На демо первой версии кнопка «Спросить хостел» стояла с 23 октября, но ассистент так и не заработал: ключ модели не принимался, и он отвечал, что недоступен.
Во второй версии вместо него ссылка «Задать вопрос в WhatsApp» на номер ресепшена. Она ничего не отправляет сама и не обещает мгновенного ответа. Код ассистента лежит в архиве проекта.
06 · Сборка
Генератор на Python, один CSS и один скрипт — без фреймворков
Сайт собирается в статические страницы: на хостинге нет базы данных и админки, страницы отдаются готовыми файлами. Тексты семи языков лежат в отдельных файлах с общими ключами. Если в переводе не хватает строки, сборка останавливается и называет её.
Из чего собран
Сборка
генератор site.py: 17 типов страниц, hreflang, canonical, разметка Hostel и FAQPage, sitemap.xml
QR-код для печатных правил кухни считается при сборке, без внешних сервисов
иконки сайта и превью для соцсетей на семи языках — из векторного логотипа дизайнера
неразрывные пробелы в русском и сербском
В браузере
один app.js: поездка, ссылки на бронь, фильтры, сравнение, галерея, формы в WhatsApp
один styles.css, сначала под телефон
больше 50 событий аналитики размечены, теги подключу вместе с баннером согласия на cookies
страница, на которую гость вот-вот перейдёт, подгружается заранее; переход между страницами плавный
движение выключается настройкой «уменьшить движение»
страница «нет связи» на семи языках: если сеть пропала, гость, который уже был на сайте, видит её вместо ошибки браузера
Netlify
статика, заголовки, 301 для старых адресов, 404 на каждом языке
лента Instagram через свою функцию: картинки идут с нашего адреса, гость не обращается к Instagram
продление токена Instagram раз в неделю и хранение в Netlify Blobs готовы — ждут подключения аккаунта
Дизайн-система
Тёплая бумага, белые карточки, тёмно-зелёные кнопки, лайм — точечно. Заголовки Montserrat, текст Noto Sans. Цвета, отступы и скругления заданы токенами в одном документе: новая страница своих цветов не заводит.
Во второй версии логотип взят из векторных исходников дизайнера, в зелёном варианте, — от него же иконки сайта и превью для соцсетей.
Капуста
Фирменный знак — кочан. Листья логотипа разворачиваются, когда знак появляется на экране, у тёмных секций волнистая кромка листа, внизу страницы моргает кочан с глазами. Листья логотипа — это ещё и лестницы дома.
Всё движение — без библиотек и выключается, если в системе включено «уменьшить движение».
126
страниц вместе с 404 проверены на ширине 320, 390 и 1100 px — ничего не вылезает за экран
0
битых ссылок, картинок и якорей на всех 126 страницах
87
старых адресов из исходников старого сайта ведут на новые страницы
44 px
минимум для кнопок и фильтров на телефоне, поля ввода — от 52 px
Запросов на главной
88→21
Старый сайт против второй версии.
Вес главной, МБ
1,8→0,9
У старого сайта — от 1,7 до 1,9 МБ.
Доступность
92→97
Оценка Lighthouse из 100. Три балла сняты за серые подписи в блоке «Приезд» на главной: контраст 4,24 при норме 4,5.
Lighthouse 13.5, мобильный профиль, один ноутбук, по три прогона главной: старый сайт — 1 ноября, вторая версия — 5 ноября 2026 года. Оценку скорости не сравниваю: в лабораторных замерах она скачет от прогона к прогону. Сравню полевые данные после запуска.
Хроника
16.10
Снимок старого сайта и разбор 25 сайтов хостеловПервое демо: все страницы на семи языках.
17.10
Вечера и капустная анимацияСтраница событий и листья, которые разворачиваются на экране.
21.10
CloudbedsЦены и номера категорий всех шести типов комнат, проверка встройки бронирования в страницу.
22.10
Редизайн страница за страницей18 рабочих заходов по общей дизайн-системе, у каждой страницы свой. Вечером — сквозная проверка: 114 страниц на пяти ширинах и пять сценариев гостя.
23.10
ИИ-ассистент, лента Instagram, дом по этажамИ картинки для соцсетей на семи языках.
25.10
Логотип с анимацией и аудит переносаПоследняя выкладка первой версии.
27.10
Шрифты на своём хостинге и страница карты сайтаВ демо первой версии не попали, вошли во вторую.
02.11
Вторая версия: сначала телефонВсе 17 шаблонов на семи языках: крупные кнопки и поля, фильтры без свайпа, короткий первый экран, подвал сворачивается. ИИ-ассистента нет — вместо него ссылка на WhatsApp. Отдельный адрес демо, первая версия не тронута.
03.11
Логотип из исходников дизайнера, страница «нет связи»Иконки сайта и превью для соцсетей на семи языках, предзагрузка страниц и плавные переходы между ними.
Как собирал
Код я писал с Claude Code по своим задачам. Что строить, какие факты выносить на страницу и какую страницу принять — решал сам.
Каждая страница собиралась отдельным заходом: задание, проверка в браузере и список того, что подтвердить у хостела. Вторая версия — так же: отдельный проход по каждому шаблону с телефона.
07 · Дальше
До запуска осталось то, что решает не код
Сайт собирается, сценарии проходят, старые адреса целы. На домен он переедет, когда закроются четыре вопроса.
Юрист
Проверяет черновик политики конфиденциальности: сербский закон о персональных данных и GDPR. Без этого аналитику не включаю.
Команда хостела
Должна подтвердить спорные факты — часы кухни, хранение багажа, цену стирки, ночной заезд — и прислать замены для устаревших сведений.
Носители языка
Вычитывают сербский и турецкий: переводы сделаны без них.
Домен
Боевая сборка без закрытия от поиска, перенос cabbagehostel.com на Netlify, карта сайта в Search Console.
Что проверю после запуска
Срез 1
Скорость у живых людейLCP, INP и сдвиг вёрстки против 8,7 с, 530 мс и 0,34 у старого сайта.
Срез 1
Читают ли дальше первой страницыСтраниц за сессию и активное время — было 1,32 и 13 секунд.
Срез 2
Доходят ли до брониПереходы в Cloudbeds против 173 сессий с кликом «Book» за 30 дней и брони по данным самого Cloudbeds. Это главный вопрос кейса.
Срез 2
Приводит ли поиск новых гостейКлики по общим запросам — было 49 за квартал, позиция по «hostel belgrade» — седьмая, по «coliving belgrade» — двенадцатая.
Как буду сравнивать
Месяц с тем же месяцем. У хостела сезон: осень с летом не сравниваю.
Реклама отдельно от поиска. Почти весь трафик сейчас из Meta, поэтому важнее, как меняется его доля, а не общее число визитов.
Только полевые данные. Лабораторные оценки скорости в итог не идут.
Старый сайт показывал хостел. Новый отвечает гостю — от того, где в дорме ванная, до того, каким автобусом ехать из аэропорта. Проверю это после запуска — по глубине просмотра и переходам в бронь.
Стартовые метрики — Microsoft Clarity за 30 дней на 16 октября и Google Search Console на 13 октября 2026 года. Аудит старого сайта — 86 страниц его карты сайта, 22 октября. Lighthouse 13.5, мобильный профиль: старый сайт — 1 ноября, вторая версия — 5 ноября. Отзывы и рейтинги сверены с площадками 22–25 октября. Проверки вёрстки и ссылок второй версии — 2–3 ноября. Кадры — демо второй версии cabbage-hostel-v2.netlify.app, 5 ноября, и cabbagehostel.com, 1 ноября. На обложке — садовая терраса хостела, фото с его сайта.
