Hosting sunucumda
[sunucu adı] restoranım için sıfırdan bir site kur. Bilgiler:
1. Ad:
[işletme adı], tür:
[restoran / kafe / kahvaltıcı], mutfak:
[mutfak türü]
2. Menü, bölümleri, açıklamaları ve fiyatlarıyla:
[menü ve fiyatlar]
3. Vejetaryen, vegan, glutensiz ve alerjen bilgisi:
[diyet bilgileri]
4. Çalışma saatleri (kahvaltı ve akşam ayrı ise ayrı):
[saatler]
5. Rezervasyon nasıl alınıyor:
[telefon / WhatsApp / ikisi], telefon:
[telefon], WhatsApp:
[WhatsApp]
6. Adres ve ulaşım notları:
[adres],
[otopark ve ulaşım]
7. Ürünlerin geldiği yerler ve hikayemiz:
[üreticiler ve hikaye]
8. Alan adı:
[alan adı], gerçek fotoğraflar:
[fotoğrafların yeri ya da "stok kullan"]
Önce list_servers ile sunucuyu doğrula, scaffold_site'ı style="restaurant" ile önce confirm=false, onayımla confirm=true çalıştır. site_design_guide ve site_seo_guide'ı oku. _kaynak/ART.md dosyasına doğal ve organik bir tasarım kararı yaz ve bana göster: Fontshare'den sıcak bir serif başlık fontu (örneğin Gambarino) ile yumuşak bir gövde fontu (örneğin Supreme), kum rengi zemin, toprak tonu metin, zeytin yeşili ve kiremit rengi olmak üzere iki sıcak ton, bütün kartlarda aynı yuvarlak köşe. İmza öğesi menü sayfasındaki "günün tahtası" kutusu olsun. Seçtiğin fontta ₺ işareti yoksa fiyatları "TL" ile yaz.
Sayfalar ve şema:
1. Ana sayfa: ilk ekranda ne sunduğun, nerede olduğun, "Masa ayırt" ve "Menüyü gör" düğmeleri ve büyük bir fotoğraf. Sonra menüden üç tabak, ürünlerin nereden geldiği, saatler ve konum özeti, 4 SSS. Şema: WebPage, FAQPage, ayrıca #business düğümüne servesCuisine, acceptsReservations (rezervasyon sayfasının adresi) ve hasMenu ekle.
2. Menü: PDF değil, HTML. Her bölüm başlıklı ve bağlantılı, her yemek adı, açıklaması, fiyatı ve diyet etiketiyle, sayfa başında son güncelleme tarihi ve alerjen notu. Fiyatları yalnız benim verdiğim listeden yaz, eksik fiyatı uydurma. Şema: Menu, hasMenuSection içinde MenuSection, hasMenuItem içinde MenuItem, offers içinde Offer (price, priceCurrency TRY), uygun yemeklerde suitableForDiet.
3. Rezervasyon: nasıl alındığı, telefon ve WhatsApp, hazır mesajlı WhatsApp formu (tarih, saat, kişi sayısı, bahçe ya da salon), 3 SSS (gecikme, kalabalık grup, iptal). Şema: WebPage, FAQPage.
4. Hikayemiz ve üreticilerimiz: kimin işlettiği, ürünlerin kimden geldiği ve hangi ürünün hangi aylarda menüye girdiğini gösteren bir mevsim tablosu. Şema: AboutPage.
5. Konum ve saatler: adres, saat tablosu, "Yol tarifi al" bağlantısı, arabayla, merkezden ve toplu taşımayla nasıl gelinir, erişilebilirlik notu. Şema: ContactPage.
6. 404 sayfası.
Fotoğraf ağırlıklı ama hızlı olması için: ilk ekranda tek bir büyük görsel olsun, diğer bütün görseller lazy; görselleri 60 ile 65 kalitede WebP yap ve sayfa başına en fazla sekiz görsel kullan; galeri için kaydırmalı bir kütüphane yükleme.
Uydurma yasağı: gerçek olmayan yorum, puan, ödül, sertifika, müşteri sayısı ya da "en iyi" gibi bir iddia yazma. Vermediğim çalışma saatini, koordinatı, fiyatı ya da e-postayı şemaya ve metne ekleme; o alanı boş bırak ve raporda eksik olarak listele. Metinde uzun tire kullanma, klişe slogan yazma, her sayfanın ilk paragrafı sayfanın sorusuna doğrudan cevap versin.
Ortak SEO işleri: her sayfada 48 ile 60 karakter arası özgün başlık, 145 ile 158 karakter arası açıklama, tek H1 ve sonu eğik çizgili canonical olsun. Her sayfaya kendi WebPage düğümünü ve BreadcrumbList'i, temel grafiğe @id ile bağlanacak biçimde ekle. robots.txt dosyasında Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended ve CCBot için Allow: / yaz, kararı yorum satırında gerekçelendir ve eğitim amaçlı tarayıcıları kapatmak istersem neyi değiştireceğimi not et. sitemap.xml gerçek lastmod tarihleriyle olsun. llms.txt dosyası işletmeyi iki cümlede doğru anlatsın, NAP'ı ve önemli sayfaları bağlantılarıyla listelesin.
Teknik kurulum (kitin varsayılan yolu bu sitede kullanılmayacak, nedenleriyle):
1. Tailwind'i derle, CDN'i kaldır. Kit Tailwind'i tarayıcıda derleyen Play CDN ile yükler; bu konsola uyarı basar ve mobil performansı düşürür. site_write_file ile _kaynak/package.json yaz, site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) ile kur ve site_command_status ile bitişini bekle. _kaynak/tailwind.config.js içinde content olarak "./*.html", "./**/*.html", "!./_kaynak/**" ve "./_kaynak/chrome.mjs" ver. _kaynak/site.css dosyasına @font-face kurallarını, @tailwind satırlarını ve kitin app.css dosyasındaki odak halkası, "İçeriğe geç" bağlantısı ve yatay taşma korumasını taşı. Çıktıyı assets/app.css adıyla üret, çünkü design-check.mjs fontları bu dosyada arar; sayfalardaki bağlantıya ?v=<içerik özeti> ekle ki kenar önbelleği eski dosyayı göstermesin.
2. Fontları kendi sunucunda barındır. Seçtiğin Fontshare ailelerinin CSS adresini (api.fontshare.com/v2/css?f[]=...) site_read_url ile oku, içindeki woff2 dosyalarını site_fetch ile assets/fonts/ altına indir, @font-face ile font-display: swap kullanarak tanımla. İlk ekranda görünen her ağırlığı <link rel="preload" as="font" type="font/woff2" crossorigin> ile önceden yükle, en fazla üç dosya. Bunu yapmazsan font değişimi düzeni kaydırır; demoda masaüstü CLS bu yüzden 0,078 çıktı ve ön yükleme ile 0'a indi.
3. Menüyü ve alt bilgiyi statik HTML yap. Kitin <site-nav> ve <site-footer> bileşenleri JavaScript ile çalışır ve yapay zeka tarayıcılarının çoğu menüyü, adresi ve telefonu göremez. chrome.js ve motion.js betiklerini sayfalardan kaldır. _kaynak/chrome.mjs içinde assets/site.config.js verisinden header ve footer HTML'i üreten iki fonksiyon yaz; mobil menüyü JavaScript'siz <details> ve <summary> ile kur, etkin sayfaya aria-current="page" ver. Site kökünde build.mjs yaz ve sırasıyla şunları yapsın: node seo-stamp.mjs çalıştır, her sayfada <!-- chrome:header:start --> ile <!-- chrome:header:end --> (ve footer için aynısı) arasını yeniden bas, Tailwind'i derle, CSS bağlantısındaki özeti güncelle. Her değişiklikten sonra yalnız site_run_command("node build.mjs") çalıştır.
4. Hareket yalnız CSS ile ve ölçülü olsun. Görsel kartlarına data-reveal ver ve beliriş efektini CSS scroll-driven animation (animation-timeline: view()) ile yalnız transform kullanarak yap; opaklığı değiştirme, çünkü sıfır opaklıkla başlayan metin hem JavaScript'siz tarayıcılarda kaybolur hem de erişilebilirlik ölçümünde kontrast hatası verir. Kuralı @media (prefers-reduced-motion: no-preference) ve @supports (animation-timeline: view()) içine yaz. GSAP, Lenis ve Swiper yükleme.
5. Görselleri küçült. Her fotoğrafı site_fetch ile resize="480x", "800x", "1200x", "1600x" ve image_format="webp", quality 60 ile 68 arası değerlerle ayrı dosyalara indir. Her <img> için srcset, sizes, gerçek orana uyan width ve height ver; görseli kırpacaksan aspect-
[4/3] gibi bir oran sınıfı ve object-cover ekle, yoksa görsel yüklenince düzen kayar. İlk ekrandaki görsel fetchpriority="high" olsun ve lazy olmasın, diğerleri loading="lazy". Paylaşım görselini site_fetch ile 1200x630 JPG olarak indir.
6. Küçük ama puan düşüren ayrıntılar: <link rel="icon"> ile bir SVG favicon ver (yoksa tarayıcı /favicon.ico ister, 404 konsol hatası olur ve En İyi Uygulamalar puanı düşer). DOCTYPE'ı büyük harfle yaz, style niteliği kullanma, satır sonunda boşluk bırakma. Telefon bağlantısının görünen metninde boşluk yerine kullan (html-validate tel-non-breaking kuralı). Menü, alt bilgi, kırıntı ve başlık içindeki bağlantılar en az 44 piksel yükseklik ve genişlikte olsun. Harita için Google Maps iframe gömme; site dışa istek yapmasın, onun yerine adres ve "Yol tarifi al" bağlantısı koy.
7. Siteden hiçbir dış adrese istek gitmesin: font, betik, stil ve görsel kendi sunucunda olsun. Form işleyici olmadığı için iletişim formu method="get" ile https://wa.me/
[WhatsApp numarası] adresine giden ve name="text" olan hazır mesajlı bir textarea olsun; JavaScript gerekmez.
Kapılar (sırayla, hepsi geçmeden "bitti" deme):
1. site_run_command ile node build.mjs, ardından node seo-check.mjs: 0 hata, 0 uyarı. Kopya içerik uyarısı çıkarsa iki sayfanın metni yeterince farklı değildir, yeniden yaz.
2. node design-check.mjs: 0 hata. Hareketsiz bir tarz seçtiysen "Hiç hareket yok" uyarısını bilinçli karar olarak raporda gerekçesiyle yaz.
3. _kaynak/node_modules/.bin/html-validate ile bütün HTML dosyaları: 0 hata. Site kökünde .htmlvalidateignore dosyasına _kaynak/ satırını yaz ki bağımlılıklar taranmasın.
4. Her sayfayı site_preview ile view="mobile", view="desktop", ayrıca 360 ve 768 genişlikte gör. Yatay kaydırma, taşan başlık, sıkışık buton ya da okunmayan metin varsa düzelt ve tekrar bak.
5. Her sayfa için core_web_vitals ile strategy="mobile" ve strategy="desktop" ölç; seo_audit ile erişilebilirlik, en iyi uygulamalar ve SEO puanlarını al. Hedef mobilde erişilebilirlik, en iyi uygulamalar ve SEO 100, performans en az 95; masaüstünde dördü de en az 95. Tutmayan sayfada core_web_vitals'ı resources=true ile çalıştır, LCP öğesini ve fazla büyük görseli bul, düzelt, seo_audit'i runs=2 ile tekrarla, çünkü tek ölçüm dalgalanabilir.
6. Ağ isteklerinde sitenin kendi alan adı dışında hiçbir adres olmamalı.
Yayından sonra: sitemap.xml'i gsc_submit_sitemap ile gönder, gsc_inspect_urls ile ana sayfayı ve en önemli üç sayfayı kontrol et. Hiçbir araç "Dizine Eklenmesini İste" düğmesine basamaz; bunu Search Console'dan elle yapmam gerekenleri listele.
Sonunda bana şu raporu ver: sayfa listesi ve her sayfanın mobil ve masaüstü puanları tablo halinde (performans, erişilebilirlik, en iyi uygulamalar, SEO, LCP, CLS), her kapının sonucu, yaptığın düzeltmeler ve benden beklediğin eksik bilgiler. Bir ölçüt tutmadıysa bunu açıkça yaz, "tamam" deme.
