Как настроить canonical, sitemap и RSS в Astro для индексации

#astro #seo #sitemap #rss

Проблема: страницы блога на Astro не индексируются в Яндексе, попадают в LOW_DEMAND или дублируются в выдаче.

Решение: canonical из origin (не из Astro.url.href), sitemap.xml с фильтрацией черновиков, robots.txt с Sitemap, RSS с автообнаружением, meta description до 155 символов, Open Graph с абсолютными URL.

В чём проблема: почему страницы не индексируются

Типичные ошибки в Astro-проектах:

Canonical из Astro.url.href — на localhost и production получаются разные URL
Нет site в конфиге — sitemap и RSS не знают домен
Домен в — занимает место в выдаче</li> <li>Одинаковый description на всех страницах — слабый сигнал для поисковиков</li> <li>Относительный og:image — соцсети не подхватывают превью</li> <li>В sitemap попадают черновики — индексируются незавершённые страницы</li> </ol> Результат: LOW_DEMAND в Яндекс Вебмастере, дубли страниц, плохие сниппеты в выдаче. <hr> Рабочее решение: пошаговая настройка Шаг 1: Задаём site в astro.config.mjs <div class="highlight"><pre class="highlight javascript"><code> // astro.config.mjs import { defineConfig } from "astro/config"; export default defineConfig({ site: "https://example.com", // Полный URL с протоколом // ... }); </code></pre></div> Важно: указывай полный URL с протоколом (https://). Без site интеграция @astrojs/sitemap не заработает. Шаг 2: Canonical только из origin + pathname <div class="highlight"><pre class="highlight typescript"><code> // В компоненте SeoHead.astro const origin = "https://example.com"; // Из astro.config.mjs site const pathname = Astro.url.pathname; const search = Astro.url.search; const canonical = ${origin}${pathname}${search || ""}; </code></pre></div> Почему не Astro.url.href: в dev-режиме Astro.url может быть <a href="http://localhost:4321">http://localhost:4321</a>, а в проде — твой домен. Поисковики хотят видеть один стабильный каноничный адрес. Шаг 3: Создаём компонент SeoHead.astro Создай файл src/components/SeoHead.astro: <div class="highlight"><pre class="highlight plaintext"><code> --- const { title = "Сайт", description = "", canonicalUrl, ogImage = "/assets/og-default.png", noIndex = false, } = Astro.props; // Origin из конфига (один источник правды) const origin = "https://example.com"; const pathname = Astro.url.pathname; const search = Astro.url.search; const canonical = canonicalUrl ?? ${origin}${pathname}${search || ""}; // Убираем домен из title (если есть) const titleWithoutDomain = title.replace(/\s_[|\-—]\s_example\.com\s\*$/i, "").trim() || title; const safeDescription = description.slice(0, 155).trim(); --- <title>{titleWithoutDomain}</title> <meta name="description" content={safeDescription} /> <link rel="canonical" href={canonical} /> {noIndex ? ( <meta name="robots" content="noindex, nofollow" /> ) : ( <meta name="robots" content="index, follow" /> )}  <meta property="og:title" content={titleWithoutDomain} /> <meta property="og:description" content={safeDescription} /> <meta property="og:type" content="website" /> <meta property="og:url" content={canonical} /> <meta property="og:image" content={${origin}${ogImage}} /> <meta property="og:locale" content="ru\_RU" />  <meta name="twitter:card" content="summary\_large\_image" /> <meta name="twitter:title" content={titleWithoutDomain} /> <meta name="twitter:description" content={safeDescription} /> <meta name="twitter:image" content={${origin}${ogImage}} /> <slot /> </code></pre></div> Шаг 4: Используем SeoHead в layout <div class="highlight"><pre class="highlight plaintext"><code> --- import SeoHead from "../components/SeoHead.astro"; const { title = "Сайт", description = "", canonicalUrl, ogImage, noIndex } = Astro.props; --- <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <SeoHead title={title} description={description} canonicalUrl={canonicalUrl} ogImage={ogImage} noIndex={noIndex} /> </head> <body> <slot /> </body> </code></pre></div> Шаг 5: Создаём robots.txt Положи файл в public/robots.txt: <div class="highlight"><pre class="highlight plaintext"><code> User-agent: \* Allow: / Disallow: /admin/ Disallow: /api/ User-agent: Yandex Allow: / Disallow: /admin/ Disallow: /api/ Sitemap: https://example.com/sitemap.xml </code></pre></div> Шаг 6: Генерация sitemap.xml Вариант A: интеграция @astrojs/sitemap (SSG) <div class="highlight"><pre class="highlight shell"><code> pnpm astro add sitemap </code></pre></div> В astro.config.mjs должен быть задан site. Интеграция сгенерирует sitemap.xml в dist. Ограничение: в sitemap попадут только статические страницы. Для блога на Content Collections этого обычно достаточно. Вариант B: кастомный endpoint (SSR или полный контроль) Создай файл src/pages/sitemap.xml.ts: <div class="highlight"><pre class="highlight typescript"><code> import type { APIRoute } from "astro"; import { getCollection } from "astro:content"; const SITE = "https://example.com"; function formatLastmod(d: Date | undefined): string | undefined { return d ? d.toISOString().split("T")[0] : undefined; } export const prerender = false; export const GET: APIRoute = async () => { const posts = await getCollection("blog", ({ data }) => !data.draft); const urls = [ { url: SITE, changefreq: "daily", priority: "1.0" }, { url: ${SITE}/blog, changefreq: "weekly", priority: "0.9" }, ...posts.map((p) => ({ url: ${SITE}/blog/${p.data.slug ?? p.slug}, lastmod: formatLastmod(p.data.updatedDate ?? p.data.pubDate), changefreq: "monthly" as const, priority: "0.8", })), ]; const xml = `<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> ${urls .map( (u) => ` <url> <loc>${u.url}</loc> ${u.lastmod ? <lastmod>${u.lastmod}</lastmod> : ""} <changefreq>${u.changefreq}</changefreq> <priority>${u.priority}</priority> </url>` ) .join("\n")} </urlset>`; return new Response(xml, { headers: { "Content-Type": "application/xml; charset=utf-8" }, }); }; </code></pre></div> Шаг 7: Настраиваем RSS <div class="highlight"><pre class="highlight shell"><code> pnpm add @astrojs/rss </code></pre></div> Создай файл src/pages/rss.xml.ts: <div class="highlight"><pre class="highlight typescript"><code> import rss from "@astrojs/rss"; import { getCollection } from "astro:content"; export async function GET(context: any) { const posts = (await getCollection("blog")) .filter((p) => !p.data.draft) .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()); return rss({ title: "Блог Example", description: "Заметки о разработке", site: context.site?.href ?? "https://example.com", items: posts.map((p) => ({ title: p.data.title, description: p.data.description ?? "", pubDate: p.data.pubDate, link: /blog/${p.data.slug ?? p.slug}/, })), }); } </code></pre></div> В <head> основного layout добавь: <div class="highlight"><pre class="highlight html"><code> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> </code></pre></div> <hr> Проверка результата <ol> <li>Проверка canonical </li> </ol> <div class="highlight"><pre class="highlight shell"><code> Проверить заголовок canonical curl -s https://example.com/blog/astro-part-1/ | grep canonical Должно быть: <link rel="canonical" href="https://example.com/blog/astro-part-1/"> </code></pre></div> <ol> <li>Проверка robots.txt </li> </ol> <div class="highlight"><pre class="highlight shell"><code> Проверить наличие Sitemap curl -s https://example.com/robots.txt | grep Sitemap </code></pre></div> <ol> <li>Проверка sitemap.xml </li> </ol> <div class="highlight"><pre class="highlight shell"><code> Проверить наличие URL постов curl -s https://example.com/sitemap.xml | grep "blog/" </code></pre></div> <ol> <li>Проверка в Яндекс Вебмастере</li> <li>Открыть <a href="https://webmaster.yandex.ru/">Яндекс Вебмастер</a></li> <li>Добавить сайт</li> <li>Проверить разделы:</li> </ol> <ul> <li>Индексирование → Sitemap — должна быть загружена</li> <li>Диагностика → Страницы в поиске — проверить наличие страниц</li> <li>Поведение в выдаче — посмотреть CTR и позиции</li> </ul> <hr> Типичные ошибки ❌ Нет site в конфиге Проблема: sitemap и RSS не знают домен, canonical собирается неправильно. Решение: задать site в astro.config.mjs. ❌ Canonical из Astro.url.href Проблема: на localhost и production получаются разные каноничные URL. Решение: использовать origin из конфига + pathname. ❌ Домен в <title> Проблема: занимает место в выдаче. Решение: убрать домен из title или использовать короткое имя сайта. ❌ Одинаковый description на всех страницах Проблема: слабый сигнал для поисковиков. Решение: делать уникальные описания до ~155 символов. ❌ Относительный og:image Проблема: соцсети не подхватывают превью. Решение: использовать абсолютный URL (origin + путь). ❌ В sitemap попадают черновики Проблема: индексируются незавершённые страницы. Решение: фильтровать по draft: false при генерации sitemap. <hr> Где применять <ul> <li>Блоги на Astro: индексация статей в Яндексе и Google</li> <li>Документация: правильное отображение в поиске</li> <li>Маркетинговые сайты: улучшенные сниппеты в выдаче</li> <li>Портфолио: индексация проектов</li> </ul> Связанные статьи: <ul> <li>Как создать блог на Astro</li> <li>Actions, API Routes, SSR и деплой</li> </ul> Документация: <ul> <li><a href="https://docs.astro.build/en/reference/configuration-reference/">Astro Configuration Reference</a></li> <li><a href="https://docs.astro.build/en/guides/integrations-guide/sitemap/">Sitemap Integration</a></li> <li><a href="https://docs.astro.build/en/guides/rss/">RSS Guide</a></li> </ul> <hr> Чек-лист для Яндекс Вебмастера <ul> <li>[] site в astro.config.mjs задан и совпадает с основным зеркалом</li> <li>[] На каждой странице есть один <link rel="canonical"> с абсолютным URL</li> <li>[] meta description уникален и длиной до ~155 символов</li> <li>[] <title> без домена, осмысленный для каждой страницы</li> <li>[] robots.txt доступен с Sitemap:</li> <li>[] sitemap.xml открывается по URL из robots.txt</li> <li>[] Open Graph : og:title, og:description, og:url, og:image (абсолютный URL)</li> <li>[] Служебные разделы (/admin/, /api/) закрыты в robots.txt</li> <li>[] RSS доступен и объявлен в <head></li> <li>[] Нет дублей страниц (одинаковый контент по разным URL без canonical)</li> </ul> <a href="https://viku-lov.ru/blog/astro-seo-sitemap-rss-setup">Read more on viku-lov.ru</a>

DEV Community

Как настроить canonical, sitemap и RSS в Astro для индексации

Top comments (0)