الاكتشاف على المستوى الاجتماعي

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

Eiji Kitamura

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

ملخّص

• استخدِم بيانات Schema.org الجزئية لتوفير عنوان الصفحة ووصفها وصورة لـ Google+‎.
• استخدِم بروتوكول Open Graph ‏ (OGP) لتوفير عنوان الصفحة ووصفها وصورة لها على Facebook.
• استخدِم بطاقات Twitter لتوفير عنوان الصفحة ووصفها وصورة ومعرّف Twitter لمنصة Twitter.

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

أيّ منهما برأيك من المرجّح أن يتم النقر عليه؟ ينجذب المستخدمون إلى الصور ويشعرون بثقة أكبر بأنّهم سيعثرون على ما يعجبهم عندما يحصلون على معاينة مبكرة.

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

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

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

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

استخدام schema.org والبيانات الجزئية لتقديم مقتطفات منسّقة على Google+‎

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

وفي ما يلي مثال لذلك:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

في حين أنّ معظم البيانات الوصفية تكون مضمّنة في قسم الرأس في صفحة الويب، تكون البيانات الجزئية مضمّنة في السياق.

إضافة itemscope لتحديد نطاق البيانات الجزئية

من خلال إضافة itemscope، يمكنك تحديد العلامة ككتلة من المحتوى حول عنصر معيّن.

إضافة itemtype لتحديد نوع موقعك الإلكتروني

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

أضِف itemprop لوصف كل عنصر باستخدام مصطلحات schema.org

تحدّد السمة itemprop سمات itemtype في النطاق. لتقديم البيانات الوصفية إلى المواقع الإلكترونية الاجتماعية، تكون قيم itemprop النموذجية هي name وdescription وimage.

التحقّق من صحة المقتطفات المنسّقة

للتحقّق من صحة المقتطفات المنسّقة على Google+‎، يمكنك استخدام أدوات مثل:

• أداة اختبار البيانات المنظَّمة - Search Console

استخدام بروتوكول Open Graph ‏ (OGP) لتوفير مقتطفات منسّقة على Facebook

يوفّر بروتوكول Open Graph (OGP) لـ Facebook البيانات الوصفية اللازمة للسماح لصفحات الويب بالحصول على الوظائف نفسها التي توفّرها عناصر Facebook الأخرى.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

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

استخدام علامات meta ضمن مساحة الاسم og: لوصف البيانات الوصفية

تتألف علامة meta من السمة property والسمة content. قد تتضمّن السمات والمحتوى القيم التالية:

الموقع	المحتوى
og:title	تمثّل هذه السمة عنوان صفحة الويب.
og:description	تمثّل هذه السمة وصف صفحة الويب.
og:url	تمثّل هذه السمة عنوان URL الأساسي لصفحة الويب.
og:image	عنوان URL لصورة مرفقة بالمشاركة.
og:type	سلسلة تشير إلى نوع صفحة الويب يمكنك العثور على رمز مناسب لصفحة الويب الخاصة بك هنا.

توفّر هذه العلامات الوصفية معلومات دلالية لبرامج الزحف من المواقع الإلكترونية الاجتماعية، مثل Facebook.

مزيد من المعلومات

لمعرفة المزيد حول الأشياء التي يمكنك إرفاقها بالمنشور على Facebook، تفضل بزيارة موقع بروتوكول الرسم البياني المفتوح الرسمي.

• ogp.me

التحقّق من صحة المقتطفات المنسّقة

للتحقّق من صحة الترميز على Facebook، يمكنك استخدام أدوات مثل:

• برنامج تصحيح الأخطاء

استخدام بطاقات Twitter لتقديم مقتطفات منسقة على Twitter

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

استخدام العلامات الوصفية لمساحة الاسم twitter: لوصف البيانات الوصفية

لتفعيل بطاقة Twitter، يجب الموافقة على نطاقك ويجب أن يحتوي على علامة وصفية تتضمّن twitter:card كسمة name بدلاً من سمة property.

وفي ما يلي مثال بسيط:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

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

مزيد من المعلومات

لمزيد من المعلومات حول Twitter Cards، يُرجى الانتقال إلى:

• موقع المطوّرين الإلكتروني في Twitter

التحقّق من صحة المقتطفات المنسّقة

للتحقّق من صحة الترميز، توفّر منصة Twitter ما يلي:

• أداة التحقّق من البطاقات

أفضل الممارسات

بالنظر إلى الخيارات الثلاثة، فإن أفضل ما يمكنك فعله هو تضمينها جميعًا في صفحة الويب الخاصة بك. وفي ما يلي مثال لذلك:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

لاحظ أنّ البيانات الجزئية وبروتوكول Open Graph يتشاركان بعض الترميز:

• يقع "itemscope" في علامة "head"
• تمت مشاركة title وdescription بين البيانات الجزئية وOGP
• يستخدم "itemprop="image"" علامة link مع سمة href بدلاً من إعادة استخدام علامة meta مع property="og:image"

أخيرًا، تأكَّد من التحقّق من ظهور صفحة الويب على النحو المتوقّع على كل موقع تواصل اجتماعي قبل النشر.