Astro предлагает уникальные возможности для реализации технического SEO на высоком уровне. Благодаря архитектуре Island, статической генерации и продвинутым возможностям настройки метаданных, можно построить максимально оптимизированную структуру сайта. В этой статье мы разберем ключевые подходы и покажем, как их применить.

🔗 1. Оптимальная структура URL

  • Используйте чистые URL без расширений: /blog/post-title/ вместо /blog/post-title.html
  • В Astro это реализуется автоматически при использовании маршрутов файловой системы.
  • Удаление index.html из URL достигается с помощью настроек build или сервера.

🧭 2. Canonical и hreflang

Astro позволяет вручную или динамически задавать метатеги:

---
import { Astro } from 'astro';

const canonicalUrl = Astro.site + Astro.url.pathname;
---
<head>
  <link rel="canonical" href="{canonicalUrl}" />
  <link rel="alternate" hreflang="en" href="{Astro.site}/en/" />
</head>

Поддержка Astro.glob() и collections помогает легко работать с мультиязычными сайтами.

🖼️ 3. Lazy-loading, prefetch и preload

  • Изображения: используйте loading="lazy" и decoding="async"
  • Добавьте preload для шрифтов и ключевых изображений:
<link rel="preload" href="/fonts/Inter.woff2" as="font" type="font/woff2" crossorigin />
  • Используйте Astro плагин @astrojs/image для автоматической оптимизации:
<Image src="/hero.jpg" alt="Hero" loading="lazy" />

🏝️ 4. Astro Islands: интерактив без потери SEO

Astro позволяет встраивать только нужные интерактивные компоненты:

<Counter client:load />

Всё остальное — чистый HTML. Это резко снижает размер страницы и улучшает Core Web Vitals.

✅ 5. Шаблоны и чек-лист для SEO-аудита Astro-сайта

Базовый чеклист:

  • Канонические ссылки на всех страницах
  • lang атрибут в <html>
  • ЧПУ (человеко-понятные URL)
  • Sitemap.xml и robots.txt
  • OpenGraph и Twitter Card теги
  • PageSpeed ≥ 90
  • Проверка индексации в GSC

Инструменты:

  • Lighthouse
  • Screaming Frog + статическая сборка /dist
  • Ahrefs / SEMrush
  • Astro SEO плагин

📝 Заключение

Astro даёт возможность контролировать каждую мелочь в генерации HTML и структуры сайта. Это открывает широкие возможности для технического SEO, сохраняя при этом чистую архитектуру и невероятную скорость загрузки. Хотите быть первыми в выдаче — стройте на Astro.

👉 Руководство по SEO от Astro

👉 Astro GitHub