الجمعة، 17 يناير، 2014

ساعد محركات البحث على فهم نوع محتوى موقعك



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



-كيف اساعد محرك البحث على فهم موقعي ؟

محركات البحث تدعم علامات (وسوم - microdata) خاصة لمختلف انواع المحتوى الذي يتضمنه موقعك ، حيث عند استخدامك لهذه الوسوم سوف تساعد محرك البحث على فهم نوع المحتوى الذي يتعامل معه ، على سبيل المثال اذا كان موقعك يختص بالافلام هناك وسوم خاصة بمحتوى الافلام ، حيث سيكون هناك وسم الى اسم الفيلم و وسم ملخص الفيلم و وسم كم حصل الفيلم على تقييم . فالنوضح اكثر ، القي نظرة على الصورة في الاسفل :



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

-كيف ذلك ؟

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



كما هو واضح في الصورة اعلاه بان الموقع قام بأخبار محرك البحث بأن محتوى الموقع او الصفحة تتعلق بالاعمال السينمائية عبر اضافة وسم :
itemscope="" itemtype="http://schema.org/Movie"
نوع المحتوى افلام

ايضاً قام باخبار محرك البحث عن نتيجة التقييم الذي حصل عليه الفيلم في الموقع عبر الوسوم الخاصة بتقييم وهذا ما شاهدناه في نتيجة محرك البحث عندما اضاف تقييم الفيلم اسفل العنوان ، شاهد الصورة في الاسفل :



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



-ما هي هذه العلامات ؟ او كما اشرت اليها بـ (الوسوم) :

هذه العلامات لتسهيل على محركات البحث في عملية تصنيف محتوى المواقع او الصفحات وتحسين ظهور نتائج البحث ، وهذا ثمرة تعاون بين عمالقة محركات البحث Google, Bing, Yahoo وانضم لهم فيما بعد محرك البحث الروسي Yandex.

-الموقع الرسمي schema.org

كل ما تريد معرفته موجود في الموقع الرسمي schema ، الموقع يعتبر واجهة وموسوعة لكل ما يتعلق بالعلامات (الوسوم) وكيفية استخدامها على صفحات مواقع الانترنت.

-هل هناك علامات غير تصنيف محتوى الافلام ؟

نعم ، هناك موسوعة كبيرة من العلامات مثل مواقع التسوق ، التدوين ، الاخبار ، الصور ، الموسيقى ، الكتب والكثير . يمكنك الاطلاع على القائمة على الرابط التالي :
http://schema.org/docs/full.html

-امثلة على طرق استخدام هذه العلامات في صفحات المواقع :

مثال 1 : كيف تجعل محرك البحث يظهر التقييم الذي حصل عليه المقال او الصورة او اي شيء تم تقييمه في موقعك (التقييم يظهر في نتيجة البحث) مثل ما شاهدنا في بداية هذا المقال :

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

  <div itemprop="aggregateRating"

    itemscope itemtype="http://schema.org/AggregateRating">

    <span itemprop="ratingValue">87</span>

    out of <span itemprop="bestRating">100</span>

    based on <span itemprop="ratingCount">24</span> user ratings

  </div>

</div>


-شرح الكود

1-قمت باضافة علامة(وسم) نوع المحتوى في الصفحة وهو (منتج) وهناك خيارات كثير غير المنتج كما ذكرت سابقاً :
-itemscope
-itemtype
-http://schema.org/Product

2-ادرجت وسوم التقييم من أجل اخبار محرك البحث عن نتيجة التقييم الكلي :
-itemprop
-aggregateRating
-http://schema.org/AggregateRating

-ratingValue (هذه العلامة من أجل اخبار محرك البحث عن اجمالي التقييم الذي حصل عليه المنتج '87').
-bestRating (علامة اعلى نسبة في التقييم '100' )
-ratingCount(عدد الاشخاص الذي قامو بتقييم '24')

-الان عندما يزور محرك البحث صفحة موقعك ، يقوم بقراءة الوسوم هكذا :



-في تالي يتم اضافة التقييم تحت عنوان صفحتك في نتائج محركات البحث.



مثال 2 - انت تملك موقع خاص بتسوق ، كيف تجعل محرك البحث يعرض سعر المنتج في نتائج البحث :



هذا الكود لن يختلف كثيراً عن التقييم ، لكنه سوف نضيف له وسوم (السعر) :

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

    <span itemprop="price">$55.00</span>

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

</div>


-شرح الكود

-http://schema.org/Offer (علامة العروض على المنتج)
-price (سعر المنتج)
-availability(المنتج متوفر)
-http://schema.org/InStock

الكود بالكامل :

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

  <span itemprop="name">اسم المنتج</span>

  <img src="{صورة المنتج}" alt='Kenmore 17" Microwave' />

  <div itemprop="aggregateRating"

    itemscope itemtype="http://schema.org/AggregateRating">

   التقييم: <span itemprop="ratingValue">3.5</span>/5

   عدد المصوتين <span itemprop="reviewCount">11</span>

  </div>



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

    <span itemprop="price">$55.00 سعر المنتج</span>

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

  </div>



  وصف المنتج :

  <span itemprop="description">وصف المنتج.</span>

</div>




مثال 3 -للمصورين او المواقع المختصة بالصور : كيف تخبر محرك البحث عن معلومات الصورة اين التقطت الصورة ، اسم المصور ، تاريخ التصوير وتفاصيل اخرى ، تابع المثال في الاسفل :

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

  <h2 itemprop="name">الغروب في البحرين</h2>

  <img src="mexico-beach.jpg" itemprop="contentURL" />



  By <span itemprop="author">Mahdi Ramadan</span>

  Photographed in

    <span itemprop="contentLocation">Manama, Bahrain</span>

  Date uploaded:

    <meta itemprop="datePublished" content="2014-01-14">Jan 14, 2014



  <span itemprop="description">الغروب في البحرين قبل يومين.</span>

</div>


1-اخبرنا محرك البحث بأن نوع المحتوى الذي يتعامل معه هو محتوى صور:
-itemscope
-itemtype
-http://schema.org/ImageObject

2-وبأن (الغروب في البحرين) هو عنوان الصورة :
-itemprop
-name

3-الصورة تم التقاطها بواسطة (Mahdi Ramadan) :
-itemprop
-author

4-الصورة التقطت في (Manama, Bahrain) :
-itemprop
-contentLocation

5-تأريخ الصورة الذي التقطت فيه الصورة (2014-01-14) :
-itemprop
-content
-datePublished

*schema يفضل التاريخ ان يكون بهذه الصيغة يوم/شهر/سنة.

6-وصف الصورة (الغروب في البحرين قبل يومين) :
-itemprop
-description

-من خلال الكود في الاعلى نلاحظ ان هذه العلامات تكون ضمن تاغ الهتمل : div ، h2 ، img ، span ، meta .. وغيرهم ، آي ان العلامات يجب ان تكون ضمن تاغ الهتمل مثل ما هو مبين في الاعلى.



-كيف أتاكد بان الوسوم وضعتها بشكل صحيح :

جوجل توفر لك ذلك عبر (أداة اختبار البيانات المنسقة) :
http://www.google.com/webmasters/tools/richsnippets?hl=ar

فقط الصق رابط صفحة موقعك واضغط معاينة ، وسوف يقوم Google بعرض لك نتيجة معاينة وسوم microdata اسفل الصفحة مثل ما شاهدنا في (مثال 4) :



-لماذا وما فائدة استخدام علامات microdata في صفحات مواقعنا ؟

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


مراجع و روابط مهمة :

شرح حول المقتطفات المنسقة والبيانات المنظمة من جوجل (باللغة العربية) :
1-
https://support.google.com/webmasters/answer/99170?hl=ar&ref_topic=1088472

2-
عن microdata :
https://support.google.com/webmasters/answer/176035?hl=ar&ref_topic=1088472

كيف تبدء مع microdata (باللغة الانجليزية) :
http://schema.org/docs/gs.html

قائمة التصنيفات التي يوفرها موقع schema وتدعمها محركات البحث (باللغة الانجليزية) :
http://schema.org/docs/full.html

تمنياتي لكم بتوفيق

هناك 6 تعليقات:

  1. مشكورا اخي الكريم على الشرح وبارك الله فيك

    ردحذف
  2. أزال المؤلف هذا التعليق.

    ردحذف
  3. شكراا اخي على الموضوع المهم والرائع فيي السيو

    ردحذف
  4. شكراااااااااااااااااااااااااااا

    ردحذف
  5. شرح ممتاز ....جزاك الله خيرا

    لاكن فى اى مكان داخل القالب اضع الميتا تاج ....هل اضعها ضمن التخطيط ام اضعها داخل القالب html....وان وضعتها داخل html >>>> فى اى مكان بالضبط

    ردحذف