Кейс02 / 06
GoodAntShop
Магазин муравьиных ферм · RU/RO/EN
Мой небольшой бизнес и сайт, который на него работает. Продаю колонии муравьёв, формикарии и аксессуары, а ещё на сайте есть блог и атлас видов муравьёв Молдовы.
- Роль
- Владелец · дизайн и full-stack
- Период
- май 2026 – сейчас
- Контекст
- Свой продукт
- Формат
- В одиночку · Кишинёв
- React 18
- Vite
- React Router
- SSR prerender
- react-helmet-async
- Leaflet
- Vercel serverless
- Resend
- sharp
Задача
Нишевый магазин живёт за счёт поиска. Чисто клиентское React-приложение отдаёт Google пустой HTML, а переезжать на полноценный фреймворк ради 11 товаров и блога было бы перебором. Поэтому я хотел оставить простой стек React + Vite и всё равно отдавать полный индексируемый HTML на трёх языках.
- Настоящий HTML на каждом маршруте со своими title, canonical, hreflang и Open Graph
- Заказы без своего бэкенд-сервера и базы данных
- Контент, который отвечает на вопросы новичков про уход, виды и выбор формикария
Что я сделал
Пререндер
- Сборка идёт в три шага. Сначала клиентский бандл, потом SSR-бандл, потом scripts/prerender.mjs.
- Каждый из 66 маршрутов (22 страницы × 3 языка) рендерится через renderToString и StaticRouter в свой index.html. Если маршрут отрендерился пустым, сборка падает.
- Каждый маршрут получает свои title, description, canonical, hreflang (ru / ro / en + x-default) и og:* с нужной локалью.
- OG-картинки 1200×630 генерируются через sharp. sitemap.xml с hreflang строится из того же списка маршрутов, есть статическая 404 на трёх языках.
- На клиенте hydrateRoot подхватывает готовую разметку. Корзина читается только после монтирования, поэтому первый рендер совпадает с серверным HTML.
Магазин
- Каталог муравьёв, формикариев и аксессуаров с вариантами. Корзина хранится в localStorage.
- Заказы обрабатывает serverless-функция на Vercel. Она проверяет и экранирует заказ, а потом отправляет письмо через API Resend.
- Карта видов на Leaflet загружается по требованию. На ней 6 зон Молдовы, режимы «по виду» и «все виды» и ссылки на виды в наличии.
- Статьи и FAQ для новичков.
Результат
- в Google по «купить муравьёв» в Молдове (окт. 2026)
- Топ 1–2
- пререндеренных маршрутов
- 66
- языка, связанных через hreflang
- 3
Магазин работает как мой собственный бизнес, код открыт на GitHub.
SEO-архитектура
- Пререндер, sitemap и hreflang строятся из одного списка маршрутов, поэтому разойтись они не могут.
- На каждой странице есть JSON-LD @graph с Organization, WebSite, BreadcrumbList, ItemList, Product с Offer, условиями доставки и возврата, FAQPage, BlogPosting и VideoObject.
- AggregateRating и Review выводятся только там, где у товара есть свои отзывы.
- Мета-теги есть только в пререндеренном HTML, поэтому гидрация их не дублирует.
- Корзина закрыта noindex и в robots.txt. Статика кэшируется на год как immutable.