SEOCatalog — це структурована база каталогів
Проєкт: SEOcatalog (seocatalog.com.ua)
Тип: SEO-платформа / каталог майданчиків + заявки та “кошик” (як у невеликого інтернет-магазину)
Що зроблено:
1) Сайт “з нуля” з швидким SSR
• Реалізована архітектура на Cloudflare Pages Functions (серверна генерація сторінок).
• Сторінки віддаються вже з готовою HTML-розміткою (SSR), тому сайт швидкий та добре індексується.
• Структура коду — MVC: контролери збирають дані, в’юхи рендерять HTML, спільні компоненти перевикористовуються.
2) Каталог з розділами, карточками і фільтрами
• Головна сторінка каталогу + сторінки розділів (тематики) + сторінки карточок (деталі майданчика).
• Фільтрація та сортування (включно з діапазоном цін) з коректною поведінкою для SEO:
– для сторінок з фільтрами встановлюється robots noindex,follow
– для “чистих” сторінок — index,follow
• Підготовлені canonical URL, щоб уникати дублів у пошуку.
3) Кошик і оформлення заявки (як в e-commerce)
• Доданий сценарій вибору майданчиків у “кошик”.
• Реалізована форма оформлення замовлення з валідацією (ім’я, контакт, коментар, список позицій).
• На стороні бекенду — нормалізація полів, захист від некоректних даних, обмеження довжин, стабільна обробка.
4) Інтеграція з Google Sheets (CRM-подібний бекофіс)
• Підключена Google Apps Script API як “адмін-панель” без окремого бекенду:
– заявки на додавання нового каталогу → лист drafts
– замовлення з кошика → лист orders
• Токен-доступ + перевірки, щоб не можна було писати в таблицю без авторизації.
• Логи і статуси замовлень/заявок зберігаються в таблиці для ручної обробки менеджером.
5) SEO-оптимізація “під пошук”
• Мета-теги: title/description, OpenGraph, Twitter Card.
• Dublin Core метадані для підсилення структури документа.
• JSON-LD (Schema.org) в для покращення розуміння карточок пошуковими системами/AI:
– Organization/LocalBusiness залежно від типу карточки
– sameAs (офіційний сайт), url, description, address (якщо є)
• Генерація sitemap.xml через функцію (під індексацію та швидкий crawl).
6) UX та мобільна адаптація
• Єдиний UI-шар на main.css + site-ui.js: модалки, меню/фільтри, поведінка сторінки.
• Виправлення мобільних нюансів (скрол/оверлеї, стан “no-scroll”, панелі фільтрів).
• Шаблони сторінок оформлені як “довгочит”, акуратна типографіка, правильні заголовки, списки.
7) Документація для швидкої роботи з проєктом
• Ведеться реєстр функцій і відповідностей “роут → файл → контролер/в’юха” (function-registry.md),
щоб швидко знаходити потрібне місце правок без перебору всього архіву.
Результат для бізнесу
• Власник отримує швидкий SEO-дружній каталог/магазиноподібний продукт, де:
– клієнт може підібрати позиції (майданчики), додати в кошик, відправити замовлення
– менеджер отримує все в Google Sheets, без складної адмінки
– пошук добре індексує сторінки завдяки SSR, мета-даним, sitemap та schema.org
• Рішення легко масштабувати: додавання розділів, нових полів карточки, нових сценаріїв оплати/кабінету.
Тип: SEO-платформа / каталог майданчиків + заявки та “кошик” (як у невеликого інтернет-магазину)
Що зроблено:
1) Сайт “з нуля” з швидким SSR
• Реалізована архітектура на Cloudflare Pages Functions (серверна генерація сторінок).
• Сторінки віддаються вже з готовою HTML-розміткою (SSR), тому сайт швидкий та добре індексується.
• Структура коду — MVC: контролери збирають дані, в’юхи рендерять HTML, спільні компоненти перевикористовуються.
2) Каталог з розділами, карточками і фільтрами
• Головна сторінка каталогу + сторінки розділів (тематики) + сторінки карточок (деталі майданчика).
• Фільтрація та сортування (включно з діапазоном цін) з коректною поведінкою для SEO:
– для сторінок з фільтрами встановлюється robots noindex,follow
– для “чистих” сторінок — index,follow
• Підготовлені canonical URL, щоб уникати дублів у пошуку.
3) Кошик і оформлення заявки (як в e-commerce)
• Доданий сценарій вибору майданчиків у “кошик”.
• Реалізована форма оформлення замовлення з валідацією (ім’я, контакт, коментар, список позицій).
• На стороні бекенду — нормалізація полів, захист від некоректних даних, обмеження довжин, стабільна обробка.
4) Інтеграція з Google Sheets (CRM-подібний бекофіс)
• Підключена Google Apps Script API як “адмін-панель” без окремого бекенду:
– заявки на додавання нового каталогу → лист drafts
– замовлення з кошика → лист orders
• Токен-доступ + перевірки, щоб не можна було писати в таблицю без авторизації.
• Логи і статуси замовлень/заявок зберігаються в таблиці для ручної обробки менеджером.
5) SEO-оптимізація “під пошук”
• Мета-теги: title/description, OpenGraph, Twitter Card.
• Dublin Core метадані для підсилення структури документа.
• JSON-LD (Schema.org) в для покращення розуміння карточок пошуковими системами/AI:
– Organization/LocalBusiness залежно від типу карточки
– sameAs (офіційний сайт), url, description, address (якщо є)
• Генерація sitemap.xml через функцію (під індексацію та швидкий crawl).
6) UX та мобільна адаптація
• Єдиний UI-шар на main.css + site-ui.js: модалки, меню/фільтри, поведінка сторінки.
• Виправлення мобільних нюансів (скрол/оверлеї, стан “no-scroll”, панелі фільтрів).
• Шаблони сторінок оформлені як “довгочит”, акуратна типографіка, правильні заголовки, списки.
7) Документація для швидкої роботи з проєктом
• Ведеться реєстр функцій і відповідностей “роут → файл → контролер/в’юха” (function-registry.md),
щоб швидко знаходити потрібне місце правок без перебору всього архіву.
Результат для бізнесу
• Власник отримує швидкий SEO-дружній каталог/магазиноподібний продукт, де:
– клієнт може підібрати позиції (майданчики), додати в кошик, відправити замовлення
– менеджер отримує все в Google Sheets, без складної адмінки
– пошук добре індексує сторінки завдяки SSR, мета-даним, sitemap та schema.org
• Рішення легко масштабувати: додавання розділів, нових полів карточки, нових сценаріїв оплати/кабінету.