Opus Growth hosting sunucumda
[sunucu adı] aile işletmemiz için geleneksel görünümlü bir site kur. İşletme:
[işletme adı],
[ne üretiyoruz, ör. zeytinyağı ya da lokum],
[şehir],
[kuruluş yılı ve kuşak bilgisi, yalnız gerçekse]. Ürünler: [her ürün için ad, ambalaj, kısa açıklama ve yayımlanmış fiyat ya da "fiyat yazma"]. Üretim adımları:
[kısa liste]. Sipariş yolu:
[telefon, dükkan, kargo]. Telefon:
[telefon], e-posta:
[e-posta], dükkan adresi:
[adres], alan adı:
[alan adı]. Aile ve arşiv fotoğrafları:
[adresleri ya da "yok"].
Görünüm eski olacak, altyapı yeni. Eski bir etiket, bir dükkan tabelası ya da bir hasat defteri gibi hissettirmeli; ama sayfalar telefonda kusursuz açılmalı, JavaScript yüklenmemeli ve her sayfa ölçülmeli. Eski estetik, okunurluğun ya da kontrastın bahanesi olamaz.
Tasarım yönü geleneksel:
1. Tipografi: tek bir klasik Fontshare serif aile (ör. Gambetta 400, 400 italik, 600). Menü, düğme ve etiketlerde font-variant-caps: all-small-caps ile küçük büyük harf ve geniş harf aralığı; başlıklar ortalı.
2. Renk: kağıt rengi zemin, mürekkep kahvesi metin, ikincil kahve ve tek ana renk (ör. zeytin yeşili), çok küçük etiketlerde ikinci bir sıcak renk. Hepsi en az 4.5:1 kontrast.
3. Doku: zemin için kağıt dokusu, CSS içinde SVG feTurbulence veri adresiyle; ek görsel dosyası ve ek istek yok.
4. İmza öğesi: eski etiket çerçevesi; çift çizgili, köşelerinde süs olan kutu (border, outline-offset ve ::before, ::after ile) ve bölüm aralarında satır içi SVG ile çizilmiş küçük bir süs (ör. zeytin dalı), aria-hidden.
5. Düzen: ortalı ve dar; ürünler çerçeveli etiket kartlarında, mobilde tek sütun.
6. Hareket: yok.
7. Fotoğraf: aile arşivi varsa onu kullan. Yoksa kamu malı ya da açık lisanslı arşiv fotoğrafı kullanabilirsin, ama altyazıda kaynağını ve lisansını yaz ve aileye aitmiş gibi sunma.
Sayfalar ve şemaları:
1. index.html: ilk paragrafı "kim, ne üretiyor, nerede, nasıl satıyor" sorusunu cevaplayan çerçeveli ilk ekran, ürün etiketleri, aile bölümü, sipariş şekli. WebPage. İşletme türü site.config.js'te en uygun alt tür (ör. Store ya da FoodEstablishment).
2. urunler.html: her ürün ayrı etiket kartında; ad, ambalaj, açıklama, yayımlanmış fiyat. CollectionPage ve her ürün için Product (brand, manufacturer #business, offers içinde price, priceCurrency, availability). Fiyat bana sorulmadan yazılmaz; fiyat yoksa offers alanını hiç koyma.
3. hikayemiz.html: kuşak kuşak gerçek hikaye. AboutPage.
4. uretim.html: hasattan ya da hammaddeden pakete adımlar, ürünün resmi sınıf tanımı ve dayandığı mevzuat (ör. Türk Gıda Kodeksi). WebPage ve HowTo.
5. sss.html: sipariş, kargo, saklama gibi altı gerçek soru. FAQPage.
6. iletisim.html: sipariş telefonu, dükkan adresi, harita bağlantısı; saatler mevsime göre değişiyorsa yazma. ContactPage.
7. kvkk.html ve 404.html.
Teknik kurallar. Bunlara harfiyen uy, çünkü aşağıdaki kapılar tam olarak bunları ölçüyor:
1. Kurulum. scaffold_site'ı önce önizleme olarak çalıştır, listeyi bana göster, onayımdan sonra confirm=true ile kur. Ardından site_design_guide ve site_seo_guide'ı baştan sona oku. Kod yazmadan önce _kaynak/ART.md dosyasına yön kararını yaz (his, font eşleşmesi, renkler ve kontrast oranları, ızgara, imza öğesi, hareket kararı, sayfa listesi) ve bana göster.
2. JavaScript'i söküp at. Bu sitede hiçbir sayfa JavaScript yüklemeyecek. Kitteki cdn.tailwindcss.com betiğini, tailwind.config satırını, GSAP, ScrollTrigger, SplitText, Lenis ve Swiper etiketlerini, motion.js, chrome.js ve site.config.js betik etiketlerini tüm sayfalardan sil; assets/chrome.js ve assets/motion.js dosyalarını kaldır. assets/site.config.js dosyası kalsın ama yalnız seo-stamp.mjs için marka, iletişim ve seo bilgisini tutsun; tarayıcıya yüklenmesin.
3. Menü ve alt bilgi statik HTML olacak. <site-nav> ve <site-footer> bileşenleri JavaScript'le çizildiği için arama ve yapay zeka tarayıcıları menüyü, iç linkleri ve iletişim bilgisini göremez. Menüyü _kaynak/ust.inc, alt bilgiyi (ad, adres, telefon, e-posta, tüm sayfa linkleri, KVKK, "Web: Opus Growth") _kaynak/alt.inc dosyasına yaz. Uzantı .inc olsun ki seo-stamp ve html-validate bu parçaları sayfa sanmasın. Her sayfada <!-- ust:bas --><!-- ust:son --> ve <!-- alt:bas --><!-- alt:son --> işaretleri olsun. Sonra site_write_file ile _kaynak/parca-bas.mjs adında bağımlılıksız bir Node betiği yaz: bu betik iki parçayı her HTML dosyasındaki işaretlerin arasına basar, bulunulan sayfanın menü linkine aria-current="page" ekler ve sitemap.xml'i her sayfanın JSON-LD'sindeki dateModified tarihini lastmod olarak kullanarak yeniden yazar (404 ve noindex sayfaları hariç). Mobil menüyü JavaScript'siz <details><summary>Menü</summary> ile yap; masaüstü ve mobil menü iki ayrı <nav>, aria-label'ları farklı.
4. Fontları kendi sunucunda barındır. Bu sitede tek klasik serif aile ve en fazla üç dosya olacak. Fontshare CSS adresini (https://api.fontshare.com/v2/css?f[]=aile@400,600&display=swap, italik için ağırlık kodu 401) site_fetch ile _kaynak/fontshare.css olarak indir, site_read_file ile oku ve yalnız istediğin aileye ait woff2 adreslerini al; bu servis bazen istemediğin başka bir aileyi de listeye ekliyor. Her woff2'yi site_fetch ile assets/fonts/ altına indir. @font-face kurallarını (font-display: swap) assets/app.css içine yaz, çünkü design-check.mjs özel fontu yalnız bu dosyada arar. Varsayılan Inter, Roboto, Poppins, Montserrat kullanma.
5. Tailwind'i derle. assets/app.css dosyası Tailwind kaynağı olsun: en üstte @tailwind base; @tailwind components; @tailwind utilities;, sonra @font-face, odak halkası, skip-link, prefers-reduced-motion kuralı ve @layer components içinde kendi bileşen sınıfların. Bileşen sınıflarına Tailwind'in kendi sınıf adlarını verme (list-item, table, grid, container, hidden gibi), çünkü çakışan ad derlenince düzeni sessizce bozar. Kök dizine tailwind.config.js yaz (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"], renkler ve fontFamily). site_run_command ile background=true seçeneğiyle "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" çalıştır ve site_command_status ile bitişini bekle. Her sayfanın <head>'inde sırasıyla şunlar olsun: tek <link rel="stylesheet" href="/assets/site.css">, ardından ilk ekranda kullanılan her font dosyası için bir preload satırı (başlık, vurgu ve gövde; as="font" type="font/woff2" crossorigin). Preload satırları stil dosyasından önce gelirse CSS gecikir ve LCP uzar; ilk ekrandaki bir fontu preload etmezsen font değişimi sayfayı kaydırır ve CLS yükselir ve <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. Favicon satırı şart, yoksa tarayıcı /favicon.ico ister, 404 alır ve konsol hatası Best Practices puanını düşürür.
6. Görseller. Fotoğrafları site_fetch ile resize ve image_format="webp" kullanarak birkaç genişlikte indir (ilk ekran görseli için 480, 800, 1200, 1600; diğerleri için 480, 800, 1200; quality 60 ile 75 arası, detaylı fotoğraflarda düşük). Her <img> etiketinde srcset, gerçek yerleşime uyan sizes, width ve height (CLS sıfır), anlamlı ve dürüst bir alt metni olsun. fetchpriority="high" yalnız Lighthouse'un LCP öğesi olarak gösterdiği görsele verilir, o görsel lazy olmaz; diğer tüm görseller loading="lazy". LCP öğesi bir metinse hiçbir görsele fetchpriority verme. Ayrıca assets/img/logo.png, 1200x630 boyutunda assets/img/og.jpg ve assets/img/favicon.svg hazırla.
7. HTML kuralları (html-validate varsayılan kuralları). <!DOCTYPE html> büyük harfle; satır içi style niteliği yok (kitteki style="background:var(--brand)" dahil, yerine sınıf); tel: linklerinin metninde normal boşluk yerine (0312 000 00 00); her <button> için type; satır sonunda boşluk yok; tablolarda <thead>, <tbody> ve th scope. Paragraf içindeki linkler altı çizili olsun; menü, alt bilgi, kırıntı ve düğme linkleri en az 44x44 piksel dokunma alanına sahip olsun (min-h-
[44px] min-w-
[44px]).
8. Yapılandırılmış veri. site.config.js'teki seo bloğunu doldur (siteUrl, açıklama, logo, og görseli, işletme türü, adres alanları) ve site_run_command ile "node seo-stamp.mjs" çalıştır; bu Organization, WebSite ve gerekiyorsa LocalBusiness alt türünü, canonical ve OG etiketlerini basar. Sayfaya özel şemayı elle ekle: her sayfada @id'li bir WebPage (ya da AboutPage, ContactPage, CollectionPage, ProfilePage) düğümü, datePublished ve dateModified, isPartOf ile #site, about ile #business ya da #org, breadcrumb ile BreadcrumbList; ayrıca ürünler sayfasında her ürün için Product ve Offer, üretim sayfasında HowTo, SSS sayfasında FAQPage. Her düğümü AYRI bir <script type="application/ld+json"> bloğuna yaz ve @graph sarmalayıcısı kullanma, çünkü seo-check.mjs yalnız en üst düzeydeki @type'ı okur ve @graph içindeki BreadcrumbList'i görmez. Düğümler birbirine @id ile bağlansın. Saat, koordinat, puan, yorum, ödül, müşteri sayısı ve sertifika uydurma; bilinmeyen alanı boş bırak.
9. Yapay zeka erişimi. robots.txt yaz: tüm site açık, yalnız /_kaynak/ kapalı; GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended ve Bingbot için Allow: /, CCBot için kararı ve gerekçesini yorum satırında yaz, en sonda Sitemap satırı. Kökte llms.txt olsun: işletmenin iki cümlelik doğru özeti, önemli sayfalar ve her birinin tek satırlık açıklaması, iletişim bilgisi. 404.html yaz (noindex, menü ve alt bilgi işaretleriyle).
10. Yazım. Her sayfanın <main> içinde en az 150 kelime özgün metin olsun; ilk paragraf sayfanın ana sorusuna doğrudan cevap versin. Başlık 48 ile 60, açıklama 145 ile 158 karakter, her sayfada farklı. Uzun ve orta boy tire işareti, klişe slogan ve boş vaat yok. Sitede adı geçen ama gerçek olmayan bir bilgi varsa açıkça kurgusal olduğunu yaz.
Kapılar. Her değişiklikten sonra site_run_command ile sırasıyla şunları çalıştır ve her birini sıfırlamadan sonrakine geçme:
1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, Tailwind derlemesi (yeni sınıf eklediysen tekrar).
2. node seo-check.mjs: 0 hata ve 0 uyarı. "gövde kısa" uyarısı gelirse metni uzat, dolgu cümle yazma.
3. node design-check.mjs: 0 hata. Tek uyarı "Hiç hareket yok" olabilir; klasik tarzın gereğidir, raporda gerekçesiyle yaz.
4. npx --yes html-validate "**/*.html": 0 hata.
5. site_preview ile her sayfayı view="mobile" ve view="desktop" olarak gör; ayrıca 360 ve 768 piksel genişlikte ana sayfayı kontrol et. Yatay taşma, sıkışan başlık, 44 pikselden küçük dokunma hedefi varsa düzelt ve tekrar bak.
6. core_web_vitals ile her sayfayı strategy="mobile" ve strategy="desktop" ölç, ardından seo_audit ile ana sayfayı ve en uzun sayfayı denetle. Hedef: mobilde Erişilebilirlik, En İyi Uygulamalar ve SEO 100, Performans en az 95; masaüstünde dördü de en az 95. Ağ isteklerinde site dışına giden tek bir istek kalmamalı. LCP yüksekse resources=true ile hangi dosyanın beklettiğini bul: çoğu zaman stil dosyasından önce sıralanmış preload satırları ya da LCP olmayan bir görsele verilmiş fetchpriority'dir. CLS 0,1'i geçerse preload edilmemiş bir ilk ekran fontunu ara.
Bu ölçütlerin hepsi sağlanmadan "bitti" deme.
Yayından sonra gsc_submit_sitemap ile https://
[alan adı]/sitemap.xml adresini gönder ve gsc_url_inspect ile ana sayfanın durumunu kontrol et. Search Console mülkü yoksa bunu bana söyle, kendin bağlamaya çalışma.
Teslim raporu: sayfa sayfa mobil ve masaüstü dört Lighthouse puanı ve LCP'yi gösteren bir tablo, dört kapının sonucu, design-check uyarılarının gerekçesi, sitede kurgusal ya da eksik kalan bilgilerin listesi ve benim tamamlamam gerekenler (Google İşletme Profili, gerçek fotoğraflar, çalışma saatleri gibi).
