OpenGraph وog:title وog:description وog:image
التحكم في كيفية ظهور صفحتكم عند مشاركتها على الشبكات الاجتماعية
OpenGraph وog:title وog:description وog:image درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما هو OpenGraph؟
OpenGraph هو بروتوكول للبيانات الوصفية قدّمته Facebook كي تتمكن أي صفحة من وصف شكلها عند مشاركتها على منصة اجتماعية. توجد العلامات داخل <head> على شكل أزواج <meta property="og:..." content="...">، وتستخرجها جميع شبكات التواصل الاجتماعي الكبرى.
العلامات الأساسية
العلامات الأربع المطلوبة عمليًا هي og:title وog:description وog:image وog:url. يؤدي فقدان أي منها إلى بطاقة مشاركة غير جذابة، أو — ما هو أسوأ — إلى بطاقة بلا معاينة على الإطلاق، وهي بطاقات يميل المستخدمون إلى تجاوزها.
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
هو العنوان الرئيسي في بطاقة المشاركة. أبقه دون نحو 60 حرفًا كي يتسع في سطر واحد ولا تختصره الشبكة الاجتماعية. اجعله متوافقًا مع <title> الصفحة، مع إمكانية تحسينه لزيادة النقرات.
og:description
ملخص من جملة أو جملتين يظهر أسفل العنوان. استهدف 120 إلى 160 حرفًا — بطول يكفي لجذب الاهتمام وقصر يكفي لعرضه كاملًا على كل منصة. تجنّب العناوين المضللة؛ فالأوصاف الصادقة تحقق تفاعلًا أكبر على المدى الطويل.
og:image
هي الصورة الرئيسية. استخدم صورة JPG أو PNG بأبعاد 1200x630 بكسل وأقل من نحو 5 ميغابايت. استخدم دائمًا عنوان URL مطلقًا — إذ تتعطل عناوين URL النسبية لأن أداة الاستخراج لا تعرف مفهوم "هذه الصفحة". وفّر og:image:width وog:image:height لتجاوز طلب إضافي أثناء إنشاء المعاينة.
og:url
هو عنوان URL الأساسي للصفحة. اضبطه حتى عندما تحتوي الصفحة على <link rel="canonical"> بالفعل — إذ تفضّل بعض أدوات الاستخراج علامة OG. أزل معاملات التتبع حتى لا تتكاثر عناوين URL المشتركة إلى صفحات "مختلفة" عديدة في قاعدة بيانات المنصة الاجتماعية.
og:type
يخبر المنصة بنوع المحتوى: "website" أو "article" أو "product" أو "video.movie" أو "book" وغير ذلك. يُعد Article الخيار الأكثر شيوعًا لمقالات المدونات، كما يفعّل علامات إضافية مثل article:published_time وarticle:author.
og:locale
هو الإعداد المحلي وفق BCP-47 للمحتوى، مثل "en_US" و"tr_TR". وبالاقتران مع og:locale:alternate، يخبر الشبكة باللغات الأخرى المتاحة للصفحة، وهي الطريقة التي تقرر بها Facebook ما إذا كانت ستترجم المعاينة.
og:site_name
هو اسم الموقع الناشر الظاهر للمستخدم. تعرضه بعض الشبكات كعنوان فرعي في البطاقة. اجعله قصيرًا ومتسقًا في كل صفحة كي تظهر العلامة التجارية بالطريقة نفسها بغض النظر عن المقالة التي تتم مشاركتها.
اختبار البطاقات
استخدم Sharing Debugger من Facebook وPost Inspector من LinkedIn لجلب الصفحة بالطريقة التي تراها بها أداة الاستخراج، وعرض العلامات التي جرى تحليلها، وتحديث المعاينة المخزّنة مؤقتًا. بعد نشر og:image جديدة، يجب إعادة الاستخراج، وإلا فسيرى المستخدمون الصورة القديمة لأيام.
الأخطاء الشائعة
العلامات المعروضة من الخادم إلزامية — إذ لا تنفّذ معظم أدوات الاستخراج JavaScript، ولذلك تكون علامات OG التي يحقنها React على العميل غير مرئية لها. اعرضها في HTML الأولي، ويفضّل باستخدام SSR أو SSG، وإلا فستظل بطاقات المشاركة عامة إلى الأبد.
اختبار المعرفة
لماذا يجب أن يستخدم og:image عنوان URL مطلقًا بدلًا من مسار نسبي؟
الخلاصة
تتحكم علامات OpenGraph (og:title وog:description وog:image مع عنوان URL مطلق وog:url وog:type وog:locale وog:site_name) في شكل كل صفحة عند مشاركتها. اعرضها من جهة الخادم، وأبقِ العناوين دون 60 حرفًا والأوصاف في حدود 150 حرفًا، واستخدم صورًا بأبعاد 1200x630، واختبر باستخدام Facebook Sharing Debugger قبل الإطلاق.
الأسئلة الشائعة
هل درس «OpenGraph وog:title وog:description وog:image» مجاني؟
نعم — نص درس «OpenGraph وog:title وog:description وog:image» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «OpenGraph وog:title وog:description وog:image»؟
التحكم في كيفية ظهور صفحتكم عند مشاركتها على الشبكات الاجتماعية تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «OpenGraph وog:title وog:description وog:image»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- OpenGraph وog:title وog:description وog:image
- وسوم Twitter Card الوصفية
- أساسيات البيانات المهيكلة JSON-LD
- Hreflang للصفحات الدولية