Astro SEO Checklist
SEO checklist for Astro websites. Covers Astro's zero-JS-by-default approach, content collections, and optimization techniques for the Astro framework.
What is the SEO checklist for Astro?
The Astro SEO checklist covers 18 essential tasks across Technical SEO, On-Page SEO, Content, and Performance categories. Key items include configuring XML sitemaps, optimizing meta tags, improving page speed, and setting up structured data. SEO checklist for Astro websites. Covers Astro's zero-JS-by-default approach, content collections, and optimization techniques for the Astro framework.
Technical SEO
Leverage Astro's zero-JS-by-default rendering
Astro ships zero JavaScript by default. Use client: directives only when interactivity is needed to keep pages fast.
Generate XML sitemaps with @astrojs/sitemap
Install @astrojs/sitemap and add to astro.config.mjs integrations. Set the site URL for proper sitemap generation.
Create a robots.txt endpoint
Create src/pages/robots.txt.ts to generate robots.txt dynamically. Reference your sitemap URL.
Set canonical URLs using Astro.url
Use new URL(Astro.url.pathname, Astro.site) to generate canonical URLs in your layout component.
Configure redirects in astro.config.mjs
Use the redirects configuration or create redirect pages for URL changes and moved content.
On-Page SEO
Set unique title and description per page
Pass title and description as props to your layout component. Never use the same meta for multiple pages.
Implement Open Graph tags in BaseLayout
Add og:title, og:description, og:image, og:url meta tags in your base layout's head section.
Use semantic HTML in .astro components
Use main, article, section, nav, aside, header, footer. Use proper heading hierarchy with h1-h6.
Optimize images with astro:assets
Use the Image component from astro:assets for automatic optimization, format conversion, and responsive sizing.
Add alt text to all Image components
The Image component requires alt. Write descriptive, keyword-relevant alt text for every image.
Content
Add JSON-LD structured data via script tags
Use <script type='application/ld+json' set:html={schema} /> in layouts. Create helper functions for each schema type.
Use Content Collections for blog and data
Define content collections in src/content/config.ts. Use getCollection() to query typed, validated content.
Generate programmatic SEO pages with getStaticPaths
Export getStaticPaths from dynamic route pages. Generate pages from data files, APIs, or content collections.
Build internal links with Astro components
Use standard <a> tags for internal links. Create related content sections in page templates.
Performance
Minimize client-side JavaScript
Only use client: directives (client:load, client:visible) when needed. Every island of JS should be justified.
Preload critical assets
Add <link rel='preload'> for above-fold fonts and images. Use <link rel='preconnect'> for external domains.
Enable compression in your hosting
Configure gzip or brotli compression on your hosting platform. Astro's output is already minimal.
Use View Transitions for navigation
Enable Astro's View Transitions for smooth page navigation without full-page reloads, improving perceived performance.
Optimize Your Astro Site
Use our free SEO tools to generate meta tags, schema markup, and robots.txt for your Astro site.