3.17.2017

البيانات المنظمة Schema.org سكيما شرح مفصل وسهل الجزاء الثالث الدرس السابع

سنشرح طريقة ترميز محتوي الموقع عن طريق  Schema.org سكيما
أو ما يسمى البيانات المنظمة (المقتطفات المنسقة )


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

هناك عدت طرق لترميز محتوى الموقع واحدا هذه الطرق هي عن
طريق Schema.org وهي أهم الطرق والأكثر اعتمادا من قبل محركات
البحث لذالك سنبدأ أولا بها
ما هي السكيما  Schema.org
هي المشروع الرئيسي لتنظيم وترميز محتوي مواقع الانترنت عن طريق
الاكواد البرمجية والتي اتفقت عليها محركات البحث العملاقة واعتمدتها
كترميز رئيسي ومن هذه المحركات محرك البحث جوجل وياهو وبينج
ومحرك ياندكس الروسي
وتم عمل Schema.org  لمساعدة أصحاب الشركات والمنتجات
والمصانع وغيرها  وايضاالمواقع الأخرى من ترميز وتنظيم البيانات في
مواقعهم عبر هذه المقتطفات المنسقة من الاكواد حتى يسهل العثور عليها
بسهولة من قبل محركات البحث حيث أن هذا الاكواد تعتبر هي الدليل لعناكب
وخوارزميات محركات البحث لإرشادها وترتيب المواقع لعناكب البحث بحسب مجال
الموقع أو المحتوي ومكانه وتاريخه ونوعية المحتوى سوى كان صورة
أو فيديو أو مقال .....الخ
كل شي يتم تنظيمه لمحركات البحث عن طريق Schema.org
أين أجد هذه الاكواد الخاصة  ب  سكيما Schema.org ؟
من الموقع الرسمي لسكيما  Schema.org موقع Schema.org
لأكن قبل أن تذهب الى موقع
Schema.org لمشاهدة الاكواد
ادخل على الرابط  التالي انقر هنا لتعرف جميع عناصر سكيما
خذ نضرة داخل الموقع وتجد
به كل ما يحتاج إليه موقعك
توجد جميع المجالات في هذه الصفحة
على مستوي ترميز  الموقع كا كل .
ما هو مجال موقعك هل هو موقع رياضي أو تقني أو سياحي أو تعليمي
كل شي موجود بهذه الصفحة ما عليك إلا أن تختار ما يناسبك .
على مستوى ترميز  المحتوي بشكل خاص أيضا يوجد كل ما تحتاجه 
ما هو المحتوي الذي تريد أن تقوم بترميزه هل هو  درس أو مقال
أو تتكلم عن شخصية معينة مثلا أو منتج أو فيديو أو صوره ....الخ
ملاحظة :
 نحن لازلنا نتكلم عن الأشياء الموجودة في الصفحة الرئيسية
لموقع schema ولم ندخل  على عنصر  معين ولم نقوم بنسخ الاكواد .
لأنه في بادي الأمر وقبل أن ندخل في كيفية تركيب الاكواد في موقعك 
أو محتوى موقعك عليك أن تأخذ نضرة  داخل موقع schema
وترى ما هي الأشياء التي تناسب موقعك ويمكن أن تحتاج إليها 
فمثلا إذا كان موقعك تعليمي فأنت تحتاج للبحث عن كلمة دروس أو تعليمي
أو دورة  لكي تظيف الاكواد الموجودة فيه  إلى موقعك لترميزه بشكل
عام كونه ترميز يختص بهذا المجال هذا بنسبه لترميز الموقع بشكل عام
ماذا عن ترميز محتوي الموقع ترميز( المواضيع) على الأقل المواضيع المهمة 
وما هي الأشياء التي يمكن أن تحتاج إليها بكل تأكيد المحتوي سيحتاج
للعديد من الأشياء فمواضيع موقعك مختلفة فاأذا افترضنا أن موقعك تعليمي
ستجد به موضوع يتكلم عن درس معين في مادة الرياضيات مثلا وموضوع أخر يتكلم
عن كيفية تحضير  محلول كيميائي وموضوع أخر يحتوي على درس مصور وأخر يحتوي
على فيديو وأخر يحتوي على منتج وأخر على كتب .....الخ
إذن نستنتج من هذا أن ترميز موقعك يحتاج لبعض الترميز البسيط لتعريف بمجال
الموقع ومكانه مثلا  ووصف عن ما يحتويه
بينما محتوي موقعك يحتاج للكثير من الترميز فكل موضوع يختلف عن الأخر
ألان أخذنا فكرة عن المجالات الموجودة في موقع schema يمكنك البحث عن أي شي
تحتاجه في أي مجال داخل موقع schema كما يمكنك ترجمة  جميع المجالات لتعرف
ما هي الأشياء التي تحتاج إليها .
كيفية و طريقة تركيب الاكواد ؟
أولا : بنسبة للمحتوى ( المواضيع )
ركز ألان ولا تقلق سيكون الأمر أسهل مما تتصور بسيط جدا وسنقوم بعمل أكثر من
مثال وسنركز على الأنواع التي سنحتاج أليها دائما من الاكواد هذه
الطريقة التي سنشرحها يتم فيها تركيب الاكواد  أو المقتطفات ضمن اكواد لغة html
لنفترض أن لدينا موضوع يتكلم عن شخصية معينة ويوجد بهذه الموضوع اسم الشخصية
وتاريخ ميلادها والبريد الالكتروني لهذه الشخصية
حيث كان نص الموضوع كتالي
(    يوجد في حارتنا شاب  اسمه عادل طارق سمير
وهو شاب يعرفه الجميع لما يتمتع به من شعبية بين الناس
ولما فيه من أخلاق حميدة ونخوة وكرم  فهو يقوم بمساعدة الناس دائما 
وتقديم كل ما يستطيع لخدمتهم
وهو من مواليد عام  1985  بريده الالكتروني هو  mhahmd@gmail.com

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

  وهو العنصر  والعنصر هنا هو الشخص Person أو
الشخصية التي يتحدث عنها الموضوع
القسم الثاني :

 وهي الخواص لهذا العنصر  وهي كتالي
الاسم name
تاريخ الميلاد  birthDate
البريد الالكتروني  email
كيف تنظم هذا العنصر والخواص الخاصة به لمحركات البحث ؟
موقع schema يوفر لك ما هو  هذا العنصر وما هي
الخواص التي يحتاج أليها
في موقع schema هناك صفحة تعرض لك جميع العناصر
انقر هنا لدخول الى الصفحة
النوع الذي نبحث عنه هو شخص Person
نقوم بالبحث عن Person
ألان ننقر على  Person ونرى ما هي الخواص التي يمكن ترميزها
في العنصر Person
شاهد توجد مجموعة من الخصائص  للعنصر Person
اسم الشخص name  اسم عائلته familyName بريده الالكتروني  email
رقم الفاكس faxNumber  تاريخ ميلاده birthDate ......الخ
والكثير من الخواص
شاهد الصورة التالية



ألان في صفحة Person ننزل إلى أسفل الصفحة  ستجد مجموعة
من ألأمثله عددها 11  مثال لتوضيح كيفية ترميز Person
هناك عدت طرق للترميز كما هو موضح إمامك
الطريقة الأولى  وهي Microdata
الطريقة الثانية وهي RDFa
الطريقة الثالثة وهي JSON-LD إي عن طريق لغة جافاسكريبت
ما علينا لا تشتت انتباهك
ما يهمنا هو الطريقة الأولى وهي Microdata
من بين هذه الأمثلة   توجه إلى 
المثال رقم 8  وانقر على Microdata
سيظهر أمامك كود كمثال عن كيفية ترميز العنصر Person
قم بنسخ السطر الأول والثاني فقط من 
المثال رقم 8
وهو كتالي

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Jane Doe</span>
شاهد الصورة التالية لتوضيح


 




ملاحظة : بإمكاننا نسخ الكود بشكل كامل في المثال رقم 8
لاكننا اكتفينا بالسطر الأول والثاني لإعطاء مثال بسيط جدا
والهدف فهم الإلية أو الطريقة للترميز

نعود إلى موضوعنا لنتعرف على السطرين  الذي قمنا بنسخهم

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Jane Doe</span>

السطر الأول:
<div itemscope itemtype="http://schema.org/Person">
هو السطر  الخاص بترميز موضوع يتكلم عن عنصر وهنا نوع
العنصر هو  الشخص Person
ويوجد في هذا السطر
الوسم div  طبعا معروف عبارة عن وسم في لغة html
ثم يوجد itemscope وهي تعني الإشارة أو يشير إلى نوع
وأيضا يوجد itemtype وتعني النوع المطلوب ترميزه
ثم في الأخير يوجد  http://schema.org/Person  وهي
تعني أن هذا الكود  خاص بترميز الشخص Person  أي خاص
بترميز موضوع يتكلم عن شخصية وذالك عن طريق
موقع http://schema.org
السطر الثاني:

<span itemprop="name">Jane Doe</span>
 يوجد به وسم span  وهو أيضا معروف هو إحدى الأوسمة للغة  html  
وهو خاص بتعامل مع النصوص
ثم يوجد itemprop وهي تعني الإشارة إلى خاصية
name  الاسم  أي أن itemprop تشير إلى خاصية  وهذه الخاصية هي
اسم لشخص يدعى Jane Doe
حاول أن تفسر هذا الكود  حتى تفهم معناه بشكل أفضل
 ما هي ملاحظاتك ؟
وكان الكود يخاطب محركات البحث ويقول  لها   في السطر الأول
أن هذا الوسم الذي  هو div    يشير  itemscope  إلى 
نوع itemtype من العناصر وهذا العنصر هو شخص Person
ثم يخاطب الكود محركات البحث في السطر الثاني ويقول لها
أن وسم span   يشير itemprop  إلى خاصية ونوعها
أسم   name وهو  Jane Doe
إذن نحن أمام ثلاث مصطلحات مهمة داخل هذا الكود وهي كتالي
المصطلح الأول :

 النوع  itemtype  وهي التي تعرف نوع العنصر
وتستخدم فقط مع العناصر مثل Person والكثير من العناصر
الأخرى مثل المقال المنتج  ..... الخ
المصطلح الثاني : 

الإشارة  itemscope وهي للإشارة إلى العنصر
وتستخدم أيضا فقط مع العناصر مثل  Person وباقي العناصر الأخرى
المصطلح الثالث :

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

</div
 كتالي
<div itemscope itemtype="http://schema.org/Person">
</div>
ألان كل ما نحتاج إلية  لإضافة الخواص  هو
المصطلح الثالث  itemprop فقط لكي نستطيع ترميز
الخواص الموجودة في موضوعنا
أول خاصية لدينا هي الاسم name
أذن لترميز اسم الشخص نكتب
 itemprop  ثم =   ثم  name  بحيث يكون الاسم  
بين علامتي تنصيب " " 

بهذ الشكل "name"
ليكون الشكل النهائي هو كتالي

itemprop = "name"
ألان نأتي إلى كيفية وضع خاصية الاسم داخل الكود
يستخدم وسم <span>  غالبا لترميز المحتوى النصي حيث انه
لا يؤثر على الشكل العام للنص  ويمكن أن يكون أي وسم أخر 
مثل وسم <p>  أو <h1 >  ..... الخ
حسب الكود الموجود عندك لأكن في حالت كنا نحتاج لتميز جملة
أو كلمة داخل نص أو مقال كبير فغالبا ما نستخدم الوسم <span>
سيكون الاسم داخل الكود بشكل التالي



<span itemprop="name"> عادل طارق سمير</span>

نقوم ألان بإضافة كود الاسم  داخل كود Person
ليصبح شكل الكود كتالي

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name"> عادل طارق سمير</span>
 </div>
ألان نقوم بترميز خاصية تاريخ الميلاد birthDate كما
هو في خاصية الاسم بنفس الطريقة
نحتاج فقط itemprop
ولابد أن يكون الترميز داخل وسم لذالك سنستخدم
الوسم <span>  أيضا
سيكون كود تاريخ الميلاد بشكل التالي

<span itemprop="birthDate">1985</span>
نقوم ألان بإضافة هذا الكود داخل كود Person سيكون
شكل الكود كتالي


<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name"> عادل طارق سمير</span>
<span itemprop="birthDate">1985</span>
 </div>
تبقى علينا ترميز خاصية البريد الالكتروني  email
بنفس الطريقة

<span itemprop ="email">mhahmd@gmail.com</span>
نقوم ألان بإضافة كود البريد  إلى كود Person
ليصبح بشكل التالي

<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name"> عادل طارق سمير</span>
<span itemprop="birthDate">1985</span>
<span itemprop ="email">mhahmd@gmail.com</span> 
  </div>
وماذا عن النص الموجود في الموضوع  عن الأخ  عادل وعن أخلاقه
وعن كرمة خلاص نحذفه طلع كله كذب ؟!!!!!
طبعا لا  وإنما نقوم بإضافة النص بشكل عادي جدا في داخل
الكود ولا داعي لتكرار اسم الشخص وتاريخ ميلاده وبريه فقط نضيف
ما تبقى من النص بشكل التالي




<div itemscope itemtype="http://schema.org/Person">
 يوجد في حارتنا شاب  اسمه
<span itemprop="name"> عادل طارق سمير</span>
وهو شاب يعرفه الجميع لما يتمتع به من شعبية بين الناس
ولما فيه من أخلاق حميدة ونخوة وكرم  فهو يقوم بمساعدة
الناس دائما  وتقديم كل ما يستطيع لخدمتهم
وهو من مواليد عام

<span itemprop="birthDate">1985</span>
 بريده الالكتروني هو 
<span itemprop ="email">mhahmd@gmail.com</span>
 ربما تحتاج للتواصل معه يوما إذا وقعت في
مشكلة أو واجهت إشكالية 

 </div>


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

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



 


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

لتوضيح شاهد الصورة


 





ملاحظة :
جميع الخواص  تكون بين علامتي تنصيب " "
هل أقوم بوضع جميع الخواص الخاصة بالعنصر داخل
المحتوى الذي سأقوم بترميزه ؟

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


تقبلوا خالص تحياتي
أي استفسار أو إشكالية ضع تعليق وسنساعدك بعون الله 

دمتم في رعاية الله وحفظه
الدرس التالي :
 تنظيم البيانات بأكثر من عنصر سكيما Schema.org

6 التعليقات:

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

    ردحذف
  2. اهلا بك اخي لاختصار الوقت احفظ الترميز الذي تحتاجه في ملف واستعمله عند الحاجه في الموضوع
    سنشرح الترميز التلقائي ولاكنه للموقع فقط في الدرس التاسع الجزا الخامس باذن لله

    ردحذف
  3. الله يكرمك يا غالي... هو انطلاقا مما قرأته عندك وبعد أن فهمت الاضافة جيدا بحثت وسط كومة اضافات ووردبرس فوجدت اضافة رائعة تضع الكثير من ميزات البيانات المنظمة تلقائيا... واصل بارك الله في جهدك

    ردحذف
  4. امين وبارك فيك يكفينا ان هناك اشخاص يستفيدون وسنواصل باذن الله

    ردحذف
  5. شكرا

    برامج والعاب الكومبيوتر
    برامج الحماية من الفيروسات
    برامج تعديل و صنع الفيديو
    برامج التحميل من الانترنت
    برامج أدوات النظام
    برامج البحث عن التعريفات

    https://badani-dz.blogspot.com/

    ردحذف
  6. جزاكم الله خيرا على هذا الشرح

    ردحذف