svelte:head لوسوم التعريف الديناميكية
أدرج وسمَي و الخاصين بالصفحة في رأس المستند
svelte:head لوسوم التعريف الديناميكية درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
عنصر svelte:head
استخدم <svelte:head> لإدراج عناصر في رأس المستند.
تعيين العنوان
ضع في داخله أي وسوم للرأس، مثل title أو meta.
<svelte:head>
<title>{post.title}</title>
</svelte:head>عناوين لكل صفحة
يمكن لكل صفحة تعيين عنوانها الخاص لتحسين SEO وتسميات علامات التبويب.
بيانات وصفية ديناميكية
أدرج المتغيرات داخل الوصف والكلمات المفتاحية ووسوم OG.
<svelte:head>
<meta name="description" content={post.summary} />
</svelte:head>متوافق مع SSR
يعمل svelte:head أثناء SSR، لذلك تظهر وسوم الرأس في HTML الأولي لمحركات البحث.
كتل svelte:head متعددة
يمكن أن يحتوي مكوّن واحد على كتل <svelte:head> متعددة.
في التخطيطات
عيّن القيم الافتراضية في التخطيطات وتجاوزها لكل صفحة.
تجنب الوسوم المكررة
يزيل SvelteKit النسخ السابقة من الوسوم الفريدة مثل title عند تعيين نسخة لاحقة.
Open Graph
أضف og:title وog:description وog:image للحصول على معاينات غنية على الشبكات الاجتماعية (وسنتناول ذلك لاحقًا).
الروابط الأساسية
عيّن عناوين URL الأساسية داخل svelte:head.
<link rel="canonical" href={canonicalUrl} />أفضل ممارسات SEO
يساعد تعيين عناوين وأوصاف فريدة لكل صفحة على تحسين الظهور في نتائج البحث.
تحقق سريع
ماذا يفعل svelte:head؟
مراجعة
يعيّن <svelte:head> وسوم الرأس الخاصة بالصفحة للعناوين والبيانات الوصفية والروابط، سواء أثناء SSR أو التنقل من جهة العميل.
الأسئلة الشائعة
هل درس «svelte:head لوسوم التعريف الديناميكية» مجاني؟
نعم — نص درس «svelte:head لوسوم التعريف الديناميكية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «svelte:head لوسوم التعريف الديناميكية»؟
أدرج وسمَي و الخاصين بالصفحة في رأس المستند تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «svelte:head لوسوم التعريف الديناميكية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- svelte:head لوسوم التعريف الديناميكية
- بيانات OpenGraph الوصفية وبطاقة Twitter
- البيانات المهيكلة JSON-LD في SvelteKit
- عناوين URL الأساسية وإنشاء Sitemap