Wie ich meine eigene Agentur-Website auf 4× Lighthouse 100 gebaut habe
Die eigene Agentur-Website als Beweisstück — Dark-Mode mit Electric-Lime-Akzent, vollständig vorab gerenderter Astro-Build, 4× Lighthouse 100.
- Branche
- Solo-Webdesigner / Webagentur (Einzelunternehmen)
- Region
- Bremen, deutschlandweit per Remote
- Zeitraum
- Initial-Launch unter zwei Wochen, kontinuierlich erweitert um SEO- und Akquise-Pages
- Umfang
- 30+ statische Routes inkl. Service-, Branchen-, Lokal- und Funnel-Landingpages, eigenem Pricing-Helper als Single Source of Truth
- Ergebnis
- 4× Lighthouse 100, 0,3 s LCP Desktop, AI-Crawler-freundlich, vollständig DSGVO-konform ohne Cookie-Banner.
- Stack
- Astro 6 (static)Tailwind 4 mit @theme-TokensTypeScript strictBiome + Knip + tsx-Pre-Commit-Hooks (Links, Meta, Dead-Code)Lokale Fonts (Space Grotesk)JSON-LD: Organization · Person · Service · FAQPage · BreadcrumbList · Article (speakable)AI-Crawler-Allowlist: OAI-SearchBot · GPTBot · PerplexityBot · ClaudeBot · Google-Extended
Ausgangslage und Ansatz
Ich brauchte eine Website, die zeigt was ich kann — ohne Template, ohne Baukasten. Mein eigener Auftritt musste schnell sein, barrierefrei, DSGVO-sauber und visuell anders als alles, was meine Kunden von ihrem Baukasten-Anbieter gewohnt sind.
- Astro + Tailwind v4, vollständig statisch
- Jede Seite wird als statisches HTML ausgeliefert. Kein Framework-Overhead, keine Hydration, kein JS wo keins nötig ist. Das bringt Ladezeiten, die Template-Plattformen architektonisch nicht erreichen können.
- Dark-Mode mit Electric-Lime — bewusst gegen den Branchen-Konsens
- Die meisten KMU-Websites sehen gleich aus — hell, stockfoto-lastig, austauschbar. Dunkles Design mit Neon-Akzent bleibt im Kopf. Wenn ich für Differenzierung verkauft werde, muss meine eigene Seite das vorleben.
- Performance-First — die Hosting-Wahl ist Teil des Designs
- Null JavaScript wo keins nötig ist. Lokale Schriften statt Google Fonts. Optimierte Bilder. Alles, was ich meinen Kunden predige, muss hier sichtbar funktionieren — sonst wäre ich unglaubwürdig.
- Eigener Akquise-Funnel mit Audit + Checkliste
- Anstatt einen statischen Kontakt-Button verlasse ich mich auf zwei Lead-Magnete: ein kostenloser Website-Audit und eine Inhalts-Checkliste mit Double-Opt-In. Eigene Routes (`/audit`, `/checkliste/inhalt`), eigene Schema-Markup, eigene Tracking-Goals.
- Pre-Commit-Hooks für Link-, Meta- und Dead-Code-Validierung
- Selbst gebaute `tsx`-Skripte (`validate-links.ts`, `validate-meta.ts`) prüfen vor jedem Commit, dass interne Links existieren und Titles/Descriptions die SEO-Längen einhalten. Plus Knip für Dead-Code, Biome für Lint/Format. Eine Webagentur, die ihren eigenen Build kaputt deployt, ist kein guter Verkäufer.
- SEO-Cluster mit dokumentierter Anti-Kannibalisierungs-Map
- Statt einer generischen „Webdesign"-Seite ein gezielter Cluster aus Service-Pages (Webdesign, SEO, Wartung, Relaunch), Branchen-LPs (Anwälte, Zahnärzte, Steuerberater, Immobilienmakler, Handwerker, Arztpraxen), Lokal-LPs (Bremen, Oldenburg) und Funnel-LPs (Audit, Checkliste, Baukasten-Alternative, WordPress-Alternative, Landingpage). Jede Seite hat ihren eigenen Owner-Keyword, dokumentiert in einer Keyword-Map — kein Title- oder H1-Konflikt zwischen zwei Seiten. Auditiert nach jedem neuen Page-Launch.
- Eigener Pricing-Helper als Single Source of Truth
- Jede Eigen-Preisangabe — auch in FAQ-Antworten, Schema-Descriptions und Prosa — kommt ausschließlich aus `src/data/pricing.ts` über Helper-Funktionen (`euro`, `abEuro`, `abEuroMonat`). Eine Preisänderung an einer Stelle aktualisiert alle Vorkommen. Pre-Commit-Hook verhindert hardcodete Eigen-Preise im Codebase. Trade-off: einmal investierte Architektur, dafür nie wieder inkonsistente Preise zwischen Pricing-Page, FAQ und Schema.
- Zwei Akquise-Funnel mit Double-Opt-In und Bestätigungs-UX
- Website-Audit-Funnel (`/audit` → `/audit/danke`) und Inhalts-Checkliste (`/checkliste/inhalt` → `/checkliste/bestaetigen` → `/checkliste/danke`) jeweils mit eigener Conversion-Strecke, eigenen Tracking-Goals und Double-Opt-In für die E-Mail-Liste. Bestätigungs- und Danke-Seiten sind `noindex` (keine SERP-Verwässerung), Funnel-Einstiege sind Tier-1-Pages mit erhöhter Sitemap-Priorität.
- AI-Crawler-freundlich von Anfang an
- robots.txt erlaubt explizit OAI-SearchBot, GPTBot, PerplexityBot, ClaudeBot, Google-Extended und die User-Agents der Live-Suchen. Schema-Markup mit Article + speakable auf Case Studies, Faktentabellen als strukturierte `<dl>`-Listen, klare Entity-Verankerung (`@id` für Business + Person). Damit anscheit.com in ChatGPT-Search, Perplexity, Google AIO und Bing Copilot zitierfähig ist — nicht nur in der klassischen Google-Liste.
Eigenständige Unterseiten, nicht Anker-Links
Jede eigenständige Suchintention bekommt eine eigene URL — mit eigener Bildsprache, eigenem Schema und eigenem CTA-Ton.
-
Akquise-Funnel „Kostenloser Website-Audit"
Lead-Magnet mit Double-Opt-In und eigener Danke-Seite (noindex), Tier-1-Sitemap-Priorität, eigene Tracking-Goals.
/audit -
Akquise-Funnel „Inhalts-Checkliste"
Zweiter Lead-Magnet mit dreistufiger Bestätigungs-Strecke (Eintrag → Bestätigung → Danke) und sauberer noindex-Trennung der Funnel-Stationen.
/checkliste/inhalt -
Preis-Seite mit Single-Source-of-Truth-Helper
Alle Preise aus `pricing.ts`, AggregateOffer-Schema, numerische Preistabelle nach Website-Typ × Zielgruppe — Owner-Keyword für „Was kostet eine Website".
/preise -
Service-Hub Webdesign
Money-Page-Ankerpunkt für das gesamte Webdesign-Cluster, verlinkt auf alle Branchen- und Lokal-Pages.
/leistungen/webdesign -
Tier-1-Akquise-LP „Baukasten-Alternative"
Owner-Keyword „baukasten alternative", direkter Vergleich gegen Jimdo/Wix/IONOS-Routen, erhöhte Sitemap-Priorität (0.9).
/baukasten-alternative -
Lokale Landingpage Bremen
Owner für „Webdesign Bremen" — die Homepage ist bewusst Region-Dach, dieses Keyword gehört exklusiv hier hin.
/webdesign-bremen
Ein Webauftritt, der zeigt statt erzählt. Jede Unterseite ist ein Live-Beispiel für das, was ich meinen Kunden liefere — messbar schnell, suchmaschinenoptimiert, AI-zitierfähig und datenschutzkonform.
Die eigene Website ist das schwierigste Projekt. Man ist gleichzeitig Kunde und Dienstleister. Aber genau deshalb zeigt sie am ehrlichsten, was ich kann.
— Tobias
Verwandter Service: Webdesign-Service ansehen
Sie wollen einen Auftritt, der genauso performt?
Ihr Projekt besprechen