وسوم Open Graph: كيف تضبط og:image وتحصل على معاينات روابط نظيفة

الجواب المختصر: وسوم Open Graph هي وسوم meta في رأس الصفحة (head) تخبر الشبكات الاجتماعية وتطبيقات المراسلة أي عنوان ووصف وصورة تعرضها حين يشارك أحدهم رابطك. يشترط البروتوكول أربعة منها (og:title وog:type وog:image وog:url)، ويستحسن إضافة og:description. استخدم صورة لا تقل عن ‎1200×630‎ بكسل وبحجم أقل من 8 ميغابايت، واكتب عنوانها الكامل بـ https، وضع كل الوسوم في HTML الذي يرسله خادمك لا في JavaScript تعمل لاحقًا. ولم يثبت أن لها أثرًا في ترتيب النتائج: فهي تتحكم في شكل الرابط عند مشاركته.

ما هي وسوم Open Graph وما وظيفتها؟

Open Graph بروتوكول يتيح لصفحة ويب أن تصف نفسها بوصفها كائنًا له عنوان ونوع وصورة وعنوان URL. وبحسب ogp.me فقد نشأ البروتوكول أصلًا في Facebook. وتستخدمه بإضافة وسوم meta إلى head الصفحة. وحين يلصق أحدهم رابطك في منشور أو محادثة، تجلب المنصة الصفحة وتقرأ هذه الوسوم وتبني منها بطاقة المعاينة. وبلا هذه الوسوم تضطر المنصة إلى التخمين: أي عنوان تعرض، وأي وصف، وأي صورة؟

يسمي البروتوكول أربع خصائص مطلوبة لكل صفحة، وخاصية خامسة اختيارية لكنها موصى بها عمومًا:

وقيمة og:type ليست مجرد تسمية. فبحسب ogp.me قد يجر النوع الذي تختاره خصائص إضافية. ففي النوع article يذكر البروتوكول حقولًا مثل article:published_time وarticle:modified_time. ومن الوسوم الاختيارية الأخرى og:site_name (اسم الموقع كله) وog:locale (لغة الوسوم، والافتراضي en_US).

الحد الأدنى من HTML لوسوم Open Graph

هذه مجموعة كاملة يمكنك تعديلها. (يضبط المثال في ogp.me أيضًا سمة prefix على عنصر html، لكن المنصات الكبرى تقرأ الوسوم من دونها.) مكانها داخل العنصر head، بجانب وسم title المعتاد:

<head>
  <title>دليل ضبط صورة المشاركة</title>
  <meta property="og:title" content="دليل ضبط صورة المشاركة">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-tags">
  <meta property="og:image" content="https://example.com/images/open-graph-tags.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="بطاقة معاينة رابط فيها صورة وعنوان ووصف">
  <meta property="og:description" content="الوسوم الأربعة المطلوبة وقواعد حجم الصورة وطريقة اختبار معاينة الرابط.">
  <meta property="og:site_name" content="مثال">
</head>

بضع ملاحظات على التفاصيل:

• og:url معرف دائم. يصفه ogp.me بأنه العنوان الأساسي للكائن. استخدم العنوان نفسه الموجود في رابط canonical، من دون معاملات التتبع.
• اكتب عنوان الصورة كاملًا. كل الأمثلة في ogp.me تستخدم عنوانًا كاملًا. أما المسار النسبي مثل ‎/images/card.png‎ فيتوقف على طريقة كل زاحف في تحويله، فلا تعتمد عليه.
• العرض والارتفاع يساعدان. تقول وثائق Facebook إن هذين الوسمين يتيحان لزاحفه عرض الصورة فورًا، دون الحاجة إلى تنزيلها ومعالجتها أولًا.
• أضف og:image:alt. يذكر ogp.me أن الصفحة التي تحدد صورة ينبغي أن تحدد أيضًا وصفًا لما فيها (وصفًا لا تعليقًا).

قواعد og:image: الحجم والملف والعنوان

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

• أصغر حجم مسموح به هو 200×200 بكسل.
• يجب ألا يتجاوز الملف 8 ميغابايت.
• لأفضل عرض على الأجهزة عالية الدقة استخدم ‎1200×630‎ بكسل على الأقل.
• وأقل ما تحتاجه ‎600×315‎ بكسل حتى تعرض منشورات الروابط صورة كبيرة. الصور الأصغر تظهر مع ذلك، لكن أصغر بكثير.
• اجعل نسبة العرض إلى الارتفاع أقرب ما يمكن إلى 1.91:1 لتظهر الصورة كاملة دون قص. المقاس ‎1200×630‎ يعطي نحو 1.905:1، ولذلك فهو الخيار المعتاد.
• لا يقبل الزاحف إلا الترميزين gzip وdeflate، فتأكد أن خادمك أو CDN يرد بأحدهما.

هذه قواعد Facebook. وتقرأ التطبيقات الأخرى وتطبيقات المراسلة الوسوم نفسها، لكن هذا المقال لا يوثق حدودها، فاختبر في الأماكن التي تهمك. للمقارنة: تستخدم صفحات مدونة SEOgrinder صورة معاينة بمقاس ‎1200×630‎ بكسل.

وثمة شرطان آخران يتعلقان بالوصول لا بالحجم. يجب أن تكون الصورة عامة: لا تسجيل دخول أمامها ولا قاعدة في robots.txt تحجب المجلد الذي توجد فيه. وإذا لم يستطع الزاحف جلب الملف بقيت المعاينة بلا صورة، مهما كان الملف جيدًا.

امنح كل صفحة وسوم Open Graph خاصة بها

بما أن og:url هو المعرف الدائم للكائن، فلا بد أن يختلف في كل صفحة. وينطبق الأمر نفسه على الباقي:

• og:title يسمي ما تدور حوله هذه الصفحة بالذات، لا الموقع كله.
• og:description يلخص هذه الصفحة في جملة أو جملتين.
• og:image ينبغي أن تعرض ما يناسب الصفحة. واحتفظ بصورة افتراضية للصفحات التي لا صورة خاصة بها.
• og:type قد يختلف أيضًا: website للصفحة الرئيسية، وarticle لمقال في مدونة أو خبر.

ومهما كانت تقنيتك، أنشئ الوسوم من بيانات كل صفحة بدل كتابتها يدويًا. مثال صغير بلغة Node:

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(page) {
  return [
    ['og:title', page.title],
    ['og:type', page.type || 'website'],
    ['og:url', `https://example.com${page.path}`],
    ['og:image', page.image || 'https://example.com/images/default-card.png'],
    ['og:description', page.description],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

الدالة esc مهمة: فالعنوان الذي يحتوي علامة اقتباس سينهي السمة قبل أوانها ويكسر الوسم. وإذا كنت تستخدم نظام إدارة محتوى فابحث عن الحقل الذي يحدد صورة المشاركة لكل صفحة. والنتيجة التي تفحصها واحدة: الوسوم في HTML الذي يرسله الخادم.

ضع وسوم Open Graph في HTML الذي يرسله خادمك

ترسل مواقع حديثة كثيرة هيكل HTML شبه فارغ وتترك JavaScript تبني الصفحة في المتصفح. ويتعامل Google مع ذلك: فبحسب وثائق JavaScript يجري البحث تصيير الصفحات بإصدار حديث دائم التحديث من Chromium. لكن الصفحة نفسها تقول أيضًا إن التصيير على الخادم أو التصيير المسبق ما زال فكرة جيدة، لأن الروبوتات لا تنفذ كلها JavaScript.

وبخصوص زواحف الذكاء الاصطناعي هناك قياس: ففي ديسمبر 2024 وجد تحليل أجرته Vercel وMERJ أن أيًا من زواحف الذكاء الاصطناعي الكبرى التي شملها لم ينفذ JavaScript. هذه لقطة من عام 2024، ولا يوجد ما يثبتها مجددًا منذ ذلك الحين. وبالنسبة إلى معاينات الروابط تنتج قاعدة آمنة من المنطق نفسه: إذا لم تظهر وسومك إلا بعد أن يعمل نص برمجي، فإن زاحفًا لا ينفذ النصوص البرمجية لن يراها أبدًا. ويبلغ SEOgrinder عن هذه الصفحات بعنوان «الصفحة لا تُبنى إلا داخل المتصفح»، مع ملاحظة أن كثيرًا من زواحف الذكاء الاصطناعي لا ينفذ JavaScript فيرى صفحة شبه فارغة.

يمكنك اختبار ذلك في عشر ثوان:

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

إذا عادت الوسوم فهي موجودة في HTML كما يرسله الخادم. وإذا لم يعد شيء بينما تظهر الوسوم في أدوات المطور بالمتصفح، فإن نصًا برمجيًا يضيفها متأخرًا. استخدم «عرض مصدر الصفحة» في المتصفح للاختبار نفسه؛ فهو يعرض HTML الذي يرسله الخادم، لا الصفحة الحية التي تعرضها أدوات المطور. والحل أن تعتمد التصيير على الخادم أو توليد الصفحات مسبقًا، فتكون العناوين والنص والوسوم في الرد الأول.

كيف تختبر معاينة الرابط

تعرض أداة Sharing Debugger من Facebook أي الوسوم قرأها الزاحف وما فيها من أخطاء. وهي تطلب تسجيل الدخول إلى Facebook. وبحسب وثائق الصور لدى Facebook فإن تمرير عنوان عبرها يجلب البيانات الوصفية مسبقًا أيضًا، وهذا مهم بسبب التخزين المؤقت:

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

قبل أن تنشر، راجع هذه القائمة:

1. اجلب الصفحة بـ curl وتأكد أن الوسوم الخمسة موجودة في الرد الأول.
2. افتح عنوان الصورة وحده. يجب أن تفتح الصورة دون تسجيل دخول وبرمز الحالة 200.
3. افحص المقاس: ‎1200×630‎ بكسل على الأقل، وأقل من 8 ميغابايت.
4. مرر الصفحة عبر Sharing Debugger واقرأ الأخطاء والتحذيرات.
5. كرر ذلك لصفحة واحدة من كل نوع: الصفحة الرئيسية، ومقال، ومنتج.

كيف يفحص SEOgrinder وسوم Open Graph

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

• «معاينة المشاركة ناقصة» تذكر ما ينقص من الصورة والعنوان والوصف.
• «صورة المعاينة لا تُحمَّل» تظهر حين ترد الصورة برمز خطأ. وتذكر النتيجة الرمز وأسبابه المعتادة: عنوان خاطئ، أو تسجيل دخول أمام الملف، أو حجب في robots.txt. وبحسب النتيجة تظهر الروابط عندئذ في LinkedIn وWhatsApp وX دون صورة.
• «صورة المعاينة صغيرة جدًا» تظهر عند أقل من ‎600×315‎ بكسل (يعرضها Facebook حينئذ مصغرة صغيرة فقط)، وتبلغ عن الصور الأقل من الحد الأدنى 200×200 بشكل منفصل.
• «الصفحة لا تُبنى إلا داخل المتصفح» هي النتيجة الخاصة بالصفحات التي تبني واجهتها في المتصفح.

لا يستطيع SEOgrinder أن يريك كيف ترسم كل شبكة البطاقة. إنه يفحص الوسوم والملف، وهذا هو الجزء الذي في يدك. وللنظرة الأخيرة استخدم Sharing Debugger.

الأخطاء الشائعة

• مسار صورة نسبي. استخدم العنوان الكامل بـ ‎https://‎.
• صورة لا يمكن جلبها. تسجيل دخول أو قاعدة جدار حماية أو سطر في robots.txt على مجلد الصور يترك المعاينة بلا صورة.
• صورة صغيرة جدًا. تظهر صغيرة تحت ‎600×315‎ بكسل، وقد لا تظهر إطلاقًا تحت 200×200.
• لا وصف. og:description اختياري في البروتوكول، لكن المنصة تخمن من دونه.
• الوسوم نفسها في كل صفحة. عندئذ يبدو كل مقال عند مشاركته مثل الصفحة الرئيسية، ولا يعود og:url يميز صفحة عن أخرى.
• استبدال الصورة تحت العنوان نفسه. يخزن Facebook مؤقتًا بحسب عنوان URL، فانشر الملف الجديد باسم جديد.
• وسوم لا توجد إلا بعد تشغيل JavaScript. ضعها في HTML الذي يرسله الخادم.
• علامات اقتباس بلا ترميز (escape) داخل القيم. إنها تنهي السمة وتقطع الوسم.
• عنوان تتبع في og:url. ينبغي أن يحمل الوسم العنوان الأساسي (canonical).

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

هل وسوم Open Graph عامل ترتيب؟

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

ما مقاس og:image الذي أستخدمه؟

‎1200×630‎ بكسل، بنسبة عرض إلى ارتفاع قريبة من 1.91:1 وبحجم أقل من 8 ميغابايت. هذا يوافق توصية Facebook، وهو مقاس صورة المعاينة في صفحات مدونة SEOgrinder.

هل أحتاج إلى og:description في كل صفحة؟

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

لماذا ما زالت صورتي القديمة تظهر؟

يخزن Facebook الصور مؤقتًا بحسب عنوانها. انشر الصورة الجديدة تحت عنوان URL جديد، ثم مرر الصفحة عبر Sharing Debugger. لا يجري تحديث المشاركات القديمة تلقائيًا.

وماذا عن وسم twitter:card في المعاينة؟

هذا الوسم ليس جزءًا من بروتوكول Open Graph. ويقترح تلميح الإصلاح في SEOgrinder للمعاينة الناقصة أيضًا ضبط twitter:card على summary_large_image. هذا المقال لا يتناول قواعد X، فراجعها في وثائق X نفسها.

هل يستطيع وكيل برمجة أن يضيف الوسوم عني؟

يستطيع الجزء الآلي: كتابة الوسوم في قوالبك وفحصها بـ curl. ويصوغ تسليم إلى الذكاء الاصطناعي في التقرير النتائج في شكل أمر عمل بصيغة Markdown، مع شرط «تكتمل عندما» قابل للتحقق لكل مهمة. أما اختيار الصورة وصياغة النص فيبقيان عليك.

خطوتك التالية

ابدأ الفحص المجاني على صفحتك الرئيسية وانظر في معاينة الشبكات الاجتماعية وفي النتائج المذكورة أعلاه. أصلحها بالترتيب، وانشر صورة جديدة تحت عنوان جديد إن اضطررت إلى استبدال صورة، ومرر الصفحة عبر Sharing Debugger. ثم افحص من جديد لتتأكد أن المعاينة صارت كاملة.