السلام وعليكم جميعاً
يوجد موضوع موسع عن الـ Microdata سوف أقوم بتحضيره إن شاء الله لكن حالياً دعوني إكلمكم عن
كيفية تحسين نتائج البحث لـ " مدونتك , شركتك , مؤسستك , شخصك " عن طريق حقن بعض الأكواد البرمجية
والخصائص لكود الـ HTML.
وبعد ذلك إستخدام أداة جوجل Structured Data Testing Tool لترى النتائج !
الموضوع يهم مطوري الويب - و قسم التسويق الإلكتروني أيضاً - لكن أكثره بالكود
الـ Microdata
بشكل بسيط هي عبارة عن طريقة لوصف محتوى صفحة الإنترنت بشكل أدق لمحركات البحث, المتصفحات, المستخدمين
ليستطيعوا بعد ذلك التمتع بالموقع بطريقة أكثر حداثة و قراءة كان على مستوى المستخدم أو الروبوت.
هل تحسن نتائج البحث ؟
بكل تأكيد.
وبناء على ذلك سوف أقوم اليوم بشرح طريقة إدرات التوصيفات تلك لمدونتك و تحسين
ظهورك على صفحات جوجل و محركات البحث الإخرى و من هنا ننطلق لعالم السكيما.
إذا كنت تدير مؤسسة - شركة - جمعية الخ عليك بالرابط التالي :
http://schema.org/Organizationاذا كنت تريد تحسين ظهورك كشخصية - ملفاتك الشخصية عليك بالرابط التالي :
http://schema.org/Personموقع سكيما يوفر لك الكثير من علامات الـ HTML التي يمكن إدراجها لصفحات موقعك الإلكتروني لتحسين ظهور هذه الصفحات بمحركات البحث, وأيضاً التسهيل على المستخدم في فهم بنية المعلومات و قرائتها.
الكود قبل إدخال أكواد الوصف يكون هكذا
<!-- Customize DonBassa -->
<!-- Theme Image -->
<img src="MyProfilePic.jpg" class="img-thumbnail profile_image" alt="Image Of Ibrahim J. Bassa" title="إبراهيم بصة">
<!-- /Theme Image -->
<!-- Header -->
<p class="site-title"><a href="
http://127.0.0.1/donbassa/wp
" rel="home">TheDonBassa@
Seeking Perfection
إبراهيم بصة - هاويّ تطوير مواقع و تسويق إلكتروني يمكن متابعتي من خلال مواقع التواصل الإجتماعي الظاهرة بالأسفل.
<!-- /Header -->
<!-- Social Links -->
إبراهيم بصة
<!-- /Social Links -->
<!-- /Customize DonBassa -->
أول شي سوف نقوم بعمله هو إخبار المتصفح أو الروبوت أو عناكب البحث أن هنا يبدء إستخدام المقايس العالمية المتفق عليها للـ Microdata من خلال كتابة السطر التالي :
<span itemscope="" itemtype="
هكذا أخبرنا المتصفح أن مدى المعلومات ضمن نطاق الـ Person , من ثم ننطلق لإضافة باقي الترميزات المهمة - و أهمها اليوم سوف نركز على الـ Image , Name , SameAs . وعبر الوصلات المرفقة بالأعلى يمكن الإطلاع على باقي القائمة . فـ نبدء نخبر المتصفح أن هنا يكون الإسم هكذا - عند إضافة itemprop لوسم الصورة ويحمل قيمة image :
<!-- Theme Image -->
<img itemprop="image" src="MyProfilePic.jpg" class="img-thumbnail profile_image" alt="Image Of Ibrahim J. Bassa" title="إبراهيم بصة">
<!-- /Theme Image -->
أخبرنا المتصفح أن هذه الصورة تخص إبراهيم - إعتمدوها كـ صورة شخصية :) وبعد ذلك نأتي للإسم :
<span itemprop="name">Ibrahim J. Bassa</span>
وبعد ذلك نضيف الـ itemprop لوصلات " وسم الـ Hyperlink " ملفات التواصل الإجتماعي ويحملوا القيمة sameAs
<ul class="list-unstyled social-list">
<li class="social-li"><a itemprop="sameAs" href="
https://twitter.com/TheDonB...
" rel="nofollow" alt="Ibrahim Bassa Twitter" target="_blank">
هكذا تكون الصفحة جاهزة لإستقبال محركات البحث - المستخدمين - الروبوتات - المتصفحات و تقول لهم أن هذه الصفحة تخص إبراهيم و تحمل
بعض المعلومات عنه في مدى الـ Person . وعند الإطلاع على الوصلة المرفقة يمكن أيضاً إضافة المزيد و المزيد من الإمور و التراميز الوصفية
لتحسن كل شيء في موقعك !
شكراً لكم, إحبكم يا مجتمع I/O العزيز :)