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

دروس سيو : حصريا اليك سر من اسرار اضخم المواقع ليكون موقعك في اوائل محركات البحث ومنسق وصديق لمحرك جوجل 4.5 of 5
السلام عليكم و رحمة الله و بركاته
في هذا الشرح سوف نتكلم عن شئ بسيط جدا و لكنه غير معروف في العالم العربي و يستخدمه اكبر الشركات و المواقع في العالم .. و شئ يخفيه أكبر شركات الـ SEO الأجنبية .
سوف نتكلم عن مجموعة أكواد تُسمي Schema Markup .. هل سمعت بها من قبل ؟ تابع معي سوف نقوم بشرح كل شئ فيها بالتفصيل ..
ماذا يكون Schema Markup و ماذا يفعل ؟
أن Schema Markup او السكيما عبارة عن مجموعة أكواد HTML تٌقدم موقعك بشكل أفضل و أسرع لجميع محركات البحث .. و تقوم بإعطاء جميع معلومات موقعك بشكل سليم و صحيح 100% لمحركات البحث .
و أيضا تقوم بتحسين شكل موقعك في محركات البحث .
ثبت بالدليل القاطع أن عدد النقرات التى تحصل عليها من محرك البحث كفيلة بدفعك للصفحة الأولى فى جوجل خلال أيام إن لم يكن ساعات قليلة ! .. لذا سبيلك نحو تحقيق عدد ضغطات أكبر من المواقع المنافسة لك فى محركات البحث هو تحسين شكل نتائج موقعك وهذا يتم عن طريق ما يعرف بإسم Schema Markup .
و السكيما تقوم محركات البحث المُختلفة مثل Google, Yahoo, Bing و ايضا محرك البحث الروسي Yandex بالإعتماد علي السكيما فى قراءة محتوى الصفحات على الإنترنت وعرض معلومات أكثر عنها للمستخدم .
دعنى أريك بعض الأمثلة لكود سكيما :
كود Schema review
يستخدم هذا الكود في وضع تقييم للموضوع كما موضح بالصورة التي بالاعلي .. و يمكنك استخدامها في موضوع عن (لعبة , برنامج , نظام تشغيل .. الخ ) .

كود Schema Event
سوف نستخدم هذا الكود لنشر معلومات عن اسم و موعد و مكان انعقاد المناسبة كما موضح بالصورة التي بالاعلي .

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

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

كود 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
المختلفة التى إن أردنا شرحها جميعاً علينا أن نخصص لها موقع كامل ...
لذا أنصحك بمتابعة المصادر التالية :
Schema.org
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.ALam3arb.com/",
   "potentialAction": {
     "@type": "SearchAction",
     "target": "http://www.ALam3arb.com/search?q={إبحث من هنا ...}",
     "query-input": "required name=إبحث من هنا ..."
   }
}
</script>

قم بتغيير الرابط المقابل لكلمة "url/" برابط موقعك 
وقم بتغيير الرابط المقابل لكلمة " target " برابط إجراء عمليات البحث داخل موقعك 
على سبيل المثال فى سيو صح سوف نستخدم هذا الرابط :
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 " .
و بالتوفيق .. شكرا لــلخبير yourcolor

تعليقات

شاركنا بأفكارك، آرائك و اي استفسارات حول هذا الموضوع!