كيف تحسن من شكل نتائجك فى محركات البحث 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 " 

شكراً لكُم على متابعتكمُ 

تحياتى لكم / أحمد عزت