Astro — идеальная платформа для SEO. Статический HTML, нулевой JavaScript по умолчанию и молниеносная загрузка дают фору любому динамическому фреймворку. Но даже у Astro-сайта нужно настроить SEO правильно. Этот гайд — пошаговая инструкция.
Почему Astro выигрывает у конкурентов в SEO
Три ключевых преимущества перед Next.js, WordPress и другими:
- Чистый HTML без лишнего JS — поисковые боты получают именно тот контент, который вы хотите проиндексировать, без необходимости исполнять JavaScript
- Core Web Vitals из коробки — PageSpeed 95-100 без дополнительной оптимизации
- Скорость = ранжирование — Google официально использует LCP, INP, CLS как сигналы ранжирования
1. Мета-теги: Базовая SEO-разметка
Создайте компонент BaseHead.astro для переиспользования на всех страницах:
---
// src/components/BaseHead.astro
interface Props {
title: string;
description: string;
canonical?: string;
image?: string;
type?: 'website' | 'article';
}
const {
title,
description,
canonical = Astro.url.href,
image = '/og-default.png',
type = 'website',
} = Astro.props;
const siteName = 'Ваш Сайт';
const fullTitle = title.includes(siteName) ? title : `${title} | ${siteName}`;
---
<!-- Основные мета-теги -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{fullTitle}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonical} />
<!-- Open Graph (Facebook, VK, Telegram) -->
<meta property="og:type" content={type} />
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.site)} />
<meta property="og:url" content={canonical} />
<meta property="og:site_name" content={siteName} />
<meta property="og:locale" content="ru_RU" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={fullTitle} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={new URL(image, Astro.site)} />
<!-- Robots -->
<meta name="robots" content="index, follow" />2. Sitemap: Автоматическая карта сайта
Установите официальную интеграцию:
npx astro add sitemapВ astro.config.mjs:
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://yoursite.ru', // Обязательно!
integrations: [
sitemap({
changefreq: 'weekly',
priority: 0.7,
lastmod: new Date(),
// Исключить служебные страницы
filter: (page) => !page.includes('/draft/'),
// Добавить lastmod из файловой системы для статей
serialize(item) {
if (item.url.includes('/articles/')) {
item.changefreq = 'monthly';
item.priority = 0.9;
}
return item;
},
}),
],
});После сборки sitemap будет доступен по /sitemap-index.xml. Добавьте в Google Search Console.
3. robots.txt
Создайте public/robots.txt:
User-agent: *
Allow: /
Sitemap: https://yoursite.ru/sitemap-index.xml
# Закрыть служебные пути
Disallow: /draft/
Disallow: /admin/4. Structured Data (JSON-LD)
JSON-LD — это разметка для поисковых систем, которая помогает понять контекст страницы. Astro позволяет добавить её легко:
---
// src/components/JsonLd.astro — для страниц статей
interface Props {
title: string;
description: string;
date: Date;
author: string;
image?: string;
url: string;
}
const { title, description, date, author, image, url } = Astro.props;
const schema = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
datePublished: date.toISOString(),
dateModified: date.toISOString(),
author: {
'@type': 'Person',
name: author,
},
image: image ? [image] : undefined,
url,
publisher: {
'@type': 'Organization',
name: 'Ваш Сайт',
logo: {
'@type': 'ImageObject',
url: 'https://yoursite.ru/logo.png',
},
},
};
---
<script type="application/ld+json" set:html={JSON.stringify(schema)} />Для главной страницы — WebSite schema с SearchAction:
---
const websiteSchema = {
'@context': 'https://schema.org',
'@type': 'WebSite',
name: 'Ваш Сайт',
url: 'https://yoursite.ru',
potentialAction: {
'@type': 'SearchAction',
target: 'https://yoursite.ru/search?q={search_term_string}',
'query-input': 'required name=search_term_string',
},
};
---
<script type="application/ld+json" set:html={JSON.stringify(websiteSchema)} />5. Оптимизация изображений
<Image /> из astro:assets — обязательный инструмент:
---
import { Image } from 'astro:assets';
import coverImage from '../assets/covers/article.webp';
---
<Image
src={coverImage}
alt="Описательный alt-текст для SEO и доступности"
width={1200}
height={630}
format="webp"
quality={85}
loading="lazy"
<!--
Для
изображений
ниже
fold
--
>
/></Image
>Alt-текст обязателен
Каждое изображение должно иметь alt. Описывайте содержимое, включая ключевые слова естественным образом.
WebP / AVIF формат
Astro автоматически конвертирует в WebP. Это экономит 30-50% размера vs PNG/JPEG — прямое влияние на LCP.
loading=eager для первого экрана
Главная картинка статьи — loading="eager" и fetchpriority="high". Это ключевой
фактор LCP.
6. Канонические URL и трейлинг слеш
Настройте в astro.config.mjs:
export default defineConfig({
site: 'https://yoursite.ru',
trailingSlash: 'always', // Стандартизирует URL: /article/ а не /article
});Дублирующиеся URL (например, с параметрами сортировки) закрывайте через canonical:
<link rel="canonical" href="https://yoursite.ru/articles/" />7. Хлебные крошки (Breadcrumbs)
---
// src/components/Breadcrumbs.astro
const crumbs = [
{ label: 'Главная', href: '/' },
{ label: 'Статьи', href: '/articles/' },
{ label: 'Текущая статья', href: Astro.url.pathname },
];
const breadcrumbSchema = {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: crumbs.map((crumb, i) => ({
'@type': 'ListItem',
position: i + 1,
name: crumb.label,
item: new URL(crumb.href, Astro.site).href,
})),
};
---
<nav aria-label="Хлебные крошки">
{
crumbs.map((crumb, i) => (
<>
{i > 0 && <span>›</span>}
<a href={crumb.href}>{crumb.label}</a>
</>
))
}
</nav>
<script type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />8. Core Web Vitals: Оптимизация
| Метрика | Что такое | Как улучшить в Astro |
|---|---|---|
| LCP | Время отрисовки главного элемента | fetchpriority="high" на обложке, WebP, минимум CSS |
| INP | Задержка на взаимодействие | Минимум JS; острова только по требованию |
| CLS | Сдвиг макета | Явные width/height на всех изображениях |
9. Внутренняя перелинковка
Обязательно ставьте ссылки между статьями. В MDX это просто:
Читайте также: [Деплой на Cloudflare](/articles/deploj-i-hosting-dlya-astro)
и [Headless CMS для Astro](/articles/headless-cms-dlya-astro).Хорошая перелинковка:
- Распределяет «вес» страниц внутри сайта
- Снижает показатель отказов (пользователь переходит дальше)
- Помогает Google понять иерархию и тематику сайта
10. Чеклист перед публикацией
- ☑
title— уникальный, до 60 символов, содержит ключевое слово - ☑
description— информативный, до 160 символов - ☑ Canonical URL настроен
- ☑ Open Graph изображение 1200×630 px
- ☑ JSON-LD structured data присутствует
- ☑ Все изображения с alt-текстом и явными размерами
- ☑ Sitemap обновлён и отправлен в Search Console
- ☑ Нет дублирующихся страниц
- ☑ PageSpeed Mobile 90+
Итог
Astro — лучший старт для SEO-ориентированного проекта. Базовая конфигурация (sitemap, canonical, JSON-LD, оптимизация изображений) занимает несколько часов. После этого ваш сайт будет технически безупречен с точки зрения поисковых систем. Остальное — качество контента и внешние ссылки.
