Как добавить блог на сайт: варианты, SEO и настройка

Чтобы добавить блог на сайт, сначала решите, как будут писаться посты: Markdown-файлы в проекте, если их пишете вы или разработчик, база данных с редактором в админке, если писать будут нетехнические люди, или CMS, если нужен полноценный инструмент редактирования. Затем разместите блог по адресу /blog на основном домене: со страницей списка, отдельной страницей для каждого поста и RSS-лентой. Для поисковиков каждый пост должен отдаваться как настоящий HTML со своим заголовком, описанием и изображением для превью и попадать в карту сайта. ИИ-конструктор может создать любой из этих вариантов по промпту; выбор в основном зависит от того, кто будет писать.

Выберите, как будут писаться посты

Это самое важное решение. Технология следует из него.

Простое правило: если вам комфортно писать в обычном текстовом файле, Markdown — самый простой и быстрый вариант. Если слова «коммит» и «повторный деплой» остановят вас или вашу команду от публикации, выбирайте редактор.

Подпапка или поддомен?

• Подпапка (example.com/blog): один сайт, один дизайн, одна аналитика, а посты находятся на том же домене, что и страницы, которые вы хотите вывести в поиске. Проще всего для большинства бизнесов.
• Поддомен (blog.example.com): нужен, если блог работает на другой платформе, которую нельзя разместить под основным сайтом.

Если вы всё равно встраиваете блог в собственный сайт, используйте подпапку.

Что нужно блогу

• Страница списка постов с заголовками, датами, короткими анонсами и пагинацией.
• Страница поста с комфортной шириной текста (примерно 60–80 символов в строке), понятными заголовками и хорошей работой с изображениями.
• Понятные URL: /blog/kak-vybrat-kejtering, а не /blog?id=17.
• Заголовок и мета-описание для каждого поста, а также теги Open Graph, чтобы у ссылок при публикации был нормальный превью.
• Записи в карте сайта для каждого поста и RSS-лента для читателей и инструментов рассылок.
• Автор и дата, а также дата «обновлено», когда вы вносите правки.
• Категории или теги, когда постов станет достаточно, чтобы они понадобились.
• Черновики, чтобы незавершённые посты оставались закрытыми.

SEO: сделайте посты настоящими страницами

Многие сайты, созданные современными инструментами, — одностраничные приложения: браузер загружает JavaScript, который затем рисует страницу. Для приложений это подходит, но блог живёт за счёт поиска и превью в ссылках, а страницы, которые рисуются только в браузере, хуже читаются некоторыми роботами и превью соцсетей. Для блога попросите предварительную генерацию постов (превращение в HTML при сборке сайта) или серверную отрисовку, чтобы каждый URL поста сразу возвращал полный текст, заголовок и описание.

Наше руководство SEO для сайтов, созданных с ИИ подробнее рассказывает о заголовках, картах сайта и структурированных данных.

Примеры промптов

Блог на Markdown:

Добавь блог по адресу /blog. Каждый пост — Markdown-файл в content/blog с заголовком, описанием, датой и необязательным обложечным изображением в начале. Сделай страницу списка (от новых к старым, по 10 на странице) и страницу каждого поста по адресу /blog/[slug]. Предварительно сгенерируй все страницы блога в статический HTML, чтобы у каждой был свой заголовок, мета-описание и теги Open Graph. Добавь посты в sitemap.xml и создай RSS-ленту по адресу /blog/rss.xml.

Блог с редактором:

Добавь блог, где посты хранятся в базе данных: заголовок, slug, анонс, текст (Markdown), обложка, статус (черновик или опубликован), дата публикации. Добавь защищённую паролем админ-зону для создания, редактирования, предпросмотра и публикации постов, с загрузкой изображений для обложки и вставок в текст. На /blog показывай только опубликованные посты. Отрисовывай страницу каждого поста на сервере, с его собственным заголовком и мета-описанием.

Полировка:

Улучши оформление постов блога: комфортная ширина чтения, больший межстрочный интервал, оформленные заголовки, блоки кода и цитаты, адаптивные изображения и ссылки «следующий / предыдущий пост» внизу. Сохрани существующие цвета и шрифты сайта.

Пошагово

1. Решите, кто пишет, и выберите Markdown, базу данных с редактором или CMS.
2. Выберите структуру URL: /blog и /blog/slug-posta.
3. Создайте страницы списка и поста с базовой разметкой, описанной выше.
4. Добавьте метаданные к каждому посту: заголовок, описание, изображение для превью, даты.
5. Сделайте посты доступными для роботов: предварительно сгенерируйте или отрисуйте их на сервере, затем проверьте, открыв исходный код страницы поста — текст статьи должен там быть.
6. Добавьте карту сайта и RSS-ленту.
7. Работайте с изображениями: сжимайте их, задавайте размеры, добавляйте альтернативный текст. Для редактора храните загрузки в файловом хранилище (см. как добавить загрузку файлов).
8. Напишите два-три поста до запуска, чтобы блог не выглядел пустым.
9. Опубликуйте и отправьте карту сайта в Google Search Console.

Частые ошибки

• Выбор способа, которым никто не будет пользоваться. Markdown-блог для команды, которая не работает с файлами, так и останется пустым.
• Посты, которые отрисовываются только в браузере. При публикации ссылки превью пустое, а поисковики могут видеть меньше.
• Одинаковый заголовок и описание у всех постов. У каждого поста должны быть свои.
• Изменение slug после публикации. Это ломает ссылки; если без этого не обойтись, добавьте редирект.
• Огромные несжатые изображения. Они замедляют каждый пост.
• Нет черновиков. Недописанные посты случайно уходят в публикацию.
• Рассказы о себе вместо вопросов клиентов. Полезные ответы приводят посетителей; объявления редко дают результат.

Чек-лист

• Способ написания соответствует тому, кто действительно будет писать
• Блог находится по адресу /blog на основном домене
• У каждого поста понятный и стабильный URL
• У каждого поста уникальные заголовок, описание и изображение для превью
• HTML поста содержит полную статью (проверено в исходном коде страницы)
• Карта сайта и RSS-лента включают все опубликованные посты
• Черновики остаются закрытыми
• Изображения сжаты и имеют альтернативный текст
• До запуска написано несколько постов

Добавление блога в Mythex

В Mythex можно добавить любой из видов блога прямо из чата. Для блога с редактором посты хранятся в базе данных проекта, а изображения — в файловом хранилище; Mythex подключает оба, когда приложению это нужно. В документации Mythex отмечено, что новые приложения часто создаются как одностраничные приложения на Vite, у которых SEO слабее, чем у серверно отрисованных или статических HTML-страниц, — поэтому для блога попросите предварительно сгенерированные или статические страницы постов либо настройку на Next.js. См. SEO для опубликованного приложения и публикуйте заново после изменений.

Если вы начинаете с нуля, см. как создать сайт с помощью ИИ и как создать сайт для малого бизнеса.

Вопросы