Astro SEO Best Practices

Astro is built for performance, which gives you a head start on SEO. This guide covers the essential optimizations to help your Astro site rank higher in search engines.

Why Astro is Great for SEO

Astro ships zero JavaScript by default and renders HTML at build time. This means:

Fast page loads – search engines reward speed
Fully crawlable HTML – no JavaScript rendering issues
Excellent Core Web Vitals – LCP, FID, and CLS scores

Essential Meta Tags

Every page should have unique, descriptive meta tags:

<head>
  <title>Your Page Title | Your Site</title>
  <meta name="description" content="A compelling description under 160 characters." />
  <link rel="canonical" href="https://yourdomain.com/page/" />
</head>

Dynamic Meta Tags in Astro

Pass meta data as props to your layout:

---
// Layout.astro
interface Props {
  title: string;
  description?: string;
}
const { title, description = 'Default description' } = 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} />
</head>

Open Graph and Twitter Cards

Add social sharing meta tags for better link previews:

<!-- Open Graph -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/page/" />
<meta property="og:type" content="website" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yourdomain.com/og-image.png" />

Sitemap and Robots.txt

Help search engines discover your pages:

Add a sitemap using @astrojs/sitemap
Create a public/robots.txt file:

User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap-index.xml

Image Optimization

Optimized images improve page speed and SEO:

Use Astro's built-in <Image /> component
Always include descriptive alt text
Serve modern formats like WebP or AVIF
Set explicit dimensions to prevent layout shift

Learn more in our Astro Image Optimization Guide.

Semantic HTML and Headings

Use proper HTML structure:

One <h1> per page (your main title)
Use <h2>, <h3>, etc. in logical order
Use semantic elements: <article>, <nav>, <main>, <footer>
Add structured data (JSON-LD) for rich snippets

Internal Linking

Link between your pages to help search engines understand your site structure and distribute page authority:

Link from high-authority pages to important pages
Use descriptive anchor text (not "click here")
Create topic clusters with pillar pages and supporting content

Performance Optimization

Astro is fast by default, but you can go further:

Use client:visible or client:idle for interactive components
Minimize third-party scripts
Use a CDN for static assets
Enable compression (gzip/brotli) on your host
Preconnect to external domains you use

SEO Checklist

✅ Unique <title> and <meta description> per page
✅ Canonical URLs set
✅ Open Graph and Twitter meta tags
✅ Sitemap submitted to Google Search Console
✅ robots.txt in place
✅ Images optimized with alt text
✅ Semantic HTML structure
✅ Mobile-friendly responsive design
✅ Fast page load times

Related Guides

Want an SEO-ready Astro template?

Our recommended templates come with meta tags, sitemaps, and performance optimizations built in.

Browse Astro Templates View Astro Themes