Prompt-to-PR: Erstellen einer statischen SEO-Website mit Astro

Vollständige SOP für das Aufsetzen einer inhaltsgesteuerten statischen SEO-Website mit Astro, Tailwind, MDX-Content-Collections, Sitemap und kanonischen Tags von Grund auf.

Erstellen Sie eine produktionsreife, vollständig statische Astro-5-Website, die für die organische Suche optimiert ist: Content-Collections, Tailwind-Typografie, @astrojs/sitemap und korrekte <head>-Metadaten von Anfang an.

1. Anforderung

Erstellen Sie eine statische Marketing-/Content-Website, die bei Lighthouse SEO und Barrierefreiheit 100 Punkte erreicht. Die Inhalte werden in MDX-Dateien verfasst, die von Astro-Content-Collections verwaltet werden. Kein JavaScript-Framework erforderlich – die Ausgabe ist reines HTML+CSS mit opt-in Islands.

2. Erster Prompt

Scaffold a new Astro 5 static SEO site from scratch in the current directory.

Requirements:
1. Init with: `bunx create astro@latest . --template minimal --typescript strict --no-git`
2. Add integrations:
   - `@astrojs/tailwind` with `@tailwindcss/typography`
   - `@astrojs/sitemap`
   - `@astrojs/mdx`
3. Create a content collection `blog` in `src/content/blog/` with this Zod schema:
   title, description, pubDate (Date), updatedDate (Date, optional),
   author (string, default "Admin"), tags (string[], default []), draft (bool, default false).
4. Create a BaseLayout.astro with:
   - A `<head>` block: charset, viewport, canonical (`Astro.url.href`),
     og:title, og:description, og:url, og:type, twitter:card.
   - Accept `title`, `description`, `image` props.
5. Create pages:
   - `/` — hero + last 6 non-draft posts
   - `/blog` — paginated list (10 per page) using `paginate()`
   - `/blog/[slug]` — single post rendered with `<Content />`
   - `/tags/[tag]` — posts filtered by tag
6. Create `src/content/blog/hello-world.mdx` as a real sample post.
7. Configure `astro.config.ts`:
   - `site: process.env.SITE_URL ?? "http://localhost:4321"`
   - `integrations: [tailwind(), sitemap(), mdx()]`
   - `output: "static"`
8. Add a `.env.example` with `SITE_URL=https://example.com`.

3. Erwartete Dateiänderungen

astro.config.ts
tailwind.config.ts
src/content.config.ts                    (blog collection schema)
src/layouts/BaseLayout.astro             (head + canonical + OG tags)
src/pages/index.astro
src/pages/blog/index.astro               (paginated)
src/pages/blog/[slug].astro
src/pages/tags/[tag].astro
src/content/blog/hello-world.mdx
.env.example
package.json                             (updated with all integrations)

4. Checkliste zur Überprüfung

astro.config.ts setzt site — erforderlich, damit @astrojs/sitemap absolute URLs ausgibt.
BaseLayout.astro gibt ein <link rel="canonical"> unter Verwendung von Astro.url.href aus.
Die Blog-Listenseite verwendet Astro.props.page.data von paginate() — keinen direkten getCollection()-Aufruf.
Entwurfsposts (draft: true) werden in der Produktion durch import.meta.env.PROD-Guard ausgeschlossen.
<html lang="en"> wird auf dem Root-Element gesetzt.
tailwind.config.ts enthält das typography-Plugin und zielt auf src/**/*.{astro,mdx} ab.
Die sitemap()-Integration ist vorhanden — überprüfen Sie, ob dist/sitemap-index.xml nach bun run build existiert.

5. Testbefehle

bun install
bun run dev
# visit http://localhost:4321 and confirm hero + posts render

bun run build
# expect zero errors

bun run preview
# check /sitemap-index.xml and /sitemap-0.xml exist
# check /blog and /blog/hello-world render with correct <title> and canonical

# Lighthouse CLI smoke test (optional)
bunx lighthouse http://localhost:4321 --output json --quiet | jq '.categories.seo.score'
# expect 1 (100%)

6. Häufige Fehler

Sitemap generiert relative URLs — site fehlt in astro.config.ts. Fügen Sie es hinzu.
getCollection gibt Entwürfe in der Produktion zurück — Filter: posts.filter(p => !p.data.draft || !import.meta.env.PROD).
Pagination 404 bei /blog — die erste Seite muss /blog/ (Index) sein, nicht /blog/1. Astros paginate() gibt standardmäßig /blog/, /blog/2/ usw. aus.
MDX-Inhalte nicht gestaltet — @tailwindcss/typography prose-Klasse fehlt auf dem Artikel-Wrapper in [slug].astro.
OG-Tags verwenden relativen Bildpfad — muss eine absolute URL sein. Voranstellen mit Astro.site.

7. Korrektur-Prompt

The sitemap at /sitemap-0.xml contains relative paths like "/blog/hello-world"
instead of absolute URLs like "https://example.com/blog/hello-world".

Fix: add `site: "https://example.com"` (or `process.env.SITE_URL`) to the
top-level astro.config.ts object. The sitemap integration reads this value
to prefix all URLs.

8. PR-Beschreibung

## Init: Static Astro 5 SEO site

- Astro 5 + TypeScript strict + Tailwind (with `@tailwindcss/typography`)
- `@astrojs/sitemap` and `@astrojs/mdx` integrations
- Content collection `blog` with Zod schema (title, description, pubDate, tags, draft)
- BaseLayout with canonical, OG, and Twitter Card meta tags
- Pages: home, paginated blog list, single post, tag archive
- Sample `hello-world.mdx` post
- `bun run build` emits `sitemap-index.xml` and all static pages