Этот текст вы читаете в блоге, который мы сделали для себя. Задача была простой на словах: чтобы статьи находились в поиске, читались с телефона и выходили без ручной вёрстки каждой страницы. За ней стоит набор решений — от формата хранения текста до того, как поисковики узнают о новой статье в день публикации.
Ниже — как устроен блог для сайта компании на примере madeinsphere.ru/news. Всё, что описано, взято из кода проекта: генератор, шаблон, лента, файлы для поисковиков и шаг выкладки. Результатов по трафику здесь нет: блог запущен недавно, цифры покажем позже, когда они накопятся.
Зачем агентству корпоративный блог
Корпоративный блог нужен нам для двух вещей. Первая — SEO: человек ищет, сколько стоит сайт, как составить техническое задание или с чего начать внедрение ИИ, и попадает на нашу статью. Вторая — ответы на вопросы, которые клиенты задают нам на первых встречах. Если ответ уже разобран в статье, его можно прислать ссылкой.
У такого блога есть особенность: статья должна работать и для поисковика, и для человека. Поисковику нужны чистая структура, разметка и быстрая индексация. Человеку — короткие абзацы, понятная навигация и выжимка в начале, чтобы за минуту понять, стоит ли читать дальше.
Требования к блогу
До разработки мы зафиксировали, что блог должен уметь. Список получился таким:
- новая статья выходит без ручной вёрстки: текст отдельно, оформление отдельно;
- все страницы статические — быстро открываются и одинаково видны поисковому роботу и читателю;
- у каждой статьи есть микроразметка, оглавление и блок частых вопросов;
- рубрики — отдельные страницы под свои поисковые запросы;
- поисковики узнают о новых и изменённых страницах сразу после выкладки;
- лента и обложки выдержаны в стиле остального сайта;
- в тексте нельзя случайно нарушить правила оформления — это ловит сборка, а не редактор.
Последний пункт важнее, чем кажется. Когда статей десятки, договорённости «так не делаем» перестают работать, если их ничто не проверяет.
Как устроен генератор статических страниц
Блог — это статический сайт без базы данных и админки. Статьи лежат в репозитории как JSON-файлы, вёрстка всех статей — в одном HTML-шаблоне, а порядок и даты публикации — в списке внутри сборщика. Генератор статических страниц написан на Python и запускается одной командой.
- Загрузка статей. Сборщик читает JSON каждой статьи: заголовок, meta title и description, подзаголовок, основной и смежные запросы, текст, вопросы и ответы. Сразу проверяется, что адрес совпадает с именем файла, а рубрика — из разрешённого списка.
- Проверка разметки. В тексте разрешены только абзацы, подзаголовки, списки, выделения, ссылки, таблицы и несколько блоков из нашего правила оформления. Если встречается другой тег, лишний класс или ссылка на статью блога внутри абзаца, сборка падает с указанием статьи.
- Сборка страницы. Текст подставляется в шаблон, у подзаголовков появляются якоря, из них собирается оглавление, блоки «Читайте также» получают заголовок, рубрику и дату нужной статьи.
- Лента и рубрики. Из одного файла ленты получаются общая лента и пять страниц рубрик, у каждой свой title, description, H1 и микроразметка.
- Файлы для поисковиков. Обновляются карта сайта, RSS-лента и llms.txt, для каждой статьи рисуется картинка для соцсетей 1200×630.
Картинку для соцсетей сборщик делает сам: берёт обложку статьи, затемняет её к низу, ставит логотип, рубрику с датой и заголовок капсом. Кегль подбирается так, чтобы заголовок уместился в четыре строки.
SEO-часть: разметка, рубрики и индексация
Блог для SEO держится на мелочах, которые легко забыть при ручной вёрстке. Поэтому всё, что можно, собирается автоматически и одинаково для каждой страницы.
Разметка статей schema.org
Каждая статья получает разметку BlogPosting: заголовок, описание, даты публикации и изменения, рубрику, ключевые запросы, число слов, время чтения, обложку и картинку для соцсетей, издателя. Рядом — BreadcrumbList с цепочкой «Главная → Блог → рубрика → статья». Если в статье есть вопросы, добавляется FAQPage.
Микроразметка FAQ собирается из того же поля, что и раздел «Частые вопросы» в конце текста, поэтому вопросы на странице и в разметке не расходятся. Лента и рубрики размечены как CollectionPage со списком ItemList, где перечислены все статьи по порядку.
Оглавление, «Коротко» и типограф
Якоря у подзаголовков нужны не только читателю: поисковики могут показывать ссылки на разделы прямо в выдаче. Оглавление ставится после блока «Коротко» — выжимки из трёх–пяти пунктов в начале статьи.
Типограф расставляет неразрывные пробелы после коротких предлогов и союзов, привязывает тире к предыдущему слову и не даёт частицам «ли», «же», «бы» уйти на новую строку. Мелочь, но без неё текст на узком экране выглядит неаккуратно.
Страницы рубрик под свои запросы
Рубрики — не просто фильтр, а отдельные страницы. У страницы о разработке свой заголовок про разработку сайтов, веб-сервисов и приложений, у рубрики кейсов — про разборы наших проектов. Так каждая рубрика может ранжироваться по своей группе запросов, а не конкурировать с общей лентой.
Карта сайта, RSS, llms.txt и IndexNow
Сборщик обновляет блок блога в карте сайта: ленту, рубрики и статьи с датами изменения и обложками. Адрес карты указан в robots.txt. RSS-ленту читают агрегаторы, и по ней поисковики быстрее узнают о новых статьях. В llms.txt попадает список статей по рубрикам с описаниями — этот файл читают нейросетевые поисковики.
Самое заметное для скорости индексации — IndexNow. При каждой выкладке Яндекс и Bing получают список изменённых страниц, а не ждут следующего обхода. Скрипт сравнивает коммиты, берёт изменённые файлы сайта и оставляет только страницы из индекса. Удалённые статьи тоже уходят в список, чтобы поисковик перепроверил адрес. Сбой уведомления выкладку не останавливает.
| Что сделали | Зачем для SEO |
|---|---|
| Статические страницы из JSON | Быстрая загрузка, робот видит весь текст сразу |
| BlogPosting, BreadcrumbList, FAQPage | Расширенные сниппеты и понятная структура для поисковика |
| Якоря и оглавление | Ссылки на разделы в выдаче, удобная навигация |
| Страницы рубрик со своим title и H1 | Отдельные посадочные страницы под группы запросов |
| Карта сайта, RSS, llms.txt | Поисковики и нейросети находят все статьи |
| IndexNow при выкладке | Новые и изменённые страницы попадают в индекс быстрее |
| Картинки 1200×630 | Аккуратное превью в соцсетях и мессенджерах |
Дизайн ленты и статьи
Ленту мы не хотели делать стандартной сеткой из одинаковых плиток. На компьютере она стоит в пять колонок, на планшете в три, на телефоне в две.
На компьютере раскладка собирается скриптом заново при каждой загрузке. В ряду от одной до пяти карточек, но два соседних ряда вместе держат не меньше шести статей, а три соседних — не меньше девяти. Так полупустой ряд не встанет рядом с другим полупустым. Внутри ряда карточки занимают случайные колонки, а порядок статей слева направо сохраняется.
Раскладка ленты новая при каждой загрузке, но порядок статей и правила соседних рядов не нарушаются.
Фильтр по рубрикам без перезагрузки
Рубрики в ленте — обычные ссылки на страницы рубрик, поэтому по ним проходит поисковый робот. В общей ленте клик перехватывается: карточки фильтруются на месте, а адрес в браузере меняется на адрес рубрики. Уходящие карточки гаснут, оставшиеся плавно доезжают на новые места, новые проявляются.
Обложки и точка фокуса
Все обложки сделаны в одном стиле: чёрно-белый кадр с акцентом фирменного синего. Каждая хранится в JPEG и WebP и в нескольких размерах: крупный кадр для шапки статьи и уменьшенный для карточек. Браузер сам выбирает подходящий размер по ширине экрана.
Высоту карточки задаёт пропорция, которую мы подбираем под сюжет обложки. Чтобы главное не обрезалось, у каждой обложки записана точка фокуса, и сборщик сдвигает кадр так, чтобы она оказалась по центру карточки. В шапке статьи обложка выводится на весь экран, в ч/б и с более сильным зерном.
При наведении обложка становится негативом: SVG-фильтр обесцвечивает её и переворачивает тона по шкале «белый → фирменный синий → чёрный». Светлое уходит в чёрное, тёмное в белое, средние тона становятся синими.
Страница статьи
Под шапкой — хлебные крошки с рубрикой и временем чтения, затем текст с оглавлением и блоками оформления. В конце — блок для связи и пять карточек «Ещё по теме»: сначала статьи той же рубрики, затем свежие из остальных.
Процесс выпуска статьи
Код решает только часть задачи. Вторая часть — порядок, по которому статья доходит до публикации.
- Бриф. В нём описаны тон, правила достоверности, допустимые факты о компании, требования к SEO и формат файла статьи.
- Тема. Темы согласуются заранее, у каждой статьи один основной запрос и несколько смежных.
- Проверка фактов. Всё, что требует подтверждения, выносится в поле needs_check, а оттуда — в общий список вопросов к команде. Факты дописываются в статью до публикации.
- Проверка и сборка. Отдельный скрипт проверяет поля, разметку и объём статьи тем же кодом, что и сборка. Затем генератор пересобирает блог.
- Выкладка. После публикации изменений сайт обновляется на сервере, а IndexNow отправляет поисковикам список изменённых страниц.
Что дальше
Блог запущен недавно, поэтому о результатах говорить рано. Когда накопятся данные по индексации, поисковым запросам и заявкам, покажем их в отдельном материале.
Тот же подход — статический сайт, генератор, автоматическая разметка и уведомление поисковиков — подходит не только агентству. Если нужен блог для сайта компании или сайт целиком, примеры наших работ собраны в портфолио, а все статьи — в ленте блога.
Частые вопросы
Как сделать блог на сайте компании, чтобы он работал на SEO?
Заложить в него то, что поисковику нужно на каждой странице: чистую структуру с подзаголовками, микроразметку статей и FAQ, страницы рубрик под отдельные запросы, карту сайта и быстрое уведомление поисковиков о новых страницах. Лучше, если это собирается автоматически, а не вручную для каждой статьи.
Зачем блогу статический сайт, а не CMS?
Статические страницы быстро открываются и сразу отдают поисковому роботу весь текст. Нам не нужна админка: статьи лежат в репозитории как файлы, а генератор пересобирает блог одной командой. Для команды, которой нужен редактор в браузере, подойдёт и CMS с теми же правилами разметки.
Что даёт микроразметка FAQ?
Разметка FAQPage сообщает поисковику, что на странице есть вопросы и ответы. Это помогает ему понять структуру и может влиять на вид сниппета. Главное — чтобы вопросы в разметке совпадали с теми, что видит читатель; у нас они собираются из одного поля.
Что такое IndexNow и зачем он нужен?
IndexNow — протокол, по которому сайт сам сообщает поисковикам об изменённых страницах. Его поддерживают Яндекс и Bing. Вместо ожидания следующего обхода поисковик получает список адресов сразу после выкладки.
Когда будут результаты по трафику блога?
Блог запущен недавно, и данных для выводов пока мало. Результаты по индексации и поисковому трафику покажем, когда они накопятся.
