عرض مشاركة واحدة
احصائياتى

الردود
2

المشاهدات
1488
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant futureهيلبرنت has a brilliant future

  • هيلبرنت غير متواجد حالياً

المشاركات
11,551

+التقييم
321

تاريخ التسجيل
Jul 2015

الاقامة
فى الدنيا

نظام التشغيل
windows 8

رقم العضوية
18
10-26-2017, 05:39 PM
المشاركة 1
10-26-2017, 05:39 PM
المشاركة 1
افتراضي شرح علامات الوصف Open Graph الخاصة بالفيس بوك
السلام عليكم ورحمه الله وبركاته
مما لا شك فيه بان الشبكات الإجتماعية خصوصاً الفيسبوك وتويتر اصبحت من اهم الوسائل لنشر وجلب الزوار, وللنشر الصحيح على شبكة الفيسبوك وضعت فيسبوك بروتوكول أوبن قراف Open Graph Protocol والهدف ببساطة هو وضع آلية بين المواقع والفيسبوك لفهم المحتوى وخصائصة, سأشرح هنا بعمق كافي لفهم ما لا يسعنا جهله في أوسمة بروتوكول الأوبن قراف OGP ، عرض كود الميتا تاج الخاص بمدونات البلوجر والذي سيجلها مهيئه تماماً لنشر التدوينات على الفيسبوك بلا مشاكل أو تعارض سواء لصفحات المقالات أو الصفحة الرئيسية.

أهم أوسمة ميتا تاج OGP وخصائصها
إذا قمت بنشر موضوع بشكل سليم على الفيسبوك فسيظهر كما في الصور :


ومن خلال الصورة يمكن تحديد ثلاث أوسمه اوبن قراف ضرورية جداً وليست الوحيدة ، وفيما يلي تفصيلها:
1. وسم الصورة الرئيسية og:image :
كود:
<meta content='رابط الصورة' property='og:image' />
كيف تختار مقاس وحجم الصورة ؟

لعرض الصورة بجودة عالية وحجم كبير : استخدم صورة بمقاس لا يقل عن ( 1200 في 630 ) بيكسل.
لعرض الصورة بحجم صغير : استخدم صورة بمقاس أقل من ( 600 في 315 ) بيكسل .
هل لاحظت نسبة العرض إلى الإرتفاع ؟ : نعم هذه النسبة ( 1.9 ) حافظ على نسبة قريبة منها وسوف تنشر الصورة بشكل كامل سواء بحجمها الكبير أم الصغير. الاخلال بهذه النسبة بين العرض والارتفاع سيجل الصور تظهر مشطوفة.
متى يتجاهل الفيسبوك الصور؟ : إذا كان المقاس أقل من 200x200 بيكسل ، وحسب تجربتي أحياناً يتجاهل مقاسات أكبر من هذا خصوصاً عند وجود صور أخرى في الموضوع كبيرة الحجم فالأفضل الابتعاد عن الاحجام الصغيرة!
حجم الصورة : لأي مقاس فسيبوك لا يقبل صورة بحجم أكبر من 8 ميقابايت

← تنبيه: من الان فصاعداً عليك اختيار مقاس محدد وثابت لصور تدويناتك الرئيسية ، أنا مثلاً اخترت 800 في 420 بيسكل وهي موافقة للنسبة 1.9 .

← تنبيه مهم: بلوجر تلقائياً يولد هذا الوسم لبروتوكول اوبن قراف بالنسبة لرسائل المدونة ، وهذا شيء جميل ولكن للأسف بلوجر مشكلتها أنها لا توفر دليل شامل رسمي وكثير من الخصائص عليك اكتشافها بنفسك ، ومن اللطيف الذي اكتشفته أثناء تجربتي لأكواد مختلفة للوصول لتركيبة متكامله أن يلوجر تستخدم المفتاح أو المحدد (w1200-h630-p-nu) وذلك في رابط الصورة لإجبار فيسبوك على التقاطها بالمقاس الكبير وبجودة عالية ، ولكن بما أن المستخدم لا يعلم عن هذه الميزه فهو يستخدم صور لا تتوافق وبالتالي تظهر مشطوفة وغير كاملة !

2. وسم العنوان og:title :
كود:
<meta content='العنوان' property='og:title' />
خاص بعنوان الموقع أو عنوان المواضيع، يفضل أن يكون خالياً من العلامات التجارية أو اسم الموقع، فقط عنوان الموضوع أو عنوان الموقع إذا كانت الصفحة الرئيسية. إذا لم تقم بإضافة هذا الوسم فإن الفيسبوك سيستخدم علامة وصف العنوان العادية بدلاً منه، أقصد : <title> ولكنه سيسجل رسالة تحذير عند استخدام أداة التصحيح Open Graph Debugger
كود:
https://www.facebook.com/login.php?next=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fdebug%2Fsharing%2F
3. وسم الوصف og:description :
كود:
<meta content='وصف المحتوى' property='og:description' />
وصف لا يقل عن جملتين حسب توصيات فيسبوك ، ولا أعلم عن حدود طول هذا الوصف ، ولكن لتكن منطقياً ولا تتخطى الحد المعقول ، وبالطبع الوصف يجب أن يغري القارئ وليس لمحرك البحث بمعني آخر لا تهتم لتراكيب الكلمات الدلالية بل ركز فقط على عنصر الجذب للشريحة المستهدفه.


4. وسم الرابط og:url :
كود:
<meta content="رابط" property="og:url" />
هذا الوسم عادة لن تواجه فيه أي مشاكل ، وهو كذلك يتم توليده تلقائياً بالنسبة لمدونات بلوجر ( روعه البلوجر )


أداة تصحيح الأخطاء للتأكد من الميتا تاج
يجب أن تحفظ صفحة الأداة Open Graph Debugger
كود:
https://www.facebook.com/login.php?next=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fdebug%2Fsharing%2F
في المفضلة ، فسوف تحتاجها كثيراً للتأكد من أن فيسبوك يقرأ محتوى موقعك كما يجب ، كذلك عندما تقوم بتحديث محتوى قديم عليك وضع الرابط واعادة ارسال عنكبوت فيسبوك لجلب المحتوى الجديد.

من المهم عند وضع الرابط وضغط زر التصحيح التأكد من وقت الجلب ، إذا كان قديماً فعليك الضغط على الزر "Scrap Again" الآن يمكنك قراءة الأوسمة التي جلبها فيسبوك من موقعك والتأكد من أن جميع المعلومات صحيحة وخالية من الأخطاء ، أما رسائل التحذير فغالباً لا تهم.

← قد يظهر لك رسالة خطأ عدم وجود الوسم (fb:app_id) أي رقم معرف تطبيق الموقع في الفيسبوك وهذا سيكون متوفر في حالة استخدمنا نظام التعليقات الخاص بالفيسبوك مثلاً ، ولكن ما الضرورة إذا لم استخدمه ؟ أعتقد أنه لا وجه لاعتباره رسالة خطأ.


مشكلة عدم ظهور الصورة في "أول إرسال" !
عنكبوت فيسبوك (الكسول) يجب أن يقرأ الصورة مرة واحد قبل عرضها في صفحاته ، هذه المرة ستكون عند أول مشاركة! يقوم بها شخص ، حتماً سيشكل هذا مشكل عند استخدام إضافة نشر تلقائي . ولحل هذه المشكلة :

الطريقة الأولى: استخدام أداة التصحيح . ( الم أقل لكم أنها مهمه ) ، ولكن هذا ليس حلاً عملياً للمواقع ذات معدل النشر العالي.

الطريقة الثانية: استخدام وسمان يحددان مقاس الصورة ليتعرف عليها عنكبوت فيسبوك مباشرة :
كود:
  <meta property="og:image:width" content="800" />
  <meta property="og:image:height" content="420" />
وتكتب في السطر الأول مقاس العرض والثاني مقاس الطول ، ويجدر التنبيه أن هذا الكود سيفرض المقاس الذي يحتويه على الصورة دائماً فإن كانت أصغر حجماً فسيقوم بتكبيرها ، والعكس .

احقاقا للحق الموضوع نقل من هنا
كود:
http://www.alblogger.com/2016/08/open-graph.html