Кейс InfoMixer: як ми запустили новинний сайт на авторському шаблоні та що зробили для SEO з першого дня

Кейс InfoMixer

Новинний сайт — один із найскладніших форматів для SEO. Сотні сторінок, що постійно оновлюються, жорстка конкуренція з великими медіа, високі вимоги Google до довіри та експертності. Саме тому, запускаючи новий проєкт нашої редакції, ми вирішили не брати готовий шаблон «з коробки», а зібрати сайт під конкретні SEO-задачі з першого дня.

Знайомтеся: InfoMixer — українське онлайн-медіа з авторською подачею. Слоган проєкту — «Головне в одному міксі. Без зайвої «води». Редакція щодня відбирає найважливіше про Україну та світ, перевіряє факти й пояснює суть коротко. У цьому кейсі розповідаємо, як ми побудували сайт і які SEO-рішення заклали ще до першої публікації.

Ідея проєкту: агрегатор з авторською подачею

InfoMixer створювали для читачів, які втомилися від нескінченних Telegram-стрічок і клікбейтних заголовків. Контент розподілений на чотири «мікси»:

  • Hard News — політика, економіка, безпека та головні події дня;
  • Life & Utility — інструкції, гроші, робота, технології та штучний інтелект;
  • Light & Culture — українська музика, кіно, тренди та спорт;
  • Opinion & World — міжнародний контекст і короткі колонки експертів.

Для SEO така модель зручна тим, що кожен мікс розкладається на окремі рубрики з власним семантичним полем, а головна сторінка збирає їх в одну логічну структуру.

Кейс InfoMixer

Авторський шаблон замість готової теми

Сайт працює на WordPress з блоковою темою Twenty Twenty-Five, але весь дизайн і логіка — власні. Ми не використовували важкі конструктори сторінок: шапка, підвал, головна сторінка та службові сторінки зібрані вручну з чистого HTML і окремого файлу стилів без зайвого коду.

Що це дало з погляду SEO

  • Чиста семантика. Кожен блок має логічну ієрархію заголовків: один H1 на сторінку, далі H2 для секцій і H3 для карточок матеріалів.
  • Без дублювання метаданих. Title, meta description і H1 для рубрик та службових сторінок задаються вручну через Rank Math, а в коді шаблонів їх немає — тож задвоєних description чи H1 не виникає.
  • Mobile-first верстка. Сітка перебудовується від однієї колонки на смартфоні до двох і трьох на планшеті та десктопі, без горизонтального скролу. Меню рубрик на мобільних прокручується жестом, а на всіх пристроях закріплюється вгорі під час прокрутки.
  • Доступність. Навігація має aria-мітки, фільтр контенту працює з клавіатури, а для користувачів, які вимкнули анімації в системі, вони не відтворюються.

Динамічна головна сторінка: власний плагін

Головна новинного сайту має оновлюватися сама, інакше після кожної публікації доводиться вручну правити код. Для цього ми написали власний плагін, який будує головну з актуальних записів і зберігає авторський дизайн.

Блок головноїЩо виводить
Головний замесЗакріплений запис або найсвіжіший матеріал із заставкою
Мікс-дайджестТри останні публікації сайту
Блоки рубрикОстанні матеріали кожної рубрики без повторів головної новини
Блискавка 24/7Хронологічна стрічка шести останніх публікацій
Ранковий espresso-мікс і Вечірній коктейльМатеріали, позначені відповідними мітками

Порожні блоки не показуються, тому сторінка не містить «заглушок». Плагін також бере тезиси з поля «Уривок» і виводить їх як «дайджест-мікс» — 3–4 головні думки матеріалу ще до кліку. Для пошукових систем це додатковий структурований текст на сторінці, для читача — швидке розуміння суті.

Структура рубрик і URL

Архітектуру сайту ми спланували так, щоб кожна сторінка мала зрозумілу адресу й чітке місце в ієрархії:

  • Вісім основних рубрик: Новини, Політика, Економіка, Технології, Лайфстайл, Інструкції, Світ і Спорт.
  • Транслітерація за стандартом. Ярлики рубрик створені латиницею за офіційною українською транслітерацією: /polityka/, /tekhnolohii/, /instruktsii/. Жодних закодованих кириличних адрес.
  • Рубрика в URL статті. Структура постійних посилань /%category%/%postname%/ показує тематику ще в адресі, а префікс /category/ прибраний.
  • Основна рубрика. Якщо матеріал належить до кількох категорій, в адресу та розмітку потрапляє та, що позначена основною в Rank Math.
  • Вступні тексти рубрик. Для кожної рубрики підготовлено унікальний опис на 300–500 знаків над стрічкою, щоб сторінки категорій не вважалися «тонким» контентом.

Мікророзмітка: повний набір для медіа

Мікророзмітку в форматі JSON-LD ми розглядали як окремий напрям роботи. Для новинного сайту вона допомагає Google зрозуміти, хто публікує матеріали, за якими правилами працює редакція і як пов’язані сторінки між собою.

Розмітка на головній

  • NewsMediaOrganization — тип організації для медіа з посиланнями на редакційну політику, правила перевірки фактів, виправлення помилок, етичний кодекс, політику щодо анонімних джерел, а також на сторінку команди та контакти.
  • WebSite з SearchAction — опис внутрішнього пошуку сайту.
  • CollectionPage зі speakable — позначає фрагменти, придатні для озвучення голосовими асистентами.
  • ItemList з NewsArticle — генерується автоматично з матеріалів, що зараз на головній: заголовок, зображення з розмірами, дата публікації й оновлення, автор і рубрика.
  • FAQPage — для блоку швидких відповідей.
  • SiteNavigationElement — основне меню з усіма рубриками.

Розмітка службових сторінок

  • AboutPage для сторінки «Про нас» і ContactPage для контактів.
  • Person для кожного співробітника з посадою, описом досвіду, фото, освітою (якщо вона вказана) та прив’язкою до організації. Ідентифікатори людей однакові на всіх сторінках, тому Google бачить одну й ту саму команду.
  • BreadcrumbList на кожній службовій сторінці.
  • WebPage з якорями розділів для редакційної політики: окремі частини сторінки описані як елементи розмітки.
Кейс InfoMixer

E-E-A-T: сторінки, що формують довіру

Для новинних і YMYL-тематик Google особливо уважно оцінює, хто стоїть за сайтом. Тому сторінки довіри ми підготували до запуску основного контенту, а не «колись потім».

  • Про нас. Місія, формати, принципи роботи та команда з реальними фото, досвідом і освітою кожного редактора.
  • Редакційна політика. Порядок перевірки фактів, робота з джерелами, правила виправлення помилок, етика, правила висвітлення війни, використання штучного інтелекту та маркування реклами.
  • Правила використання матеріалів. Умови цитування, вимоги до посилання та явна заборона на автоматичний збір даних і навчання моделей ШІ.
  • Політика конфіденційності. Підготовлена з урахуванням Закону України «Про захист персональних даних» і GDPR.
  • Контакти. Канали зв’язку з редакцією та склад команди.

Окремо ми прописали профілі авторів: матеріали виходять під іменами реальних редакторів, а не під безликим «admin».

Швидкість і технічна оптимізація

  • Зображення. Головне фото завантажується пріоритетно, решта — відкладено, у міру прокрутки. Кожне зображення має розміри, адаптивні варіанти та альтернативний текст, що зменшує зсуви макета й прискорює завантаження на мобільних.
  • Шрифти. Шрифт підключено з параметром display=swap, тому текст показується одразу, не чекаючи завантаження шрифту.
  • Мінімум скриптів. Фільтр контенту та віджети працюють на кількох рядках чистого JavaScript без сторонніх бібліотек.
  • Кешування. Сторінки віддаються з кешу, що зменшує час відповіді сервера.

Корисні функції для читача

Поведінкові сигнали теж працюють на SEO, тому ми додали функції, які дають причину повертатися на сайт:

  • Mix-Filter — перемикач стрічки під настрій: «Тільки факти», «Корисне» або «Відволіктися».
  • Віджети в шапці — офіційний курс долара та євро з відкритого API НБУ і поточна погода в Києві.
  • Автопостинг у Telegram — кожна нова публікація автоматично потрапляє в канал проєкту з фото, тезисами, хештегом рубрики та кнопкою переходу на сайт.

Чек-лист: що ми впровадили до запуску

  1. Авторський шаблон без конструкторів сторінок і зайвого коду.
  2. Один H1 на сторінку та метадані без дублювання.
  3. Вісім рубрик із транслітерованими ярликами та вступними текстами.
  4. Структура URL з рубрикою, без префікса /category/.
  5. Повний набір мікророзмітки для медіа в JSON-LD.
  6. Сторінки довіри та профілі авторів із фото.
  7. Динамічна головна, що оновлюється без ручного втручання.
  8. Оптимізація зображень, шрифтів і кешування.
  9. Автоматична публікація матеріалів у Telegram.

Проєкт лише стартує, і попереду найцікавіше — наповнення та перші результати в пошуку. Якщо хочете побачити, як усі ці рішення працюють разом, читайте новини України та світу на InfoMixer — коротко, перевірено й без зайвої «води».