CLAN Aquascaping — Firmenwebsite und Rechner für bepflanzte Aquarien
Eine mehrsprachige Website mit fünf Rechnern und KI-Content-Pipeline, die WordPress bei CLAN Aquascaping Design ersetzt — einem Studio für Aquascaping und Aquarien nach Maß.

Beschreibung
Eine mehrsprachige Website mit fünf Rechnern und KI-Content-Pipeline, die WordPress bei CLAN Aquascaping Design ersetzt — einem Studio für Aquascaping und Aquarien nach Maß.
Fallstudie
Herausforderung
Auf der alten WordPress-Website kamen die Startseiteninhalte aus einem JavaScript-Slider, sodass KI-Crawler eine leere Seite sahen; englische Canonicals verwiesen auf türkische Seiten, das Schema war leer. Das Renommee des Unternehmens war maschinell nicht lesbar, und das Theme ließ kaum weitere Verbesserungen zu.
Vorgehen
Zuerst wurde die alte Website geprüft und korrigiert, dann entstand auf Next.js und Fastify eine neue zweisprachige, serverseitig gerenderte Website. Hinzu kamen fünf Rechner und ein 3D-Planer, eine Content-Pipeline, die aus dem Instagram-Archiv freigabepflichtige Blog-Entwürfe erzeugt, und ein Entitätsgraph mit Fokus auf LocalBusiness und FAQPage.
Ergebnis
Die Korrekturen an der alten Website hoben den zusammengesetzten GEO-Score von 55 auf 67. Die neue Website ist per HTTPS unter clanaquascaping.tech erreichbar; Rechner, Blog, Presse und Projekte werden im Panel gepflegt. Als Nächstes zieht die Hauptdomain auf die neue Plattform um.
Tools
Next.js 16, React 19, TypeScript, Fastify, Drizzle ORM, MySQL 8, Bun, Tailwind CSS 4, Claude API, Cloudinary, Nginx, PM2
Hauptfunktionen
Fünf kostenlose Rechner: Volumen, CO2-pH-KH, Dünger, PAR, Nährstoffe
3D-Aquarienplaner mit Three.js und einjährigem Habitatmodell
Aquarienentwürfe im Nutzerkonto speichern, Export als JSON
Instagram-Beitrag wird je Sprache zum Blog-Entwurf, mit Freigabe
TR/EN-Struktur: eigene URLs je Sprache und hreflang
Entitätsgraph mit LocalBusiness, FAQPage, SoftwareApplication
llms.txt, IndexNow und robots-Regeln offen für KI-Crawler
Bei Backend-Ausfall 503 + Retry-After statt 404
Panel: Leistungen, Projekte, Galerie, Presse, Blog, Rechner, FAQ
Verwendete Technologien
Next.js 16
React 19
TypeScript
Fastify
Drizzle ORM
MySQL 8
Bun
Tailwind CSS 4
Claude API
Cloudinary
Nginx
PM2
Design-Highlights
Serverseitiges Rendering: Inhalte auch ohne JavaScript lesbar
Statische Ansicht im 3D-Planer für Touch und reduzierte Bewegung
Dunkle Karten mit heller Schrift, gemessener Kontrast mind. 8,32:1
Modellgrenzen werden neben den Rechenergebnissen offen genannt
Marke und Texte aus den Einstellungen, vor jedem Deploy automatisch geprüft
Details
CLAN Aquascaping Design ist ein Studio in Istanbul-Kartal: Es gestaltet bepflanzte Aquarien (Aquascapes) und fertigt Aquarien und Aquarienmöbel nach Maß. Der Gründer brachte viel Renommee mit, darunter internationale Wettbewerbsplatzierungen und TV-Dokumentationen, doch fast nichts davon stand so auf der Website, dass Suchmaschinen und KI-Assistenten es lesen konnten. Ziel des Projekts war es, die alte WordPress/WooCommerce-Installation durch eine neue, zweisprachige und werkzeugorientierte Website zu ersetzen, die ihre Inhalte serverseitig ausliefert und über ein Admin-Panel gepflegt wird.
Ausgangslage und Anforderungen
Am Anfang stand ein GEO/SEO-Audit der alten Website. Die Messung zeigte strukturelle Probleme: Die Startseite bezog ihre Inhalte aus einem JavaScript-Slider, sodass KI-Crawler eine fast leere Seite sahen; die englischen Seiten verwiesen per Canonical auf die türkischen; das Unternehmens-Schema war eine leere Hülle, und es gab auf der gesamten Website keinen einzigen FAQ-Bereich. Korrekturen an der alten Website hoben den zusammengesetzten GEO-Score von 55 auf 67, doch Theme und Plugins ließen kaum mehr zu. Die Entscheidung fiel für eine neue Grundlage mit denselben Inhalten, von Anfang an richtig aufgebaut.
Das Briefing setzte zwei klare Grenzen. Das Unternehmen bietet keine Aquarienpflege an, und das musste sich in jeder Ebene widerspiegeln, vom Menü über die Leistungstexte bis zu den KI-Prompts. Außerdem sollte die Website kein reines Schaufenster sein, sondern Aquarianern Rechner bieten, die echte Arbeit leisten.
Lösung und Umfang
Unternehmenspräsentation
- Startseite: neueste Projekte, Leistungen, Arbeitsablauf, Presse, Kundenstimmen und FAQ; Reihenfolge und Inhalt der Abschnitte werden im Admin-Panel gesteuert.
- Leistungen: eigene Detailseiten für Aquascaping-Design, Aquarien nach Maß, Aquarienmöbel und Projektberatung, jeweils mit ausführlichem Text in zwei Sprachen und eigenen SEO-Feldern.
- Projekte und Galerie: ein Bildarchiv realisierter Aquarien mit Projektdetails.
- Presse: Karten mit Verweisen auf TV-Sendungen, Dokumentationen und Zeitungsberichte.
- Referenzen, Blog und Rechtstexte: einschließlich Datenschutz, Cookie-Richtlinie und Nutzungsbedingungen.
Rechner
Die Werkzeugseite bietet fünf Rechner ohne Registrierung: Aquarienvolumen und Gewicht, CO2-pH-KH-Gleichgewicht, Düngerdosierung, Beleuchtung (PAR) und Nährstoffanreicherung. Jedes Werkzeug hat eigene Erläuterungen und ein Diagramm; die Kartentexte kommen aus der Datenbank, die Berechnungslogik aus dem Code.
Das sechste Werkzeug, Bauen Sie Ihr Aquarium, ist ein 3D-Planer auf Basis von Three.js. Sie legen Beckenmaße und Bodenprofil fest und platzieren Steine, Pflanzengruppen, Fische und Technik; Nettoliter, Gewicht, geschätzter PAR-Wert und Wasserchemie werden aus demselben Plan berechnet. Das Habitatmodell des Planers rechnet ein ganzes Jahr deterministisch in Stundenschritten durch, und Ereignisse wie Wasserwechsel, Filterreinigung oder Rückschnitt lassen sich in die Zeitleiste einfügen. Die Oberfläche nennt die Grenzen des Modells offen: Die Ergebnisse sind Szenariorechnungen, keine biologischen Garantien. Pläne lassen sich auf dem Gerät speichern und als JSON exportieren; registrierte Nutzer können Entwürfe in ihrem Konto sichern. Auf Touch-Geräten und bei reduzierter Bewegung greift eine funktionale statische Ansicht.
KI-gestützte Content-Pipeline
Der Blog speist sich aus dem eigenen Instagram-Archiv des Unternehmens. Ein Beitrag wird ins Panel eingefügt, die KI baut daraus je Sprache einen Blog-Entwurf, und ohne menschliche Freigabe wird nichts veröffentlicht; eine automatische Veröffentlichung gibt es bewusst nicht. Jede Quelle hat eine Nutzungsrichtlinie (eigene Inhalte, erlaubte Neufassung, nur Auszug, nur Link), und die Originalität wird gemessen. Eine Anbieterkette probiert mehrere Modelldienste nacheinander. Blogartikel erscheinen mit FAQ-Bereich und FAQPage-Daten.
Admin-Panel
Über ein separates Next.js-Admin-Panel werden Startseitenlayout, Slider, Leistungen, Projekte, Galerie, Referenzen, Presseeinträge, Blog, FAQ, eigene Seiten, Menü und Navigation, Rechnertexte, Kundenstimmen und Kommentare verwaltet. Auf der Inhaltsseite gibt es Inhaltsquellen, einen Inhalts-Posteingang und KI-Prompt-Vorlagen, auf der Kommunikationsseite eingehende Nachrichten, E-Mail-Vorlagen und Benachrichtigungen. Auch Website-Einstellungen, Medienspeicher, Benutzer und Rollen, Audit-Protokolle und Cache-Leerung gehören dazu. Für Feedback vor dem Launch entstand ein Werkzeug für Notizen direkt auf der Seite: Notizen werden priorisiert, Sprachnotizen transkribiert und Administratoren benachrichtigt.
Technische Architektur
- Frontend: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4; die Seiten werden serverseitig gerendert, die Inhalte sind also auch für Crawler ohne JavaScript zugänglich.
- Backend: Fastify auf Bun mit Drizzle ORM und MySQL 8; Endpunkte liegen unter einer versionierten API, Admin-Endpunkte in einem eigenen Bereich.
- Datenmodell: Leistungen, Projekte, Blog, Galerie, Referenzen, FAQ und Werkzeuge haben jeweils eine eigene Übersetzungstabelle; die Inhaltsaufnahme nutzt Tabellen für Quellen, Einträge und Entwürfe je Sprache.
- Mehrsprachigkeit: Türkisch und Englisch, mit eigenen URLs je Sprache und hreflang-Zuordnung.
- SEO und GEO: ein Entitätsgraph mit LocalBusiness, Person, Service, Review, FAQPage und SoftwareApplication; llms.txt, Sitemap, für KI-Crawler offene robots-Regeln und IndexNow-Meldungen.
- Ausfallsicherheit: Fällt das Backend aus, liefern die Seiten 503 mit Retry-After statt 404, sodass ein vorübergehender Ausfall keine Seiten aus dem Index wirft. Die temporäre Serveradresse wird automatisch auf noindex gesetzt.
- Sicherheit und Marke: Signaturschlüssel haben keine Standardwerte; fehlen sie, startet die Anwendung nicht. Die sichtbare Marke kommt aus den Einstellungen, nicht aus dem Code, und das Deploy-Skript prüft das ebenso automatisch wie Aussagen zu einem Pflegeservice.
Integrationen
Eine Multi-Anbieter-KI mit der Claude API an erster Stelle für die Content-Pipeline; Cloudinary für Medien; im Panel zwischengespeicherte Ergebnisse der Search-Console-URL-Prüfung; Google-Kontoverbindung und OAuth-Grundlage für Social-Media-Konten; E-Mail und Telegram für Benachrichtigungen. Der Betrieb läuft auf Nginx und PM2, mit einem Deploy-Skript, das Build, Seeding, Cache-Leerung und Neustart in einem Befehl erledigt.
Heute
Die neue Website ist per HTTPS unter clanaquascaping.tech erreichbar. Die Leistungsseiten wurden mit echten Inhalten neu geschrieben, Reste der Vorlage und Stockbilder entfernt, und die Werkzeugseite ist mit fünf Rechnern und dem 3D-Planer live. Als Nächstes wird die Hauptdomain von der alten WordPress-Website auf die neue Plattform umgezogen.