Open Graph معاينة

توضح لك أداة المعاينة Open Graph الشكل الذي سيبدو عليه الرابط المشترك قبل نشره. تقوم بإدخال حقول og:title وog:description وog:image وog:url وTwitter Card - أو لصق كتلة العلامات التعريفية الموجودة لديك بالفعل - وتعرض الأداة بطاقات اجتماعية تقريبية لـ Facebook وX/Twitter وLinkedIn وSlack وDiscord جنبًا إلى جنب. بدلاً من دفع الصفحة مباشرة ومشاركتها واكتشاف أن العنوان مقطوع إلى النصف أو أن الصورة لا يتم تحميلها أبدًا، ترى المشكلة بينما لا يزال بإمكانك إصلاحها.

بروتوكول Open Graph هو المفردات المشتركة التي يستخدمها كل نظام أساسي تقريبًا لإنشاء تلك البطاقات. تزور المكشطة صفحتك، وتقرأ og: العلامات الوصفية في <head>، وتقوم بتجميع معاينة منها. المشكلة هي أن كل منصة تعرض نفس العلامات بشكل مختلف: X يقتطع الأوصاف بحوالي 110 أحرف بينما يظهر Facebook بالقرب من 155، ويخفي LinkedIn الوصف بالكامل على بعض الأسطح، ويقوم Slack بدمج كل شيء في مرفق مضغوط. يمكن تشويه الحقل الذي يبدو جيدًا في بطاقة واحدة في بطاقة أخرى، ولهذا السبب فإن معاينتها جميعًا مرة واحدة هو الفحص الوحيد الموثوق به.

فيما يلي معاينة رسم بياني مفتوح بأرقام حقيقية. قم بتعيين og: العنوان إلى "كيف نقطع وقت تحميل صفحتنا إلى النصف بدون إعادة كتابة" (55 حرفًا، تمريرة) وأعطه og مكونًا من 125 حرفًا: الوصف. يؤدي التحقق من الصحة إلى تمرير العنوان والتحذير من الوصف: غرامة على Facebook وLinkedIn، لكن X تقطع ما يزيد عن 110 تقريبًا. تقوم بطاقة الصورة الكبيرة X بقطع النص بعد "من 4.1 ثانية..."، بينما تعرض بطاقة Facebook الجملة بأكملها. تقوم معاينة صورة الرسم البياني المفتوح بتحميل الصورة: الصورة في كل بطاقة، لذلك يظهر الرابط المعطل "فشل تحميل الصورة" قبل أن يشاركها أي شخص.

تعمل هذه الأداة من جانب العميل ولا تقوم أبدًا بجلب صفحتك أو كشطها. إنه يعمل من العلامات التي تقدمها، إما مكتوبة في النموذج أو يتم لصقها بتنسيق HTML خام وتحليلها محليًا. وهذا يعني أنه يمكنك التحقق من صحة البيانات التعريفية للصفحات الموجودة خلف تسجيل الدخول، أو في مجال التدريج، أو التي لم يتم نشرها على الإطلاق. الطلب الوحيد الذي يقدمه إلى الخادم الخاص بك هو تحميل عنوان URL لـ og:image، حتى يتمكن متصفحك من إظهار الصورة في البطاقات.