SEO for Astro sites: a lightweight rank plan for content-first SaaS (as of July 2026)

1. Astro's SSG-by-default advantage

Every page ships as complete HTML on first byte. Crawlers and AI engines that skip JavaScript still see the full content.

Astro renders every page to static HTML at build time. No React runtime ships to the client unless you explicitly hydrate a component with client:load or a similar directive. The first-byte HTML is complete: every H1, paragraph, link, and meta tag is there before any JavaScript runs.

For SEO this matters at three levels:

1. 1Googlebot's rendering pipeline is faster because there's nothing to render. The HTML is complete on first fetch.
2. 2AI engines that skip JavaScript execution (Perplexity, ChatGPT with browsing, Claude) can still fully parse your content.
3. 3LCP is trivially fast because the DOM is complete from the first paint.

Combine this with edge caching on Vercel, Netlify, or Cloudflare Pages and every page serves in under 50ms globally. That's the Core Web Vitals ceiling for a content site.

2. @astrojs/sitemap + robots.txt

Install one integration, set your site URL, rebuild. You get a valid sitemap with zero code. robots.txt stays manual.

Install @astrojs/sitemap and add it to astro.config.mjs's integrations array. Set site in the config (required for sitemap URL generation). Rebuild. You get /sitemap-index.xml and /sitemap-0.xml automatically, listing every static route.

1import { defineConfig } from 'astro/config';
2import sitemap from '@astrojs/sitemap';
3
4export default defineConfig({
5  site: 'https://yourdomain.com',
6  integrations: [
7    sitemap({
8      changefreq: 'weekly',
9      priority: 0.7,
10      filter: (page) => !page.includes('/draft/'),
11    }),
12  ],
13});

For per-page control (priority, changefreq, exclusions), pass options to the integration. Drafts, admin, and preview routes are typically filtered out.

For robots.txt, create public/robots.txt manually. Astro doesn't ship a first-party robots integration as of July 2026. A minimal file:

1User-agent: *
2Allow: /
3Disallow: /admin/
4Disallow: /draft/
5
6Sitemap: https://yourdomain.com/sitemap-index.xml

3. Content Collections + MDX for the blog

Typed frontmatter means missing meta tags become build errors, not silent SEO holes.

Astro Content Collections (introduced in Astro 2, mature in 3+) give you typed frontmatter for a blog. Create src/content/config.ts and define a Zod schema for each collection. Every MDX file in src/content/blog/ must satisfy the schema at build time. Miss a field, build fails. Type-safe by construction.

1import { defineCollection, z } from 'astro:content';
2
3const blog = defineCollection({
4  type: 'content',
5  schema: z.object({
6    title: z.string(),
7    description: z.string().min(50).max(160),
8    publishedAt: z.date(),
9    updatedAt: z.date().optional(),
10    tags: z.array(z.string()).min(1),
11    author: z.string(),
12    image: z.string().url().optional(),
13    canonical: z.string().url().optional(),
14    draft: z.boolean().default(false),
15  }),
16});
17
18export const collections = { blog };

The blog post file itself is MDX: frontmatter block up top, JSX components mixed with markdown in the body. Import BaseLayout, ArticleHeader, CTABlock, whatever your components are. Content Collections make the frontmatter typed inside every layout and page that consumes them.

For routing, create src/pages/blog/[slug].astro. Use getCollection('blog') to load all posts, filter to published only, generate a static page per slug. Astro pre-renders every URL at build time.

As of July 2026 tourkit.us uses this exact Astro pattern for its content side. TTFB is under 40ms globally, LCP under 1 second.

4. BaseLayout.astro with slots

One 60-100 line file owns ~70% of your site's SEO surface. Change it in one place, applies everywhere.

Astro layouts use the <slot /> element for content injection. Create src/layouts/BaseLayout.astro with all the head tags (meta, OG, JSON-LD), the site header, the footer, and a single <slot /> in the middle. Every page imports BaseLayout and wraps its content in it.

1---
2interface Props {
3  title: string;
4  description: string;
5  canonical?: string;
6  robots?: string;
7  ogImage?: string;
8}
9
10const {
11  title,
12  description,
13  canonical = new URL(Astro.url.pathname, Astro.site).toString(),
14  robots = 'index,follow',
15  ogImage = '/og-default.png',
16} = Astro.props;
17---
18
19<html lang="en">
20  <head>
21    <meta charset="UTF-8" />
22    <title>{title}</title>
23    <meta name="description" content={description} />
24    <link rel="canonical" href={canonical} />
25    <meta name="robots" content={robots} />
26    <meta property="og:title" content={title} />
27    <meta property="og:description" content={description} />
28    <meta property="og:image" content={new URL(ogImage, Astro.site)} />
29  </head>
30  <body>
31    <slot />
32  </body>
33</html>

For nested layouts (a BlogPostLayout that wraps BaseLayout and adds article-specific structure), Astro supports named slots: <slot name='header' /> inside a layout, populated via slot='header' on child elements from consumers. Use this to inject per-post breadcrumbs, table of contents, or related-posts widgets without duplicating markup.

5. Canonical URLs + meta robots per page

Compute canonical from Astro.site + Astro.url.pathname in the layout. Pick a trailing-slash policy and enforce it.

Astro exposes Astro.site (the site URL from config) and Astro.url (the current URL). Build canonical URLs by combining them:

1const canonical = new URL(Astro.url.pathname, Astro.site).toString();

Pass the result to BaseLayout as a prop. For pages that shouldn't be indexed (thank-you pages, internal previews, thin utility pages), pass robots='noindex,follow'. The layout renders the meta tag correctly.

Cross-domain canonicals for syndication: if you publish the same post on Medium or Dev.to, pass the canonical prop as the Medium URL from the original Astro page. Both platforms honor the canonical link.

As of July 2026 the Astro-recommended default is trailingSlash: 'ignore' for maximum compatibility across static hosts.

6. JSON-LD in the layout

Site-wide schema goes in BaseLayout. Per-page schema (Article, FAQPage) goes in the page. Validate every one before shipping.

Same pattern as Next.js. Inside BaseLayout.astro's <head>, render the JSON-LD as a script tag with set:html:

1<script
2  type="application/ld+json"
3  set:html={JSON.stringify(jsonLd)}
4/>

Astro's set:html directive is the equivalent of React's dangerouslySetInnerHTML. Inlines the string without escaping.

Site-wide schema (Organization, WebSite, SoftwareApplication) goes in BaseLayout, loads on every page. Per-page schema (Article, FAQPage, HowTo, Product) goes in the specific layout (BlogPostLayout, ProductLayout) or the page itself.

FAQPage schema goes on posts with an FAQ block. Wrap the FAQ questions/answers in an <FAQ> MDX component that both renders the visible HTML and emits the JSON-LD to a nearby script tag. This is the pattern that gets you cited by ChatGPT, see our generative engine optimization checklist for why FAQPage schema is signal #2 in the citation-rate correlation.

7. Astro vs Next.js: the honest comparison

Astro wins for content-first sites. Next.js wins for app shells with per-request personalization. If you can split, do.

This is the split most people get wrong. Both frameworks are excellent. The tradeoff is real and it's about what your site is, not about framework preference.

If you must pick one for a solo SaaS starting today: content-first (blog is the acquisition channel, product is secondary or later) points to Astro. Product-first (app is the acquisition surface, blog exists but isn't the moat) points to Next.js. As of July 2026 tourkit.us is Astro; citeclip.com is Next.js. Both work.

8. What to do this week

One day of setup gets you 90% of the technical SEO surface. Then the work is content, not framework.

If you're on Astro:

1. 1Install @astrojs/sitemap and add your site URL to astro.config.mjs.
2. 2Build BaseLayout.astro with the head-tag pattern above (~80 lines).
3. 3Move your blog to Content Collections with a Zod-typed schema.
4. 4Deploy to Vercel or Netlify with edge caching enabled.

That's 90% of the technical SEO surface for a content site. Then apply the solo-SaaS SEO five-page framework to decide what to publish inside it. The mechanical layer here doesn't help if the content isn't right.

CiteClip drafts SEO + GEO-ready articles ready to drop into a Content Collections folder (with typed frontmatter, TL;DR, FAQ, and JSON-LD baked in). Sign up at citeclip.com, the first 4 articles are free, no credit card required.