SEO и карта сайта

SEO — оптимизация для поисковых систем: понятные заголовки, описания и адреса, по которым поисковик находит и показывает страницы. Astro уже отдаёт готовый HTML, что хорошо для поиска; остаётся заполнить мета-теги и сделать карту сайта — файл со списком всех страниц.

Адрес сайта

Многим функциям нужен полный адрес сайта. Укажите его в astro.config.mjs:

// astro.config.mjs
import { defineConfig } from 'astro/config';
 
export default defineConfig({
  site: 'https://blog.example.com',
});

После этого адрес доступен в компонентах как Astro.site, а в эндпоинтах — как context.site.

Мета-теги в макете

Добавьте пропс description и теги в <head> макета src/layouts/BaseLayout.astro:

---
interface Props {
  title: string;
  description?: string;
}
 
const { title, description = 'Блог Анны о веб-разработке' } = Astro.props;
const canonical = new URL(Astro.url.pathname, Astro.site);
---
 
<head>
  <meta charset="utf-8" />
  <title>{title} — Блог Анны</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonical} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
</head>

Откройте код любой страницы в браузере — в <head> будут описание и полный адрес https://blog.example.com/.... Канонический адрес говорит поисковику, какой адрес страницы главный. Теги og: используют соцсети и мессенджеры для превью ссылки.

Описание статьи

На странице статьи передайте описание из коллекции:

<BaseLayout title={post.data.title} description={post.data.description}>

Теперь у каждой статьи своё описание в результатах поиска, а не общее для всего блога.

Карта сайта

npx astro add sitemap

Команда установит @astrojs/sitemap и добавит sitemap() в integrations. Интеграции нужен site из конфигурации. Выполните npm run build — в папке dist/ появятся sitemap-index.xml и sitemap-0.xml со всеми страницами. Добавьте ссылку на карту в <head>: <link rel="sitemap" href="/sitemap-index.xml" />.

robots.txt

Файл для поисковых роботов кладут в public/robots.txt:

User-agent: *
Allow: /
 
Sitemap: https://blog.example.com/sitemap-index.xml

Он копируется в корень сайта и подсказывает роботам, где карта сайта.

Частая ошибка

Забывают указать site в настройках. Тогда Astro.site равен undefined, строка с new URL() для канонического адреса падает с ошибкой, а интеграция sitemap не создаёт файлы и пишет предупреждение. Задайте site первым делом, до SEO и RSS.