Open Graph مقابل Twitter Card: ما الفرق؟

كلا معاينات رابط التحكم على وسائل التواصل الاجتماعي. لكنهم ليسوا نفس الشيء. إليك متى تستخدم كل منهما — ولماذا يجب عليك استخدام كليهما.

Open Graph — المعيار Facebook

تم تقديم Open Graph بواسطة Facebook في عام 2010. قبل علامات OG، عندما يقوم شخص ما بمشاركة رابط على Facebook، كانت المنصة تختار بشكل عشوائي صورة ونصًا من الصفحة. وكانت النتيجة غير متوقعة وغير جذابة في كثير من الأحيان.

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

<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />

اعتمدت المنصات الأخرى معيار Open Graph. LinkedIn، Discord، Slack، WhatsApp، وReddit جميعها تقرأ og: العلامات لتقديم معاينات الارتباط.

Twitter Cards — معيار تويتر

أنشأ تويتر نظامًا خاصًا به يسمى "Twitter Cards" قبل أن يتم اعتماد Open Graph على نطاق واسع. Twitter Cards استخدم اصطلاح تسمية مختلفًا للسمات:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Twitter Cards لها نوعان رئيسيان:

• ملخص — صورة مصغرة صغيرة على الجانب الأيمن من التغريدة
• summary_large_image — صورة كبيرة تشغل معظم مساحة البطاقة (موصى به)

توافق المنصة

إليك الأنظمة الأساسية التي تستخدم العلامات:

لماذا يجب عليك تعيين كليهما

على الرغم من أن معظم الأنظمة الأساسية تدعم كلا النوعين من العلامات، إلا أن هناك أسبابًا وجيهة لتعيين كليهما:

1. X/يفضل Twitter twitter:card العلامات. بينما يمكن لـ X الرجوع إلى علامات OG، إلا أنه قد لا يعرضها بشكل صحيح. يضمن ضبط كليهما أن يعرض X نوع البطاقة الصحيح.
2. تدقيق المستقبل. إذا تم إطلاق منصة جديدة وفضلت معيارًا واحدًا على الآخر، فإن وجود كلاهما يضمن التوافق.
3. الاتساق. يضمن استخدام كلاهما أن تبدو المعاينة صحيحة بغض النظر عن النظام الأساسي الذي يقرأ العلامات.

الإعداد الكامل

إليك الإعداد الموصى به لأي صفحة:

<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

قائمة مراجعة الإصلاح السريع

الأسئلة المتداولة