3.30.2017

تنظيم البيانات بأكثر من عنصر سكيما Schema.org الجزاء الرابع الدرس الثامن

تنظيم البيانات للمحتوى عن طريق اكواد سكيما Schema.org
بأكثر من عنصر مع عمل تقييم ليظهر على شكل نجوم في نتائج البحث 



درسنا في الدرس السابق كيفية ترميز محتوى الموقع عن
طريق Schema.org
وشرحنا الكيفية عن طريق مثال بسيط  يتكون من عنصر واحد ويحتوي
على ثلاث خواص فقط
وكان الهدف من ذالك إيصال الفكرة والآلية المستخدمة
لاكواد سكيما Schema.org  بالشكل الصحيح
بإمكانك الرجوع إلى الدرس السابق 

عن طريق الرابط التالي البيانات المنظمة Schema.org سكيما شرح مفصل وسهل
ليسهل عليك  فهم الدرس التالي
يحتاج ترميز  الموضوع في الغالب إلى أكثر من عنصر مع احتفاظ كل
عنصر بخواصه
إلا انه في بعض الأحيان نحتاج إلى أن يكون هناك  عنصر واحد رئيسي 
وتندرج تحته  جميع العناصر الأخرى  مع كافة الخواص  للعنصر الرئيسي 
وباقي العناصر التي تندرج تحت هذا العنصر وهذا هو التحدي الأقوى
للحصول على ترميز متكامل
لأكن هذا ليسئ صعبا وسنقوم بتسهيل الشرح قدر الإمكان ليكون
مفهوما لك بأذن الله
سنأخذ مثال يتكون من  ثلاثة عناصر أو أكثر  وسنجعل أحدى هذه
العناصر هو العنصر الرئيسي  وسنشرح كيف يتم إدراج  جميع العناصر
بداخل هذا العنصر الرئيسي
ماذا يعني أن يكون هناك عنصر رئيسي وهناك عناصر تدرج تحته ولماذا لا يكون كل عنصر على حده ؟
يعني  أن يكون هناك عنصر رئيسي  أي أن هذا العنصر هو العنصر الذي نريد أن نعرفه لمحركات البحث وهذا العنصر
يحتاج لبعض العناصر الأخرى ليتم ترميزه بشكل متكامل حيث أن محركات البحث ستقوم بفرز  كل عنصر بشكل منفصل ونحن
نريد أن يكون هناك عنصر واحد رئيسي وباقي العناصر تدرج ضمن هذا العنصر بحيث أن محركات البحث تقرى هذا
العنصر فقط وتقرى باقي العناصر كخواص  من خواص العنصر الرئيسي .
دائما الدروس النظرية تجعل مخيلتك تسبح  في آفاق قد تتعدى الواقع البسيط .
لذالك سنقوم بعمل مثال عملي يبسط لتوضيح  كيف ندمج مجموعة من العناصر تحت عنصر واحد .
لنفترض أن لدينا موضوع يتحدث عن منتج لكاميرا من نوع كانون
وكان نص المحتوى كتالي
كاميرا كانون
موديل PJ700-1  كاميرا كانون بأخر المواصفات الحديثة وتصوير رهيب بدقه عالية

يمكنك أن تحصل عليها  بعملة الدولار $ سعرها الحالي هو 1000.00 متوفرة
كاميرا جميله  ومميزه تستحق ثلاثة نجوم
شكرا لك إنا ابحث عن هذه الكاميرا 
)
انتهاء النص مع التعليقات والتقييم من قبل المستخدم أو الزائر
أذن لدينا منتج Product نريد أن نقوم بعرضه على صفحة ويب فما هي الخواص العامة للمنتج والتي نستطيع ترميزها ؟
بديهيا ومن دون أن ندخل على موقع Schema.org  لمعرفة الخواص يمكننا أن نحدد اغلب الخواص كتالي
اسم المنتج
وصف المنتج
موديل المنتج
صورة المنتج
الشركة المصنعة للمنتج
سعر المنتج
عملة السعر للمنتج
وممكن أيضا نحتاج لتقييم المنتج والعدد الكلي للتقييم  والتعليقات من قبل الزوار  كجزاء مهم من عملية
الترويج والتسويق للمنتج
لكن هل سنجد جميع الخواص هذه للمنتج في موقع Schema.org  ؟
بكل تأكيد ستجد هذه الخواص ولاكن ليس جميعها ضمن عنصر المنتج
Product
فالتقييم  Rating  مثلا هو عنصر ويحتوي على خواص خاصة به وأيضا السعر والعملة  هي خواص من عنصر 
العرض Offer لان العرض يحتاج للسعر والعملة أكثر من المنتج حيث أن العرض Offer هو أكثر شموليه حيث يمكننا أن نقدم عرض دورات أو دعم فني مثلا وليسئ بضرورة أن كل ما يتم بيعه هو منتج .
لا يهمنا هنا  أن نحلل ما هي الخواص التي يحتاجها كل عنصر فهكذا تم ترتيبها في موقع Schema.org
لأكن ما يهمنا هو أن نعرف كيف تم تقسيم هذه الخواص  على موقع Schema.org
لذلك بإمكاننا أن ندخل على عنصر المنتج  Product  في موقع Schema.org  لروية ألأمثلة على الاكواد الموجودة به
ومعرفة ما هي الخواص لعنصر المنتج Product وما هي العناصر التي يحتاجها عنصر المنتج
لنشاهد  الأمثلة معنا  لعنصر Product عن طريق الرابط التالي من هنا
شاهد الكود في  المثال رقم 2
شاهد الصورة التالية
 



هل جميع الأشياء الموجودة في المثال رقم 2 هي خواص لعنصر واحد أم أن هناك عناصر أخرى موجودة ؟
كيف نميز بين العناصر وبين الخواص في هذا المثال ؟
درسنا في الدرس السابق أن العنصر يأتي  في البداية  قبل الكود 
ويأتي بعد رابط http://schema.org
ويكون بشكل التالي

<div itemscope itemtype="http://schema.org/Product">
بينما يتم وضع الخواص  الخاصة  به بين علامتي تنصيب " "    ويأتي قبلها  المصطلح itemprop
بشكل التالي

<span itemprop="name">salem</span>

إذن يمكننا أن نميز العناصر من الخواص في المثال السابق بشكل التالي
العناصر دائما تأتي  بعد  http://schema.org
توجد  مجموعة من العناصر في المثال رقم 2 سنأخذ منها التالي
عنصر المنتج   Product:

<div itemscope itemtype="http://schema.org/Product">

عنصر العرض Offer  :

  <div itemprop="offers"itemscope itemtype="http://schema.org/Offer">

عنصر التقييم الكلي AggregateRating   :
<div itemprop="aggregateRating"itemscope itemtype="http://schema.org/AggregateRating">

عنصر التوفير InStock :

<link itemprop="availability" href="http://schema.org/InStock" />

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



 


 


ألان لدينا منتج Product  ونحتاج لترميزه داخل صفحة ويب خاصة بنا لتتعرف عليه محركات البحث
وعلينا أن نقوم بترميزه من خلال إحدى الأمثلة السابقة  الموجودة لعنصر المنتج Product في موقع schema.org
ويجب أن يحتوي على اغلب العناصر   الموجودة في المثال  حتى يصبح ترميزنا متكامل
أذن العنصر الأساسي الذي نريد أن نقوم بترميزه هو المنتج Product
ملاحظة مهمة جدا:
إذا دققت النضر في اكواد  العناصر التي قمنا باختيارها من المثال رقم 2  ستجد أن المصطلح itemprop 
موجود في بداية العناصر التالية
العرض Offer
التقييم  AggregateRating 
التوفير   InStock
بينما عنصر المنتج Product لا يوجد في بدايته المصطلح itemprop
تعلمنا في الدرس السابق أن المصطلح itemprop يأتي مع الخواص فقط
لدينا سؤالين ذكيان  ونحتاج أجابه  عليهم  قبل أن نبدى في ترميز المحتوى
السؤال الأول
المصطلح itemprop يأتي مع  الخاصية فلماذا أتى مع العنصر؟
السؤال الثاني ؟
كيف نجعل عنصر المنتج Product هو العنصر الأساسي أو الرئيسي وباقي العناصر تدرج تحت
عنصر المنتج Product ؟
قبل أن نجيب على السؤالين
قم بالدخول على أداة اختبار البيانات انقر هنا لدخول الى الأداة
والصق الكوديين التاليين لاختبارهم  كما تعلمنا سابقا
الكود الأول :



<p itemscope itemtype="http://schema.org/Product">
  <img itemprop="image" src="dell-30in-lcd.jpg" alt="كاميرا"/>
 
<span itemprop="name">كاميرا كانون </span>
موديل
 
<span itemprop="model">PJ700-1</span>
 
<span itemprop="description">كاميرا كانون بأخر المواصفات الحديثة وتصوير رهيب بدقه عالية</span>
 
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
   يمكنك أن تحصل عليها  بعملة الدولار
 
<span itemprop="priceCurrency" content="USD">$</span>
    سعرها الحالي هو
 
<span itemprop="price" content="1000.00">1000.00</span>
  <link itemprop="availability" href="http://schema.org/InStock" />متوفر</span>
 
<span itemprop="aggregateRating itemscope itemtype="http://schema.org/AggregateRating">
   كاميرا جميله  ومميزه
 
<span itemprop="bestRating">5</span>
   تستحق ثلاثة نجوم
 
<span itemprop="ratingValue">3</span>
  <span itemprop="ratingCount">12</span>
  شكرا لك إنا ابحث عن هذه الكاميرا
  </span>
</p>


أنسخة والصقه في أداة اختبار البيانات وقم باختباره
افتح الأداة في نافذة جديدة
والصق الكود الثاني بها
الكود الثاني :





<p itemscope itemtype="http://schema.org/Product">
 <img itemprop="image" src="dell-30in-lcd.jpg" alt="كاميرا"/><span itemprop="name">كاميرا كانون </span>
موديل
 
<span itemprop="model">PJ700-1</span> 
 <span itemprop="description">كاميرا كانون بأخر المواصفات الحديثة وتصوير رهيب بدقه عالية</span>
  <span
itemscope itemtype="http://schema.org/Offer">
   يمكنك أن تحصل عليها  بعملة الدولار
 
<span itemprop="priceCurrency" content="USD">$</span>
    سعرها الحالي هو
 
<span itemprop="price" content="1000.00">1000.00</span>
  <link itemprop="availability" href="http://schema.org/InStock" />متوفر</span>
  </p>
  <p itemprop="aggregateRating"
itemscope itemtype="http://schema.org/AggregateRating">
   كاميرا جميله  ومميزه
 
<span itemprop="bestRating">5</span>
   تستحق ثلاثة نجوم
 
<span itemprop="ratingValue">3</span>
 
<span itemprop="ratingCount">12</span>
  شكرا لك إنا ابحث عن هذه الكاميرا
  </p>

ماذا تلاحظ ما هو الاختلاف بين الكوديين ؟ 
شاهد الصورتين التالية  لتوضيح الاختلاف






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

 أو شاهد الصورة التالية لروية المعاينة  



الكود الثاني:
 يوجد به خطاء ويحتوي على ثلاثة عناصر كل عنصر له خواصه ولا يتم قرأته بشكل سليم من
قبل محركات لبحث ولا يمكن أن نقوم بمعاينته
ما هي التغيرات التي تسببت في هذا الخطاء وانفصال العناصر عن العنصر الرئيسي ؟
لمعرفة الأسباب التي أدت إلى حدوث هذه الإشكالية  شاهد الصورتين التالية   :
هل حصلت على الإجابة على السؤالين السابقين
أن لم تحصل على الإجابة  بعد فإليك الجواب
إجابة السؤال الأول:
يستخدم  المصطلح itemprop مع بداية  العناصر وذالك في حالت أردنا أن نجعل هذه العناصر تندرج ضمن
عنصر رئيسي بحيث تظهر وكأنها خاصية من خواص العنصر الرئيسي
مع الاحتفاظ بخواص هذه العناصر بداخلها
فمثلا عنصر  العرض Offer يمكننا أن نجعله عنصر مستقل  بشكل التالي

 <span  itemscope itemtype="http://schema.org/Offer">
ولاكن إذا أردنا أن يكون عنصر العرض Offer يندرج تحت عنصر المنتج Product
فأننا نضع كود العنصر الرئيسي أولا بشكل التالي

<p itemscope itemtype="http://schema.org/Product">
ثم نقوم بوضع المصطلح itemprop في بداية كود عنصر العرض Offer
ثم علامة = ثم نضع كلمة العنصر بين علامتي تنصيب " " بشكل التالي

itemprop="offers"

ثم نكمل الكود بشكل طبيعي
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">

ليصبح شكل الكود كتالي
<p itemscope itemtype="http://schema.org/Product">
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
</p>
ويمكننا وضع الخواص لكل عنصر بشكل طبيعي لا شي سيتغير سوى أن عنصر العرض أصبح مندرج
تحت العنصر الرئيسي هو المنتج
أجابه على السؤال الثاني:
كيف نجعل عنصر المنتج Product هو العنصر الرئيسي   وباقي العناصر تندرج تحته
تعتبر إجابة السؤال الأول هي نصف الإجابة لهذا السؤال  حيث نستطيع أن نجعل العناصر ضمن
عنصر واحد باستخدام المصطلح itemprop كما ذكرنا أعلاه
وهناك أمر أخر مهم لكي نجعل العناصر تدرج تحت عنصر واحد
وهو أنه  يجب أن تكون جميع العناصر المندرجة ضمن وسم العنصر الرئيسي
فمثلا نحن قمنا بوضع المثال وكأنه فقره في محتوى عن طريق  الوسم <p>
إذا كان بداية كتابتنا للكود وضعنا تاج أو وسم مثل  <p> فان هذا الوسم يجب أن يكون  هو وسم
العنصر الرئيسي بحيث يكون كود العنصر الرئيسي ضمن فتحت البداية  لوسم <p> بشكل التالي
<p itemscope itemtype="http://schema.org/Product">
ثم نقوم بكتابه باقي العناصر المراد أدراجها بين وسم <span>
كما في المثال الأول السليم  الذي اختبرناه
وبعد أن نكتب جميع العناصر نقوم  بإغلاق الكود بوسم الإغلاق  </p>
وبهذا تصبح جميع العناصر ضمن العنصر الرئيسي
أذن كل ما نحتاج أليه لندرج مجموعه من العناصر ضمن عنصر رئيسي  هو خطوتين
الخطوة الأول :
نضع المصطلح itemprop في بداية العناصر المراد أدراجها مع كتابة قيمتها
الخطوة الثانية : هو وضع العنصر الرئيسي ضمن وسم و أدراج جميع العناصر بداخل هذا الوسم وإغلاقه
ملاحظات مهمة جدا :
الملاحظة الاولى :
ليس كل العناصر نستطيع  أدراجها ضمن عنصر معين كما انه ليس كل العناصر يتم تضمينها تحت عنصر بمجرد
كتابة المصطلح itemprop وكتابة اسمها بعد المصطلح
لذالك عندما تحاول أن تقوم بترميز محتوى من نوع معين  عليك أن تبحث عن أمثله لترميز هذا النوع من
المحتوى  بداخل موقع schema.org ويمكنك اختبار كل ما تقوم به عن طريق أداة  الاختبار للترميز
الملاحظة الثانية : 
إذا كان لا يوجد تقييم فعلي من قبل الزوار في موقعك  فليسئ من الصواب أن نقوم بعمل تقيم
بالنجوم ووضع عدد الذين قاموا بتصويت بشكل وهمي  فهذا يعرض موقعك للمعاقبة من قبل محركات
البحث لوجود معلومات وبيانات  مزيفة
كما يجب أن نكون صادقين في ترميز أي محتوى بحيث يدل فعلا على ما تم تميزه .
تم بحمد الله
اعتقد انك ستنطلق بعد هذا الدرس في ترميز محتوى موقعك بسلاسة
وبهذا الدرس نكون قد أكملنا كيفية ترميز محتوى الموقع عن طريق اكواد سكيما schema.org
تبقى علينا أن نشرح طريقة ترميز الموقع نفسه  عن طريق اكواد سكيما schema.org
وان شأالله سيكون ذالك في درسنا القادم
أمل أن أكون قد وفقت في توصيل وتسهيل المعلومة أليك
في حالة واجهت أي إشكالية  فلا تتردد في طرح مشكلتك في تعليق وسنساعدك على  حلها بأذن الله
تعليقك على الموضوع يحفزنا لنقدم كل ما بحوزتنا
فقط  لسبب واحد هو أننا نشعر بان هناك من يستفيد وهذا كافي بنسبه لنا
وفي الأخير تقبلوا تحياتي  إلى أن نلتقي

ودمتم في أمان الله

الدرس التالي :
تنظيم البيانات التلقائي للموقع سكيما Schema.org الجزاء الخامس الدرس التاسع

0 التعليقات

إرسال تعليق