Sveltejs Academy · درس

بيانات OpenGraph الوصفية وبطاقة Twitter

أضف وسوم البيانات الوصفية og: وtwitter: لمعاينات روابط غنية على وسائل التواصل الاجتماعي

الدرس 2 من 413 خطوة

بيانات OpenGraph الوصفية وبطاقة Twitter درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

لماذا وسوم OG

توفر البيانات الوصفية لـ Open Graph معاينات غنية لمنصات التواصل الاجتماعي مثل Facebook وLinkedIn وSlack عند مشاركة الروابط.

وسوم OG المطلوبة

تُعد og:title وog:description وog:image وog:url الأهم.

<svelte:head>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={imageUrl} />
  <meta property="og:url" content={url} />
</svelte:head>

حجم الصورة

يُعد الحجم 1200x630 هو الموصى به لصورة OG للحصول على أفضل عرض عبر المنصات.

بطاقات Twitter

يتعامل Twitter مع وسوم OG، لكنه يوفر أيضًا بيانات وصفية خاصة به باستخدام twitter: لمزيد من التحكم.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />

أنواع البطاقات

يدعم Twitter بطاقات summary وsummary_large_image وapp وplayer.

التحقق

استخدم Sharing Debugger من Facebook وCard Validator من Twitter لمعاينة وسومك.

عناوين URL المطلقة

يجب أن تكون عناوين URL لصور OG مطلقة؛ إذ تفشل المسارات النسبية.

التخصيص لكل صفحة

عيّن وسوم OG لكل مقال أو منتج أو ملف شخصي للحصول على معاينات غنية بالسياق.

تجنب القيم الافتراضية المكررة

وفّر القيم الافتراضية على مستوى الموقع في التخطيط الجذر، ثم تجاوزها لكل صفحة.

التخزين المؤقت

تخزّن منصات التواصل الاجتماعي بيانات OG مؤقتًا. استخدم أدوات التصحيح الخاصة بها لتحديثها.

الأثر الواقعي

تزيد المعاينات الغنية معدلات النقر بدرجة كبيرة عند مشاركة الروابط على الشبكات الاجتماعية.

تحقق سريع

لماذا يجب أن تكون عناوين URL لصور OG مطلقة؟

أجب عليها في الدرس التفاعلي

مراجعة

أضف البيانات الوصفية لـ OG وTwitter داخل <svelte:head>، مع استخدام عناوين URL مطلقة للصور، للحصول على معاينات غنية على الشبكات الاجتماعية.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «بيانات OpenGraph الوصفية وبطاقة Twitter» مجاني؟

نعم — نص درس «بيانات OpenGraph الوصفية وبطاقة Twitter» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

ماذا ستتعلم في «بيانات OpenGraph الوصفية وبطاقة Twitter»؟

أضف وسوم البيانات الوصفية og: وtwitter: لمعاينات روابط غنية على وسائل التواصل الاجتماعي تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟

لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «بيانات OpenGraph الوصفية وبطاقة Twitter»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟

نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Sveltejs Academy