🍿 CornPop

Open Graph Protocol

11 min read

السوشيال ميديا تعتبر أداة ممتازة عشان تشارك محتوى مع صحابك وعيلتك، وحتى مع زمايلك في الشغل أو شركائك. لما بتشارك أي لينك، معظم شبكات السوشيال ميديا بتعمل زي preview (معاينة) للينك ده. الهدف من الـ preview ده هو إنها تعرف الناس اللينك ده بتاع إيه قبل ما يدوسوا عليه.

دلوقتي وانت بتتعلم أكتر عن الـ front end web development، أكيد بتسأل نفسك: هما إزاي بيعملوا الـ previews دي؟ في المقال ده، هنعرف إزاي الـ Meta Tages بتساعد صفحات الويب إنها تعمل previews لصفحات تانية، وهنعرف أكتر عن حاجة اسمها Social Media Cards.

لما تستخدم الـ Meta tags عشان تتحكم في المعلومات اللي بتظهر لليوزرز، ممكن تجيب clicks أكتر لما تشارك المواقع بتاعتك. بس خد بالك، الـ Meta tags اللي الـ web developers بيستخدموها للغرض ده مختلفة عن الـ SEO Meta tags التقليدية اللي اتكلمنا عنها قبل كده.

الـ SEO Meta tags التقليدية هدفها الأساسي هو تحسين ظهورك في نتايج البحث (search results)، مش في اللينكات اللي بتتشير بشكل مباشر على السوشيال ميديا.

إيه هو الـ Open Graph Protocol؟ (أساس كروت السوشيال ميديا)

زمان، مع النمو السريع لفيسبوك، ملايين الناس بقت بتشارك آلاف اللينكات كل يوم. عشان يحسنوا الـ user experience، فيسبوك كانوا محتاجين طريقة يعرضوا بيها معلومات عن الموقع قبل ما اليوزر يدوس على اللينك.

المشكلة قبل الـ OGP: قبل ما فيسبوك يخترع الـ Open Graph Protocol (OGP)، الـ web crawlers (البرامج اللي بتزحف على الويب) بتاعة محركات البحث ومواقع السوشيال ميديا كانت بتستخدم طرق تحليل داخلية (internal heuristics) للموقع عشان تخمّن أحسن تخمين ممكن. التخمين ده كان بخصوص العنوان (title)، والوصف (description)، والصور المصغرة (preview images) اللي المفروض تستخدمها للمحتوى اللي هيتعرض كـ preview للينك. وده كان بيخلي السوشيال ميديا تلاقي صعوبة تفهم البوست أو المعلومات اللي في الـ URL اللي اتشير. وحتى النهاردة، ساعات لما بتفتح لينك لموقع معندهوش OGP tags مظبوطة، الـ preview اللي بيتعمل بيكون صورة مقاساتها مش مظبوطة (out-of-scale) أو صورة عشوائية متاخدة من أي حتة في الصفحة.

الحل: Open Graph Protocol عشان يحلوا المشكلة دي، فيسبوك عملوا حاجة اسمها Open Graph Protocol سنة 2010. الـ Open Graph Protocol ده عبارة عن مجموعة قواعد Metadata. القواعد دي بتسمح لصفحات الويب إنها “توصف نفسها” لشبكات السوشيال ميديا بشكل موحد وواضح. هنا بقى بيجي دور الـ meta tags عشان تساعد اليوزر (end-user) إنه يتحكم أكتر في شكل المحتوى بتاعه لما يتشارك.

فيه خيارات Metadata كتير متاحة جوه الـ protocol ده. خلينا نشوف بتتكتب إزاي.

طريقة كتابة Meta Tags الـ Open Graph

عرفنا قبل كده إن الـ Meta tags العادية بتتكتب جوه الـ <head> بتاع ملف الـ HTML. الـ Open Graph Protocol برضه بيستخدم Meta tags بتتحط جوه الـ <head>، بس فيه اختلاف بسيط في الـ attributes:

  1. الـ property Attribute: بدل ما نستخدم الـ name attribute زي الـ meta tags العادية، الـ Open Graph Protocol بيستخدم property attribute عشان يحدد اسم الـ Metadata.
  2. الـ content Attribute: زي الـ meta tags العادية، بنستخدم الـ content attribute عشان نحدد قيمة الـ Metadata دي.
  3. البداية og:: كل property في الـ Open Graph Protocol بيبدأ بـ og: (اختصار لـ Open Graph). ده زي علامة مميزة عشان نعرف إن الـ tag ده تبع الـ Open Graph Protocol.

مثال توضيحي للفرق:

<!-- Meta Tag عادي للـ Description -->
<meta name="description" content="ده وصف الصفحة العادي لمحركات البحث">
 
<!-- Open Graph Meta Tag للـ Title -->
<meta property="og:title" content="ده عنوان الصفحة اللي هيظهر على السوشيال ميديا">

الـ Properties الأساسية في الـ Open Graph (لازم تحطها عشان الكارت يظهر صح)

الـ Open Graph Protocol بيشترط إنك لازم دايمًا تحط أربعة properties أساسية في أي صفحة ويب عايزها تظهر كويس لما تتشارك. الأربعة دول هما اللي بيكونوا الـ Social Media Card الأساسي:

  1. الـ og:title:
    • ده بيحدد عنوان الصفحة (الـ title) اللي هيظهر في الـ preview على السوشيال ميديا.
    <meta property="og:title" content="عنوان جذاب للمقال بتاعك هنا">
  2. الـ og:type:
    • ده بيحدد نوع المحتوى بتاع الصفحة بتاعتك.
    • ممكن يكون النوع ده website, video.movie, article, book, profile، وهكذا.
    • حسب النوع اللي بتحدده هنا، ممكن تحتاج تحط properties تانية زيادة (هنعرف عنها أكتر بعدين).
    <!-- لو صفحة مقال -->
<meta property="og:type" content="article">
<!-- لو صفحة رئيسية لموقع -->
<meta property="og:type" content="website">
  3. الـ og:url:
    • ده بيحدد الـ URL (عنوان الويب) الأساسي والدائم (canonical URL) للصفحة بتاعتك.
    • ده اللينك اللي السوشيال ميديا المفروض تستخدمه وتنسب ليه المشاركات والـ likes للصفحة دي.
    <meta property="og:url" content="https://www.yourwebsite.com/page-url">
  4. الـ og:image:
    • ده بيحدد الـ URL بتاع الصورة اللي المفروض تظهر في الـ preview لما اللينك بتاعك يتشارك.
    • الصورة دي مهمة جدًا عشان تجذب عين اليوزر. يُفضل تكون بأبعاد مناسبة (زي 1200x630 pixels لفيسبوك).
    <meta property="og:image" content="https://www.yourwebsite.com/images/preview-image.jpg">

إزاي بيشتغلوا مع بعض؟

لما تحط الأربعة properties دول مع بعض، منصات السوشيال ميديا بتقدر تستخدمهم عشان تعمل preview كويس للينك بتاعك (اللي هو الـ Social Media Card). يعني مثلًا، لو شاركت بوست من مدونة:

  • العنوان اللي هيظهر هو اللي في og:title.
  • اللينك اللي هيدوسوا عليه هو اللي في og:url.
  • الصورة اللي هتظهر جنب العنوان هي اللي في og:image.
  • والـ og:type بيساعد السوشيال ميديا تفهم طبيعة المحتوى ده وتظهره بالشكل المناسب ليه.

Properties optional for Open Graph

غير الأربعة الأساسيين دول، فيه كذا property تانية اختيارية ممكن تضيفها عشان تدي معلومات أكتر وتحسن شكل الـ preview. خلينا نشوف أشهر تلاتة منهم:

  • الـ og:description:
    • ده بيدي وصف مختصر لصفحة الويب (شبه الـ meta description العادي).
    • الوصف ده غالبًا بيظهر تحت العنوان في الـ preview، وبيشجع الناس أكتر إنها تدوس.
    <meta property="og:description" content="هنا تكتب وصف مختصر جذاب للمحتوى بتاعك عشان تشجع الناس تدوس على اللينك.">
  • الـ og:locale:
    • ده بيوصف اللغة والمنطقة الجغرافية (territory) بتاعة محتوى الصفحة.
    • بيتكتب بالشكل ده: language_TERRITORY (الحروف الأولى small والتانية capital).
    • مثال: en_US معناها إنجليزي (أمريكا)، ar_EG معناها عربي (مصر). ده بيساعد السوشيال ميديا تعرض المحتوى للجمهور الصح.
    <meta property="og:locale" content="ar_EG">
  • og:site_name:
    • ده بيوصف اسم الموقع ككل (overall website) اللي الصفحة دي جزء منه.
    • ده مفيد عشان اليوزر يعرف هو بيدوس على لينك من أنهي موقع، وبيبني ثقة في الـ brand.
    <meta property="og:site_name" content="اسم الموقع بتاعك">

ليه بنحتاج كروت السوشيال ميديا (Social Media Cards)؟

مع زيادة عدد المستخدمين وزيادة استخدام الـ Internet marketing، بقى جذب انتباه اليوزر (user attention) هو العملة الحقيقية في عالم الويب. بيقولوا “الصورة بألف كلمة”، والإنترنت دليل حي على كده: الكلمتين اللي بيتكتبوا (caption) والصورة اللي بتتحط ممكن يخلوا اليوزرز يدخلوا موقعك أو يبعدوا عنه خالص. الـ Social Media Card هي الواجهة بتاعتك على السوشيال ميديا.

الصورة الجاية دي مثال لـ social media card للكورس ده:

العنوان (title) والوصف (description) اللي بيتشيروا مع الـ URL المفروض يلخصوا محتويات صفحة الويب اللي اللينك بيودي عليها.

  • ساعات، ممكن تكون المعلومات دي عامة عن الموقع كله (زي لينك الصفحة الرئيسية).
  • وفي أوقات تانية، ممكن (وده الأفضل) تظبط الـ social media (SM) card مخصوص لصفحة معينة جوه الموقع إنت بتشيرها عشان تعكس محتواها بالظبط.

الصورة دي مثال لـ social card للكورس ده لما بيتشير على السوشيال ميديا:

أهمية تاج الـ og:type في كروت السوشيال ميديا

تاج الـ type (اللي بنكتبه كـ og:type) ده مهم جدًا في الـ SM cards. هو مش بس بيقول نوع الصفحة (زي article أو website)، لأ ده كمان بيساعد يوصف تفاصيل اللينك بشكل أدق وبيفتح الباب لـ properties تانية خاصة بالنوع ده. الميزة هنا إنه بيسمحلك تضيف metadata تفصيلية أكتر لأنواع معينة، وده بيخلي الـ preview أغنى بالمعلومات.

  • مثال: في حالة النوع music.song (أغنية)، ممكن تضيف تفاصيل عن:
    • اسم الألبوم (music:album)
    • مدة الأغنية (music:duration)
    • المغني (music:musician)
    • أو أي معلومات تانية عنها.
  • مثال تاني: لو النوع video.movie، ممكن تضيف الممثلين والمخرج وتقييم الفيلم.

بالنسبة لليوزر العادي اللي بيعمل scroll بسرعة على السوشيال ميديا، اللينك اللي بيظهر مع الـ image preview (يعني الـ Social Media Card بتاعك) بيكون قدامه فرصة واحدة ولحظة واحدة بس عشان يدي انطباع كويس ويجذب الانتباه. في الحالات دي، دور الـ social media cards اللي متظبطة صح بيبقى مهم جدًا.

كروت السوشيال ميديا وتأثيرها على الـ SEO

الإنترنت النهاردة عبارة عن شبكة مترابطة (interconnected graph). الشبكة دي في داخلها عبارة عن نسيج من لينكات الـ URL، والـ web crawlers، وأدوات الـ search engine optimization (SEO).

مع بعض، صورة (image) وعنوان (title) صفحة الويب بيبقوا زي واجهة المحل (store front) اللي بتدعي اليوزر يدخل ويتفرج. لكن الـ social media cards كمان بتلعب دور مهم (بشكل غير مباشر) في تحسين الترتيب (rankings) عند الـ web crawlers اللي بتستخدمها محركات البحث.

إزاي؟

  1. الـ Metadata واضحة: الكروت دي بتدي للـ crawlers معلومات منظمة وواضحة (metadata دقيقة) عن محتوى الصفحة، وده بيساعد محركات البحث تفهم الصفحة بشكل أحسن وفي النهاية ممكن يساعد في ترتيبها (rank websites).
  2. الـ Social Signals: المشاركات والـ likes والتعليقات اللي بتحصل على البوستات اللي فيها الـ Social Media Cards بتاعتك على السوشيال ميديا بتعتبر social signals. محركات البحث (زي جوجل) ممكن تاخد الـ signals دي في اعتبارها كدليل على جودة وشعبية المحتوى بتاعك.
  3. الـ Traffic Tracking: الكروت دي بتساعد في تتبع مصدر الزيارات (track traffic) اللي جاية لموقعك من منصات السوشيال ميديا المختلفة بشكل أفضل (باستخدام أدوات زي Google Analytics مع UTM parameters مثلًا).

انتشار البروتوكول ونصايح إضافية

مع الوقت، ونجاح تطبيق الـ OGP، شركات سوشيال ميديا عملاقة تانية (ومنهم شركات تابعة لـ Meta نفسها زي انستجرام وواتساب) بدأت تستخدم الـ protocol ده عشان تحسن الـ user experience. بعض المنصات دي (زي تويتر) بقى ليها الـ meta tags الخاصة بيها اللي بتبدأ بحروف مختلفة (prefix) بدل og: (زي twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description, twitter:image). الأفضل غالبًا إنك تضيف تاجات Open Graph الأساسية وتاجات Twitter Cards كمان عشان تضمن أحسن شكل على كل المنصات.

نصايح:

  • الأفضل إنك تلتزم بالتاجات المطلوبة والأساسية في الـ social media cards (الأربعة اللي قلنا عليهم og:title, og:type, og:image, og:url بالإضافة لـ og:description و og:site_name إن أمكن).
  • لكن الـ developer ممكن برضه يستخدم تاجات إضافية (auxiliary tags) ممكن تكون مناسبة ومفيدة حسب نوع المحتوى.
    • مثال: استخدام تاج الفيديو (og:video و og:video:secure_url و og:video:type و og:video:width و og:video:height) بيساعد إن الفيديو يشتغل جوه البوست نفسه (play in line) لما اللينك بيتعرض على مواقع سوشيال ميديا زي Meta (فيسبوك).
  • الـ Meta (فيسبوك) كمان عندها صفحة مخصصة لمساعدة الـ developers فيها تفاصيل وأدوات لاختبار الكروت دي (اسمها Sharing Debugger)، ممكن تلاقيها في المصادر الإضافية (additional resources) للقسم ده. تويتر برضه عنده أداة مشابهة (Card Validator).

# Setting up a social media card

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Little Lemon - Our Menu</title> <!-- Standard HTML page title -->
 
    <!-- === Required Open Graph Meta Tags (Minimum for social sharing) === -->
 
    <!-- og:title - The title of your specific page content as it should appear in the graph -->
    <meta property="og:title" content="Our Menu">
 
    <!-- og:type - The type of your object, e.g., "website", "article", "video.movie" -->
    <meta property="og:type" content="website">
 
    <!-- og:image - An image URL which should represent your object within the graph -->
    <!-- Best practice: Use an absolute URL (https://...) and recommended dimensions (e.g., 1200x630px) -->
    <meta property="og:image" content="logo.png">
    <!-- Example with absolute URL: <meta property="og:image" content="https://www.littlelemon.com/assets/logo.png"> -->
 
    <!-- og:url - The canonical URL of your object that will be used as its permanent ID in the graph -->
    <!-- Should be the specific URL for *this* page -->
    <meta property="og:url" content="https://www.littlelemon.com"> <!-- Replace with the actual URL of the menu page -->
 
 
    <!-- === Optional Open Graph Meta Tags (Recommended for richer preview) === -->
 
    <!-- og:description - A one to two sentence description of your object -->
    <meta property="og:description" content="Little Lemon is a family-owned Mediterranean restaurant, focused on traditional recipes served with a modern twist.">
 
    <!-- og:locale - The locale these tags are marked up in. Format: language_TERRITORY -->
    <meta property="og:locale" content="en_US">
 
    <!-- og:site_name - If your object is part of a larger website, the name which should be displayed for the overall site -->
    <meta property="og:site_name" content="Little Lemon">
 
 
    <!-- Other head elements like CSS links -->
    <!-- <link rel="stylesheet" href="styles.css"> -->
 
</head>
<body>
    <!-- Your page content goes here -->
    <h1>Little Lemon Menu</h1>
    <p>Discover our delicious Mediterranean dishes.</p>
    <!-- ... rest of the page content -->
</body>
</html>

ملخص سريع للتاجات اللي ضفناها:

  1. الـ og:title: عنوان الصفحة اللي هيظهر على السوشيال ميديا (“Our Menu”).
  2. الـ og:type: نوع المحتوى (“website”).
  3. الـ og:image: الصورة اللي هتظهر في الـ preview (المفروض تكون لوجو المطعم “logo.png” - ويفضل استخدام رابط كامل للصورة).
  4. الـ og:url: رابط الصفحة الأساسي (المفروض يكون رابط صفحة المنيو).
  5. الـ og:description: وصف مختصر للمطعم هيظهر في الـ preview.
  6. الـ og:locale: اللغة والمنطقة (“en_US” يعني إنجليزي أمريكي).
  7. الـ og:site_name: اسم الموقع ككل (“Little Lemon”).

الخلاصة

المفروض دلوقتي تكون بقيت عارف أكتر عن Metadata بتاعة الـ Open Graph Protocol وعن الـ social media cards، وأهميتها وفوائدها. الـ social media cards الفعالة بتساعد:

  1. تعرف مستخدمي الإنترنت عن موقعك ومحتواه بشكل جذاب وواضح.
  2. تجيب زيارات (drive traffic) لموقعك من السوشيال ميديا.
  3. تحسن (بشكل غير مباشر) الـ SEO بتاع موقعك.

الوقت الزيادة اللي الـ developer بيقضيه وهو بيضيف وبيظبط تاجات السوشيال ميديا دي فعلًا يستاهل المجهود وهيفرق كتير في انتشار محتواك وشكل الـ brand بتاعك أونلاين!

Graph View

Backlinks