Astro CMS — это современная альтернатива WordPress для контентных проектов. Используя Markdown и MDX, вы получаете мощь статической генерации, высокую скорость и полный контроль над SEO. В этой статье мы разберем, как настроить Astro так, чтобы сайт не терял в поисковом трафике, а только выигрывал.

📦 1. Архитектура Astro CMS на Markdown/MDX

  • Контент хранится в папке src/content/, разбит по коллекциям.
  • Каждая статья — это .md или .mdx файл с frontmatter в начале:
---
title: "Пример статьи"
description: "Краткое описание для SEO"
publishDate: "2025-01-01"
image: "/images/article-preview.jpg"
tags: ["SEO", "Astro"]
---
  • Content Collections позволяют типизировать структуру данных, что удобно и безопасно.

🏷️ 2. Динамические метатеги из фронтматтера

Astro позволяет автоматически подставлять значения title, description, og:image и другие метатеги из frontmatter каждой страницы:

---
export interface Props {
  title: string;
  description: string;
  image: string;
}
const { title, description, image } = Astro.props;
---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
</head>

🗺️ 3. Автоматизация sitemap.xml и robots.txt

Подключите официальный плагин:

npm install @astrojs/sitemap

Добавьте в astro.config.mjs:

import sitemap from "@astrojs/sitemap";

export default {
  integrations: [sitemap()],
  site: "https://your-site.com",
};

Создайте файл public/robots.txt:

User-agent: *
Allow: /
Sitemap: https://your-site.com/sitemap-index.xml

📚 4. Schema.org (JSON-LD) в компонентах

Используйте JSON-LD для улучшения семантики и показа в расширенных сниппетах:

<script type="application/ld+json">
{JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": title,
  "description": description,
  "image": image,
  "author": {
    "@type": "Organization",
    "name": "AstroCMS"
  },
  "publisher": {
    "@type": "Organization",
    "name": "AstroCMS",
    "logo": {
      "@type": "ImageObject",
      "url": "https://your-site.com/logo.png"
    }
  },
  "datePublished": publishDate
})}
</script>

🔌 5. Интеграция с headless CMS и SEO

Astro легко интегрируется с внешними API и headless CMS:

  • Sanity
  • Contentful
  • Strapi
  • Hygraph

Плюсы:

  • Многоязычность и динамический контент
  • Удобный интерфейс для команды

Минусы:

  • Требуется настройка SSR или ISR, если контент должен быть актуален в реальном времени
  • Зависимость от внешнего API

📝 Заключение

С Astro вы получаете контроль, скорость и масштабируемость — всё, что нужно для эффективного SEO. Markdown подходит для блогов и документации, а headless CMS открывает путь к большим редакционным платформам. Главное — не терять контроль над метатегами, структурой и технической оптимизацией, а Astro как раз это и даёт.

👉 Документация Astro Content Collections

👉 Пример SEO-компонента