logo astrojs.dev
AstroJS.dev
Back to Articles
SEO Astro Guide

Complete Guide to Astro SEO Optimization

Learn how to optimize your Astro website for search engines with practical tips, meta tags, structured data, and performance optimization techniques.

Sarah Johnson
Sarah Johnson
8 min read

Complete Guide to Astro SEO Optimization

Search Engine Optimization (SEO) is crucial for any website’s success, and Astro provides excellent tools and patterns to help you build SEO-friendly sites. This comprehensive guide will walk you through everything you need to know about optimizing your Astro website for search engines.

Why Astro is Great for SEO

Astro’s architecture makes it inherently SEO-friendly:

  • Static Site Generation: Pre-rendered HTML for fast loading
  • Zero JavaScript by Default: Minimal client-side JavaScript
  • Excellent Performance: Fast Core Web Vitals scores
  • Built-in Optimizations: Image optimization and asset handling

Essential Meta Tags

Basic Meta Tags

Every page should include these fundamental meta tags:

---
// src/layouts/Layout.astro
export interface Props {
  title: string;
  description: string;
  image?: string;
}

const { title, description, image } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalURL} />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Open Graph Tags

Optimize for social media sharing:

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image || '/default-og-image.jpg'} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={image || '/default-og-image.jpg'} />

Structured Data

Implement JSON-LD structured data to help search engines understand your content:

Website Schema

---
const websiteSchema = {
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Your Site Name",
  "url": Astro.site,
  "description": "Your site description",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": `${Astro.site}/search?q={search_term_string}`
    },
    "query-input": "required name=search_term_string"
  }
};
---

<script type="application/ld+json">
  {JSON.stringify(websiteSchema)}
</script>

Article Schema

For blog posts and articles:

---
const articleSchema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": title,
  "description": description,
  "image": image,
  "datePublished": publishDate,
  "dateModified": modifiedDate,
  "author": {
    "@type": "Person",
    "name": author
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": `${Astro.site}/logo.png`
    }
  }
};
---

Sitemap Generation

Astro can automatically generate sitemaps:

// src/pages/sitemap.xml.ts
import type { APIRoute } from 'astro';

const staticPages = [
  '',
  '/about',
  '/contact',
  '/articles',
  '/templates'
];

export const GET: APIRoute = async ({ site }) => {
  const pages = staticPages.map(page => `
    <url>
      <loc>${site}${page}</loc>
      <changefreq>weekly</changefreq>
      <priority>0.8</priority>
    </url>
  `).join('');

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${pages}
    </urlset>`;

  return new Response(sitemap, {
    headers: {
      'Content-Type': 'application/xml'
    }
  });
};

Performance Optimization

Image Optimization

Use Astro’s built-in image optimization:

---
import { Image } from 'astro:assets';
import heroImage from '../assets/hero.jpg';
---

<Image
  src={heroImage}
  alt="Hero image description"
  width={800}
  height={600}
  loading="eager"
  format="webp"
/>

Critical CSS

Inline critical CSS for above-the-fold content:

<style is:inline>
  /* Critical CSS for above-the-fold content */
  .hero {
    display: flex;
    align-items: center;
    min-height: 100vh;
  }
</style>

URL Structure

Design SEO-friendly URLs:

✅ Good URLs:
/articles/astro-seo-guide
/templates/portfolio-template
/developers/john-doe

❌ Bad URLs:
/articles?id=123
/page.php?category=templates&id=456

Internal Linking

Create a strong internal linking structure:

<!-- Related articles component -->
<section class="related-articles">
  <h3>Related Articles</h3>
  <ul>
    <li><a href="/articles/astro-performance">Astro Performance Guide</a></li>
    <li><a href="/articles/astro-deployment">Deploying Astro Sites</a></li>
  </ul>
</section>

Content Optimization

Heading Structure

Use proper heading hierarchy:

<h1>Main Page Title</h1>
  <h2>Major Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
  <h2>Another Major Section</h2>

Alt Text for Images

Always include descriptive alt text:

<img 
  src="/astro-dashboard.jpg" 
  alt="Astro dashboard showing build statistics and performance metrics"
/>

Technical SEO

Robots.txt

Create a robots.txt file:

# public/robots.txt
User-agent: *
Allow: /

Sitemap: https://yoursite.com/sitemap.xml

404 Page

Create a custom 404 page:

---
// src/pages/404.astro
import Layout from '../layouts/Layout.astro';
---

<Layout title="Page Not Found" description="The page you're looking for doesn't exist.">
  <main class="min-h-screen flex items-center justify-center">
    <div class="text-center">
      <h1 class="text-4xl font-bold mb-4">404 - Page Not Found</h1>
      <p class="mb-8">The page you're looking for doesn't exist.</p>
      <a href="/" class="btn-primary">Go Home</a>
    </div>
  </main>
</Layout>

Monitoring and Analytics

Google Search Console

Set up Google Search Console to monitor:

  • Search performance
  • Index coverage
  • Core Web Vitals
  • Mobile usability

Core Web Vitals

Monitor these key metrics:

  • Largest Contentful Paint (LCP): < 2.5s
  • First Input Delay (FID): < 100ms
  • Cumulative Layout Shift (CLS): < 0.1

SEO Checklist

On-Page SEO

  • Unique, descriptive title tags
  • Meta descriptions under 160 characters
  • Proper heading structure (H1-H6)
  • Alt text for all images
  • Internal linking strategy
  • Fast loading speed
  • Mobile-friendly design
  • HTTPS enabled

Technical SEO

  • XML sitemap submitted
  • Robots.txt configured
  • Canonical URLs set
  • 404 pages handled
  • Structured data implemented
  • Page speed optimized
  • Core Web Vitals passing

Content SEO

  • High-quality, original content
  • Target keywords researched
  • Content regularly updated
  • Related content linked
  • Social sharing enabled

Common SEO Mistakes to Avoid

  1. Duplicate Content: Ensure each page has unique content
  2. Missing Meta Descriptions: Every page should have a description
  3. Slow Loading Speed: Optimize images and minimize JavaScript
  4. Poor Mobile Experience: Test on various devices
  5. Broken Links: Regularly audit and fix broken links
  6. Missing Alt Text: All images need descriptive alt text
  7. Thin Content: Provide substantial, valuable content

Advanced SEO Techniques

Schema Markup for Rich Snippets

---
const breadcrumbSchema = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": Astro.site
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Articles",
      "item": `${Astro.site}/articles`
    }
  ]
};
---

International SEO

For multi-language sites:

<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

Conclusion

SEO optimization is an ongoing process that requires attention to both technical and content aspects. Astro’s performance-first approach gives you a significant advantage, but proper implementation of meta tags, structured data, and content optimization is essential for search engine success.

Remember to:

  • Focus on user experience first
  • Create high-quality, valuable content
  • Monitor your performance regularly
  • Stay updated with SEO best practices
  • Test your site on various devices and browsers

By following this guide, you’ll have a solid foundation for optimizing your Astro website for search engines and improving your organic visibility.

Back to All Articles