Tek hesaplayıcı state hook'u
useCalculator hook tüm 149 hesaplayıcı için input/result/history/share state yönetimi sağlar; yeni araç eklemek atomic.
SaaS / Hesaplayıcı Hub · Vaka Analizi
HepsiHesapla — 149+ Hesaplayıcı + Neo-Brutalist Tasarım
149+ kategoriden hesaplayıcıyı tek çatı altında toplayan, neo-brutalist görsel kimliğe sahip ve her sayfası AI Overview citation için hazırlanmış kapsamlı utility hub.
Sonuçlar
Ölçülebilir Çıktılar
149+
Hesaplayıcı sayısı
Neo-brutalist
Tasarım sistemi
+18% vs flat
Mobile interaction rate
TODO — Perplexity dataset
AI Overview citation
Brief
Hedef neydi?
Türkiye'de hesaplayıcı kategorisi parçalanmış; her kategori için ayrı domain veya tek tek araçlar var. Tek bir destination URL'in tüm kategorilerin Google'da bütünleşik görünmesi için sıkı entity ve içerik mimarisi gerekiyordu.
Yaklaşım
Hangi metodoloji pillarlarını uyguladık
Methodology'nin Schema, AEO ve GEO pillar'larını agresif uyguladık: her hesaplayıcı için Person (yazar/reviewer) + HowTo + FAQPage schema; H1 sorudur, ilk paragraf 40-60 kelimede direkt cevaptır; result blokları speakable selector ile işaretlidir.
Tam süreç → 47 maddelik AI-Ready SEO Audit metodolojisi.
Teknoloji Yığını
Neyle inşa edildi
- Next.js 15
- TypeScript
- Tailwind CSS
- Schema.org HowTo + FAQPage
- Vercel
Yapım Süreci
Kritik kararlar ve trade-off'lar
Neo-brutalist tasarım sistemi tek bir tercih değildi — her hesaplayıcı kartının net bir kenarlık ve sert gölge taşıması, mobil cihazda dahi tıklanabilir alanı görsel olarak vurguladı. Conversion ölçtük; klasik flat tasarımdan %18 daha yüksek interaction rate verdi.
149 hesaplayıcının tamamı için ortak bir state hook'u (useCalculator) yazdım — input validation, history, share-link generation tek yerden yönetiliyor. Yeni bir hesaplayıcı eklemek 30 dakikadan az sürüyor.
Her hesaplayıcının result paneli speakable selector ile işaretli. ChatGPT veya Perplexity bir hesaplama sorusu aldığında, sonuç + birim + kaynak (formül referansı) tek satırlık alıntılanabilir biçimde sunuluyor.
Mobil ilk yaklaşım: hesaplayıcılar masaüstü görünümünden mobil görünümüne adapte değil, mobil-doğdu. Masaüstü zaten ekstra alandan faydalanıyor.
Uygulanan Adımlar
Metodoloji uygulamada
Result speakable
Hesaplama sonucu sayfanın #result-block id'sinde; SpeakableSpecification ile AI Overview alıntılanabilirlik sağlanır.
FAQPage + HowTo per kategori
Her kategori sayfası 5-7 doğal soru-cevap (FAQPage) + nasıl hesaplanır adımları (HowTo) ile snippet'a hazırlanır.
Dürüst Yansıma
Bir daha yapsam ne değişirdi?
İlk launch'ta 149 hesaplayıcının tamamı için tekil meta description yazmaya zaman ayırmadık — programatik üretim yaptık. Google bunu "low-quality metadata" olarak yorumlayıp ilk 30 günde click-through rate %35 düşük geldi. İkinci versiyonda her kategorinin top 20 hesaplayıcısı için elle yazılmış meta description ekledik. Geri kalan 129'u programatik kalıbı korudu ama bilinçli bir trade-off oldu — bir dahaki sefere top 50 elle yazıyoruz.
Ekran Görüntüleri
Bunu projenizde de ister misiniz?
Aynı 47 maddelik metodoloji, sabit $499USD, 5-7 iş günü. Audit'i rezerve edin.