كيف تحسن من شكل نتائجك فى محركات البحث Schema Markup
31

كيف تحسن من شكل نتائجك فى محركات البحث Schema Markup





كيف تحسن من شكل نتائجك فى محركات البحث Schema Markup


بعد تجارب عدة أجريناها فى معمل مصدر سيو يمكنك الإطلاع عليها من هنا

- تجربة 1 
- تجربة 2


ثبت بالدليل القاطع أن عدد النقرات التى تحصل عليها من محرك البحث كفيلة بدفعك للصفحة الأولى فى جوجل خلال أيام إن لم يكن ساعات قليلة ! 

شاهد بنفسك من هنا 

لذا سبيلك نحو تحقيق عدد نقرات أكبر من منافسينك فى محركات البحث هو تحسين شكل نتائجك وهذا يتم عن طريق ما يعرف بإسم Schema Markup

والسكيما عبارة عن أكواد HTML يستخدمها مديرى المواقع فى تعريف محتوى صفحات الموقع لمحركات البحث بشكل أكثر دقة .

وتقوم محركات البحث المختلفة كـ Google, Yahoo, Bing وحتى محرك البحث الروسى Yandex بالإعتماد عليها فى قراءة محتوى الصفحات المختلفة على الإنترنت وعرض معلومات أكثر عنها للمستخدم .

دعنى أريك بعض الأمثلة :-

1 . كود Schema review


يستخدم هذا الكود فى المراجعات التى تكتبها لـ ( لعبة ، برنامج ، نظام تشغيل إلخ ... )

2 . كود Schema Event 


يستخدم هذا الكود لنشر معلومات عن إسم و موعد الإيفينت ومكان إنعقاده ...

3 . كود Schema Product 


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

4 . كود Schema Movie 


يستخدم هذا الكود لإظهار المعلومات المتعلقة بالأفلام من الإخراج والممثلين وتقييم المشاهدين ليه إن أراد الموقع إظهار ذلك


5 . كود Schema Organization


يستخدم هذا الكود لإظهار عنوان شركتك أو مؤسستك على جوجل بجانب خريطة خاصة بمكانك زائد مراجعات عملائك على صفحتك على Google Business 

وهنالك العديد والعديد من الـ Schema markups الأخرى مثل :-

- توصيل الطلبات 
- رحلات الطيران
- الوظائف المتاحة
- حجوزات المطاعم
- الأدوية الطبية

وقائمة تطول إلى أكثر من 500 كود Schema إطلع عليهم من هنا 

كيف تضيف كود السكيما المناسب لموقعك ؟ 

إذا كنت تستخدم الـ Wordpress العملية بسيطة نوعاً ما :-
إتبع التالى ...

أولاً : قم بتنصيب هذا الـ Plugin داخل لوحة التحكم

ثانياً إتبع الصور التالية ...

1 .
عند الضغط على أيقونة SC يمكنك إضافة كود سكيما لموضوعك أو لصفحتك



2 . قم بإختيار نوع الـ Schema التى ستستخدمها وإملئ باقى البيانات المطلوبة

 
3 . بعد الإنتهاء سيظهر لك كود الـ Schema ويمكنك إضافته للـ HTML الخاص بصفحتك


أما إذا كان لديك مدونة أو موقع يستخدمون منصة غير الوورد بريس سوف تستخدم
 كود الـ Schema وتضيفه لصفحة موقعك بشكل يدوى

لنفترض أن لديك موقع عن الطبخ كما هو موضح فى الصورة التالية :-


ستقوم بإضافة كافة الأكواد التابعة لـ Schema Recipe وهى كالتالى :-

cookTime
cookingMethod
ingredients
nutrition
prepTime
recipeCategory
recipeCuisine
recipeInstructions
recipeYield
totalTime

وعند تجميعها ستصبح كما الكود الظاهر أمامك سوف تقوم بوضعه داخل كود الـ HTML الخاص بصفحتك مع تغيير ما يلزم بما يناسبك .


<div itemscope itemtype="http://schema.org/Recipe">
  <span itemprop="name">Mom's World Famous Banana Bread</span>
  By <span itemprop="author">John Smith</span>,
  <meta itemprop="datePublished" content="2009-05-08">May 8, 2009
  <img itemprop="image" src="bananabread.jpg"
       alt="Banana bread on a plate"  />
  <span itemprop="description">This classic banana bread recipe comes
  from my mom -- the walnuts add a nice texture and flavor to the banana
  bread.</span>
  Prep Time: <meta itemprop="prepTime" content="PT15M">15 minutes
  Cook time: <meta itemprop="cookTime" content="PT1H">1 hour
  Yield: <span itemprop="recipeYield">1 loaf</span>
  <div itemprop="nutrition"

 itemscope itemtype="http://schema.org/NutritionInformation">
    Nutrition facts:
    <span itemprop="calories">240 calories</span>,
    <span itemprop="fatContent">9 grams fat</span>
  </div>
  Ingredients:
  - <span itemprop="ingredients">3 or 4 ripe bananas, smashed</span>
  - <span itemprop="ingredients">1 egg</span>
  - <span itemprop="ingredients">3/4 cup of sugar</span>
  ...
  Instructions:
  <span itemprop="recipeInstructions">
  Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add
  the flour last. Pour the mixture into a loaf pan and bake for one hour.
  </span>
  140 comments:
  <meta itemprop="interactionCount" content="UserComments:140" />
  From Janel, May 5 -- thank you, great recipe!
  ...
</div>

ملحوظة : يمكنك أن تطلب من المُبرمج أن يضيف هذه الخانات بشكل أوتوماتيكى فى لوحة تحكم موقعك حتى تقوم بإستخدام الـ Schema بشكل أوتوماتيكى فيما بعد 

أما إذا كنت تريد أن تُظهر مراجعات وتقييم الزوار لمنتج أو برنامج أو خدمة داخل موقعك أن تضيف بلوك خاص بالتعليقات به خاصية تقييم الوصفة عن طريق النجوم .

يُمكنك فعل هذا عن طريق اللجوء إلى مبرمج متخصص والتنويه عليه على أن يقوم بعمل Markup للتعليقات والتقييم بإستخدام Schema Aggregate rating

أو يُمكنك إضافة هذا الكود مباشرة إلى الـ HTML الخاص بصفحتك مع تغيير ما يلزم ولكننى لا أنصحك بالتلاعب بأكواد الـ Schema 

قم بتغيير القيم ذات اللون الأحمر فى الكود التالى بما يناسب موقعك
مع مراعاة توضيح توضيح نوع الـ Schema 

عن طريق تغيير الرابط الأول فى الكود برابط الـ Schema المناسبة لما تقدمه داخل موقعك على سبيل المثال الرابط الموجود حالياً هو رابط Product أى منتج أو برنامج

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


<div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">مصدر سيو</span><br>
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        Rating: <span itemprop="ratingValue">5</span><br>
        Votes: <span itemprop="ratingCount">50</span><br>
        Reviews: <span itemprop="reviewCount">60</span>
    </div>
</div>


بعد التطبيق بشكل صحيح يُفترض أن تظهر لك النتيجة كالتالى :-



ولكن كما نوهت من قبل ...
 
"التلاعب بأكواد السكيما فى محتوى غير متعلق بالكود يؤدى إلى عقابك من محركات البحث"

أما إذا كان لديك موقع عن البرامج  فيجب عليك إستخدام Schema Software ، فى حالة إستخدامك للورد بريس الأمر بسيط كما أشرنا من قبل فسوف تلجئ إلى الـ Plugin

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


لكى يظهر البرنامج بالتقييم وعدد التقييمات التى قام بها الزوار كما فى الصورة التالية


عليك أن تقوم بإعداد كود Schema Software
أو نسخ الكود التالى إلى صفحة البرنامج مع تغيير ما يلزم بما يناسب موقعك



<div itemscope itemtype="http://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> -

  REQUIRES <span itemprop="operatingSystem">ANDROID</span>
  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

  RATING:
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>

كما أشرت فى البداية هنالك العديد من أكواد الـ Schema 
المختلفة التى إن أردنا شرحها جميعاً علينا أن نخصص لها موقع كامل ...

لذا أنصحك بمتابعة المصادر التالية :-

1 . Schema.org
2 . Google Rich Snippets

وبعد الإنتهاء من إضافة أى كود من أكواد الـ Schema 
قم بالتأكد من نجاح تركيبه عن طريق أداة Structured data testing tool

وإتبع الصور :-
 


ثم أضف رابط صفحتك داخل تاب " جلب عنوان URL "
وإضغط على زر الجلب والتحقق
  



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

أخيراً وليسَ أخراً كَيف تُظهر محرك بحث داخلى
مع نتائج موقعك فى محركات البحث كما فى الصورة التالية 



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


سوف تقوم بنسخ الكود التالى وإضافته أسفل تاج <head> 
فى صفحتك الرئيسية الـ Homepage فقط .

 
<script type="application/ld+json">
{
   "@context": "http://schema.org",
   "@type": "WebSite",
   "url": "https://www.seos7.com/",
   "potentialAction": {
     "@type": "SearchAction",
     "target": "http://www.seos7.com/search?q={إبحث من هنا ...}",
     "query-input": "required name=إبحث من هنا ..."
   }
}
</script>

قم بتغيير الرابط المقابل لكلمة "url/" برابط موقعك 
وقم بتغيير الرابط المقابل لكلمة " target " برابط إجراء عمليات البحث داخل موقعك

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



http://www.seos7.com/search?q={إبحث من هنا ...}

 Placeholder مع تغيير الكلمة المظللة باللون الأخضر بالكلمة التى تستخدمها كـ
فى صندوق البحث الخاص بموقعك كما فى الصورة التالية


Query input tag والتأكد من نقل نفس الكلمة إلى

وبعد الإنتهاء من إضافة الكود عليك أن تنتظر عدة أيام حتى يُظهر جوجل صندوق البحث الخاص بموقعك بجانب صفحتك الرئيسية فى محركات البحث

هنالك عدة أدوات تساعدك على إنشاء Schema أو ما يعرف بإسم Microdata بشكل أوتوماتيكى عن طريق ملئ الخانات المطلوبة والحصول على Code

مثل Ranksider و Clixlogix 

يمكنك إستخدامهم فى تهيئة بعض أكواد الـ Schema بشكل سريع وسهل .

بعض التوضيحات الهامة الخاصة بالـ Schema Markups

س . هل يجب عليك أن تضيف أكواد الـ Schema داخل موقعك ؟

- يفضل أن تكون كل صفحة داخل موقعك مُعرفة بأكواد Schema ليس بغرض تحسين شكل نتائجك فى محركات البحث ولكن بغرض تسهيل عملية تصنيف محتوى موقعك وترتيبه من روبوتات جوجل 

س . هل تساعد الـ Schema فى تحسين ترتيبى فى محركات البحث ؟ 

- نعم تساعد الـ Schema الصحيحة الغير متلاعب بها فى تحسين ترتيبك فى محركات البحث بشكل غير مباشر عن طريق زيادة نسبة الـ CTR الخاصة بنتائجك فى محركات البحث .

س . ما هو الضرر الذى سيعود علي إذا تلاعبت بأكواد Schema ؟ 

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

س . كيف يُمكننى تعلم المزيد عن أكواد الـ Schema ؟ 

- يُمكنك مشاهدة سلسلة فيديوهات جوجل عن الـ Rich snippets و مراجعة دليل Schema و قراءة المزيد عن ما يُعرف بإسم " Semantic web


شكراً لكُم على متابعتكمُ 
تحياتى لكم / أحمد عزت

هناك 31 تعليقًا

  1. مقال رائع جدا يا استاذ احمد شكرا ليك جدا انا بقالى شهرمن بعد ما حضرتك قولتها فى ديجتاليزر بدور على شرح ليها ومكنتش لاقى
    اشكرك استاذى

    ردحذف
    الردود
    1. العفو يا أحمد مبسوط إنك لقيت اللى بتدور عليه أخيراً :)

      حذف
  2. شكرا والله شرح رائع جدا بس انا حصلت عندى مشكله مش عارف ايه سببها
    انا كنت ماسك فى جوجل fast and furious 7
    تحميل
    مشاهدة
    اى حاجه كنت بظهر انا الاول يمكن انا الاول فى الموضوع ده من اول ما الفيلم نزل فى جوجل لسه امبارح فجئة كدا لاقيت الموضوع ترااجع بشكل غريب جدا فى محرك البحث
    للعلم انا حولت من البلوجر للورد بريس بس الموضوع بنفس الرابط بنفس كل حاجه ممكن اعرف بقا ايه السبب او اعمل ايه ؟

    ردحذف
    الردود
    1. أحد الأسباب الرئيسية ممكن يكون إنك نقلت على الوورد بريس الفترة دى لكن هترجع تانى بعد فترة

      حذف
  3. أستاذ احمد انا موقعى سؤال وجواب يقدم اجابات زى اجابات جوجل
    رابط الـ Schema المناسب لموقعى يكون نوعه اى

    ردحذف
    الردود
    1. إستخدم Schema Question
      http://schema.org/Question

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

    ردحذف
    الردود
    1. للأسف الـ Schema على حد معرفتى ملهاش هاكات للمنتديات حتى الأن
      لكن ممكن تنفذى الموضوع بشكل يدوى زى ما شرحت فى المقالة

      حذف
  5. سؤال: في البداية شكرا لك تدوينة رائعة كالعادة .. لكن نبحث عن كود العاب فلاش ؟

    ردحذف
    الردود
    1. للأسف كود ألعاب الفلاش المستخدم حالياً هو Abuse وتلاعب بأكواد الـ Schema
      وأى تبليغ ضد هذه المواقع سيعرضها للعقاب .

      حذف
  6. شكرا يا مميز
    كم يلزم الوقت ليظهر في غوغل ؟
    أرجو شرح أكثر كيف يستخدم في الوردبريس و ماذا نملئ تلك الفراغات form ؟

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

    ردحذف
  8. عندي موقع خاص بالرجيم اسمه رجيم جيم ارجو الرد ما نوع السكيما التي يمكن اختيارها

    ردحذف
  9. مجال موقعي هو تدوينات عن مونتاج و تصميم ايا شيما تناسبني

    ردحذف
  10. شرح جميل و مبسط شكرا لك

    ردحذف
  11. تسلم ايدك يا ريس وربنا يخليك لينا.. وكنت عاوز اخد رأي حضرتك .. لو اكتب كل موضوع في مدونتي واعمله اكتر من 100 باك لينك ف ساعتها ف المنتديات المختلفة ده يساعدني اتصدر بسرعة ومفيد للموقع هل المعلومة دي صح ولا غلط ؟

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

    ردحذف
  13. جميل جدًّا، أشكرك جزيل الشكر

    ردحذف
  14. شكرا جزيلا بس كنت ارغب في شرح اضافه النجوم لموقعي في محركات البحث

    ردحذف
  15. شكرا لك اخي الكريم لاكن عندي سؤال اين اضع كود الـ Schema في مدونتي مع العلم ان مدونتي في منصة بلوجر ؟؟؟

    ردحذف
  16. شكرا على موضوع الرائع

    ردحذف
  17. شكرا على الموضوع المميز والرائع

    ردحذف
  18. الف شكر ياغالي .. شرح على مستوى عاااااالي .. والى الامام

    ردحذف
  19. استاذ احمد شكرا لك على المعلومة القيمة ولكن هل يمكن تحويل هذة المقالة الى فيديو تعليمى حتى يكون اكثر للتطبيق عملى

    ردحذف
  20. السلام عليكم
    أولاً: ميرسى جداً لحضرتك على الافادة والمعلومات الرائعه جدا والمفيدة.
    ثانياً: بخصوص الورد بريس
    هل ينفع اعمل اكواد ال schema بجانب اضافه ال SEO YOAST
    لان زى ما انت عارف الاضافه بتعمل اصلا اوبشن ال title , focus keywords , meta tags and descriptions to post result

    ردحذف
  21. موضوع أكثر من ممتاز،
    محتوى راقي جدا،
    بارك الله فيكم

    ردحذف

تابع سيو صح

تواصل معنا مباشرة

الاسم

بريد إلكتروني *

رسالة *