AstroHow-ToBeginner · 4 min read

How to Optimize Astro for SEO: Best Practices and Examples

To optimize Astro for SEO, use server-side rendering to deliver fully rendered HTML to search engines, add meaningful <meta> tags for titles and descriptions, and generate a sitemap. Also, ensure semantic HTML and accessibility for better indexing and user experience.

📐

Syntax

Astro uses components and frontmatter to build pages. Key SEO elements include:

<head> section for meta tags
Server-side rendering by default for fast, crawlable HTML
Using Astro.fetchContent() or static data for sitemap generation

Example meta tags syntax:

<head>
  <title>Page Title</title>
  <meta name="description" content="Page description here." />
</head>

html

<head>
  <title>Page Title</title>
  <meta name="description" content="Page description here." />
  <meta name="robots" content="index, follow" />
</head>

💻

Example

This example shows a simple Astro page optimized for SEO with server-side rendering, meta tags, and a sitemap generation script.

astro + javascript

---
// src/pages/index.astro
const siteTitle = "My Astro Site";
const siteDescription = "Welcome to my Astro site optimized for SEO.";
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{siteTitle}</title>
    <meta name="description" content="{siteDescription}" />
    <meta name="robots" content="index, follow" />
  </head>
  <body>
    <h1>{siteTitle}</h1>
    <p>{siteDescription}</p>
  </body>
</html>

// src/scripts/generate-sitemap.js
import fs from 'fs';
const urls = ['/', '/about', '/contact'];
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${urls.map(url => `  <url>\n    <loc>https://example.com${url}</loc>\n  </url>`).join('\n')}\n</urlset>`;
fs.writeFileSync('dist/sitemap.xml', sitemap);

Output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Astro Site</title> <meta name="description" content="Welcome to my Astro site optimized for SEO." /> <meta name="robots" content="index, follow" /> </head> <body> <h1>My Astro Site</h1> <p>Welcome to my Astro site optimized for SEO.</p> </body> </html>

⚠️

Common Pitfalls

Common mistakes when optimizing Astro for SEO include:

Not adding <meta> description tags, which lowers search snippet quality.
Using client-side rendering for main content, causing search engines to see empty pages.
Missing lang attribute on <html>, which affects accessibility and SEO.
Not generating or submitting a sitemap, reducing crawl efficiency.

astro + html

---
// Wrong: Client-side only content
---
<html lang="en">
  <head>
    <title>Site</title>
  </head>
  <body>
    <script type="module">
      document.body.innerHTML = '<h1>Site Content</h1>';
    </script>
  </body>
</html>

---
// Right: Server-side rendered content with meta tags
---
<html lang="en">
  <head>
    <title>Site</title>
    <meta name="description" content="Good SEO content." />
  </head>
  <body>
    <h1>Site Content</h1>
  </body>
</html>

📊

Quick Reference

Use server-side rendering (default in Astro) for full HTML delivery.
Add descriptive <title> and <meta name="description"> tags in <head>.
Set lang attribute on <html> for accessibility.
Generate and submit a sitemap.xml to search engines.
Use semantic HTML tags like <header>, <main>, <footer>.

✅

Key Takeaways

Always use Astro's server-side rendering to deliver fully rendered HTML for SEO.

Include meaningful tags like title and description in the section.

Add a sitemap.xml file to help search engines crawl your site efficiently.

Use semantic HTML and set the lang attribute for better accessibility and SEO.

Avoid client-side only rendering for main content to ensure search engines see your content.