Opus Growth hosting sunucumdaki
[sunucu adı] sitesine,
[ürün adı] adlı yazılım ürünüm için Webflow'daki modern SaaS şablonlarının hissini veren ama Webflow kullanmayan, statik ve hızlı bir tanıtım sitesi kur. Ürün:
[ürün ne yapar ve kimin için, tek cümle]. Öne çıkan özellikler:
[altı özellik, her biri için bir cümle]. Uygulama ekran görüntüleri: [üç ekran görüntüsünün bağlantısı ve her birinin ne gösterdiği]. Planlar: [plan adları, aylık ve yıllık fiyatlar, KDV dahil mi, her planın içerdikleri]. Logo şeridi için yazılı izin aldığım müşteri logoları:
[logo dosyaları ya da "yok"]. Müşteri sözleri:
[izinli alıntı, ad, unvan, şirket ya da "yok"]. Şirket:
[şirket unvanı],
[adres],
[telefon],
[e-posta],
[WhatsApp numarası]. Kayıt ya da demo yolu: [kayıt sayfası adresi ya da "demo isteği WhatsApp ve e-postayla"]. Alan adı:
[alan adı].
Sayfalar: ana sayfa (hero ve ürün ekran görüntüsü, logo şeridi, bento özellik ızgarası, sekmeli ürün vitrini, müşteri sözleri, SSS, kapanış çağrısı), özellikler (/ozellikler/, her özelliğin kendi başlığı ve çapası), fiyatlar (/fiyatlar/: anahtar, plan kartları, karşılaştırma tablosu, faturalandırma SSS'si), iletişim (/iletisim/, form yok; e-posta, hazır mesajlı WhatsApp ve telefon), gizlilik (/gizlilik/) ve 404.html.
Tarz: açık zeminli modern SaaS.
[renk tercihi] verilmediyse sıcak kırık beyaz zemin, mürekkep siyahı metin ve tek bir canlı aksan (yalnız zemin olarak, üstünde koyu metinle). Tek bir Fontshare ailesinden iki ağırlık (ör. Satoshi 400 ve 700). Büyük yuvarlatılmış bento kutuları, hap biçimli düğmeler, ürün ekran görüntüsü koyu bir pencere çerçevesi içinde. Mor-mavi gradyan ve her yerde cam efekti yok.
Etkileşim kuralları (Webflow etkileşimleri, kütüphanesiz):
1. GSAP, Lenis ve Swiper YÜKLENMEZ. Etkileşimleri CSS ve 3 KB'ı geçmeyen tek bir vanilla JS dosyasıyla yaz, defer ile yalnız ana sayfada yükle. Fiyat anahtarı betik gerektirmez.
2. Bento ızgarası: masaüstünde 4 sütunlu CSS grid; bir kutu 2x2, ikisi 2 sütun genişliğinde, boş hücre kalmayacak biçimde yerleştir, mobilde tek sütun. Her kutu özellikler sayfasındaki ilgili başlığa giden gerçek bir bağlantı taşısın ve kutunun tamamı tıklanır olsun: bağlantıya ::after ile inset:0 ver (gerilmiş bağlantı), kutuya ikinci bir bağlantı koyma. Hover ve :focus-within durumunda kenar koyulaşsın, kutu transform ile 4 piksel yükselsin ve içindeki küçük arayüz parçası hareket etsin (adım listesi yana kaysın, çubuklar scaleY ile büyüsün).
3. Logo şeridi yalnız yazılı izin aldığın müşterilerin logolarıyla kurulur; izinli logo yoksa bölümü hiç koyma ve yerine kurgusal logo ya da "entegrasyonlar" başlıklı uydurma bir liste koyma. Şerit, aynı listenin iki kopyasının (ikincisi aria-hidden="true") CSS @keyframes ile translate3d(-50%, 0, 0) kaymasıdır; üstüne gelince ve odakta durur. Beş saniyeden uzun süren hareket için WCAG 2.2.2 gereği bir "Şeridi durdur" düğmesi koy: düğme HTML'de hidden olsun, JS açsın ve aria-pressed ile metnini güncellesin. Düğmenin bulunduğu satıra düğme yüksekliği kadar min-height ver; demoda düğme görünür olunca satır uzadı ve masaüstünde küçük bir kayma (CLS 0,002) ölçüldü. prefers-reduced-motion'da animasyon kapansın, kopya liste gizlensin ve logolar sarılan sabit bir ızgaraya dönsün.
4. Sekmeli ürün vitrini: HTML'de sekmeler panellere giden bölüm içi bağlantılar (href="#ekran-x") olsun ve üç panel alt alta görünsün; böylece JS kapalıyken ve tarayıcılar için içerik eksiksiz kalır. Sekme kapsayıcısına role="group" ve aria-label ver. JS bunları role="tablist", "tab" ve "tabpanel"e çevirsin; aria-selected, aria-controls, tabindex ve hidden'ı yönetsin; sol ve sağ ok, Home ve End tuşları çalışsın; sayfa #ekran-x ile açılırsa o sekme seçili gelsin. Paneller ilk ekranın altında kaldığı için gizlenmeleri kayma (CLS) üretmez; panel görselleri loading="lazy".
5. Fiyat anahtarı JS'siz çalışır: fieldset içinde iki radyo düğmesi (Aylık seçili gelir) ve `.pricing:has(#donem-yillik:checked) .price-m { display: none }` ile yıllık fiyatları gösteren kurallar. Radyo düğmesini görsel olarak gizle ama label'ın tamamı tıklanır ve klavyeyle odaklanır kalsın; odak halkasını `label:has(input:focus-visible)` ile göster. Aylık görünümde her planın altında "Yıllık ödemede X TL" satırı dursun, böylece iki fiyat da metinde bulunur.
6. Müşteri sözleri yalnız izin verilmiş, ad, unvan ve şirketiyle doğrulanabilen alıntılardan oluşur. Elinde yoksa bölümü kaldır; taslak aşamasında kullanacaksan kesik çizgili ve "gerçek alıntı gelince doldurulur" yazan yer tutucu kart kullan ve yayından önce bana sor. Review ya da aggregateRating şeması yazma.
7. Hero'daki ürün ekran görüntüsü masaüstünde LCP öğesidir: fetchpriority="high", lazy değil, sizes ile gerçek genişliği ver. Mobilde LCP genellikle başlık metnidir; ekran görüntüsü yine de srcset ile 480 piksellik sürümden yüklensin.
Şema: ana sayfada ve fiyatlar sayfasında SoftwareApplication (name, applicationCategory "BusinessApplication", operatingSystem, url, image, publisher ve her plan ve dönem için ayrı Offer: name, price, priceCurrency "TRY", url). Google yazılım uygulaması zengin sonucu için puan ya da değerlendirme ister; kendi sitende topladığın gerçek değerlendirme yoksa yıldız çıkmaz ve bunu uydurma puanla çözme. Ana sayfa, özellikler ve fiyatlar sayfasında FAQPage, iletişimde ContactPage, iç sayfalarda BreadcrumbList. Fiyatlar sayfasının ilk paragrafı "
[ürün adı] fiyatları aylık N TL'den başlar" diye doğrudan cevap versin. Karşılaştırma tablosu gerçek bir `<table>` olsun ve dar ekranda `<section tabindex="0" aria-label="...">` içinde yatay kaysın; demoda role="region" verilen div prefer-native-element, aynı başlıkla etiketlenmiş iki bölüm de unique-landmark hatası verdi.
Kurulum ve bilinen tuzaklar (demo ölçümünde her biri puanı düşürdü, atlama):
1. Sunucuda yayında bir site varsa önce bana söyle, çünkü kurulum index.html ve assets klasörünü ezer. scaffold_site'ı önce confirm=false ile önizle, onayımla confirm=true çağır. Sonra site_design_guide ve site_seo_guide'ı oku. Koda başlamadan tasarım yönünü (tipografi, renk, ızgara, imza öğesi, hareket dili ve YÜKLENMEYECEK kütüphaneler) assets dışında kısa bir ART.md dosyasına yaz ve bana göster.
2. Tailwind'i derle, CDN'den yükleme. site_run_command ile background=true vererek `npm i -D tailwindcss@3` kur ve sonucu site_command_status ile izle. `tailwind.config.js` içindeki content yolları bütün HTML dosyalarını, `_src` şablonlarını ve sınıf yazan JS dosyalarını kapsasın. `_src/tw.css` dosyası `@import "../assets/app.css";` satırı ve üç `@tailwind` satırından oluşsun; `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify` ile tek dosyaya derle. Sayfalardan cdn.tailwindcss.com betiğini ve satır içi tailwind.config'i kaldır, yalnız `/assets/site.css` bağla. Her HTML değişikliğinden sonra yeniden derle.
3. Fontları kendi sunucunda barındır. Seçtiğin Fontshare ailesinin CSS'ini oku, her ağırlığın woff2 dosyasını ayrı ayrı site_fetch ile `assets/fonts/` altına indir ve @font-face kurallarını `font-display: swap` ile `assets/app.css` içine yaz; design-check özgün fontu orada arar. İndirdiğin CSS'teki font-family adını ve ailenin ı, İ, ş, ğ harflerini içerdiğini kontrol et (Tanker'de ı yok). İlk ekranda kullandığın HER ağırlığı `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile önceden yükle ve bu satırları stil dosyası satırından önce yaz; üç dosyayı geçiyorsa ağırlık sayısını azalt. Demoda preload edilmeyen tek bir gövde ağırlığı mobil LCP'yi 2,6 saniyeye itti ve performansı 97'ye düşürdü. Fontshare fontlarının çoğunda ₺ işareti yok, fiyatları "TL" ile yaz.
4. Menüyü ve alt bilgiyi statik HTML yap. chrome.js, motion.js ve site.config.js'i sayfalara yükleme. site.config.js'teki nav listesini okuyup `_src/header.tpl` ve `_src/footer.tpl` şablonlarını her sayfadaki `<!-- nav:start --><!-- nav:end -->` ve `<!-- footer:start --><!-- footer:end -->` işaretlerinin arasına basan küçük bir `chrome-stamp.mjs` yaz; etkin sayfanın bağlantısına aria-current="page" eklesin. Şablonlarda `{{...}}` yerine `
[[NAV]]` gibi yer tutucu kullan, uzantıları .html olmasın; yoksa design-check ve seo-check onları yarım sayfa sanar. Mobil menüyü JS'siz `<details>` ile kur. Alt bilgide işletme adı, adres ve telefon düz metin olarak dursun; alt bilgi ve kırıntı bağlantıları en az 44 piksel yüksekliğinde olsun.
5. Görselleri site_fetch ile indirirken dönüştür: aynı görseli resize="480x", "800x" ve "1200x", image_format="webp", quality=60 ile ayrı dosyalara yaz (site_fetch kırpmaz; kırpım gerekiyorsa kaynağı o oranda iste). Her `<img>` için srcset, sizes ve gerçek orana uyan width ve height ver. Sayfanın LCP öğesi olan görsel fetchpriority="high" olsun ve lazy olmasın; diğer bütün görseller loading="lazy" decoding="async" olsun. Mobilde ilk ekranı dolduran bir görsel varsa `<picture>` ile mobile daha küçük bir kırpım ver.
6. Her sayfaya `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` ekle ve logodan site_fetch ile resize="180x180" bir apple-touch-icon üret. Favicon bağlantısı yoksa tarayıcı /favicon.ico ister, konsola 404 düşer ve En İyi Uygulamalar puanı 96'ya iner.
7. HTML doğrulayıcısının kuralları: belge büyük harfli `<!DOCTYPE html>` ile başlasın; tel: bağlantılarının görünen metnindeki her boşluk ` ` olsun ("Ara: 0212..." gibi önekteki boşluk dahil); style="" niteliği kullanma; her düğmeye type yaz; aria-label'ı yalnız landmark, form ya da etkileşimli öğeye koy (ul ya da rolsüz div'e koymak hata verdi); aynı adla etiketlenmiş iki landmark olmasın; satır sonunda boşluk bırakma.
8. Başlık sırası atlamasın: liste sayfasında h1'den sonra kart başlıkları h3 olunca erişilebilirlik 98'e düştü; kartları yeniden kullanırken başlık düzeyini sayfaya göre ver (liste sayfasında h2, bir h2 bölümünün içinde h3).
9. Hareket için niteliğin adı data-reveal olsun (design-check hareketi yalnız bu adla tanır). Gizli başlangıcı JS yalnız sayfa açıldığında ekranın altında kalan bloklara versin, ilk ekrandaki içerik hiç gizlenmesin; transform kullan, opaklıkla soldurma kontrast denetimini düşürür. Niteliği tek başlığa değil başlığı ve açıklamasını saran bloğa koy; demoda yalnız başlığa konunca bekleyen başlık alttaki paragrafın üstüne bindi. prefers-reduced-motion: reduce olduğunda hiçbir şey gizlenmesin ve animasyonlar kapansın.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur. site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Sayfaya özel şemayı ayrı `<script type="application/ld+json">` bloklarına yaz ve @id ile temel grafiğe bağla. BreadcrumbList'i @graph içine gömme, kendi bloğunda dursun; seo-check onu yalnız böyle görür.
2. Title en çok 60 karakter olsun (seo-check 25'in altını ve 65'in üstünü hata sayar), description 130 ile 158 karakter, her sayfada tek h1 ve her sayfanın ana içeriği en az 150 kelime. İletişim, gizlilik ve liste sayfaları bu sınırın altında kalmaya yatkın; sayfaya özgü bilgi ekle, dolgu yazma.
3. Her sayfanın ilk paragrafı sayfanın sorusuna doğrudan cevap versin. Sayfaya özgü SSS'yi `<details>` ile yaz ve FAQPage olarak işaretle. Yayımlayan kurumu ve "Son güncelleme" tarihini `<time>` ile göster.
4. robots.txt'te GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot ve CCBot için kararını gerekçesiyle yaz ve sitemap'i göster. sitemap.xml'de gerçek lastmod olsun. llms.txt'te sitenin iki cümlelik doğru özeti ve önemli sayfaların listesi bulunsun.
5. Uydurma yok: bana sormadan yorum, puan, ödül, müşteri sayısı, sertifika, çalışma saati, koordinat ya da fiyat yazma. Bilmediğin alanı şemaya hiç koyma.
Kapılar (sırayla; hepsi geçmeden "bitti" deme):
1. site_run_command ile `node chrome-stamp.mjs`, Tailwind derlemesi, `node seo-stamp.mjs`, `node seo-check.mjs` (0 hata, 0 uyarı), `node design-check.mjs` (0 hata; kalan uyarıyı gerekçesiyle yaz) ve `npx html-validate "**/*.html"` (0 hata).
2. Her sayfayı site_preview ile view="mobile" ve view="desktop" olarak gör. site_preview sayfayı hareket kapalıyken (reduced-motion) çeker; bu görüntüde içerik eksiksiz görünmüyorsa hareketsiz hal bozuk demektir. Tam sayfa görüntüsünde sabit konumlu öğeler (yapışkan çubuk gibi) sayfanın ortasında görünebilir ve aşağıdaki lazy görseller boş çıkabilir; bunları hata sayma ama yolunu kontrol et.
3. Her sayfa için core_web_vitals'ı strategy="mobile" ve strategy="desktop" ile çalıştır. Kabul: mobilde Performance en az 95 (hedef 99 ile 100), Accessibility, Best Practices ve SEO 100; masaüstünde dördü de 100. Tutmayan sayfada resources=true ile hangi dosyanın geciktirdiğini bul, düzelt ve yeniden ölç. Ardından ana sayfada seo_audit'i strategy="mobile" ve runs=2 ile çalıştır. Ağ istekleri listesinde kendi alan adın dışında bir adres kalmamalı.
4. 360, 390, 768 ve 1440 piksel genişlikte yatay kaydırma olmasın, dokunma hedefleri en az 44 piksel olsun, konsolda hata olmasın.
Etkileşim kontrolü: site_preview hover ve hareketi gösteremez. Bana masaüstü tarayıcıda bento kutularının üstüne gelince ve Tab ile odaklanınca kutunun yükseldiğini, "Şeridi durdur" düğmesinin şeridi durdurduğunu, sekmelerin ok tuşlarıyla değiştiğini, fiyat anahtarının JavaScript kapalıyken de yıllık fiyatı gösterdiğini ve telefonda hareket azaltma açıkken logoların sabit ızgaraya döndüğünü nasıl kontrol edeceğimi yaz.
Yayından sonra: site_headers ile `/assets/* Cache-Control: public, max-age=31536000, immutable` kuralını önizle ve onayımla uygula; bundan sonra CSS ya da JS değiştiğinde dosya adını sürümle (site-v2.css gibi). gsc_submit_sitemap ile sitemap.xml'i gönder ve gsc_url_inspect ile ana sayfanın durumuna bak. En sonda bana şunları ver: sayfa sayfa puan tablosu (sayfa, mobil dört puan, masaüstü dört puan, LCP, CLS), kapıların sonucu ve uyguladığın düzeltmelerin listesi.
