proje detayları

CLAN Aquascaping — Bitkili Akvaryum Tasarımı için Kurumsal Site ve Hesaplama Araçları

Bitkili akvaryum tasarımı ve özel ölçü akvaryum imalatı yapan CLAN Aquascaping Design için WordPress yerine geçen, beş hesaplama aracı ve yapay zekâ içerik hattı olan çok dilli site.

Müşteri

CLAN Aquascaping Design

Başlangıç

16 Jul 2026

Bitiş

CLAN Aquascaping galeri sayfası: kurulan bitkili akvaryumlar
Açıklama

Bitkili akvaryum tasarımı ve özel ölçü akvaryum imalatı yapan CLAN Aquascaping Design için WordPress yerine geçen, beş hesaplama aracı ve yapay zekâ içerik hattı olan çok dilli site.

Vaka çalışması

Zorluk

Eski WordPress sitesinde ana sayfa içeriği JavaScript slider'ından geldiği için yapay zekâ tarayıcıları sayfayı boş görüyordu; İngilizce canonical'lar Türkçe sayfaları gösteriyor, schema boş kalıyordu. Firmanın güçlü otorite birikimi makine tarafından okunamıyordu ve tema altyapısı daha fazla iyileştirmeye izin vermiyordu.

Yaklaşım

Önce eski site denetlenip düzeltildi, ardından Next.js ve Fastify üzerinde iki dilli, sunucu tarafında render edilen yeni bir site kuruldu. Beş hesaplayıcı ve 3D planlayıcı, Instagram arşivinden insan onaylı blog taslağı üreten içerik hattı ve LocalBusiness/FAQPage odaklı varlık grafiği eklendi.

Sonuç

Eski sitedeki düzeltmeler bileşik GEO puanını 55'ten 67'ye çıkardı. Yeni site clanaquascaping.tech adresinde HTTPS ile yayında; araçlar, blog, basın ve proje içerikleri panelden yönetiliyor. Ana alan adının yeni altyapıya taşınması sıradaki adım.

Araçlar

Next.js 16, React 19, TypeScript, Fastify, Drizzle ORM, MySQL 8, Bun, Tailwind CSS 4, Claude API, Cloudinary, Nginx, PM2

Öne Çıkan Özellikler
  • Beş ücretsiz hesaplayıcı: hacim, CO2-pH-KH, gübre, PAR, besin

  • Three.js ile 3D akvaryum planlayıcı ve bir yıllık habitat modeli

  • Üye hesabına akvaryum tasarımı kaydetme ve JSON dışa aktarma

  • Instagram gönderisinden dil başına blog taslağı, insan onaylı

  • TR/EN yapı: dil başına ayrı adres ve hreflang eşleşmesi

  • LocalBusiness, FAQPage, SoftwareApplication varlık grafiği

  • llms.txt, IndexNow ve yapay zekâ tarayıcılarına açık robots

  • Kesintide 404 yerine 503 + Retry-After ile indeks koruması

  • Panel: hizmet, proje, galeri, basın, blog, araç ve SSS yönetimi

Kullanılan Teknolojiler
  • Next.js 16

  • React 19

  • TypeScript

  • Fastify

  • Drizzle ORM

  • MySQL 8

  • Bun

  • Tailwind CSS 4

  • Claude API

  • Cloudinary

  • Nginx

  • PM2

Tasarım Öne Çıkanları
  • Sunucu tarafı render: içerik JavaScript'siz tarayıcılara da açık

  • 3D planlayıcıda dokunmatik ve azaltılmış hareket için statik görünüm

  • Araç kartlarında koyu zemin/açık metin, ölçülen kontrast en az 8,32:1

  • Hesap sonuçlarında modelin sınırları arayüzde açıkça yazılı

  • Marka ve metinler ayarlardan geliyor; deploy öncesi otomatik denetim

Detaylar

CLAN Aquascaping Design, İstanbul Kartal merkezli bir stüdyo: bitkili akvaryum (aquascape) tasarlıyor, özel ölçü akvaryum ve akvaryum mobilyası üretiyor. Kurucusunun uluslararası yarışma dereceleri ve televizyon belgeselleri gibi güçlü bir otorite birikimi vardı; fakat bunların neredeyse hiçbiri arama motorlarının ve yapay zekâ asistanlarının okuyabileceği biçimde sitede yer almıyordu. Bu proje, eski WordPress/WooCommerce kurulumunun yerine; içeriği sunucuda üreten, iki dilli, araç odaklı ve yönetim paneliyle beslenen yeni bir site kurmak için başladı.

Proje bağlamı ve ihtiyaç

Çalışma, eski sitenin GEO/SEO denetimiyle başladı. Ölçüm, yapısal sorunları net biçimde gösterdi: ana sayfanın içeriği JavaScript slider'ından geldiği için yapay zekâ tarayıcıları sayfayı neredeyse boş görüyordu; İngilizce sayfaların canonical etiketleri Türkçe sayfaları gösteriyordu; kurumsal schema boş bir kabuktu ve sitede tek bir SSS bölümü yoktu. Eski site üzerinde yapılan düzeltmeler bileşik GEO puanını 55'ten 67'ye taşıdı, ancak tema ve eklenti altyapısı daha ileri gitmeye izin vermiyordu. Karar, aynı içeriği taşıyan ama baştan doğru kurgulanmış yeni bir altyapıydı.

Brifte iki net sınır vardı: firma akvaryum bakım hizmeti vermiyor ve bu karar menüden hizmet metinlerine, yapay zekâ içerik komutlarına kadar her katmana işlenecekti. İkincisi, site yalnız bir vitrin olmayacak; akvaristlere gerçek iş gören hesaplama araçları sunacaktı.

Çözüm ve kapsam

Kurumsal vitrin

  • Ana sayfa: son projeler, hizmetler, çalışma süreci, basın bölümü, müşteri görüşleri ve SSS; bölümlerin sırası ve içeriği panelden yönetiliyor.
  • Hizmetler: bitkili akvaryum tasarımı, özel ölçü akvaryum imalatı, akvaryum mobilyası ve proje danışmanlığı için ayrı detay sayfaları; her biri iki dilde başlıklı uzun metin ve kendi SEO alanlarıyla.
  • Projeler ve galeri: kurulan akvaryumların görsel arşivi ve proje detayları.
  • Basında Biz: televizyon programları, belgeseller ve gazete haberleri kaynaklarına bağlanan kartlarla.
  • Referanslar, blog ve yasal sayfalar: KVKK, gizlilik, çerez politikası ve kullanım şartları dahil.

Hesaplama araçları

Araçlar sayfasında kayıt gerektirmeyen beş hesaplayıcı bulunuyor: akvaryum hacmi ve ağırlığı, CO2-pH-KH dengesi, gübre dozlama, aydınlatma (PAR) ve besin birikimi. Her aracın kendi açıklama içeriği ve diyagramı var; kart metinleri veritabanından, hesap mantığı koddan geliyor.

Altıncı araç Kendi Akvaryumunu İnşa Et, Three.js ile çalışan bir 3D planlayıcı. Kullanıcı tank ölçülerini, taban profilini, kaya, bitki öbeği, balık ve ekipmanı yerleştiriyor; net litre, ağırlık, tahmini PAR ve su kimyası aynı plandan hesaplanıyor. Planlayıcının habitat modeli bir yıllık süreci saatlik adımlarla deterministik olarak çalıştırıyor; su değişimi, filtre temizliği ve budama gibi olaylar zaman çizelgesine eklenebiliyor. Arayüz modelin sınırlarını açıkça yazıyor: sonuçlar senaryo hesabıdır, biyolojik garanti değildir. Planlar cihazda saklanabiliyor, JSON olarak dışa aktarılabiliyor; üye olan kullanıcı tasarımlarını hesabına kaydedebiliyor. Dokunmatik cihazlarda ve azaltılmış hareket tercihinde işlevsel bir statik görünüm devreye giriyor.

Yapay zekâ destekli içerik hattı

Blog içeriği, firmanın kendi Instagram arşivinden besleniyor. Bir gönderi panele yapıştırılıyor, yapay zekâ onu dil başına blog taslağına genişletiyor ve taslak insan onayından geçmeden yayına çıkmıyor; otomatik yayın bilerek yok. Her kaynağın bir kullanım politikası var (kendi içerik, izinli yeniden yazım, yalnız alıntı, yalnız bağlantı) ve özgünlük ölçülüyor. Sağlayıcı zinciri birden fazla model servisini sırayla deniyor. Blog yazıları SSS bölümü ve FAQPage verisiyle yayınlanıyor.

Yönetim paneli

Ayrı bir Next.js yönetim paneli üzerinden şunlar yönetiliyor: ana sayfa düzeni, slider, hizmetler, projeler, galeri, referanslar, basın kayıtları, blog, SSS, özel sayfalar, menü ve navigasyon, hesaplama aracı metinleri, müşteri görüşleri ve yorumlar. İçerik tarafında içerik kaynakları ve içerik gelen kutusu, yapay zekâ komut şablonları; iletişim tarafında gelen mesajlar, e-posta şablonları ve bildirimler bulunuyor. Site ayarları, medya deposu, kullanıcılar ve roller, denetim kayıtları ve önbellek temizliği de panelin parçası. Yayın öncesi geri bildirim için sayfa üzerinde not bırakma aracı kuruldu; notlar önceliklendiriliyor, sesli notlar metne çevriliyor ve yöneticiye bildiriliyor.

Teknik mimari

  • Ön yüz: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4; sayfalar sunucuda render edildiği için içerik JavaScript çalıştırmayan tarayıcılara da açık.
  • Arka uç: Bun üzerinde Fastify, Drizzle ORM ve MySQL 8; uç noktalar sürümlü bir API altında, yönetim uçları ayrı kapsamda.
  • Veri modeli: hizmet, proje, blog, galeri, referans, SSS ve araç tablolarının her biri ayrı çeviri tablosuyla çalışıyor; içerik toplama için kaynak, öğe ve dil başına taslak tabloları var.
  • Çok dillilik: Türkçe ve İngilizce, dil başına ayrı adres yapısı ve hreflang eşleşmesi.
  • SEO ve GEO: LocalBusiness, Person, Service, Review, FAQPage ve SoftwareApplication içeren varlık grafiği; llms.txt, site haritası, yapay zekâ tarayıcılarına açık robots kuralları ve IndexNow bildirimi.
  • Dayanıklılık: arka uç kesintisinde sayfalar 404 yerine 503 ve Retry-After döndürüyor; geçici bir arıza indeksten sayfa düşürmüyor. Geçici sunucu adresi otomatik olarak noindex işaretleniyor.
  • Güvenlik ve marka: imza anahtarları için varsayılan değer yok, eksikse uygulama açılmıyor. Görünen marka koddan değil, ayarlardan geliyor; deploy betiği bunu ve bakım hizmeti iddiasını otomatik denetliyor.

Entegrasyonlar

Yapay zekâ içerik hattı için Claude API başta olmak üzere çoklu model sağlayıcı; medya için Cloudinary; Search Console URL denetim sonuçlarının panelde önbelleklenmesi; Google hesabı bağlantısı ve sosyal hesaplar için OAuth altyapısı; bildirimler için e-posta ve Telegram. Yayın Nginx ve PM2 üzerinde, tek komutla build, seed, önbellek temizliği ve yeniden başlatma yapan bir deploy betiğiyle yürüyor.

Bugün

Yeni site HTTPS ile clanaquascaping.tech adresinde yayında. Hizmet metinleri gerçek içerikle yeniden yazıldı, şablondan kalan yabancı içerik ve stok görseller temizlendi, araçlar sayfası beş hesaplayıcı ve 3D planlayıcıyla canlıda. Sıradaki adım, ana alan adının eski WordPress sitesinden yeni altyapıya taşınması.