Projekt-Details

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ß.

Kunde

CLAN Aquascaping Design

Start

16 Jul 2026

Abgeschlossen

CLAN Aquascaping Galerieseite mit bepflanzten Aquarien
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.