Astro SEO Theme

Astro SEO Theme is an open-source website template built on Astro 5, Tailwind CSS 4, React 19, and TypeScript, aimed at B2B SaaS and enterprise marketing sites that need strong technical SEO without custom engineering work.

What is Astro SEO Theme?

Astro SEO Theme is a static site template that takes Markdown/MDX content and Astro page components as input and outputs a fully built static site in dist/ for any static host. It bundles three content areas — a marketing landing page, a blog, and a case studies portfolio — with SEO tooling wired in. It is built on Astro 5 with Tailwind CSS v4 and React 19, released under the MIT license by GitHub user druedaro. A live demo runs at astro-seo-theme.vercel.app.

Key Features

• Three content hubs — a landing page, a markdown-driven blog, and a case studies portfolio share one responsive layout and megamenu, with schemas defined in src/content.config.ts.
• SEO automation — BaseLayout.astro generates canonical URLs, Open Graph tags, Twitter cards, hreflang alternates, and JSON-LD structured data via JsonLd.astro and FaqSchema.astro.
• Sitemap and crawlability — the @astrojs/sitemap integration builds a sitemap at build time, and robots.txt is served from public/.
• Zero-JS by default — Astro Islands ship no client JavaScript except where needed, such as the React dark mode toggle; the README reports a 100/100 Lighthouse score across mobile and desktop.
• Multilingual i18n — complete English and Spanish implementations using file-based routes (src/pages/ and src/pages/es/) with UI strings centralized in src/i18n/ui.ts and a LanguagePicker component.
• Security headers — vercel.json sets Content-Security-Policy, Strict-Transport-Security, X-Content-Type-Options, and X-Frame-Options; third-party analytics scripts require CSP edits.
• CSS-only navigation — a desktop megamenu and a mobile accordion menu in Header.astro, built without heavy client-side JavaScript.
• CI and tooling — a GitHub Actions pipeline for type-checking, dependabot updates, and Prettier with prettier-plugin-astro and prettier-plugin-tailwindcss.
• AI-assistant guide — an AI_GUIDE.md file documents conventions for Cursor, Copilot, and Claude when customizing the site.

Who is it for?

• B2B SaaS founders and marketers: launch a landing page, pricing section, blog, and case study library from one repo by editing content rather than building layouts.
• Freelancers and agencies: scaffold new client marketing sites with npm create astro@latest -- --template druedaro/astro-seo-theme and localize them for English and Spanish audiences.
• Developers targeting Core Web Vitals and SEO audits: start from a template that ships structured data, sitemaps, hreflang, and security headers instead of wiring them per project.

Use cases

• SaaS launch sites: compose index.astro from src/components/marketing/ sections (Hero, BentoGrid, PricingTable, ContactForm) and edit props to fit the product.
• Content marketing: publish MDX blog posts and case studies with typed frontmatter (title, description, client, date) validated by content collection schemas.
• Localized marketing: duplicate the src/pages/es/ route folder pattern to add further languages, deleting it and the language picker if only one language is needed.

How does it work?

Scaffold the project with the Astro CLI, run npm install and npm run dev to work at localhost:4321, then run npm run build to generate the static site. Before production, set the site property in astro.config.mjs so the generated sitemap and robots.txt point at the correct domain.

Pricing

Astro SEO Theme is MIT licensed and free to use for personal and commercial projects.

FAQ

Is Astro SEO Theme free?

Yes. It is released under the MIT license, so personal and commercial projects can use it at no cost, and contributions are accepted through pull requests and issues on the GitHub repository.

Does it include a sitemap and robots.txt?

Yes. The @astrojs/sitemap integration generates the sitemap at build time, and robots.txt is served statically from the public/ directory. You must update the site value in astro.config.mjs first or both will reference the wrong domain.

Can I add Google Analytics?

The default Content-Security-Policy in vercel.json blocks third-party scripts. The README documents editing the script-src and connect-src directives to allow domains such as googletagmanager.com or plausible.io.

What runtime does it require?

Local development requires Node.js 18 or newer plus npm, pnpm, or yarn. The build output is fully static, so it deploys to Vercel with the included config or to Netlify and Cloudflare Pages without extra configuration.