Uzman ya da danışman için dergi tadında, rehber bölümü ve yazar şeması olan bir site kur

Opus Growth hosting sunucumda [sunucu adı] kendim için editoryal tarzda bir uzman sitesi kur. Ben: [ad soyad], [uzmanlık, ör. ihracat danışmanı], [hizmet verdiğim bölge ya da "çevrim içi"]. Hizmetler: [hizmetler]. Deneyim: [gerçek deneyim, çalıştığım sektörler; uydurma]. Telefon: [telefon], e-posta: [e-posta], alan adı: [alan adı]. İlk iki rehber yazısının konusu: [konu 1], [konu 2]. Ofisim ziyaretçi kabul ediyorsa adresi: [adres ya da "yok"]. Site bir broşür değil, uzmanlığı yazılarla gösteren bir yayın gibi okunmalı. Rehber yazıları sitenin merkezinde olacak, çünkü hem okurun hem yapay zeka cevaplarının alıntıladığı şey bu yazılar. Tasarım yönü editoryal: 1. Tipografi: başlıklar için Fontshare'den karakterli bir serif (ör. Zodiak 700 ve 400 italik), arayüz ve kısa metin için sakin bir sans (ör. Author 400 ve 600). Yazı gövdesi serif, 19 piksel, satır aralığı 1.7, satır uzunluğu en fazla 68 karakter. 2. Renk: krem kağıt zemin, koyu mürekkep metin, ikincil kahve gri ve tek bir koyu aksan (ör. bordo). Aksan yalnız üst etiket, ilk harf ve alıntı çizgisinde. 3. Izgara: 12 sütun; anasayfada 7'ye 5 asimetrik kapak, sütunlar arası ince dikey çizgiler. Gölge ve yuvarlak köşe yok. 4. İmza öğesi: gazete künyesi gibi çift çizgili üst bant (üstte ince bir tarih satırıyla) ve yazılarda aksan renginde büyük ilk harf ile kenar alıntısı. 5. Hareket: yok. Sayfalar ve şemaları: 1. index.html (kapak): ilk paragrafı "kimsiniz, kime ne konuda yardım ediyorsunuz" sorusuna cevap veren başlık ve spot, öne çıkan yazı görseli ve başlığı, yan sütunda diğer yazı, hizmetler ve yazar kutuları, bir çekme alıntı, "nasıl çalışıyorum" bandı. WebPage ve Person. 2. hizmetler.html: her hizmet ayrı bölüm; ilk paragraf hizmetin kime ve ne zaman yaradığını söyler, ardından numaralı adımlar ve yazılı çıktı. Her hizmet için Service, provider yazar Person'ı. 3. hakkimda.html: gerçek deneyim, çalışma ilkeleri (sonuç garantisi verilmez), yazıların nasıl hazırlandığı ve kaynak politikası. ProfilePage, mainEntity Person (jobTitle, knowsAbout, worksFor #org). 4. rehber/index.html: yazılar yeniden eskiye, tarih ve yazarla. CollectionPage ve ItemList (numberOfItems). 5. rehber/[yazı].html: en az 700 kelime, ilk paragraf soruya doğrudan cevap, H2 hiyerarşisi, uygun yerde thead ve th scope içeren bir tablo, en az bir çekme alıntı, iki ile dört iç link, sonda kaynaklar. Başta yazar linki, yayın ve son güncelleme tarihi <time> ile. Article (headline, image, datePublished, dateModified, author @id ile Person, publisher #org). Örnek rakam kullanırsan kurgusal olduğunu yaz. 6. iletisim.html: ContactPage. 7. kvkk.html ve 404.html. Fiziksel ofis ziyaretçi kabul etmiyorsa site.config.js'te localBusiness: false yap; Organization ve Person yeterli. 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 iki aile ve en fazla beş dosya olacak; ilk ekranda başlık, italik spot ve gövde fontları birlikte göründüğü için dördünü de preload et. Bu demoda yalnız iki font preload edildiğinde uzun yazıda CLS değeri 0,24 ve mobil Performans 86 oldu, dördü preload edilince CLS 0 ve Performans 99 oldu. 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 &nbsp; (0312&nbsp;000&nbsp;00&nbsp;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 hizmetler için Service, yazar için Person ve ProfilePage, rehber listesinde ItemList, her yazıda Article. 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; editoryal okuma deneyimi için bilinçli bir karardır, 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).