logo astrojs.dev
AstroJS.dev
Back to Articles
SEO Technical SEO Astro URL Structure Core Web Vitals Astro Islands

Technical SEO on Steroids: Using Astro to Build a Hyper-Optimized Site Structure

Learn how to create an SEO-optimized website architecture in Astro: clean URLs, canonical tags, lazy loading, and partial hydration with Astro Islands.

t3ma
t3ma
8 min read

Technical SEO on Steroids: Using Astro to Build a Hyper-Optimized Site Structure

Astro is more than a static site generator—it’s a secret weapon for technical SEO. With built-in performance advantages and granular control over page structure, Astro lets you craft lightning-fast, crawlable, and scalable websites that shine in Google’s eyes.

🧱 Clean URL Structure with File-Based Routing

Astro uses a filesystem-based routing model that naturally produces clean, semantic URLs:

src/pages/index.astro         → /
src/pages/about.astro         → /about/
src/pages/blog/[slug].astro   → /blog/my-article/

Best practices:

  • Use kebab-case (/seo-guide/)
  • Keep URLs short and meaningful
  • Group related content under folders (/blog/, /guides/)

Clean URLs = better crawlability + higher CTR.

🔗 Canonical Tags & hreflang in Astro

Avoid duplicate content issues and improve international SEO by dynamically inserting:

<head>
  <link rel="canonical" href={`https://example.com${Astro.url.pathname}`} />
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="es" href="https://example.com/es/" />
</head>

Use Astro’s layout props to generate these for each language/version dynamically.

🖼️ Lazy-Loading, Preload, and Prefetch Strategies

💤 Lazy Loading

Built-in with native HTML:

<img src="/images/post-cover.webp" alt="Cover image" loading="lazy" />

⚡ Preloading Critical Assets

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

🚀 Prefetch Internal Pages

Use in <head> for upcoming routes:

<link rel="prefetch" href="/next-article/" />

This improves navigation speed and user flow.

🧩 Astro Islands = Interactive Without SEO Cost

Astro Islands allow partial hydration—only hydrating JS where necessary.

---
// In your component file
import Counter from '../components/Counter.jsx';
---

<Counter client:load />

Or defer loading even further:

  • client:visible
  • client:idle

Benefits:

  • Reduces overall JS payload
  • Preserves TTFB and LCP
  • Keeps Lighthouse score high

Perfect for interactive widgets, search boxes, etc., without hurting SEO.

🧪 SEO Audit Templates & Tools

✅ Lighthouse

  • Target 90+ for all metrics
  • Pay attention to unused JS, layout shift, TBT

✅ Schema.org

Use JSON-LD for rich results:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "{title}",
  "datePublished": "{publishDate}",
  "author": {
    "@type": "Person",
    "name": "Adam Walker"
  }
}
</script>

✅ Sitemap & robots.txt

npm install @astrojs/sitemap
// astro.config.mjs
site: "https://example.com",
integrations: [sitemap()],

And create /robots.txt manually:

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

✅ Link & Crawl Audits

Use:

  • Screaming Frog
  • Ahrefs Site Audit
  • Sitebulb

Check:

  • Crawl depth (≤3)
  • Broken links
  • Redirect chains
  • Orphan pages

✅ Conclusion

Astro empowers developers with all the tools needed for technical SEO excellence. With features like smart routing, partial hydration, and full control over markup, you can craft SEO-optimized sites that are both fast and scalable.

Build for performance. Build for search. Build with Astro.

Back to All Articles