Opus Growth hosting sunucumdaki
[sunucu adı] sitesine, Google Ads ve Meta reklam trafiği için tek sayfalık bir kampanya sayfası ve bir gizlilik sayfası kur. Form olmayacak; ziyaretçi telefon, WhatsApp ya da randevu bağlantısıyla ulaşacak. Bilgiler: işletme
[işletme adı], hizmet
[hizmet], bölge
[ilçeler], telefon
[telefon], WhatsApp
[numara], randevu bağlantısı
[bağlantı ya da "yok"], adres
[adres], saatler
[çalışma saatleri], reklam başlıkları ve ana teklif
[başlıklar ve teklif], Etiket Yöneticisi kapsayıcısı
[GTM-XXXXXXX], Google Ads hesabı
[hesap adı], Meta reklam hesabı
[hesap adı].
Mesaj uyumu: h1 reklam başlığının vaadini aynı sözcüklerle söylesin (hizmet, bölge, ana teklif). Reklamda olmayan bir vaadi sayfaya, sayfada olmayan bir vaadi reklama yazma. Google ve Meta reklamlarının başlıkları farklıysa en çok harcayan reklamın başlığını esas al ve diğerinin metnini sayfaya uydurmayı öner. Sağlık, hukuk ve finans gibi alanlarda kesinlik vaadi ("garanti", "%100") yazma.
Sayfa yapısı: üstte yalnız marka adı ve telefon düğmesi olsun, menü olmasın ki ziyaretçi dağılmasın. Hero: h1, tek cümle açıklama, üç düğme (Hemen arayın, WhatsApp'tan yazın, randevu seçin), altında dört kısa güvence maddesi ve bir görsel. Sonra üç adımda süreç, fiyatı ne belirler (fiyat yayımlamıyorsan cevap önce yazımla açıkla), SSS, kapanış çağrısı ve alt bilgide NAP ile gizlilik bağlantısı. Mobilde ekranın altına sabit iki düğmeli (Ara, WhatsApp) bir çubuk koy ve body'ye o çubuğun yüksekliğinde alt boşluk ver ki içerik altında kalmasın ve kayma olmasın. WhatsApp bağlantısı wa.me ile ve hazır mesajlı olsun. Görsel dil sade ve güven veren olsun: tek font ailesi (ör. General Sans, iki ağırlık), tek aksan, WhatsApp düğmesi beyaz metinle en az 4,5:1 kontrastlı koyu yeşil.
Hareket ve ölçüm kuralları:
1. Hafif hareket, kütüphanesiz: GSAP, Lenis ve Swiper yükleme. Düğmelerde hover ve basma geçişleri; adım kartlarında `@supports (animation-timeline: view())` içinde ve reduced-motion olmayan ziyaretçide yalnız transform kullanan kaydırmaya bağlı küçük bir yükselme. Opacity kullanma: demoda ekranın altında soluk duran kartlar kontrast hatası verdi ve erişilebilirlik 96'ya düştü. İlk ekranda hiçbir öğe giriş animasyonuyla başlamasın.
2. Ölçüm katmanını `assets/tag.js` olarak defer ile yükle:
a. `window.dataLayer` ve Consent Mode v2 varsayılanı: ad_storage, ad_user_data, ad_personalization ve analytics_storage "denied", wait_for_update 500.
b. Her eylem bağlantısına data-conv="phone", "whatsapp" ya da "booking" ve bulunduğu bölümü gösteren data-conv-place ver. Tek bir tıklama dinleyicisi bunları `{event: "phone_click" | "whatsapp_click" | "booking_click", conv_place, page_path}` olarak dataLayer'a itsin.
c. GTM'yi klasik kodla `<head>`'e koyma; load olayından sonra requestIdleCallback ile ekle. Böylece etiketler ilk boyamayı beklemez.
d. Küçük, sabit konumlu bir izin çubuğu koy: Reddet ve Kabul eşit ağırlıkta düğmeler, seçim tarayıcıda saklansın ve consent update gönderilsin. Mobilde eylem çubuğunun üstünde dursun ve hero'daki ana düğmeyi kapatmayacak kadar alçak olsun.
3. Tag Manager: önce list_gtm_containers, list_gtm_triggers ve gtm_workspace_status ile mevcut durumu göster. create_gtm_trigger ile üç Özel Etkinlik tetikleyicisi öner (phone_click, whatsapp_click, booking_click). list_conversion_actions ve get_conversion_tags ile Google Ads'teki iletişim dönüşümünü ve send_to değerini bul. Aynı kişinin hem arayıp hem yazması iki dönüşüm sayılmasın diye telefon ve WhatsApp'ı sayımı "bir" olan tek bir "İletişim tıklaması" dönüşümüne bağlamayı öner; böyle bir dönüşüm yoksa ne oluşturacağını yaz ve onayımı bekle. create_gtm_tag ile Google Ads dönüşüm etiketi (tag_type "sp") öner. Meta için list_meta_pixels ile pikseli bul; temel piksel kodu kapsayıcıda yoksa onu tüm sayfalarda çalışan bir Özel HTML etiketi olarak, tıklamalarda `fbq('track','Contact')` ve randevuda `fbq('track','Schedule')` gönderen etiketleri ayrı öner. Her aracı önce confirm=false ile çalıştır, değişiklik listesini göster, onayımla oluştur. publish_gtm_container'ı önce confirm=false ile göster, onayımla yayınla ve geri dönülebilecek sürümü yaz.
4. Test planı: GTM önizleme modunda üç düğmeye tıklayınca hangi etiketin çalıştığını ve izin reddedildiğinde reklam çerezinin yazılmadığını nasıl göreceğimi adım adım yaz.
5. GTM ve etiketler eklendikten sonra core_web_vitals'ı yeniden çalıştır, çünkü etiketler puanı düşürebilir; farkı tabloyla göster. Google etiketinin reklam engelleyicilere takılmaması için site_tag_gateway ile birinci taraf ölçüm yolunu önizle ve onayımla kur.
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ı, şablonları 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 ailelerinin CSS'ini oku, her ağırlığın woff2 dosyasını 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ı kontrol et, çünkü Fontshare olmayan bir ağırlık istendiğinde başka bir aile döndürebiliyor. İlk ekrandaki başlığın fontunu ve gövde fontunu her sayfada `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile önceden yükle; demoda bu adım yazı tipi değişiminden doğan kaymayı (CLS 0,024) sıfırladı. Fontshare fontlarının çoğunda ₺ işareti yok, fiyat yazacaksan "TL" kullan.
4. Menüyü ve alt bilgiyi statik HTML yap. chrome.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. Şablon dosyalarının uzantısı .html olmasın ve içlerinde `{{...}}` yerine `
[[NAV]]` gibi yer tutucu kullan, yoksa design-check ve seo-check onları yarım kalmış sayfa sanar. Mobil menüyü JS'siz `<details>` ile kur. Alt bilgide işletme adı, adres ve telefon düz metin olarak dursun.
5. Görselleri site_fetch ile indirirken dönüştür: aynı fotoğrafı resize="480x", "800x" ve "1200x", image_format="webp", quality=65 ile ayrı dosyalara yaz. Her `<img>` için srcset, sizes, width ve height ver. İlk ekrandaki ana görsel fetchpriority="high" olsun ve lazy olmasın; diğerleri loading="lazy" decoding="async" olsun. Mobilde ana görsel ekranı dolduruyorsa `<picture>` ile mobile daha yatay ve küçük bir kırpım ver (demoda mobil görsel 89 KB'tan 43 KB'a indi).
6. Logodan site_fetch ile 48 piksellik PNG favicon üret ve her sayfaya `<link rel="icon">` ekle. Favicon yoksa tarayıcı konsola 404 yazar ve En İyi Uygulamalar puanı 96'ya düşer.
7. HTML doğrulayıcısının kuralları: belge büyük harfli `<!DOCTYPE html>` ile başlasın (kitin başlangıç dosyaları küçük harfle başlıyor), tel: bağlantılarının görünen metnindeki boşluklar ` ` olsun, style="" niteliği kullanma, her düğmeye type="button" yaz.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur (/gizlilik/). site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Sayfaya özel şemayı (kampanya sayfasında WebPage, provider olarak #business'a bağlı ve areaServed içeren Service, FAQPage; gizlilik sayfasında WebPage ve BreadcrumbList. site.config.js'te businessType en özgül LocalBusiness alt türü olsun (ör. HousePainter, Plumber, Dentist). Gizlilik sayfası çerezleri, ölçüm etiketlerini ve izin seçiminin nasıl değiştirileceğini anlatsın) 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 48 ile 60 karakter olsun (seo-check 65'i aşanı hata sayar), description 145 ile 158 karakter, her sayfada tek h1. Her sayfanın ana içeriği en az 150 kelime olsun; iletişim ve gizlilik sayfaları bu sınırın altında kalmaya yatkın.
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 aşağıdaki lazy görseller boş çıkabilir; bunu 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, Accessibility, Best Practices ve SEO 100; masaüstünde dördü de en az 95. 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.
Bu sayfa reklam açılış sayfası olduğu için ölçüm etiketleri olmadan da ölç: kapılardaki puanlar etiketsiz halin puanıdır, etiketli hal ayrıca 5. adımda ölçülür.
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.
