كيف إضافة ميتا تاج Open Graph لمدونات لبلوجر للنشر السليم على فيس بوك

بواسطةمحمد 0
كيف إضافة ميتا تاج Open Graph لمدونات لبلوجر للنشر السليم على فيس بوك


كيف إضافة ميتا تاج Open Graph لمدونات لبلوجر للنشر السليم على فيس بوك

ليس سراً أن Facebook أصبح سائقًا رئيسيًا لحركة المرور لجميع أنواع المواقع. في الوقت الحاضر ، حتى الشركات الكبيرة توجه المستهلكين نحو صفحاتهم على Facebook .


بدلاً من مواقع الشركات مباشرة. وبالطبع هناك أدوات Facebook "أعجبني" و "يوصي" على كل موقع ويب.


  إحدى المشكلات التي أجدها دائمًا عند مشاركة عناوين URL على Facebook هي أنه غالبًا ما لا يكون لديك تحكم في نص الصورة والوصف المصاحب لعنوان URL. 


لو علمت عن Facebook Open Graph API ، كنت أعرف الحل لهذه المشكلة.


سبق أن تطرقنا في حلقة سابقة كيفية إضافة اكواد الميتا تاج Meta Tag  لنشر السليم في مواقع تواصل الاجتماعي بدون حظر يعد Open Graph Protocol .


عبارة عن سلسلة من علامات التعريف التي يمكنك إضافتها إلى صفحة الويب الخاصة بك للسماح لها أن تصبح كائنًا غنيًا ، تستخدمه منصات الوسائط الاجتماعية.

- تقديم عام :

من الناحية العملية ، يعني هذا أنه يمكنك استخدام علامات HTML الأساسية لإضافة معلومات أساسية حول مشاركاتك ، والتي تستخدمها الشبكات الاجتماعية 

مثل : Facebook و Twitter و LinkedIn و Google+ لتعزيز كيفية عرض روابط موقعك. على سبيل المثال ، إذا كنت تتصفح Facebook على سبيل المثال.


وشاهدت صورة مصغرة مخصصة وعنوانًا ووصفًا تم استدعاؤهما في موجز الأخبار لديك ، فعندئذ رأيت علامات رسم بياني مفتوحة قيد التنفيذ. ي


مكن أن تكون إضافة رسم بياني مفتوح إلى موقعك بسيطة إلى حد ما. يمكنك القيام بذلك عن طريق إضافة وظيفة إلى المظهر الخاص بك .


أو باستخدام مكون إضافي يمكنه القيام بالرفع الثقيل لك. في هذه المقالة ، سنتعرف على كلتا الطريقتين.

1. كيف يعمل  Open Graph المفتوح

يسمح بروتوكول Open Graph الخاص بفيسبوك لمطوري الويب بتحويل مواقع الويب الخاصة بهم إلى كائنات "رسم بياني" على Facebook.


مما يسمح بمستوى معين من التخصيص حول كيفية نقل المعلومات من موقع ويب غير تابع لـ Facebook إلى Facebook عندما يتم "التوصية" بصفحة ما. 


أو فقط مشترك بشكل عام. يتم تعيين المعلومات عبر علامات META مخصصة على الصفحة المصدر. دعونا نلقي نظرة على علامات META .


المختلفة التي يستخدمها Facebook للسماح لك بتخصيص كيفية مشاركة موقع الويب الخاص بك لكي يعمل Open Graph بشكل صحيح .


تحتاج إلى إضافة بضع علامات وصفية إلى القسم الرئيسي لمستند HTML. 


هذا هو المكان الذي يتم فيه تخزين معلومات صفحة الويب الخاصة بك ، غير مرئية للمستخدمين. تتبع كل علامة وصفية نفس التنسيق ؛ يمكنك تعيين "خاصية" قيمة "محتوى".


بعد القيام بذلك ، يمكن لخدمات الأطراف الخارجية المختلفة ، وخاصة منصات الوسائط الاجتماعية ، استخدام هذه المعلومات لعرض المحتوى الخاص بك بطريقة أكثر وضوحًا. 


بعض هذه المنصات لديها طريقة خاصة لجمع هذه المعلومات ، مثل بطاقات تويتر ، ولكن معظمها يستخدم Open Graph كخط أساس للمعلومات.


لذلك فقط بإضافة القليل من البيانات حول الصفحة التي يعمل بها المستخدم ، يمكنك التأكد من أنه عندما يتم نسخ عنوان URL الخاص بك ولصقه في موجز اجتماعي.


فإنه يترافق مع صورة مخصصة ووصف أكثر.المشاركة على وسائل التواصل الاجتماعي ، بالطبع. تجعل الجماهير الضخمة في Facebook و Twitter .


أفضل منصات المشاركة ، لكن هل تعرف كيفية تحسين هذه الإمكانية التوسعية؟

2- لماذا تم إنشاء Open Graph؟

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


غنية بنفس الوظيفة مثل كائنات Facebook الأخرى.


ببساطة ، هناك قدر من السيطرة على كيفية انتقال المعلومات من موقع ويب تابع لجهة خارجية إلى Facebook عندما تتم مشاركة صفحة (أو الإعجاب بها ، وما إلى ذلك). 


من أجل جعل هذا ممكنًا ، يتم إرسال المعلومات عبر العلامات الوصفية لـ Open Graph في الجزء <head> من رمز موقع الويب.


لا شك أن أهم ما يجب أن تخطط له بعد كتابة المحتوى الجيد هو الوصول إلى الجمهور، من نافلة القول أن تهيئة الموقع لمحركات البحث وقوقل تحديداً أمر ضروي.


ولكن لا يمكنك تجاهل شهرة وقوة الشبكات الإجتماعية خصوصاً فيسبوك وتويتر والنجم الصاعد بنترست.



الأمر ضروي لدرجة أنه يجب على صاحب الموقع فهم كيف تقوم عناكب هذه الشبكات بالتقاط محتويات الموضوع، وليس الاكتفاء بنسخ ولص أكواد لا يعرف تأثيرها على موقعه على وجه التحديد.


جميع علامات Open Graph META على Facebook مسبوقة بـ og: ، ثم تابعت بمزيد من التحديد الخاصية المحددة المراد تعيينها. البيانات المتعلقة بمجموعة الخصائص تدخل ضمن سمة المحتوى:

<meta property="og:{tagName}" content="{tagValue}"/>
باستخدام هذه الاستراتيجية البسيطة لعلامة META ، يمكنك إخبار Facebook بالصور والنصوص والمزيد لاستخدامه عند مشاركة صفحة الويب الخاصة بك. 


دعنا نراجع بعض علامات meta الرئيسية!


3. فيسبوك فتح الرسم البياني ميتا العلامات

1- صورة : توجه علامة META للصور Facebook لاستخدام الصورة المحددة عند مشاركة الصفحة:

<meta property="og:image" content="https://l.top4top.io/p_1526d1dpz1.png"/>

من الأفضل استخدام صورة مربعة ، حيث يعرضها Facebook في هذا الشأن. يجب أن تكون تلك الصورة بعرض 600 بكسل على الأقل في أي من أشكال الصور المدعومة عادة (JPG ، PNG ، إلخ.)


2- عنوان : العنوان لمرافقة URL:

<meta property="og:title" content="Facebook Open Graph META Tags"/>

في معظم الحالات ، يجب أن يكون هذا هو عنوان المقالة أو الصفحة.


3- رابط : يجب أن يكون عنوان URL هو العنوان الأساسي للصفحة المحددة:


<meta property="og:url" content="https://davidwalsh.name/facebook-meta-tags"/>
تعرف على نوع LINK الكنسي إذا كنت لا تعرف الغرض منه - فقد يساعدك مُحسّنات محرّكات البحث (SEO) بشكل كبير!

4- اسم الموقع : يوفر Facebook الاسم الذي ترغب في أن يتعرف عليه موقع الويب الخاص بك:

<meta property="og:site_name" content="David Walsh Blog"/>
هذا مفيد للغاية لأن Facebook قد لا يكون لديه أي وسيلة لمعرفة خارج علامة META هذه.

5- النوع : يوفر Facebook نوع موقع الويب الذي ترغب في تصنيف موقع الويب الخاص بك به:

<meta property="og:type" content="blog"/>

4. لماذا تعد علامات Open Graph مهمة؟

من المحتمل أن يشاهد الناس المحتوى المشترك وينقرون عليه باستخدام علامات OG المحسّنة ، مما يعني المزيد من زيارات الوسائط الاجتماعية إلى موقع الويب الخاص بك.


هناك ثلاثة أسباب لذلك:

أنها تجعل المحتوى أكثر لفتت للنظر في قنوات التواصل الاجتماعي.
يخبرون الأشخاص بما يدور حوله المحتوى في لمحة.
فهي تساعد Facebook على فهم محتوى المحتوى ، والتي يمكن أن تساعد في زيادة ظهور علامتك التجارية من خلال البحث.
دعنا نتطرق أكثر إلى هذه النقطة الأخيرة ، لأنها تميل إلى التغاضي عنها.


5. فيما يلي نتائج بحث Facebook عن "محركات البحث البديلة":

إنه يقدم مقالات شهيرة شاركها الأشخاص بالفعل على Facebook. يأتي كل عنوان وصورة من علامات Open Graph. حتى إذا لم يتم إرجاع مقالات للبحث.


فسيظل Facebook يعرض المحتوى المطابق الذي تمت مشاركته في مجموعات أو صفحات تتابعها أو من قبل الأصدقاء.


ملاحظة جانبية. تساعد علامات Open Graph أيضًا على إنشاء مقتطف عندما يرسل إليك شخص ما رابطًا من خلال رسائل مباشرة باستخدام تطبيقات تدعم بروتوكول Open Graph.


بشكل طبيعي على Facebook و Messenger و WhatsApp ، وكذلك iMessage و Slack.
6. ما هي علامات Open Graph التي يجب أن تستخدمها؟

يسرد Facebook 17 علامة OG في official documentation ، بالإضافة إلى عشرات أنواع الكائنات. لن نناقش كل هذه الأمور. 


يلزم أربعة فقط لفيسبوك لفهم أساسيات صفحتك ، وهناك بضعة آخرين يساعدون في بعض الأحيان.

- إعداد علامات Open Graph المفتوح يدويًا

إذا كنت تشعر بالراحة عند البحت في رمز موقع الويب ، فإن إضافة علامات OG تكون واضحة تمامًا مثل لصقها في قسم <head> في صفحة الويب الخاصة بك.


فكر في استخدام أداة منشئ العلامات مثل Mega Tags أو Web Code Tools للمساعدة في تقليل أخطاء بناء الجملة.

7. كيفية اختبار وتصحيح علامات الرسم البياني المفتوح

الآن بعد أن قمت بنشر جميع العلامات ، تحتاج إلى التأكد من أنها تعمل كما هو متوقع ومستعدة للمشاركة.

لذلك ، استخدم هذه الأدوات:


انهم جميعا يعملون نفس الشيء. يقومون بسحب العلامات من الصفحة وإظهار كيفية ظهورها عند المشاركة. يساعد الاختبار أيضًا في منع المشكلات التي لا يتم فيها عرض علامات OG أو سحبها بشكل صحيح.

8. تلميح
استخدم og: image: width و og: image: علامات الارتفاع لضمان مقتطف مثالي في المرة الأولى التي يشارك فيها شخص ما ذلك. 

في WordPress ، يضيف Yoast لهم تلقائيًا. هذا هو بناء الجملة:

  • <meta property = "og: image: width" content = "1200" />
  • <meta property = "og: image: height" content = "630" />

الشيء الأكثر أهمية هو كيف يبدو مقتطف. 


إذا فقدت أو قمت بإعداد علامات أقل أهمية بشكل غير صحيح ، فهذا ليس بالأمر الكبير. يمكنك تجاهل التحذيرات المتعلقة بعلامات غير مهمة مثل fb: app_id


إذا بدا شيء خاطئًا وقمت بتحديث العلامات ، فاستخدم زر "Scrape Again" لسحب بيانات جديدة. إذا لم تر التغيير بعد الزحف ، فاستخدم Batch Invalidator لمسح ذاكرة التخزين المؤقت والتكرار.


كرر هذه العملية مع Twitter Validator و Twitter Post Inspector للتأكد من أن المحتوى الخاص بك يبدو كما هو المقصود في جميع الشبكات.


- ملاحظة : جانبية. لقد وجدت أن Twitterbot فقط يتبع توجيهات ملف robots.txt. يمكن لكل من برامج الزحف على Facebook و LinkedIn .


أن تتخلص من المحتوى وتعرضه حتى إذا لم تسمح بالزحف. كان هذا مفاجئًا ، ولكن حتى من أجل Twitter فقط ، تأكد من إمكانية الزحف إلى جميع عناوين URL التي تشاركها.



8. تأكد من تواجد "أهم" سطر في مدونات البلوجر

ابحث عن السطر التالي في محرر القالب :
1 : <b:include data='blog' name='all-head-content'/>

هذا السطر من اسمه (all-head-content) يولد أهم الأكواد التي ينبغي أن تكون داخل قسم رأس الصفحة HEAD ، وهي كثيرة عبارة عن روابط للخلاصات.


وميتا تاق مثل وصف المدونة أو وصف الصفحة ، بل إنه المسؤول عن توليد سطرين لميتا تاق الاوبن قراف سنذكرهما قريباً؛ ولذلك نقول أن بلوجر منصة جاهزه للنشر بنسبة 90% تقريباً .


لمصادقتها لمحركات البحث والشبكات الإجتماعية كذلك ولكن للأسف ما زال الكثير يعرض أكواد تضر ولا تنفع راجع هذه التدوينة ان شئت.

من المفيد قبل الخوض في تطبيق الشرح تقوم باستعراض الصفحة المصدرية سواء للصفحة الرئيسية أم لصفحة الرسائل وذلك بالضغط على CTRL+U .


وذلك لفهم واضح لتأثير الكود الذي سأعرضه لك.


9. شرح: إضافة ميتا تاج Open Graph  

قبل التطبيق أنصح بما يلي:
تطبيق الشرح على مدونة تجريبية ، تستخدم نفس قالب المدونة الأصلية.
إن نجحت في تفعيل الأكواد ونشرت رسائل بشكل سليم في الفيس بوك وذلك في المدونة التجريبية، قم بأخذ نسخة احتياطية من مدونتك الأصلية واحفظها كمرجع أرشيفي للمتغيرات التي أجريتها .
طبق الأكواد على مدونتك ♥

- ملاحظة: تستخدم AddThis Related Posts Tool أيضًا علامات Open Graph لتحديد المحتوى المراد عرضه لكل صفحة. إذا كنت لا ترى المحتوى الصحيح يظهر لصفحاتك.


فتأكد من أن صفحاتك تحتوي على علامات فتح الرسم البياني.


لإضافة علامات Open Graph إلى صفحات موقع Blogger الخاصة بك ، ستحتاج إلى أن تكون مرتاحًا عند تحرير قالب Blogger الخاص بك. 


نوصي أيضًا بإنشاء نسخة احتياطية من القالب قبل إجراء أي تغييرات.
  1. للبدء ، انقر فوق السمة .
  2. ثم قم بتحرير HTML في قائمة Blogger.
  3. بعد إضافة مساحة الاسم ، ستحتاج علامات التعريف "فتح الرسم البياني" الفعلية إلى إضافتها إلى القالب. 
  4. للقيام بذلك ، ابحث عن "</head>" داخل السمة الخاصة بك. 
  5. من هناك ، الأمر يتعلق فقط بنسخ مقتطف الشفرة التالي قبل علامة </head> مباشرةً.
<!-- Begin Open Graph metadata by www.chrohat.com -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if><b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
<meta expr:content='"ar_AR"' property='og:locale:alternate'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='ضع هنا ID صفحتك' property='fb:page_id'/>
<meta content='ضع هنا ID بروفيل الخاص بك' property='fb:admins'/>
<meta content='ضع قيمة العرض' property='og:image:width'/>
<meta content='ضع قيمة الارتفاع' property='og:image:height'/>
<!-- End Open Graph metadata by www.chrohat.com -->


-احفظ القالب وجرب أن ميتا تاج open graph تم تطبيقها بنجاح، ويمكنك التأكد بطريقتين :

أداة التصحيح التي ذكرتها في التدوينة السابقة ، - Facebook Sharing Debugger
فتح مصدر الصفحة من خلال المتصفح بالضغط على CTRL+U

ستؤدي إضافة هذه العلامات القليلة فقط إلى تزويد خدمات الجهات الخارجية بالكثير من البيانات حول صفحتك ، وستضمن أن يبدو عنوان URL .


لمقالتك رائعًا ويرافقه جميع المعلومات التي يحتاجها القراء.

سيؤدي ذلك إلى إنشاء علامات وصفية لـ Open Graph للحصول على العنوان والوصف وعنوان URL والصورة (في حالة وجود واحدة في المنشور). 


إذا كانت هناك حاجة إلى علامات Open Graph إضافية ، نوصيك بإلقاء نظرة على صفحة بروتوكول Open Graph لمزيد من المعلومات.


إذا كانت لديك أي أسئلة حول تثبيت علامات Open Graph على موقع Blogger ، فيرجى الاتصال بنا او إضافة تعليق لنا. ونحن سعداء للمساعدة!


للمزيد من التوضيح كما عودناكم على مدونة شروحات للمعلوميات شروحات دائما مرفوقة بالدرس فرجة ممتعة
» متابعة # دورة بلوجر
» كيف إنشاء : مدونة بلوجر
» رابط الموقع  ( معرف الفيس بوك ) : ID FACEBOOK 
» مواقع مفيد خاص ب : Meta Tags
» موقع يساعد انشاء اكواد : Meta Tags
» فحص روابط موقعك : Facebook Sharing Debugger
» فيسبوك بروتوكول :  Open Graph Protocol
» مصادر : official documentation

أضف تعليق

إرسال تعليق

Comments