Блог за вечер

Пятница вечер. Сайт есть, контент есть - восемь LinkedIn-постов про Planq. А блога нет. Поисковики видят лендинг с тремя страницами и не понимают зачем его показывать людям. Google Search Console подключен, Яндекс Вебмастер подключен, а индексировать нечего.

Решил это исправить. За один вечер.

Стек

Сайт на Astro 5, Tailwind, Cloudflare Pages. Три локали - русский по умолчанию, английский и казахский с префиксами /en/ и /kk/. Статическая генерация, никакого сервера. Всё через content collections и getStaticPaths().

Для блога нужно было:

• Коллекция контента со схемой (title, description, locale, pubDate, tags, keywords)
• Страницы списка и статьи для каждой локали (6 файлов)
• Компоненты карточки и поста
• SEO на каждой странице - JSON-LD BlogPosting, og:type=article, meta keywords
• Навигация в хедере
• Сайтмап

Восемь статей за час

Контент уже был. Семь постов из LinkedIn про Planq и один про безопасность чатбота. Обернул в markdown с frontmatter, почистил от LinkedIn-форматирования, заменил em-dashes на нормальные дефисы, убрал двоеточия из заголовков. Восемь файлов в src/content/blog/.

Astro подхватил их автоматически. getCollection('blog', e => e.data.locale === 'ru') - и готово. Каждая статья получила свой slug из имени файла, свои теги и ключевые слова.

OG-картинки на лету

Когда делишься ссылкой в LinkedIn или Telegram - хочется чтобы появлялась красивая карточка с заголовком, а не пустая ссылка. Для этого нужны Open Graph картинки. Можно нарисовать восемь картинок в Figma. А можно сгенерировать на этапе сборки.

Satori от Vercel берёт JSX-подобную разметку и превращает в SVG. @resvg/resvg-js рендерит SVG в PNG. Получается эндпоинт src/pages/og/[slug].png.ts - при билде Astro генерирует PNG для каждой статьи. Тёмный фон, заголовок, описание, теги внизу. 1200 на 630 пикселей, как требуют соцсети.

Восемь картинок генерируются за две секунды. Первая чуть дольше - грузится шрифт. Остальные по 120 мс.

Кнопки шеринга

К каждой статье добавил три кнопки - LinkedIn, Threads, Telegram. Каждая формирует правильный URL с текстом и ссылкой. LinkedIn через sharing/share-offsite, Threads через intent/post, Telegram через t.me/share/url. Иконки из Lucide, Threads - кастомный SVG.

SEO

Каждая статья получает:

• <title> и <meta description> из frontmatter
• <meta keywords> для поисковиков
• og:type=article вместо стандартного website
• og:image указывает на сгенерированную PNG
• JSON-LD BlogPosting с автором, датой, ключевыми словами
• JSON-LD BreadcrumbList для навигации
• Canonical URL и hreflang для трёх локалей

Сайтмап обновил вручную - он статический в public/sitemap.xml. Девять новых URL.

Чатбот тоже в курсе

На сайте живёт AI-чатбот - виртуальный клон который отвечает на вопросы посетителей. Обновил его system prompt - теперь он знает про все статьи блога и может рекомендовать их в разговоре. «Кстати, у Ильяса есть статья про это» - ненавязчиво, в тему.

Итого

Девять статей. Шесть страниц. Два компонента. Восемь OG-картинок. Три кнопки шеринга. Навигация. SEO. Сайтмап. Обновлённый чатбот.

Один вечер. Один терминал. Claude Code рядом как напарник - читает код, предлагает решения, пишет, коммитит. Я ревьюю и направляю.

Завтра Google проиндексирует девять новых страниц вместо трёх. А я напишу об этом в LinkedIn - кратко, со ссылкой на блог. Цикл замкнулся.

---

Читайте также

• Пагинация и казахский шрифт
• Чатбот выглядел как ICQ
• Один клик вместо шести цифр