وسوم Twitter Card الوصفية

حددت Twitter (X) بروتوكولًا خاصًا ببطاقات المعاينة قبل ظهور OpenGraph، ولا تزال تدعمه. وعلى الرغم من أن Twitter الحديثة تستخدم علامات OG كبديل عند غياب علامات twitter:*، فإن التصريح عن twitter:card صراحةً يمنح تخطيط البطاقة الأكثر قابلية للتنبؤ.

هناك أربعة أنواع للبطاقات: summary (صورة مصغرة صغيرة بجانب العنوان والوصف)، وsummary_large_image (صورة رئيسية بعرض كامل)، وapp (لتثبيت تطبيق محمول)، وplayer (لفيديو أو صوت مضمن). اختر summary_large_image للمقالات الغنية بالمحتوى.

إذا وُجدت هاتان العلامتان، فإنهما تتجاوزان og:title وog:description على Twitter. استخدمهما عندما تريد عنوانًا مختلفًا لجمهور Twitter عن العنوان الموجّه إلى مستهلكي OpenGraph عمومًا؛ وإلا فاترك Twitter يستخدم قيم OG كبديل.

لبطاقات summary، استخدم صورة مربعة بنسبة 1:1 وبأبعاد لا تقل عن 144x144. أما summary_large_image فتتطلب صورة بنسبة 2:1، ويفضّل أن تكون بأبعاد 1200x600 أو أكبر. ترفض Twitter الصور التي يتجاوز حجمها 5 ميغابايت. استخدم عنوان URL مطلقًا كما في og:image — فالمسارات النسبية لا تعمل.

هو النص البديل لصورة البطاقة، بحد أقصى 420 حرفًا. يحسّن إتاحة الوصول لمستخدمي قارئات الشاشة الذين يتصفحون Twitter، ويوفّر وصفًا بديلًا عند تعذّر تحميل الصور. وفّره دائمًا — فهو مكسب سريع يستغرق 30 ثانية لتعزيز الشمول.

يشير twitter:site إلى اسم المستخدم الخاص بموقعك على Twitter، مع @. ويشير twitter:creator إلى اسم مستخدم الكاتب الفرد. يتيح ملء هاتين القيمتين لـ Twitter عرض "من @yoursite" وربط اسم الكاتب بحساب حقيقي.

يستخدم OpenGraph property="og:..."، بينما يستخدم Twitter name="twitter:...". يعود هذا الاختلاف إلى أسباب تاريخية (RDFa مقابل HTML5 meta). كلاهما صالح تقنيًا؛ واستخدام الخاصية الصحيحة لكل بروتوكول يتجنب الحالات الخاصة مع أدوات التحقق الصارمة.

يتيح twitter:card="app" الترويج لتطبيق iOS/Android باستخدام twitter:app:id:iphone وtwitter:app:id:ipad وtwitter:app:id:googleplay وtwitter:app:url:* للروابط العميقة. يؤدي النقر على البطاقة إلى فتح App Store أو Play Store، أو التطبيق مباشرةً إذا كان مثبتًا.

تضمّن twitter:card="player" مشغّل فيديو أو صوت داخل التغريدة مباشرةً. ويتطلب ذلك twitter:player (عنوان URL لإطار iframe عبر HTTPS) وtwitter:player:width وtwitter:player:height. توافق Twitter على بطاقات المشغّل يدويًا لمنع إساءة الاستخدام — أرسل الطلب عبر developer.twitter.com.

أوقفت Twitter واجهة Card Validator العامة، لكن لا تزال البطاقات تظهر في معاينة التغريدة. ألصق عنوان URL الخاص بك في مسودة خاصة لترى نوع البطاقة والصورة اللذين سيظهران بالضبط قبل نشر التغريدة الفعلية.

أدرج دائمًا كلًا من twitter:card والمجموعة الكاملة من علامات OG. تتجاهل معظم المنصات غير Twitter علامات twitter:*، بينما تستخدم معظم عملاء Twitter الحديثة OG كبديل، لذا ينتج عن الجمع بينهما عرض صحيح للمعاينة في كل مكان بأقل قدر من التكرار.

إذا كانت twitter:title مفقودة، لكن og:title موجودة، فما الذي يظهر في بطاقة Twitter؟

تمنح بطاقات Twitter، المُعلن عنها عبر name="twitter:card"، الصفحات معاينة يمكن التنبؤ بها على X. اختر summary_large_image للمحتوى التحريري، وأضف twitter:image بعنوان URL مطلق وtwitter:image:alt، وانسب الموقع والكاتب باستخدام أسماء المستخدمين، واترك قيم OG تملأ العلامات التي لا تتجاوزها.