Skip to content
العودة إلى المدوّنة
دروس تعليمية

وسوم Open Graph الوصفية: الدليل الكامل (og:image وبطاقات X)

كيف تتحكم وسوم Open Graph و Twitter Card في معاينة الروابط على Facebook و X و LinkedIn: أحجام og:image والقيم البديلة وتصحيح الأخطاء. أداة مجانية عبر الإنترنت.

11 دقائق للقراءة

وسوم Open Graph الوصفية: دليل كامل لمعاينات الروابط الاجتماعية

وسوم Open Graph الوصفية هي وسوم <meta property="og:…"> تضعها داخل قسم <head> من صفحة HTML. وهي تتحكم في العنوان والوصف والصورة التي تظهر حين يشارك أحدهم رابطك على Facebook وLinkedIn وSlack وDiscord وWhatsApp ومعظم المنصّات الأخرى. عرّفها مرة واحدة، وستعرض كل شبكة تقريبًا معاينة غنيّة بدل عنوان URL عارٍ. أما X (Twitter) فيقرأ وسوم Twitter Card الخاصة به، لكنه يرجع إلى وسوم Open Graph لديك حين يغيب الوسم المقابل، فمجموعة واحدة محكمة من الوسوم تغطّي كل مكان قد ينتقل إليه الرابط تقريبًا.

ومع هذا البروتوكول يظهر الرابط بعنوان وملخّص وصورة واضحة بمقاس 1200×630؛ وبدونه لا يظهر سوى عنوان أجرد لا ينقر عليه أحد.

يستعرض هذا الدليل المجموعة الكاملة من الوسوم الوصفية للمشاركة الاجتماعية: وسوم Open Graph الأربعة المطلوبة، وقواعد قياس og:image، والقيمة البديلة لبطاقة Twitter Card، وكيف تعرض كل منصّة المعاينات وتخزّنها مؤقتًا، والأخطاء التي تترك المشاركات فارغة، وكيفية تصحيح النتيجة بعد النشر.

ما هي وسوم Open Graph الوصفية؟

Open Graph بروتوكول مفتوح، أنشأته Facebook في الأصل وموثَّق على ogp.me، يتيح لأي صفحة ويب أن تصف نفسها بوصفها كائنًا غنيًّا. فبدل أن تخمّن المنصّة موضوع رابطك، تقرأ حفنة من الوسوم وتحوّلها إلى بطاقة معاينة.

الصياغة وسم HTML وصفي بسيط يحمل السمة property والقيمة content، ويوضع داخل قسم <head> من المستند:

<meta property="og:title" content="How Open Graph Tags Work">

انتبه إلى السمة property. فوسوم HTML الوصفية الكلاسيكية لتحسين محركات البحث (وصف meta، وrobots، وviewport) تستخدم name. أما Open Graph فيستخدم property، ويعود Twitter Card لاستخدام name. وضبط هذه السمة مهم؛ فالزاحف الذي يتوقّع property="og:title" لن يقرأ name="og:title".

تقرأ كل منصّة تقريبًا تحوّل الرابط إلى بطاقة وسومَ Open Graph: Facebook وLinkedIn وSlack وDiscord وWhatsApp وPinterest وTelegram جميعها تتحدّث بها. وX هو الاستثناء البارز؛ إذ يفضّل وسومه twitter:* الخاصة، لكنه يرجع إلى وسوم og:* لكل ما لا يجده، ولهذا نادرًا ما تحتاج إلى تكرارها.

يقف Open Graph إلى جانب الوسوم الوصفية الكلاسيكية لتحسين محركات البحث لا بديلًا عنها. فوسم <title> والرابط الأساسي (canonical) لا يزالان يوجّهان البحث؛ ووصف meta لا يزال يشكّل مقتطف نتيجتك. ووسوم Open Graph لا تمسّ الترتيب؛ بل تملك البطاقة الاجتماعية. وعادةً ما يحمل قسم <head> المكتمل العائلات الثلاث معًا.

كتابة هذه الوسوم يدويًّا عمل متكرّر يسهل أن يخطئ فيه المرء خطأً دقيقًا. مولّد وسوم Open Graph وميتا يبني الكتلة كاملةً من نموذج قصير، ويعرضها آنيًّا، ويحافظ على اتساق التفاصيل الدقيقة (أسماء السمات، وعناوين URL المطلقة، وأبعاد الصورة) كي لا تضطر إلى تذكّرها.

وسوم Open Graph الأساسية التي تحتاجها فعلًا

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

الوسوم الأربعة المطلوبة: og:title وog:type وog:image وog:url

أربعة وسوم إلزامية بموجب البروتوكول. أهمِل أحدها فإما أن تُسقط المنصّات البطاقة أو تملأها بتخمين رديء.

<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">

الوسم og:title هو العنوان العريض على البطاقة. والوسم og:type يصنّف الكائن (المزيد عن ذلك أدناه). والوسم og:image هو صورة المعاينة، ويجب أن يكون عنوان HTTPS مطلقًا. والوسم og:url هو العنوان الأساسي للصفحة، وتستخدمه المنصّات لإزالة تكرار المشاركات وتجميع التفاعل.

الوسم og:description والفرق بينه وبين وصف meta لتحسين محركات البحث

الوسم og:description هو الملخّص القصير المطبوع تحت العنوان في بطاقة المشاركة:

<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">

إنه وسم مختلف عن <meta name="description"> المخصّص لتحسين محركات البحث، ويخدم قارئًا مختلفًا. فوصف meta ينافس على النقرات في صفحة نتائج Google، ويُقاس بنحو 155 حرفًا. أما وصف Open Graph فيُقرأ على بطاقة اجتماعية حيث المساحة أضيق والجملة الأولى تحمل الثقل الأكبر. وإن أغفلت og:description، فإن معظم المنصّات ترجع إلى وصف meta لديك، فيمكنك تجاوزه غالبًا. لا تكتب وصفًا مخصّصًا إلا حين يجب أن يختلف الجاذب الاجتماعي عن مقتطف البحث.

الوسم og:type وما الذي يتيحه

يخبر الوسم og:type المنصّات بنوع صفحتك. والقيم الشائعة هي website وarticle وproduct وprofile. فالصفحة الرئيسية أو صفحة الهبوط من نوع website؛ ومقال المدونة من نوع article.

اختيار article يتيح خصائص وميزات إضافية لا يستطيع نوع website العادي استخدامها:

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

تُغذّي وسوم article:* تلك تواريخ النشر وأسماء الكُتّاب في البطاقات، وتؤهّل الصفحة لـPinterest Rich Pins، التي تسحب البيانات المنظَّمة مباشرةً من ترميز Open Graph لديك. اضبط og:type على article في المقالات وعلى website في كل ما عداها، فتتبع الحقول المقابلة.

إليك مرجعًا للوسوم التي تستخدمها معظم الصفحات فعلًا:

الوسمما الذي يتحكم فيهقيمة مثال
og:titleالعنوان المعروض على البطاقةHow Open Graph Tags Work
og:typeنوع الكائن: website وarticle وproduct وprofilearticle
og:imageصورة المعاينة (عنوان HTTPS مطلق)https://example.com/og/cover.png
og:urlالعنوان الأساسي للصفحةhttps://example.com/open-graph-guide
og:descriptionملخّص تحت العنوانA practical guide to social meta tags.
og:site_nameاسم الموقع ككلExample
og:localeلغة المحتوى والمنطقةen_US

og:image: الأحجام والنسبة والقواعد التي تُعطّل المشاركات

الصورة هي أول ما يراه الناس في المعاينة، وهي حيث تنهار معظم المشاركات. اضبط حجم og:image وصيغته بدقّة، فيعمل ملف واحد في كل مكان.

المعيار العالمي 1200×630 (1.91:1)

حجم og:image الموصى به هو 1200×630 بكسل، بنسبة عرض إلى ارتفاع 1.91:1. وتلك الصورة الواحدة تُعرض بشكل صحيح على Facebook وLinkedIn وSlack وDiscord وبطاقة summary_large_image في X، فلا تحتاج إلى ملف مختلف لكل منصّة.

وحدود الحجم الدنيا مهمة أيضًا. فـFacebook يتجاهل أي صورة أصغر من 200×200، ويعرض مربّعًا مصغّرًا مزدحمًا لأي صورة دون 600×315. وتحت عرض 1200 بكسل، تبدأ البطاقات الكبيرة بالظهور باهتة. استهدف 1200×630 فتتجاوز كل العتبات دفعةً واحدة.

لماذا يهمّ og:image:width وog:image:height

حين تلتقي المنصّة برابطك أول مرة، لا تكون قد نزّلت الصورة بعد؛ بل تجلبها بشكل غير متزامن. وإن صرّحت بالأبعاد مقدّمًا، أمكن للمنصّة أن تحجز المساحة الصحيحة وترتّب البطاقة فورًا:

<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">

أهمِل هذه الوسوم فقد تظهر أول مشاركة للصفحة فارغة ريثما يلحق الزاحف بالركب. أضِفها فتكون البطاقة صحيحة من أول لصق. والوسم og:image:alt يصف الصورة لقارئات الشاشة على المنصّات التي تدعمه.

صيغة الملف وحجمه

استخدم JPG أو PNG. فكلاهما يُفكّ ترميزه بموثوقية عبر كل زاحف، وهذا هو جوهر og:image: عليها أن تُعرض على خوادم لا تتحكم فيها. أبقِ الملف دون 1 MB كقاعدة عامة، ودون 300 KB لـWhatsApp، فهو أكثر صرامةً من غيره. وإن كان تصديرك أثقل، مرّره عبر أداة ضغط الصور أونلاين لخفضه دون 1 MB دون إضرار ملحوظ بالجودة.

قد يغريك اللجوء إلى صيغة حديثة هنا، لكن هذا هو الموضع الوحيد الذي ينبغي أن تقاومه. فالصيغ الأحدث توفّر بايتات للمتصفحات، غير أن بعض الزواحف الاجتماعية تفكّ ترميزها بتفاوت، فقد تعود صورة og:image بصيغة WebP أو AVIF فارغةً على منصّة لا تستطيع قراءتها. تتناول مقارنة WebP مقابل AVIF مقابل JPEG الموازنات؛ أما لصور المشاركة تحديدًا، فالتزم بـJPG أو PNG. ولأن المنصّات تقتصّ الحواف بطرق مختلفة، أبقِ شعارك وعنوانك داخل منطقة آمنة موسّطة بمقاس 1080×600 كي لا يُقتطع شيء مهم.

قاعدة عنوان HTTPS المطلق

يجب أن يكون og:image وog:url عنواني URL كاملين بصيغة https://…، لا مسارين نسبيّين. فمسار مثل /cover.png يُحلّ جيّدًا في محرّرك وعلى صفحتك المنشورة، لكن الزاحف الذي يجلب عنوانك لا يملك أساسًا يحلّه بالنسبة إليه، فتعود المشاركة فارغة. كما يجب أن تكون الصورة قابلةً للوصول علنًا: فإن حجب robots.txt الزاحف أو كان الملف خلف مصادقة، بقيت المعاينة فارغة.

ويبقى قيد أخير وراء ذلك كله: الزواحف لا تشغّل JavaScript. فـFacebook وLinkedIn وWhatsApp وTelegram وDiscord تجلب HTML الخام وتقرأ ما فيه. والوسوم التي يحقنها إطار عمل من جهة العميل بعد تحميل الصفحة تكون غير مرئية لها، لذا يجب أن تعيش وسوم Open Graph في HTML مُصيَّر من الخادم أو ثابت.

بطاقات Twitter/X: وسم واحد ثم الرجوع إلى Open Graph

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

الوسم twitter:card هو وسم Twitter الوحيد المطلوب

لا يعرض X أي بطاقة إطلاقًا ما لم يكن twitter:card موجودًا، حتى لو كانت لديك مجموعة كاملة من وسوم Open Graph. إنه وسم Twitter Card الوحيد المطلوب:

<meta name="twitter:card" content="summary_large_image">

تحدّد القيمة التخطيط. فالقيمة summary_large_image تمنح بطاقة اللافتة الكبيرة المصمَّمة لصورة 1200×630. والقيمة summary تمنح بطاقة مدمجة بمربّع مصغّر صغير بجانب النص:

<meta name="twitter:card" content="summary">

انتبه إلى السمة name. فوسوم Twitter Card تستخدم name، لا property التي يستخدمها Open Graph.

كيف يرجع X إلى og:* للعنوان والوصف والصورة

بالنسبة إلى العنوان والوصف والصورة، يقرأ X وسومك og:title وog:description وog:image حين يغيب الوسم المقابل twitter:*. ولهذا نادرًا ما تكتب twitter:title أو twitter:image أصلًا. اضبط twitter:card، وأبقِ وسوم Open Graph نظيفة، فيجمّع X البطاقة منها.

فخّ twitter:image الفارغ

للقيمة البديلة حدّ حاد واحد: الوسم الفارغ يُحتسب موجودًا. فإن أصدرت twitter:image بقيمة فارغة، استخدم X تلك القيمة الفارغة بدل الرجوع إلى og:image، فتفقد بطاقتك صورتها.

<!-- Wrong: blocks the fallback and leaves the card imageless -->
<meta name="twitter:image" content="">

<!-- Right: omit the tag entirely and X reads og:image -->

القاعدة بسيطة: لا تُخرج أبدًا وسمًا اجتماعيًّا فارغًا. أسقطه حين لا تملك قيمة له.

خصوصيات Slack وDiscord

يقرأ Slack بطاقة Twitter Card أولًا، ثم Open Graph، ويمكنه إظهار حقلين إضافيّين عبر twitter:label وtwitter:data:

<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">

تظهر تلك بوصفها تفاصيل صغيرة موسومة تحت بطاقة Slack الموسّعة. ويقرأ Discord وسوم Open Graph ويضيف لمسةً لا يستخدمها أحد غيره: إذ يلوّن شريط التمييز الجانبي للبطاقة المضمّنة بلون theme-color صفحتك.

<meta name="theme-color" content="#5865F2">

كيف تُعرض معاينات الروابط على كل منصّة

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

المنصّةالوسوم التي تقرأهاالتخزين المؤقتسلوك ملحوظ
FacebookOpen Graph~30 يومًايتجاهل الصور دون 200×200؛ ويعرض مربّعًا صغيرًا دون 600×315
LinkedInOpen Graph~7 أيامامسح المعاينة القديمة عبر Post Inspector
X (Twitter)twitter:card + يرجع إلى og:*قصيرغياب twitter:card يعني لا بطاقة إطلاقًا
SlackTwitter Card ثم Open Graphلكل رسالةيعرض twitter:label/twitter:data حقولًا إضافية
DiscordOpen Graphلكل رسالةيستخدم theme-color لشريط تمييز البطاقة المضمّنة
WhatsAppog:title + og:imageلكل رسالةيريد البيانات الوصفية قرب الأعلى؛ أبقِ الصورة دون 300 KB
TelegramOpen Graphلكل رسالةيُعرض بموثوقية من JPEG أو PNG فقط
PinterestOpen Graph أو Schema.orgتحتاج Article Rich Pins إلى og:type=article

يفسّر عمود التخزين المؤقت مفاجأة شائعة: تصلح وسومك، وتعيد المشاركة، ويظل Facebook يعرض العنوان القديم أسابيع. فـFacebook يحتفظ ببيانات Open Graph نحو 30 يومًا، وLinkedIn نحو 7، فلن يظهر التعديل حتى تنتهي صلاحية المخزَّن مؤقتًا أو تفرض تحديثًا. وأدوات التصحيح أدناه تفعل ذلك تحديدًا.

أخطاء Open Graph الشائعة (وكيف تكتشفها)

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

مسار og:image نسبي

المسار النسبي يُعرض في متصفحك ويُعطَب عند المشاركة، لأن الزاحف لا يملك عنوان URL أساسيًّا يحلّه بالنسبة إليه.

<!-- Blank when shared -->
<meta property="og:image" content="/cover.png">

<!-- Renders everywhere -->
<meta property="og:image" content="https://example.com/cover.png">

غياب og:url أو عنوان أساسي (canonical) يخالفه

بدون og:url، تتبعثر أعداد المشاركات والتفاعل عبر صيغ العنوان المختلفة (بـwww وبدونه، وبمعامِلات التتبّع، وبشرطة مائلة ختامية). وجّه رابطك الأساسي وog:url معًا إلى العنوان الواحد نفسه كي تبقى الإشارات مجتمعة.

صورة صغيرة جدًّا أو نسبة عرض إلى ارتفاع خاطئة

الصورة دون 200×200 تُتجاهل تمامًا، والصورة البعيدة عن 1.91:1 تُقتصّ بطرق لم تخطّط لها. اشحن 1200×630 فيصبح التأطير متوقَّعًا على كل منصّة.

نسيان twitter:card

مجموعة كاملة من وسوم Open Graph لا تنتج مع ذلك أي بطاقة على X بدون twitter:card. وهذا أكثر الأسباب شيوعًا لأن يبدو الرابط رائعًا على LinkedIn ولا يعرض شيئًا على X.

وسوم مُصيَّرة من جهة العميل لا يراها الزاحف

إن حقن تطبيق أحادي الصفحة وسوم Open Graph بعد التحميل، فإن الزواحف التي لا تشغّل JavaScript لن تراها أبدًا. صيِّر الوسوم من جهة الخادم أو صيِّر HTML مسبقًا.

وضع charset بعد أول 1024 بايت

يجب أن يظهر تصريح <meta charset="utf-8"> ضمن أول 1024 بايت من المستند، وإلا تجاهله المتصفح وقد يشوّه المحارف غير ASCII في عنوانك ووصفك. ضعه أولًا داخل <head>:

<head>
  <meta charset="utf-8">
  <!-- everything else follows -->
</head>

كيف تختبر وسوم Open Graph وتصحّحها

لا تثق أبدًا بمعاينة لم تتحقّق منها مقابل عنوان URL منشور. ثلاث أدوات تغطّي المنصّات المهمة، وكلها تستطيع فرض تحديث للمخزَّن مؤقتًا.

Facebook Sharing Debugger

تجلب أداة Facebook Sharing Debugger عنوانك المنشور، وتُظهر بالضبط ما حلّله Facebook، وتسرد أي وسوم ناقصة أو مشوّهة. وأكثر أزرارها فائدةً زر «Scrape Again» الذي يحدّث مخزَّن Facebook المؤقت (~30 يومًا) عند الطلب، وهو أسرع طريقة لإظهار الإصلاح دون انتظار شهر.

LinkedIn Post Inspector

تؤدّي أداة LinkedIn Post Inspector المهمة نفسها لـLinkedIn. الصق عنوانًا فتعيد جلب الصفحة وتمسح مخزَّن LinkedIn المؤقت (~7 أيام)، فيظهر العنوان أو الصورة المحدَّثان في مشاركتك التالية بدل أيام لاحقة.

انتقل التحقّق من بطاقات X إلى بوابة المطوّرين

أوقفت X أداة Card Validator المستقلة. واعتبارًا من 2026، صار التحقّق من البطاقات داخل بوابة مطوّري X لا على عنوان URL عام، لذا تتحقّق معظم الفِرَق من بطاقات X بطريقة مختلفة: فلأن X يرجع إلى og:*، تؤكّد أداتا التصحيح Facebook وLinkedIn أصلًا الوسومَ التي سيقرأها X، وتسدّ أداة معاينة من طرف ثالث الفجوة الخاصة بتخطيط twitter:card نفسه.

عايِن قبل النشر

لا تستطيع أدوات التصحيح فحص إلا عنوانًا منشورًا فعلًا، وهي لحظة سيّئة لاكتشاف صورة فارغة. عايِن البطاقة وأنت ما زلت تحرّر. مولّد وسوم Open Graph وميتا يعرض معاينات Google وFacebook وX وLinkedIn وSlack وDiscord من القيم التي تكتبها، ويقرأ الأبعاد الحقيقية لـog:image في المتصفح ليكتشف نسبةً خاطئة، ويمكنه استيراد قسم <head> قائم كي تشخّص مشاركة معطوبة قبل شحنها.

قائمة تحقّق سريعة

إليك الحد الأدنى الذي يجب أن تحمله كل صفحة. انسخه، وبدّل قيمك، فتحصل على معاينة تُعرض في كل مكان:

<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">

<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">

<meta name="twitter:card" content="summary_large_image">

راجع الأساسيات قبل الشحن: عنوان og:image مطلق بصيغة HTTPS بمقاس 1200×630، وog:url مطابق لعنوانك الأساسي، وtwitter:card موجود، والوسوم مُصيَّرة من جهة الخادم. وإن أردت جولة أوفى على الأدوات التي تسرّع هذا العمل، فإن دليل أدوات المطوّرين الأساسية يجمع البقية. وحين تكون مستعدًّا لتوليد الكتلة كاملةً ومعاينتها دفعةً واحدة، فإن مولّد وسوم Open Graph وميتا يكتبها ويتحقّق منها ويعرض كل بطاقة قبل النشر.

الأسئلة الشائعة

ما الفرق بين وسوم Open Graph وTwitter Card؟

Open Graph بروتوكول متعدّد المنصّات تقرأه Facebook وLinkedIn وSlack وغيرها؛ أما وسوم Twitter Card (twitter:*) فخاصة بـX. ويرجع X إلى وسوم OG لديك حين يغيب الوسم المقابل twitter:*، لذا تحتاج عادةً إلى OG إضافةً إلى قيمة twitter:card واحدة.

هل تؤثّر وسوم Open Graph في ترتيب بحث Google؟

لا. فوسوم Open Graph وTwitter Card لا تؤثّر في ترتيب Google؛ بل تتحكم في شكل الروابط عند مشاركتها، وتقود حركة المرور الاجتماعية. ووسم <title> الكلاسيكي والوسوم الأساسية (canonical) تهمّ لتحسين محركات البحث؛ ووصف meta يشكّل مقتطفك ونسبة النقر، لكنه ليس عامل ترتيب مباشرًا.

أين توضع وسوم Open Graph في HTML؟

داخل عنصر <head>، في HTML المُصيَّر من الخادم أو الثابت. فزواحف Facebook وLinkedIn وWhatsApp وTelegram لا تنفّذ JavaScript، لذا لن تُرى الوسوم المحقونة من جهة العميل. ضع <meta charset> أولًا كي يقع ضمن أول 1024 بايت.

هل تصلح صورة واحدة لـFacebook وX وLinkedIn؟

نعم. صورة واحدة بمقاس 1200×630 (1.91:1) تُعرض بشكل صحيح على Facebook وLinkedIn وSlack وDiscord وبطاقة summary_large_image في X. قدّمها عبر HTTPS على عنوان عام، وصرّح بـog:image:width/og:image:height كي لا تكون أول مشاركة فارغة.

لماذا لا تعرض معاينة رابطي أي صورة؟

الأسباب الشائعة: مسار og:image نسبي بدل عنوان HTTPS مطلق، أو صورة دون 200×200، أو غياب twitter:card على X، أو وسوم يحقنها JavaScript لا يستطيع الزاحف تشغيله. أعِد الجلب عبر Facebook Sharing Debugger بعد الإصلاح.

هل تحتاج كل الصفحات إلى وسوم Open Graph خاصة بها؟

من الأمثل نعم؛ فينبغي أن تحمل كل صفحة og:title وog:description وog:image وعنوانًا أساسيًّا og:url يعكس تلك الصفحة بعينها، كي تعرض الروابط المشاركة معاينات وثيقة الصلة. والقيمة البديلة على مستوى الموقع كله أفضل من لا شيء، لكن الوسوم الخاصة بكل صفحة تكسب نقرات اجتماعية أكثر بكثير.

الوسوم: Open Graph Meta Tags SEO Social Media Web Development

مقالات ذات صلة

عرض جميع المقالات