الموقع الإلكتروني

فحص شهري لـ Core Web Vitals لجميع مواقع العملاء

جدول بألوان إشارة المرور، بصف واحد لكل عميل، لمؤشرات Core Web Vitals للصفحة الرئيسية والصفحات المهمة، إضافة إلى قائمة العملاء الذين يحتاجون إلى إجراء هذا الشهر.

متى تستخدمه

عندما تدير عدة مواقع لعملاء وتحتاج إلى رؤية شهرية توضح أيها بطيء أو يزداد سوءًا في Core Web Vitals.

ما ستحصل عليه

جدول بألوان إشارة المرور يعرض LCP وINP وCLS لكل صفحة عميل، مع التغيّرات الشهرية إذا لصقت بيانات الشهر الماضي، وقائمة إجراءات قصيرة بالعملاء الذين يجب إصلاحهم أولًا.

هل يغيّر أي شيء في حسابي؟

لا. يقرأ المساعد بياناتك فقط ويقدم لك تقريرًا بها.

يعمل مع

WordPress, SEO Intelligence

أكمل البيانات قبل الإرسال

[العميل: قائمة روابط الصفحات المهمة]

استخدم اتصالي بـ Opus Growth لهذا الغرض. إذا لم تجد الأداة التي تحتاجها، فابحث بين أدوات Opus Growth (باستخدام search_tools إن كانت في قائمتك)؛ وإذا تعذّر عليك الوصول إلى الأدوات تمامًا، فلا تخمّن وأخبرني. اعرض جميع مواقع العملاء المتصلة بهذا الحساب، سواء مواقع WordPress أو خوادم الاستضافة. لكل موقع، أجرِ فحص Core Web Vitals على الجوال للصفحات التالية: - الصفحة الرئيسية - صفحة التحويل الرئيسية من هذه القائمة: [العميل: قائمة روابط الصفحات المهمة]. إذا كان أحد العملاء غير موجود في القائمة، فافحص الصفحة الرئيسية فقط ودوّن أنه تم تخطيه. قدّم جدولًا واحدًا بالأعمدة التالية: العميل، الصفحة، LCP، INP، CLS، نوع البيانات (ميدانية أو مخبرية)، الحالة. حدّد الحالة وفق هذه القواعد: - أخضر: جميع المقاييس جيدة (LCP بحدود 2.5 ثانية أو أقل، INP بحدود 200 مللي ثانية أو أقل، CLS بحدود 0.1 أو أقل) - أحمر: أي مقياس ضعيف (LCP أعلى من 4 ثوانٍ، INP أعلى من 500 مللي ثانية، CLS أعلى من 0.25) - برتقالي: أي حالة أخرى إذا لصقت جدول الشهر الماضي، فأضف عمودًا للتغيّر. وضع علامة على أي مقياس ازداد سوءًا بأكثر من 20%. اختم بقائمة قصيرة بعنوان "إجراءات هذا الشهر": العملاء الذين صفحة التحويل لديهم حمراء، أو الذين انتقل أحد مقاييسهم من الأخضر إلى البرتقالي أو الأحمر. أضف سطرًا واحدًا عن السبب المحتمل لكل حالة. هذا الطلب للقراءة فقط.

اعرض جميع مواقع العملاء المتصلة بهذا الحساب، سواء مواقع WordPress أو خوادم الاستضافة.

لكل موقع، أجرِ فحص Core Web Vitals على الجوال للصفحات التالية:
- الصفحة الرئيسية
- صفحة التحويل الرئيسية من هذه القائمة: [العميل: قائمة روابط الصفحات المهمة]. إذا كان أحد العملاء غير موجود في القائمة، فافحص الصفحة الرئيسية فقط ودوّن أنه تم تخطيه.

قدّم جدولًا واحدًا بالأعمدة التالية: العميل، الصفحة، LCP، INP، CLS، نوع البيانات (ميدانية أو مخبرية)، الحالة.

حدّد الحالة وفق هذه القواعد:
- أخضر: جميع المقاييس جيدة (LCP بحدود 2.5 ثانية أو أقل، INP بحدود 200 مللي ثانية أو أقل، CLS بحدود 0.1 أو أقل)
- أحمر: أي مقياس ضعيف (LCP أعلى من 4 ثوانٍ، INP أعلى من 500 مللي ثانية، CLS أعلى من 0.25)
- برتقالي: أي حالة أخرى

إذا لصقت جدول الشهر الماضي، فأضف عمودًا للتغيّر. وضع علامة على أي مقياس ازداد سوءًا بأكثر من 20%.

اختم بقائمة قصيرة بعنوان "إجراءات هذا الشهر": العملاء الذين صفحة التحويل لديهم حمراء، أو الذين انتقل أحد مقاييسهم من الأخضر إلى البرتقالي أو الأحمر. أضف سطرًا واحدًا عن السبب المحتمل لكل حالة.

هذا الطلب للقراءة فقط.

افتح في Claude افتح في ChatGPT ناقش في المنتدى

عمليات بحث ذات صلة

core web vitals سرعة الصفحة تقرير سرعة الموقع lcp inp cls مواقع العملاء تقرير شهري موقع بطيء pagespeed insights

تعمل هذه الأوامر بأفضل شكل عندما يكون مساعد الذكاء الاصطناعي لديك متصلًا بحساباتك عبر Opus Growth.

اربط حساباتك مجانًا

المزيد من الأوامر

الموقع الإلكترونييجري تغييرات بعد موافقتكعرض تجريبي مباشر

أنشئ موقعًا تحريريًا لخبير مع قسم أدلة وschema للمؤلف

اطلب من مساعدك بناء موقع خبير بصفحة رئيسية بتصميم غلاف مجلة وأدلة مطولة وصفحة تعريف بالمؤلف. الخطوط ذات الحواف (serif) وschema من نوع Article وPerson ومقالات مؤرخة وموثقة المصادر تنتج منشورًا يقرؤه الناس ويمكن لإجابات الذكاء الاصطناعي الاستشهاد به.

متى تستخدمهعندما تكون مستشارًا أو متخصصًا أو صاحب نشاط معرفي فردي، وتريد أن يبدو موقعك كمنشور يُظهر خبرتك من خلال الكتابة، لا كنشرة تعريفية.

ابنِ لي موقع خبير بأسلوب تحريري على خادم استضافة Opus Growth الخاص بي [اسم الخادم]. أنا: [الاسم الكامل]، [التخصص، مثل مستشار تصدير]، [المنطقة التي أخدمها، أو "عبر الإنترنت"]. الخدمات: [الخدمات]. الخبرة: [الخبرة الحقيقية والقطاعات التي عملت فيها؛ لا تختلق شيئًا]. الهاتف: [الهاتف]، البريد الإلكتروني: [البريد الإلكتروني]، النطاق: [النطاق]. موضوعا أول دليلين: [الموضوع 1]، [الموضوع 2]. إذا كان مكتبي يستقبل زوارًا، فعنوانه: [العنوان أو "لا يوجد"].

يجب أن يُقرأ الموقع كأنه مطبوعة تثبت الخبرة بالكتابة، لا كأنه كتيّب تعريفي. تقع الأدلة في قلب الموقع، لأنها ما يقتبسه القراء وإجابات الذكاء الاصطناعي.

اتجاه التصميم تحريري:
1. الخطوط: خط serif ذو شخصية من Fontshare للعناوين (مثل Zodiak 700 و400 مائل) وخط sans هادئ للواجهة والنصوص القصيرة (مثل Author 400 و600). متن المقال بخط serif بحجم 19 بكسل، وارتفاع سطر 1.7، وبحد أقصى 68 حرفًا في السطر.
2. الألوان: خلفية ورق بلون كريمي، ونص بحبر داكن، ورمادي دافئ ثانوي، ولون تمييز داكن واحد (مثل لون العنابي). يظهر لون التمييز فقط في العناوين التمهيدية (kickers) والحرف الاستهلالي الكبير وخطوط الاقتباسات البارزة.
3. الشبكة: 12 عمودًا؛ غلاف غير متماثل بنسبة 7 إلى 5 في الصفحة الرئيسية مع خطوط عمودية رفيعة بين الأعمدة. بلا ظلال ولا زوايا مستديرة.
4. العنصر المميز: ترويسة بخط مزدوج مثل ترويسة الجريدة (مع سطر تاريخ رفيع فوقها)، وفي المقالات حرف استهلالي كبير بلون التمييز مع اقتباس بارز في الهامش.
5. الحركة: لا شيء.

الصفحات ومخططاتها (schema):
1. index.html (الغلاف): عنوان رئيسي وتمهيد تجيب فقرته الأولى عن "من أنت، ومن تساعد وفي ماذا"، وصورة المقال الرئيسي وعنوانه، وعمود جانبي فيه المقال الآخر وصناديق الخدمات والمؤلف، واقتباس بارز، وشريط "كيف أعمل". WebPage وPerson.
2. hizmetler.html: قسم لكل خدمة؛ تذكر الفقرة الأولى لمن الخدمة ومتى، تليها خطوات مرقمة والمخرج المكتوب. Service لكل خدمة مع Person المؤلف بصفة provider.
3. hakkimda.html: الخبرة الحقيقية، ومبادئ العمل (بلا نتائج مضمونة)، وكيف تُنتَج المقالات وسياسة المصادر. ProfilePage مع mainEntity من نوع Person (jobTitle وknowsAbout وworksFor #org).
4. rehber/index.html: المقالات من الأحدث إلى الأقدم، مع التاريخ والمؤلف. CollectionPage وItemList (numberOfItems).
5. rehber/[المقال].html: 700 كلمة على الأقل، وفقرة أولى تجيب عن السؤال مباشرة، وتسلسل عناوين H2، وجدول مع thead وth scope حيث يفيد، واقتباس بارز واحد على الأقل، ومن رابطين إلى أربعة روابط داخلية، ومصادر في النهاية. في الأعلى رابط المؤلف وتاريخا النشر وآخر تحديث داخل <time>. Article (headline وimage وdatePublished وdateModified وauthor عبر @id إلى Person وpublisher #org). إذا استخدمت أرقامًا توضيحية، فاذكر أنها وهمية.
6. iletisim.html: ContactPage. 7. kvkk.html (إشعار الخصوصية) و404.html.

إذا كان المكتب لا يستقبل زوارًا، فاضبط localBusiness: false في site.config.js؛ يكفي Organization مع Person.

القواعد التقنية. اتبعها حرفيًا، لأن البوابات أدناه تقيس هذه الأمور بالضبط:

1. الإعداد. شغّل scaffold_site كمعاينة أولًا، وأرني قائمة الملفات، ثم ثبّت بـ confirm=true بعد موافقتي. بعدها اقرأ site_design_guide وsite_seo_guide كاملين. قبل كتابة أي كود، اكتب الاتجاه في _kaynak/ART.md (الإحساس العام، وتزاوج الخطوط، والألوان مع نسب التباين، والشبكة، والعنصر المميز، وقرار الحركة، وقائمة الصفحات) وأرني إياه.
2. أزل JavaScript. لا تحمّل أي صفحة في هذا الموقع أي JavaScript. أزل من كل صفحة سكربت cdn.tailwindcss.com وسطر tailwind.config ووسوم GSAP وScrollTrigger وSplitText وLenis وSwiper ووسوم السكربت motion.js وchrome.js وsite.config.js؛ واحذف assets/chrome.js وassets/motion.js. أبقِ assets/site.config.js، لكن فقط كمصدر للعلامة التجارية والتواصل وseo لـ seo-stamp.mjs؛ فهو لا يُحمَّل في المتصفح أبدًا.
3. القائمة والتذييل HTML ثابت. يرسم JavaScript المكوّنين <site-nav> و<site-footer>، لذلك لا ترى زواحف البحث والذكاء الاصطناعي القائمة ولا الروابط الداخلية ولا بيانات التواصل. اكتب الترويسة في _kaynak/ust.inc والتذييل (الاسم والعنوان والهاتف والبريد الإلكتروني وروابط كل الصفحات وإشعار الخصوصية و"Web: Opus Growth") في _kaynak/alt.inc. استخدم الامتداد .inc حتى لا يعامل seo-stamp وhtml-validate هذه الأجزاء كصفحات. تحمل كل صفحة العلامتين  و. ثم اكتب سكربت Node بلا اعتمادات خارجية باستخدام site_write_file في _kaynak/parca-bas.mjs: يختم الجزأين بين العلامتين في كل ملف HTML، ويضيف aria-current="page" إلى رابط القائمة للصفحة الحالية، ويعيد كتابة sitemap.xml مستخدمًا dateModified من JSON-LD لكل صفحة كقيمة lastmod (مع تخطي 404 والصفحات noindex). ابنِ قائمة الجوال بلا JavaScript باستخدام <details><summary>Menu</summary>؛ قائمتا سطح المكتب والجوال عنصرا <nav> منفصلان بقيمتي aria-label مختلفتين.
4. استضف الخطوط بنفسك. يستخدم هذا الموقع عائلتين وخمسة ملفات كحد أقصى؛ تظهر خطوط العنوان والتمهيد المائل والمتن كلها في الشاشة الأولى، لذلك حمّل الأربعة مسبقًا بـ preload. في العرض التجريبي، أدى تحميل اثنين فقط مسبقًا إلى رفع CLS في مقال طويل إلى 0.24 وخفض أداء الجوال إلى 86؛ أما تحميل الأربعة مسبقًا فأعطى CLS يساوي 0 وأداء 99. نزّل CSS الخاص بـ Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap، ورمز الوزن 401 للمائل) باستخدام site_fetch إلى _kaynak/fontshare.css، واقرأه بـ site_read_file وخذ فقط روابط woff2 للعائلة التي طلبتها؛ فالخدمة تضيف أحيانًا عائلة لم تطلبها. نزّل كل ملف woff2 بـ site_fetch إلى assets/fonts/. ضع قواعد @font-face (مع font-display: swap) داخل assets/app.css، لأن design-check.mjs يبحث عن الخط المخصص في هذا الملف فقط. لا تستخدم الخطوط الافتراضية Inter وRoboto وPoppins وMontserrat.
5. جمّع Tailwind. يصبح assets/app.css مصدر Tailwind: @tailwind base; @tailwind components; @tailwind utilities; في الأعلى، ثم @font-face وحلقة التركيز ورابط التخطي (skip link) وقاعدة prefers-reduced-motion وفئات المكوّنات الخاصة بك داخل @layer components. لا تسمِّ أبدًا فئة مكوّن باسم فئة أداة في Tailwind (list-item وtable وgrid وcontainer وhidden وغيرها)، لأن التعارض يكسر التخطيط بصمت بعد التجميع. اكتب tailwind.config.js في الجذر (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"] والألوان وfontFamily). شغّل "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" باستخدام site_run_command مع background=true، وانتظره باستخدام site_command_status. يحتوي <head> في كل صفحة، بهذا الترتيب، على: عنصر <link rel="stylesheet" href="/assets/site.css"> واحد فقط، ثم سطر preload واحد لكل ملف خط مستخدم في الشاشة الأولى (العنوان والتمييز والمتن؛ as="font" type="font/woff2" crossorigin). أسطر preload الموضوعة قبل ملف الأنماط تؤخر CSS وتزيد LCP؛ والخط الذي يظهر في الشاشة الأولى بلا preload يتبدل متأخرًا ويزيح الصفحة ويرفع CLS، ثم <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. سطر favicon إلزامي: بدونه يطلب المتصفح /favicon.ico ويحصل على 404، ويخفض خطأ وحدة التحكم درجة Best Practices.
6. الصور. نزّل الصور باستخدام site_fetch مع resize وimage_format="webp" بعدة عروض (480 و800 و1200 و1600 لصورة الشاشة الأولى، و480 و800 و1200 لبقية الصور؛ بجودة بين 60 و75، وأقل للصور كثيرة التفاصيل). لكل <img> سمة srcset وsizes تطابق التخطيط الفعلي وwidth وheight (لتحقيق CLS صفري) ونص alt ذو معنى وصادق. تُضاف fetchpriority="high" فقط إلى الصورة التي يبلّغ Lighthouse بأنها عنصر LCP، ولا تكون هذه الصورة lazy؛ وتستخدم كل الصور الأخرى loading="lazy". إذا كان عنصر LCP نصًا، فلا تحصل أي صورة على fetchpriority. جهّز أيضًا assets/img/logo.png وملف assets/img/og.jpg بقياس 1200x630 وassets/img/favicon.svg.
7. قواعد HTML (الإعدادات الافتراضية لـ html-validate). <!DOCTYPE html> بأحرف كبيرة؛ لا سمة style مضمّنة (بما فيها style="background:var(--brand)" الموجودة في الطقم، استخدم فئة بدلًا منها)؛ &nbsp; بدل المسافات العادية في نص روابط tel:؛ سمة type في كل <button>؛ بلا مسافات زائدة في نهاية الأسطر؛ جداول مع <thead> و<tbody> وth scope. الروابط داخل الفقرات مسطّرة؛ وروابط القائمة والتذييل ومسار التنقل (breadcrumb) والأزرار لها مساحة لمس لا تقل عن 44x44 بكسل (min-h-[44px] min-w-[44px]).
8. البيانات المنظمة. املأ كتلة seo في site.config.js (siteUrl وdescription وlogo وصورة og ونوع النشاط وحقول العنوان) وشغّل "node seo-stamp.mjs" باستخدام site_run_command؛ فهو يختم Organization وWebSite وعند الحاجة نوعًا فرعيًا من LocalBusiness، إضافة إلى وسوم canonical وOG. أضف يدويًا المخطط الخاص بكل صفحة: في كل صفحة عقدة WebPage مع @id (أو AboutPage أو ContactPage أو CollectionPage أو ProfilePage) وdatePublished وdateModified وisPartOf #site وabout #business أو #org وbreadcrumb يشير إلى BreadcrumbList؛ إضافة إلى Service لكل خدمة وPerson وProfilePage للمؤلف وItemList في فهرس الأدلة وArticle في كل دليل. اكتب كل عقدة في كتلة <script type="application/ld+json"> خاصة بها ولا تستخدم غلاف @graph، لأن seo-check.mjs يقرأ فقط @type في المستوى الأعلى ويفوّت BreadcrumbList داخل @graph. اربط العقد بـ @id. لا تختلق أبدًا ساعات عمل أو إحداثيات أو تقييمات أو مراجعات أو جوائز أو أعداد عملاء أو شهادات؛ واترك الحقول المجهولة.
9. وصول الذكاء الاصطناعي. اكتب robots.txt: الموقع كله مفتوح، ويُغلق فقط /_kaynak/؛ مع Allow: / للزواحف GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot؛ وقرارك بشأن CCBot مع السبب كتعليق؛ وسطر Sitemap في النهاية. أضف llms.txt في الجذر: ملخصًا صحيحًا للنشاط في جملتين، والصفحات المهمة بسطر لكل صفحة، وبيانات التواصل. اكتب 404.html (noindex، مع علامات الترويسة والتذييل).
10. الكتابة. تحتوي كل صفحة على 150 كلمة على الأقل من النص الأصلي داخل <main>، وتجيب الفقرة الأولى مباشرة عن السؤال الرئيسي للصفحة. تتراوح العناوين بين 48 و60 حرفًا، والأوصاف بين 145 و158، وتكون فريدة في كل صفحة. بلا شرطات طويلة أو قصيرة، ولا شعارات مبتذلة، ولا وعود فارغة. إذا كان أي شيء في الموقع غير حقيقي، فاذكر بوضوح أنه وهمي.

البوابات. بعد كل تعديل، شغّل هذه الأوامر باستخدام site_run_command بهذا الترتيب ولا تنتقل قبل أن تنجح كل واحدة بلا مشكلات:
1. node _kaynak/parca-bas.mjs، ثم node seo-stamp.mjs، ثم تجميع Tailwind (مرة أخرى إذا أضفت فئات).
2. node seo-check.mjs: صفر أخطاء وصفر تحذيرات. إذا ظهر التحذير "gövde kısa" (المتن قصير)، فأضف نصًا حقيقيًا، لا حشوًا.
3. node design-check.mjs: صفر أخطاء. التحذير الوحيد المسموح به هو "Hiç hareket yok" (لا حركة)؛ فهو خيار مقصود لتجربة القراءة، فاذكر السبب في التقرير.
4. npx --yes html-validate "**/*.html": صفر أخطاء.
5. افحص كل صفحة باستخدام site_preview عند view="mobile" وview="desktop"، وافحص الصفحة الرئيسية أيضًا عند 360 و768 بكسل. أصلح أي تجاوز أفقي أو عنوان ضيق أو هدف لمس أصغر من 44 بكسل ثم افحص مجددًا.
6. قِس كل صفحة باستخدام core_web_vitals عند strategy="mobile" وstrategy="desktop"، ثم دقّق الصفحة الرئيسية وأطول صفحة باستخدام seo_audit. الهدف: على الجوال، Accessibility وBest Practices وSEO بدرجة 100 وPerformance بدرجة 95 على الأقل؛ وعلى سطح المكتب الأربعة كلها 95 على الأقل. يجب ألا يخرج أي طلب واحد من الموقع. إذا كان LCP مرتفعًا، فاستخدم resources=true لتحديد الملف الذي يعطّله: غالبًا أسطر preload الموضوعة قبل ملف الأنماط، أو fetchpriority الممنوحة لصورة ليست عنصر LCP. إذا تجاوز CLS قيمة 0.1، فابحث عن خط في الشاشة الأولى لم يُحمَّل مسبقًا.
لا تعتبر العمل منتهيًا حتى تنجح كل هذه الفحوص.

بعد النشر، أرسل https://[النطاق]/sitemap.xml باستخدام gsc_submit_sitemap وافحص الصفحة الرئيسية باستخدام gsc_url_inspect. إذا لم يكن هناك موقع في Search Console، فأخبرني؛ ولا تحاول ربط واحد بنفسك.

تقرير التسليم: جدول بدرجات Lighthouse الأربع وLCP لكل صفحة على الجوال وسطح المكتب، ونتيجة البوابات الأربع، وسبب أي تحذير من design-check، وقائمة بالمعلومات الوهمية أو الناقصة في الموقع، وما يجب عليّ فعله بعد ذلك (Business Profile والصور الحقيقية وساعات العمل وغيرها).

الموقع الإلكترونييجري تغييرات بعد موافقتكعرض تجريبي مباشر

أنشئ موقعًا لنشاط عائلي عريق بمظهر كلاسيكي ومعايير حديثة

اطلب من مساعدك بناء موقع بروح الملصقات القديمة ولافتات المتاجر لمنتج من الجيل الثالث، بإطار وملمس ورقي. المظهر قديم، أما البناء فحديث: الجوال أولًا، بلا JavaScript، خطوط مستضافة ذاتيًا، WebP، وschema من نوع Product وHowTo.

متى تستخدمهعندما تبيع حرفة متوارثة عبر الأجيال، مثل الحلقوم التركي أو زيت الزيتون أو الجبن أو الأواني النحاسية، وتريد مظهرًا كلاسيكيًا يحمل هذا التاريخ دون التخلي عن السرعة وسهولة الوصول.

ابنِ موقعًا بمظهر تقليدي لعملنا العائلي على خادم استضافة Opus Growth الخاص بي [اسم الخادم]. النشاط: [اسم النشاط]، [ما ننتجه، مثل زيت الزيتون أو الحلقوم التركي]، [المدينة]، [سنة التأسيس والجيل، فقط إن كان صحيحًا]. المنتجات: [لكل منتج: الاسم، حجم العبوة، وصف قصير والسعر المنشور، أو "بدون سعر"]. مراحل الإنتاج: [قائمة قصيرة]. كيف يطلب الناس: [هاتف، متجر، توصيل]. الهاتف: [الهاتف]، البريد الإلكتروني: [البريد الإلكتروني]، عنوان المتجر: [العنوان]، النطاق: [النطاق]. صور العائلة والأرشيف: [أين هي، أو "لا توجد"].

المظهر قديم، والبناء جديد. يجب أن يبدو كملصق قديم أو لافتة محل أو دفتر حصاد، ومع ذلك يجب أن تُفتح الصفحات بلا أي مشكلة على الهاتف، وألا تُحمّل أي JavaScript، وأن تُقاس كل صفحة. المظهر القديم ليس عذرًا أبدًا لضعف الوضوح أو التباين.

اتجاه التصميم تقليدي:
1. الخطوط: عائلة خط serif كلاسيكية واحدة من Fontshare (مثل Gambetta 400 و400 مائل و600). أحرف كبيرة صغيرة باستخدام font-variant-caps: all-small-caps مع تباعد واسع بين الأحرف في القائمة والأزرار والتسميات؛ عناوين في المنتصف.
2. الألوان: خلفية بلون الورق، ونص بني حبري، وبني ثانوي، ولون رئيسي واحد (مثل الأخضر الزيتي)، مع لون دافئ ثانٍ على التسميات الصغيرة فقط. كلها بتباين لا يقل عن 4.5:1.
3. الملمس: ملمس ورق للخلفية على شكل SVG بتقنية feTurbulence كـ data URI داخل CSS؛ بلا ملف صورة إضافي وبلا طلب إضافي.
4. العنصر المميز: إطار ملصق قديم، وصندوق بخطين مزدوجين مع زخارف في الزوايا (border وoutline-offset و::before و::after)، وزخرفة صغيرة مرسومة بـ SVG مضمّن بين الأقسام (مثل غصن زيتون)، مع aria-hidden.
5. التخطيط: في المنتصف وضيق؛ المنتجات في بطاقات ملصقات مؤطرة، عمود واحد على الهاتف.
6. الحركة: لا شيء.
7. الصور: استخدم أرشيف العائلة إن وُجد. وإلا يمكنك استخدام صور أرشيفية من الملكية العامة أو بترخيص مفتوح، لكن اذكر المصدر والترخيص في التعليق ولا تقدمها أبدًا على أنها تخص العائلة.

الصفحات والمخطط (schema) الخاص بكل منها:
1. index.html: شاشة أولى مؤطرة تجيب فقرتها الافتتاحية عن "من، يصنع ماذا، أين، يبيع كيف"، وملصقات المنتجات، وقسم العائلة، وكيفية الطلب. WebPage. اضبط النوع الفرعي الأنسب للنشاط في site.config.js (مثل Store أو FoodEstablishment).
2. urunler.html: كل منتج في بطاقة ملصق خاصة به مع الاسم وحجم العبوة والوصف والسعر المنشور. CollectionPage وعنصر Product لكل منتج (brand وmanufacturer #business وoffers مع price وpriceCurrency وavailability). لا تكتب أبدًا سعرًا لم أعطك إياه؛ وإن لم يوجد سعر فاترك offers خارجًا تمامًا.
3. hikayemiz.html: القصة الحقيقية، جيلًا بعد جيل. AboutPage.
4. uretim.html: المراحل من الحصاد أو المادة الخام إلى العبوة، والتعريف الرسمي لدرجة المنتج واللائحة التي يستند إليها (مثل مدونة الغذاء التركية). WebPage وHowTo.
5. sss.html: ست أسئلة حقيقية عن الطلب والتوصيل والتخزين. FAQPage.
6. iletisim.html: هاتف الطلب وعنوان المتجر ورابط الخريطة؛ اترك ساعات العمل خارجًا إن كانت تتغير بتغير الموسم. ContactPage.
7. kvkk.html (إشعار الخصوصية) و404.html.

القواعد التقنية. اتبعها بدقة، لأن البوابات أدناه تقيس هذه الأمور تحديدًا:

1. الإعداد. شغّل scaffold_site كمعاينة أولًا، وأرني قائمة الملفات، ثم ثبّت باستخدام confirm=true بعد موافقتي. بعد ذلك اقرأ site_design_guide وsite_seo_guide بالكامل. قبل كتابة أي كود، اكتب الاتجاه في _kaynak/ART.md (الإحساس، تزاوج الخطوط، الألوان مع نسب التباين، الشبكة، العنصر المميز، قرار الحركة، قائمة الصفحات) وأرني إياه.
2. أزل JavaScript. لا تُحمّل أي صفحة في هذا الموقع أي JavaScript. أزل من كل صفحة سكربت cdn.tailwindcss.com وسطر tailwind.config ووسوم GSAP وScrollTrigger وSplitText وLenis وSwiper ووسوم السكربت motion.js وchrome.js وsite.config.js؛ واحذف assets/chrome.js وassets/motion.js. احتفظ بـ assets/site.config.js، لكن فقط كمصدر للعلامة والتواصل وseo لـ seo-stamp.mjs؛ ولا يُحمَّل أبدًا في المتصفح.
3. القائمة والتذييل HTML ثابت. المكونان <site-nav> و<site-footer> يُرسمان بواسطة JavaScript، لذا لا ترى برامج الزحف الخاصة بالبحث والذكاء الاصطناعي القائمة ولا الروابط الداخلية ولا بيانات التواصل. اكتب الترويسة في _kaynak/ust.inc والتذييل (الاسم، العنوان، الهاتف، البريد الإلكتروني، روابط كل الصفحات، إشعار الخصوصية، "Web: Opus Growth") في _kaynak/alt.inc. استخدم الامتداد .inc حتى لا يعامل seo-stamp وhtml-validate الأجزاء كصفحات. تحمل كل صفحة العلامات  و. ثم اكتب سكربت Node بلا اعتماديات باستخدام site_write_file في _kaynak/parca-bas.mjs: يدرج الجزأين بين العلامات في كل ملف HTML، ويضيف aria-current="page" إلى رابط القائمة الخاص بالصفحة الحالية، ويعيد كتابة sitemap.xml باستخدام dateModified من JSON-LD لكل صفحة كقيمة lastmod (مع تجاوز 404 والصفحات noindex). ابنِ قائمة الهاتف بدون JavaScript باستخدام <details><summary>Menu</summary>؛ قائمتا سطح المكتب والهاتف عنصرا <nav> منفصلان بقيمتي aria-label مختلفتين.
4. استضف الخطوط بنفسك. يستخدم هذا الموقع عائلة خط serif كلاسيكية واحدة وثلاثة ملفات على الأكثر. نزّل CSS الخاص بـ Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap، ورمز الوزن 401 للمائل) باستخدام site_fetch إلى _kaynak/fontshare.css، واقرأه باستخدام site_read_file وخذ فقط روابط woff2 للعائلة التي طلبتها؛ فالخدمة تضيف أحيانًا عائلة لم تطلبها. نزّل كل ملف woff2 باستخدام site_fetch إلى assets/fonts/. ضع قواعد @font-face (مع font-display: swap) داخل assets/app.css، لأن design-check.mjs لا يبحث عن خط مخصص إلا في هذا الملف. لا تستخدم الخطوط الافتراضية Inter أو Roboto أو Poppins أو Montserrat.
5. ترجم Tailwind. يصبح assets/app.css مصدر Tailwind: @tailwind base; @tailwind components; @tailwind utilities; في الأعلى، ثم @font-face، وحلقة التركيز، ورابط التخطي، وقاعدة prefers-reduced-motion، وفئات المكونات الخاصة بك داخل @layer components. لا تعطِ أبدًا فئة مكوّن اسم فئة أداة من Tailwind (list-item وtable وgrid وcontainer وhidden وهكذا)، لأن التعارض يكسر التخطيط بصمت بعد الترجمة. اكتب tailwind.config.js في الجذر (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"]، والألوان وfontFamily). شغّل "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" باستخدام site_run_command مع background=true، وانتظر باستخدام site_command_status. يحتوي <head> في كل صفحة، بهذا الترتيب، على: رابط واحد <link rel="stylesheet" href="/assets/site.css">، ثم سطر preload واحد لكل ملف خط مستخدم في الشاشة الأولى (العنوان والتمييز والنص؛ as="font" type="font/woff2" crossorigin). أسطر preload الموضوعة قبل ملف الأنماط تؤخر CSS وتزيد LCP؛ والخط في الشاشة الأولى الذي بلا preload يتبدل متأخرًا ويزحزح الصفحة ويرفع CLS، و<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. سطر favicon مطلوب: فبدونه يطلب المتصفح /favicon.ico ويتلقى 404، ويخفض خطأ وحدة التحكم درجة أفضل الممارسات.
6. الصور. نزّل الصور باستخدام site_fetch مع resize وimage_format="webp" بعدة عروض (480 و800 و1200 و1600 لصورة الشاشة الأولى، و480 و800 و1200 لبقية الصور؛ بجودة بين 60 و75، وأقل للصور الدقيقة التفاصيل). كل <img> لها srcset وsizes مطابقة للتخطيط الفعلي وwidth وheight (CLS صفر) ونص alt ذو معنى وصادق. يوضع fetchpriority="high" فقط على الصورة التي يبلغ عنها Lighthouse كعنصر LCP، ولا تكون هذه الصورة lazy؛ وكل الصور الأخرى تستخدم loading="lazy". إن كان عنصر LCP نصًا فلا تحصل أي صورة على fetchpriority. جهّز أيضًا assets/img/logo.png وassets/img/og.jpg بمقاس 1200x630 وassets/img/favicon.svg.
7. قواعد HTML (الإعدادات الافتراضية لـ html-validate). <!DOCTYPE html> بأحرف كبيرة؛ بلا سمة style مضمّنة (بما في ذلك style="background:var(--brand)" الخاصة بالقالب، استخدم فئة بدلًا منها)؛ &nbsp; بدل المسافات العادية في نص روابط tel:؛ سمة type على كل <button>؛ بلا مسافات زائدة في نهاية الأسطر؛ جداول مع <thead> و<tbody> وth scope. الروابط داخل الفقرات تحتها خط؛ وروابط القائمة والتذييل ومسار التنقل والأزرار لها منطقة لمس لا تقل عن 44x44 بكسل (min-h-[44px] min-w-[44px]).
8. البيانات المنظمة. املأ كتلة seo في site.config.js (siteUrl وdescription وlogo وصورة og ونوع النشاط وحقول العنوان) وشغّل "node seo-stamp.mjs" باستخدام site_run_command؛ فهو يدرج Organization وWebSite، وحيثما لزم نوعًا فرعيًا من LocalBusiness، إضافة إلى وسوم canonical وOG. أضف يدويًا المخطط الخاص بكل صفحة: في كل صفحة عقدة WebPage مع @id (أو AboutPage أو ContactPage أو CollectionPage أو ProfilePage) وdatePublished وdateModified وisPartOf #site وabout #business أو #org وbreadcrumb يشير إلى BreadcrumbList؛ إضافة إلى Product مع Offer لكل منتج في صفحة المنتجات، وHowTo في صفحة الإنتاج، وFAQPage في صفحة الأسئلة الشائعة. اكتب كل عقدة في كتلة <script type="application/ld+json"> خاصة بها ولا تستخدم غلاف @graph، لأن seo-check.mjs يقرأ فقط @type في المستوى الأعلى ويفوّته BreadcrumbList داخل @graph. اربط العقد باستخدام @id. لا تخترع أبدًا ساعات عمل أو إحداثيات أو تقييمات أو مراجعات أو جوائز أو أعداد عملاء أو شهادات؛ واترك الحقول المجهولة خارجًا.
9. وصول الذكاء الاصطناعي. اكتب robots.txt: الموقع كله مفتوح، و/_kaynak/ فقط مغلق؛ Allow: / لكل من GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot؛ وقرارك بشأن CCBot مع السبب في تعليق؛ وسطر Sitemap في النهاية. أضف llms.txt في الجذر: ملخص صحيح من جملتين للنشاط، والصفحات المهمة مع سطر لكل منها، وبيانات التواصل. اكتب 404.html (noindex، مع علامات الترويسة والتذييل).
10. الكتابة. لكل صفحة 150 كلمة على الأقل من النص الأصلي داخل <main>، وتجيب الفقرة الأولى مباشرة عن السؤال الرئيسي للصفحة. العناوين من 48 إلى 60 حرفًا، والأوصاف من 145 إلى 158، فريدة في كل صفحة. بلا شرطات طويلة أو متوسطة، وبلا شعارات جاهزة، وبلا وعود فارغة. إن كان أي شيء في الموقع غير حقيقي فقل بوضوح إنه خيالي.

البوابات. بعد كل تغيير، شغّلها باستخدام site_run_command بهذا الترتيب ولا تنتقل حتى تكون كل واحدة نظيفة:
1. node _kaynak/parca-bas.mjs، ثم node seo-stamp.mjs، ثم ترجمة Tailwind (مرة أخرى إن أضفت فئات).
2. node seo-check.mjs: 0 أخطاء و0 تحذيرات. إن حذّر من "gövde kısa" (النص قصير)، أضف نصًا حقيقيًا لا حشوًا.
3. node design-check.mjs: 0 أخطاء. التحذير الوحيد المسموح هو "Hiç hareket yok" (لا توجد حركة)؛ فالأسلوب الكلاسيكي يتطلب ذلك، فاذكر السبب في التقرير.
4. npx --yes html-validate "**/*.html": 0 أخطاء.
5. افحص كل صفحة باستخدام site_preview عند view="mobile" وview="desktop"، وافحص الصفحة الرئيسية أيضًا عند 360 و768 بكسل. أصلح أي تجاوز أفقي أو عنوان ضيق أو هدف لمس أصغر من 44 بكسل ثم افحص مجددًا.
6. قِس كل صفحة باستخدام core_web_vitals عند strategy="mobile" وstrategy="desktop"، ثم دقّق الصفحة الرئيسية وأطول صفحة باستخدام seo_audit. الهدف: على الهاتف، إمكانية الوصول وأفضل الممارسات وSEO بقيمة 100 والأداء 95 على الأقل؛ وعلى سطح المكتب كل الدرجات الأربع 95 على الأقل. يجب ألا يخرج أي طلب واحد من الموقع. إن كان LCP مرتفعًا فاستخدم resources=true لإيجاد الملف الذي يعيقه: غالبًا أسطر preload الموضوعة قبل ملف الأنماط، أو fetchpriority الممنوح لصورة ليست عنصر LCP. وإن تجاوز CLS قيمة 0.1 فابحث عن خط في الشاشة الأولى بلا preload.
لا تعتبر العمل منتهيًا حتى تنجح كل هذه الفحوص.

بعد النشر، أرسل https://[النطاق]/sitemap.xml باستخدام gsc_submit_sitemap وافحص الصفحة الرئيسية باستخدام gsc_url_inspect. إن لم تكن هناك خاصية في Search Console فأخبرني؛ ولا تحاول ربط واحدة بنفسك.

تقرير التسليم: جدول بدرجات Lighthouse الأربع وLCP لكل صفحة على الهاتف وسطح المكتب، ونتيجة البوابات الأربع، وسبب أي تحذير من design-check، وقائمة بالمعلومات في الموقع التي هي خيالية أو ناقصة، وما ما زال عليّ فعله (Business Profile، صور حقيقية، ساعات العمل وغير ذلك).

الموقع الإلكترونييجري تغييرات بعد موافقتكعرض تجريبي مباشر

أنشئ موقعًا لمكتب محاماة أو محاسبة بأسلوب سويسري بسيط مع إشارات ثقة قوية

يجعل مساعدك يبني موقعًا ثابتًا للمكتب على شبكة صارمة، مع تدرج بصري قائم على عائلة خطوط واحدة. ويضع في الصفحة إشارات الثقة التي يحتاجها مجال YMYL: ملفات تعريفية للممارسين، ومذكرة إرشادية مؤرخة وموثقة بالمصادر، وصياغة تحترم قواعد الإعلان المهني، وschema من نوع Person.

متى تستخدمهعندما يحتاج مكتب محاماة أو محاسبة أو أي مهنة مشابهة إلى موقع يبدو جادًا وبسيطًا، ويلتزم بقواعد الإعلان المهني، ويُثبت خبرته.

ابنِ موقعًا ثابتًا متعدد الصفحات بأسلوب سويسري مينيمالي لمكتبنا على خادم استضافة Opus Growth الخاص بي [اسم الخادم]. المكتب: [اسم المكتب]، [المهنة، مثل مكتب محاماة أو مكتب محاسبة]، [المدينة]. مجالات العمل: [المجالات]. الممارسون: [لكل منهم الاسم والمسمى الوظيفي والنقابة أو الهيئة المسجل لديها ورقم التسجيل والمجالات]. الهاتف: [الهاتف]، البريد الإلكتروني: [البريد الإلكتروني]، العنوان: [العنوان]، النطاق: [النطاق]. موضوع المذكرة الإرشادية: [موضوع متكرر، مثل الحد القانوني لزيادة الإيجار].

هذا مجال يتخذ فيه الناس قرارات تتعلق بأموالهم وحقوقهم، لذا يجب أن تأتي الثقة من الوضوح والمؤهلات والمصادر، لا من الزخرفة. التزم بالقواعد المهنية: بالنسبة للمحامين في تركيا، لائحة حظر الإعلان الصادرة عن اتحاد نقابات المحامين الأتراك؛ وبالنسبة للمحاسبين، القواعد المهنية لـ TÜRMOB؛ أو ما يعادلها في البلد الذي تمارس فيه المهنة. لا تكتب نسب نجاح ولا أعداد قضايا كُسبت ولا أسماء عملاء ولا ادعاءات تفوق مثل "الأفضل" أو "الخبير الأول" ولا مقارنات أتعاب ولا ضمانات ولا وعودًا مبالغًا فيها. اعرض المعلومات مع ملاحظة بأنها عامة ولا تغني عن الاستشارة القانونية أو المالية.

اتجاه التصميم سويسري مينيمالي:
1. الخط: عائلة خطوط غروتسك واحدة من Fontshare (مثل Switzer بالأوزان 400 و500 و600). يأتي التدرج الهرمي من الحجم والوزن فقط: عنوان كبير مضغوط محاذٍ لليسار، ونص أساسي هادئ، وتسميات أقسام صغيرة.
2. اللون: خلفية بيضاء، ونص أسود تقريبًا، ورمادي داكن واحد، ولون مميز واحد (مثل الأحمر السويسري). يظهر اللون المميز فقط في علامة القسم والتسميات وحلقة التركيز. الصور بالأبيض والأسود (grayscale في Tailwind).
3. الشبكة: 12 عمودًا صارمة. في كل قسم تقع التسمية في الأعمدة من 1 إلى 3 والمحتوى في الأعمدة من 4 إلى 12؛ وتفصل بين الأقسام خطوط سوداء بسمك 1 بكسل. بلا زوايا مستديرة ولا ظلال.
4. العنصر المميز: تسميات الأقسام مرقّمة بعلامة § باللون المميز، وخطوط إرشادية باهتة للأعمدة الـ12 مرسومة بـ CSS فقط خلف الشاشة الأولى.
5. الحركة: لا شيء.

الصفحات ومخططاتها (schema):
1. index.html: شاشة أولى تجيب فقرتها الافتتاحية عن "أي موضوع، ولمن، وأين"، ومجالات العمل، وطريقة عملك، وكيفية تحديد الأتعاب (بلا أرقام، مع الإشارة إلى التعرفة الرسمية وعقد خدمة مكتوب)، وأحدث مذكرة إرشادية، وملخص عن الفريق. WebPage.
2. calisma-alanlari.html: قسم لكل مجال؛ تجيب الفقرة الأولى عن أكثر الأسئلة شيوعًا في ذلك المجال، ثم المواضيع الرئيسية والأساس القانوني. Service لكل مجال.
3. ekip.html: ملف تعريفي لكل ممارس (الاسم، المسمى، النقابة أو الهيئة، المجالات، نبذة قصيرة). AboutPage وPerson لكل ممارس (jobTitle وknowsAbout وworksFor #business وmemberOf للنقابة أو الهيئة).
4. bilgi-notlari/[الموضوع].html: مذكرة مبنية على النص القانوني وتبدأ بإجابة قصيرة. في الأعلى: الكاتب والمراجع وتاريخ النشر وتاريخ آخر مراجعة؛ وفي النهاية قائمة بالمصادر. Article (الكاتب والناشر عبر @id وimage وdatePublished وdateModified وcitation) وreviewedBy وlastReviewed على WebPage. لا تكتب أبدًا نقطة قانونية أو مالية لا تعرفها؛ اسألني عن كل جملة لست متأكدًا منها.
5. sss.html: ستة أسئلة حقيقية، FAQPage. 6. iletisim.html: ContactPage. 7. kvkk.html (مع الإشارة إلى السرية المهنية) و404.html.

القواعد التقنية. اتبعها بدقة، لأن البوابات أدناه تقيس هذه الأمور تحديدًا:

1. الإعداد. شغّل scaffold_site أولًا كمعاينة، وأرني قائمة الملفات، ثم ثبّت مع confirm=true بعد موافقتي. بعدها اقرأ site_design_guide وsite_seo_guide بالكامل. قبل كتابة أي شيفرة، اكتب الاتجاه في _kaynak/ART.md (الإحساس العام، وتزاوج الخطوط، والألوان مع نسب التباين، والشبكة، والعنصر المميز، وقرار الحركة، وقائمة الصفحات) وأرني إياه.
2. أزل JavaScript. لا تحمّل أي صفحة في هذا الموقع أي JavaScript. أزل من كل صفحة سكربت cdn.tailwindcss.com وسطر tailwind.config ووسوم GSAP وScrollTrigger وSplitText وLenis وSwiper ووسوم سكربت motion.js وchrome.js وsite.config.js؛ واحذف assets/chrome.js وassets/motion.js. احتفظ بـ assets/site.config.js، لكن فقط كمصدر للـ brand وcontact وseo لأجل seo-stamp.mjs؛ فهو لا يُحمَّل في المتصفح أبدًا.
3. القائمة والتذييل بـ HTML ثابت. المكوّنان <site-nav> و<site-footer> يُرسمان بـ JavaScript، فلا تستطيع زواحف البحث والذكاء الاصطناعي رؤية القائمة والروابط الداخلية وبيانات التواصل. اكتب الترويسة في _kaynak/ust.inc والتذييل (الاسم والعنوان والهاتف والبريد الإلكتروني وروابط كل الصفحات وإشعار الخصوصية و"Web: Opus Growth") في _kaynak/alt.inc. استخدم الامتداد .inc حتى لا يعامل seo-stamp وhtml-validate هذه الأجزاء كصفحات. تحمل كل صفحة العلامات  و. ثم اكتب بـ site_write_file سكربت Node بلا تبعيات في _kaynak/parca-bas.mjs: يختم الجزأين بين العلامات في كل ملف HTML، ويضيف aria-current="page" إلى رابط القائمة للصفحة الحالية، ويعيد كتابة sitemap.xml مستخدمًا dateModified من JSON-LD لكل صفحة كقيمة lastmod (مع تخطي 404 والصفحات noindex). ابنِ قائمة الجوال بلا JavaScript باستخدام <details><summary>Menu</summary>؛ وقائمتا سطح المكتب والجوال عنصرا <nav> منفصلان بقيمتي aria-label مختلفتين.
4. استضف الخطوط بنفسك. يستخدم هذا الموقع عائلة خطوط واحدة وثلاثة ملفات على الأكثر. نزّل CSS الخاص بـ Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap، ورمز الوزن 401 للمائل) عبر site_fetch إلى _kaynak/fontshare.css، واقرأه بـ site_read_file وخذ فقط روابط woff2 للعائلة التي طلبتها؛ فالخدمة تضيف أحيانًا عائلة لم تطلبها. نزّل كل ملف woff2 عبر site_fetch إلى assets/fonts/. ضع قواعد @font-face (مع font-display: swap) داخل assets/app.css، لأن design-check.mjs يبحث عن الخط المخصص في هذا الملف فقط. لا تستخدم الخطوط الافتراضية Inter أو Roboto أو Poppins أو Montserrat.
5. اضبط Tailwind. يصبح assets/app.css مصدر Tailwind: @tailwind base; @tailwind components; @tailwind utilities; في الأعلى، ثم @font-face وحلقة التركيز ورابط التخطي وقاعدة prefers-reduced-motion وفئات المكوّنات الخاصة بك داخل @layer components. لا تعطِ فئة مكوّن اسم فئة أداة في Tailwind (list-item وtable وgrid وcontainer وhidden وما شابه)، لأن التعارض يكسر التخطيط بصمت بعد الترجمة. اكتب tailwind.config.js في الجذر (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"] والألوان وfontFamily). شغّل "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" بـ site_run_command مع background=true، وانتظر نتيجته بـ site_command_status. يحتوي <head> في كل صفحة، بهذا الترتيب، على: <link rel="stylesheet" href="/assets/site.css"> واحد فقط، ثم سطر preload لكل ملف خط مستخدم في الشاشة الأولى (العنوان واللون المميز والنص الأساسي؛ as="font" type="font/woff2" crossorigin). أسطر preload الموضوعة قبل ملف الأنماط تؤخر CSS وتزيد LCP؛ وخط الشاشة الأولى بلا preload يُستبدل متأخرًا ويزحزح الصفحة ويرفع CLS، ثم <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. سطر الأيقونة إلزامي: من دونه يطلب المتصفح /favicon.ico فيحصل على 404، ويخفض خطأ وحدة التحكم درجة Best Practices.
6. الصور. نزّل الصور بـ site_fetch مع resize وimage_format="webp" بعدة عروض (480 و800 و1200 و1600 لصورة الشاشة الأولى، و480 و800 و1200 للبقية؛ الجودة بين 60 و75، وأقل للصور المفصّلة). لكل <img> قيمة srcset وsizes مطابقة للتخطيط الفعلي وwidth وheight (انزياح تخطيط صفري) ونص alt ذو معنى وصادق. تُضاف fetchpriority="high" فقط إلى الصورة التي يحددها Lighthouse كعنصر LCP، ولا تكون هذه الصورة lazy؛ وكل الصور الأخرى تستخدم loading="lazy". إذا كان عنصر LCP نصًا فلا تحصل أي صورة على fetchpriority. جهّز أيضًا assets/img/logo.png وassets/img/og.jpg بمقاس 1200x630 وassets/img/favicon.svg.
7. قواعد HTML (الإعدادات الافتراضية لـ html-validate). <!DOCTYPE html> بأحرف كبيرة؛ بلا سمة style مضمّنة (بما فيها style="background:var(--brand)" الموجودة في القالب، استخدم فئة بدلًا منها)؛ &nbsp; بدل المسافات العادية في نص روابط tel:؛ سمة type في كل <button>؛ بلا مسافات زائدة في نهاية الأسطر؛ جداول مع <thead> و<tbody> وth scope. الروابط داخل الفقرات تحتها خط؛ وروابط القائمة والتذييل ومسار التنقل والأزرار لها منطقة لمس لا تقل عن 44x44 بكسل (min-h-[44px] min-w-[44px]).
8. البيانات المنظّمة. املأ كتلة seo في site.config.js (siteUrl وdescription وlogo وصورة og ونوع النشاط وحقول العنوان) وشغّل "node seo-stamp.mjs" بـ site_run_command؛ فهو يختم Organization وWebSite، وعند الاقتضاء نوعًا فرعيًا من LocalBusiness، إضافة إلى وسوم canonical وOG. أضف يدويًا مخطط كل صفحة: في كل صفحة عقدة WebPage مع @id (أو AboutPage أو ContactPage أو CollectionPage أو ProfilePage) وdatePublished وdateModified وisPartOf #site وabout #business أو #org وbreadcrumb يشير إلى BreadcrumbList؛ إضافة إلى Service لكل مجال عمل، وPerson لكل ممارس في صفحة الفريق، وArticle وreviewedBy في المذكرة الإرشادية، وFAQPage في صفحة الأسئلة الشائعة. اكتب كل عقدة في كتلة <script type="application/ld+json"> خاصة بها ولا تستخدم غلاف @graph، لأن seo-check.mjs يقرأ فقط @type في المستوى الأعلى ويفوّت BreadcrumbList داخل @graph. اربط العقد بـ @id. لا تخترع أبدًا ساعات عمل أو إحداثيات أو تقييمات أو مراجعات أو جوائز أو أعداد عملاء أو شهادات؛ واترك الحقول المجهولة.
9. وصول الذكاء الاصطناعي. اكتب robots.txt: الموقع كله مفتوح، و/_kaynak/ فقط مغلق؛ Allow: / لكل من GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot؛ وقرارك بشأن CCBot مع السبب في تعليق؛ وسطر Sitemap أخيرًا. أضف llms.txt في الجذر: ملخص صحيح من جملتين للنشاط، والصفحات المهمة مع سطر واحد لكل منها، وبيانات التواصل. اكتب 404.html (noindex، مع علامتي الترويسة والتذييل).
10. الكتابة. لكل صفحة 150 كلمة على الأقل من نص أصلي داخل <main>، وتجيب الفقرة الأولى مباشرة عن السؤال الرئيسي للصفحة. تتراوح العناوين بين 48 و60 حرفًا والأوصاف بين 145 و158، وتكون فريدة في كل صفحة. بلا شرطات طويلة أو قصيرة، وبلا شعارات جاهزة، وبلا وعود فارغة. إذا كان أي شيء في الموقع غير حقيقي فاذكر بوضوح أنه خيالي.

البوابات. بعد كل تغيير، شغّل هذه بـ site_run_command بالترتيب ولا تنتقل حتى تنجح كل واحدة:
1. node _kaynak/parca-bas.mjs، ثم node seo-stamp.mjs، ثم بناء Tailwind (مرة أخرى إذا أضفت فئات).
2. node seo-check.mjs: 0 أخطاء و0 تحذيرات. إذا ظهر تحذير "gövde kısa" (النص قصير جدًا) فأضف نصًا حقيقيًا لا حشوًا.
3. node design-check.mjs: 0 أخطاء. التحذير الوحيد المسموح هو "Hiç hareket yok" (لا توجد حركة)؛ فالأسلوب يقتضي ذلك، لذا اذكر السبب في التقرير.
4. npx --yes html-validate "**/*.html": 0 أخطاء.
5. افحص كل صفحة بـ site_preview عند view="mobile" وview="desktop"، وافحص الصفحة الرئيسية أيضًا عند 360 و768 بكسل. أصلح أي تمرير أفقي أو عنوان ضيق أو هدف لمس أصغر من 44 بكسل ثم افحص مجددًا.
6. قِس كل صفحة بـ core_web_vitals عند strategy="mobile" وstrategy="desktop"، ثم دقّق الصفحة الرئيسية وأطول صفحة بـ seo_audit. الهدف: على الجوال، Accessibility وBest Practices وSEO بقيمة 100 وPerformance لا تقل عن 95؛ وعلى سطح المكتب كل الأربعة لا تقل عن 95. يجب ألا يخرج أي طلب خارج الموقع. إذا كان LCP مرتفعًا فاستخدم resources=true لتجد الملف المعطِّل: غالبًا أسطر preload الموضوعة قبل ملف الأنماط، أو fetchpriority الممنوحة لصورة ليست عنصر LCP. وإذا تجاوز CLS القيمة 0.1 فابحث عن خط في الشاشة الأولى بلا preload.
لا تعتبر العمل منجزًا حتى تنجح كل هذه البنود.

بعد النشر، أرسل https://[النطاق]/sitemap.xml بـ gsc_submit_sitemap وافحص الصفحة الرئيسية بـ gsc_url_inspect. إذا لم تكن هناك خاصية في Search Console فأخبرني؛ ولا تحاول ربط واحدة بنفسك.

تقرير التسليم: جدول بدرجات Lighthouse الأربع وقيمة LCP لكل صفحة على الجوال وسطح المكتب، ونتيجة البوابات الأربع، وسبب أي تحذير من design-check، وقائمة بالمعلومات في الموقع التي هي خيالية أو ناقصة، وما يجب عليّ فعله بعد ذلك (Business Profile، وصور حقيقية، وساعات العمل وغيرها).

الموقع الإلكترونييجري تغييرات بعد موافقتكعرض تجريبي مباشر

أنشئ موقعًا مؤسسيًا متعدد الصفحات بدون JavaScript وسلّمه بدرجة 100

اطلب من مساعدك بناء موقع ثابت وسريع وسهل الوصول لأعمال مؤسسية مثل العمارة أو الهندسة أو الاستشارات. القائمة والتذييل بصيغة HTML ثابتة، والخطوط وملفات CSS مستضافة ذاتيًا، وتُقاس كل صفحة قبل التسليم.

متى تستخدمهعندما تحتاج شركة مؤسسية إلى موقع متعدد الصفحات تكون فيه السرعة وإمكانية الوصول أهم من الزخرفة، بدون حركة وبدون JavaScript.

أنشئ موقعًا مؤسسيًا متعدد الصفحات وثابتًا بالكامل لنشاطي التجاري على خادم استضافة Opus Growth الخاص بي [اسم الخادم]. النشاط: [اسم النشاط التجاري]، [القطاع، مثل مكتب هندسة وعمارة]، [المدينة/منطقة الخدمة]. الخدمات: [الخدمات مع وصف قصير لكل منها]. الهاتف: [الهاتف]، البريد الإلكتروني: [البريد الإلكتروني]، العنوان: [العنوان]، النطاق: [النطاق]. تفضيل الألوان: [تفضيل اللون/العلامة التجارية، أو "اختيارك"]. الصور: [مكان الصور الحقيقية، أو "استخدم صورًا مناسبة من مكتبات الصور"].

يضع هذا الموقع السرعة وإمكانية الوصول في المقام الأول. لا سطر JavaScript واحد في أي صفحة؛ ولا يتم تحميل GSAP وLenis وSwiper أبدًا. كل شيء، بما في ذلك القائمة وقائمة الجوال والأسئلة الشائعة، يعمل بـ HTML وCSS.

اتجاه التصميم هو "لوحة الرسم الهندسي":
1. الخطوط: خط عناوين غروتسك مضغوط من Fontshare (مثل Cabinet Grotesk 800) وخط نص هادئ (مثل General Sans 400 و600). ثلاثة ملفات خطوط كحد أقصى.
2. اللون: خلفية فاتحة بلون الورق، ونص بحبر داكن، ورمادي ثانوي، ولون تمييز واحد كإشارة. يظهر لون التمييز فقط في التسميات والخطوط الرفيعة والزر الرئيسي. يصل كل لون نص إلى تباين 4.5:1 على الأقل.
3. الشبكة: 12 عمودًا، وتفصل بين الأقسام خطوط بسمك 1 بكسل؛ بدون ظلال أو زوايا مستديرة أو تدرجات.
4. العنصر المميز: تحت صورة الشاشة الأولى، شريط من أربع خلايا بتصميم يشبه لوحة بيانات الرسم المعماري (مثل نوع المشروع، الكود المتبع، المقياس، رقم اللوحة)، وشبكة مليمترية خافتة جدًا مرسومة بـ CSS فقط خلف الشاشة الأولى.
5. الحركة: لا شيء. ولا حتى مدد انتقال؛ فقط يتغير التسطير واللون فورًا عند التمرير بالمؤشر.

الصفحات والمخطط الخاص بكل منها:
1. index.html: شاشة أولى تجيب فقرتها الافتتاحية مباشرة عن سؤال "ماذا تفعلون، ولمن، وأين"، وثلاث بطاقات خدمات (كل منها يرتبط بقسمه)، وعملية من أربع خطوات (مرقمة "الخطوة 1" بعداد CSS، وليس 01/02)، ومثالان على المشاريع، وشريط للهاتف. WebPage.
2. hizmetler.html: قسم لكل خدمة؛ وتجيب الفقرة الأولى عن "متى تلزم، وماذا تفعل"، ثم قائمة النطاق، والمدة المعتادة، والمخرجات. WebPage بالإضافة إلى Service لكل خدمة (provider #business، areaServed).
3. projeler.html: أمثلة مع نوع المبنى والطريقة والنتيجة؛ ولا تُذكر أسماء العملاء إلا بإذنهم. CollectionPage.
4. hakkimizda.html: من نحن، وقواعد عملنا، وأين نعمل. AboutPage.
5. sss.html: ستة أسئلة حقيقية على الأقل داخل <details>. WebPage وFAQPage.
6. iletisim.html: الهاتف والبريد الإلكتروني والعنوان داخل <address>، ورابط خريطة؛ واترك ساعات العمل إن لم تكن تعرفها. ContactPage مع mainEntity #business.
7. kvkk.html (إشعار الخصوصية) و404.html.

القواعد التقنية. اتبعها حرفيًا، لأن الاختبارات أدناه تقيس هذه الأمور بالضبط:

1. الإعداد. شغّل scaffold_site كمعاينة أولًا، وأرني قائمة الملفات، ثم ثبّت باستخدام confirm=true بعد موافقتي. بعد ذلك اقرأ site_design_guide وsite_seo_guide بالكامل. قبل كتابة أي كود، اكتب الاتجاه في _kaynak/ART.md (الإحساس العام، ثنائية الخطوط، الألوان مع نسب التباين، الشبكة، العنصر المميز، قرار الحركة، قائمة الصفحات) وأرني إياه.
2. أزل JavaScript. لا تحمّل أي صفحة في هذا الموقع أي JavaScript. أزل من كل صفحة سكربت cdn.tailwindcss.com وسطر tailwind.config ووسوم GSAP وScrollTrigger وSplitText وLenis وSwiper ووسوم سكربت motion.js وchrome.js وsite.config.js؛ واحذف assets/chrome.js وassets/motion.js. أبقِ على assets/site.config.js، لكن فقط كمصدر للعلامة التجارية وبيانات الاتصال وseo لصالح seo-stamp.mjs؛ ولا يتم تحميله في المتصفح أبدًا.
3. القائمة والتذييل بصيغة HTML ثابتة. يتم رسم المكونين <site-nav> و<site-footer> بواسطة JavaScript، لذلك لا تستطيع زواحف البحث والذكاء الاصطناعي رؤية القائمة والروابط الداخلية وبيانات الاتصال. اكتب الترويسة في _kaynak/ust.inc والتذييل (الاسم، العنوان، الهاتف، البريد الإلكتروني، روابط كل الصفحات، إشعار الخصوصية، "Web: Opus Growth") في _kaynak/alt.inc. استخدم الامتداد .inc حتى لا يعامل seo-stamp وhtml-validate هذه الأجزاء كصفحات. تحمل كل صفحة العلامات  و. ثم اكتب سكربت Node بلا اعتماديات باستخدام site_write_file في _kaynak/parca-bas.mjs: يضع الجزأين بين العلامات في كل ملف HTML، ويضيف aria-current="page" إلى رابط القائمة للصفحة الحالية، ويعيد كتابة sitemap.xml مستخدمًا dateModified من JSON-LD لكل صفحة كـ lastmod (مع تخطي 404 والصفحات noindex). ابنِ قائمة الجوال بدون JavaScript باستخدام <details><summary>Menu</summary>؛ وقائمتا سطح المكتب والجوال عنصرا <nav> منفصلان بقيمتي aria-label مختلفتين.
4. استضف الخطوط بنفسك. يستخدم هذا الموقع ثلاثة ملفات خطوط كحد أقصى. نزّل CSS الخاص بـ Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap، ورمز الوزن 401 للخط المائل) باستخدام site_fetch إلى _kaynak/fontshare.css، واقرأه بـ site_read_file وخذ فقط روابط woff2 للعائلة التي طلبتها؛ فالخدمة تضيف أحيانًا عائلة لم تطلبها. نزّل كل ملف woff2 باستخدام site_fetch إلى assets/fonts/. ضع قواعد @font-face (مع font-display: swap) داخل assets/app.css، لأن design-check.mjs يبحث عن الخط المخصص في هذا الملف فقط. لا تستخدم الخطوط الافتراضية Inter وRoboto وPoppins وMontserrat.
5. اجعل Tailwind يُترجم. يصبح assets/app.css مصدر Tailwind: @tailwind base; @tailwind components; @tailwind utilities; في الأعلى، ثم @font-face، وحلقة التركيز، ورابط التخطي، وقاعدة prefers-reduced-motion، وفئات المكونات الخاصة بك داخل @layer components. لا تسمِّ فئة مكوّن أبدًا باسم فئة Tailwind (list-item وtable وgrid وcontainer وhidden وغيرها)، لأن التعارض يكسر التخطيط بصمت بعد الترجمة. اكتب tailwind.config.js في الجذر (content: ["./*.html", "./**/*.html", "./_kaynak/*.inc"]، والألوان وfontFamily). شغّل "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" باستخدام site_run_command مع background=true، وانتظر باستخدام site_command_status. يحتوي <head> في كل صفحة، بهذا الترتيب، على: عنصر واحد <link rel="stylesheet" href="/assets/site.css">، ثم سطر preload واحد لكل ملف خط مستخدم في الشاشة الأولى (العناوين والتمييز والنص؛ as="font" type="font/woff2" crossorigin). أسطر preload الموضوعة قبل ملف الأنماط تؤخر CSS وتزيد LCP؛ والخط في الشاشة الأولى بلا preload يتبدل متأخرًا ويزحزح الصفحة ويرفع CLS، و<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. سطر الأيقونة إلزامي: بدونه يطلب المتصفح /favicon.ico ويحصل على 404، ويخفض خطأ وحدة التحكم درجة أفضل الممارسات.
6. الصور. نزّل الصور باستخدام site_fetch مع resize وimage_format="webp" بعدة عروض (480 و800 و1200 و1600 لصورة الشاشة الأولى، و480 و800 و1200 للبقية؛ بجودة بين 60 و75، وأقل للصور كثيرة التفاصيل). لكل <img> سمة srcset وsizes تطابق التخطيط الفعلي وwidth وheight (انزياح صفري) ونص alt مفيد وصادق. توضع fetchpriority="high" فقط على الصورة التي يحددها Lighthouse كعنصر LCP، ولا تكون هذه الصورة lazy؛ وكل صورة أخرى تستخدم loading="lazy". إذا كان عنصر LCP نصًا، فلا تحصل أي صورة على fetchpriority. جهّز أيضًا assets/img/logo.png وassets/img/og.jpg بمقاس 1200x630 وassets/img/favicon.svg.
7. قواعد HTML (الإعدادات الافتراضية لـ html-validate). <!DOCTYPE html> بأحرف كبيرة؛ لا سمة style مضمّنة (بما فيها style="background:var(--brand)" الخاصة بالحزمة، استخدم فئة بدلًا منها)؛ استخدم &nbsp; بدل المسافات العادية في نص روابط tel:؛ سمة type في كل <button>؛ لا مسافات زائدة في نهاية الأسطر؛ جداول بـ <thead> و<tbody> وth scope. الروابط داخل الفقرات تحتها خط؛ وروابط القائمة والتذييل ومسار التنقل والأزرار لها مساحة لمس لا تقل عن 44x44 بكسل (min-h-[44px] min-w-[44px]).
8. البيانات المنظمة. املأ كتلة seo في site.config.js (siteUrl وdescription وlogo وصورة og ونوع النشاط وحقول العنوان) وشغّل "node seo-stamp.mjs" باستخدام site_run_command؛ فهو يضع Organization وWebSite، وعند الحاجة نوعًا فرعيًا من LocalBusiness، بالإضافة إلى وسوم canonical وOG. أضف يدويًا المخطط الخاص بكل صفحة: في كل صفحة عقدة WebPage مع @id (أو AboutPage أو ContactPage أو CollectionPage أو ProfilePage)، وdatePublished وdateModified، وisPartOf #site، وabout #business أو #org، وbreadcrumb يشير إلى BreadcrumbList؛ بالإضافة إلى Service لكل خدمة في صفحة الخدمات وFAQPage في صفحة الأسئلة الشائعة. اكتب كل عقدة في كتلة <script type="application/ld+json"> خاصة بها ولا تستخدم غلاف @graph، لأن seo-check.mjs يقرأ فقط @type في المستوى الأعلى ولا يلتقط BreadcrumbList داخل @graph. اربط العقد بـ @id. لا تختلق أبدًا ساعات عمل أو إحداثيات أو تقييمات أو مراجعات أو جوائز أو أعداد عملاء أو شهادات؛ واترك الحقول غير المعروفة.
9. وصول الذكاء الاصطناعي. اكتب robots.txt: الموقع كله مفتوح، و/_kaynak/ فقط مغلق؛ Allow: / لكل من GPTBot وOAI-SearchBot وChatGPT-User وClaudeBot وClaude-User وClaude-SearchBot وPerplexityBot وPerplexity-User وGoogle-Extended وApplebot-Extended وBingbot؛ وقرارك بشأن CCBot مع السبب في تعليق؛ وسطر Sitemap أخيرًا. أضف llms.txt في الجذر: ملخص صحيح للنشاط في جملتين، والصفحات المهمة بسطر لكل منها، وبيانات الاتصال. اكتب 404.html (noindex، مع علامات الترويسة والتذييل).
10. الكتابة. كل صفحة تحتوي على 150 كلمة على الأقل من نص أصلي داخل <main>، وتجيب الفقرة الأولى مباشرة عن السؤال الرئيسي للصفحة. تتراوح العناوين بين 48 و60 حرفًا، والأوصاف بين 145 و158، وتكون فريدة في كل صفحة. بلا شرطات طويلة أو متوسطة، ولا شعارات جاهزة، ولا وعود فارغة. إذا كان أي شيء في الموقع غير حقيقي، فاذكر بوضوح أنه خيالي.

الاختبارات. بعد كل تغيير، شغّلها باستخدام site_run_command بهذا الترتيب ولا تنتقل إلى التالي حتى يكون كل اختبار نظيفًا:
1. node _kaynak/parca-bas.mjs، ثم node seo-stamp.mjs، ثم ترجمة Tailwind (مرة أخرى إن أضفت فئات).
2. node seo-check.mjs: 0 أخطاء و0 تحذيرات. إذا ظهر التحذير "gövde kısa" (النص قصير جدًا)، فأضف نصًا حقيقيًا وليس حشوًا.
3. node design-check.mjs: 0 أخطاء. التحذير الوحيد المسموح به هو "Hiç hareket yok" (لا توجد حركة)؛ فهذا اختيار متعمد لهذا الموقع، فاذكر السبب في التقرير.
4. npx --yes html-validate "**/*.html": 0 أخطاء.
5. افحص كل صفحة باستخدام site_preview عند view="mobile" وview="desktop"، وافحص الصفحة الرئيسية أيضًا عند 360 و768 بكسل. أصلح أي تجاوز أفقي أو عنوان ضيق أو هدف لمس أصغر من 44 بكسل ثم افحص مرة أخرى.
6. قِس كل صفحة باستخدام core_web_vitals عند strategy="mobile" وstrategy="desktop"، ثم دقّق الصفحة الرئيسية وأطول صفحة باستخدام seo_audit. الهدف: على الجوال، إمكانية الوصول وأفضل الممارسات وSEO بدرجة 100 والأداء 95 على الأقل؛ وعلى سطح المكتب الأربعة 95 على الأقل. يجب ألا يخرج أي طلب واحد من الموقع. إذا كان LCP مرتفعًا، فاستخدم resources=true لإيجاد الملف الذي يعطله: غالبًا أسطر preload الموضوعة قبل ملف الأنماط، أو fetchpriority الممنوحة لصورة ليست عنصر LCP. وإذا تجاوز CLS القيمة 0.1، فابحث عن خط في الشاشة الأولى لا يملك preload.
لا تعتبر العمل منتهيًا حتى تنجح كل هذه الاختبارات.

بعد النشر، أرسل https://[النطاق]/sitemap.xml باستخدام gsc_submit_sitemap وافحص الصفحة الرئيسية باستخدام gsc_url_inspect. إذا لم يكن هناك موقع مضاف في Search Console، فأخبرني؛ ولا تحاول ربط واحد بنفسك.

تقرير التسليم: جدول بدرجات Lighthouse الأربع وLCP لكل صفحة على الجوال وسطح المكتب، ونتيجة الاختبارات الأربعة، وسبب أي تحذير من design-check، وقائمة بالمعلومات في الموقع التي تكون خيالية أو ناقصة، وما لا يزال عليّ فعله (Business Profile، وصور حقيقية، وساعات العمل وغيرها).