24. RSS и Sitemap

Хорошо оптимизированный сайт должен быть видим как для пользователей, так и для поисковых роботов и RSS-ридеров. Astro предоставляет официальные интеграции для генерации RSS-лент и карты сайта, а также набор паттернов для SEO.

RSS-лента с `@astrojs/rss`

RSS позволяет подписчикам получать обновления вашего блога без посещения сайта. Устанавливаем интеграцию:

npm install @astrojs/rss

Создаём файл-эндпоинт src/pages/rss.xml.ts:

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
import type { APIContext } from 'astro';

export async function GET(context: APIContext) {
  const posts = await getCollection('blog', ({ data }) => data.published);

  return rss({
    title: 'Мой блог об Astro',
    description: 'Свежие статьи о веб-разработке и Astro',
    site: context.site!,
    items: posts.map(post => ({
      title: post.data.title,
      description: post.data.description,
      pubDate: post.data.publishedAt,
      link: `/blog/${post.slug}/`,
      // Опционально: полный HTML контент
      content: post.body,
    })),
    // Кастомные XML-элементы
    customData: `<language>ru-ru</language>`,
  });
}

Лента будет доступна по адресу /rss.xml. Добавьте ссылку в <head>:

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

Sitemap с `@astrojs/sitemap`

Карта сайта помогает поисковым роботам эффективно индексировать все ваши страницы:

npx astro add sitemap

Регистрируем интеграцию в astro.config.mjs:

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://mysite.com',
  integrations: [
    sitemap({
      changefreq: 'weekly',
      priority: 0.7,
      lastmod: new Date(),
      // Исключаем служебные страницы
      filter: (page) => !page.includes('/admin/'),
      // Кастомные настройки для конкретных страниц
      customPages: ['https://mysite.com/custom-page'],
      serialize(item) {
        // Повышаем приоритет главной страницы
        if (item.url === 'https://mysite.com/') {
          return { ...item, priority: 1.0 };
        }
        return item;
      },
    }),
  ],
});

После билда файлы sitemap-index.xml и sitemap-0.xml появятся в папке dist/.

Файл `robots.txt`

Создаём статический файл public/robots.txt:

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/

Sitemap: https://mysite.com/sitemap-index.xml

Open Graph для социальных сетей

Теги Open Graph контролируют, как ваш контент выглядит при публикации в VK, Telegram, Twitter и других платформах:

---
const { title, description, image, url } = Astro.props;
const ogImage = new URL(image, Astro.site);
---
<head>
  <!-- Основные OG теги -->
  <meta property="og:type" content="article" />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={ogImage} />
  <meta property="og:url" content={url} />

  <!-- Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={ogImage} />
</head>

24. RSS и Sitemap

RSS-лента с @astrojs/rss

Sitemap с @astrojs/sitemap

Файл robots.txt

Open Graph для социальных сетей

Генератор RSS и Sitemap

RSS-лента с `@astrojs/rss`

Sitemap с `@astrojs/sitemap`

Файл `robots.txt`