السلام وعليكم جميعاً
يوجد موضوع موسع عن الـ Microdata سوف أقوم بتحضيره إن شاء الله لكن حالياً دعوني إكلمكم عن
كيفية تحسين نتائج البحث لـ " مدونتك , شركتك , مؤسستك , شخصك " عن طريق حقن بعض الأكواد البرمجية
والخصائص لكود الـ HTML.
وبعد ذلك إستخدام أداة جوجل Structured Data Testing Tool لترى النتائج !
الموضوع يهم مطوري الويب - و قسم التسويق الإلكتروني أيضاً - لكن أكثره بالكود
الـ Microdata
بشكل بسيط هي عبارة عن طريقة لوصف محتوى صفحة الإنترنت بشكل أدق لمحركات البحث, المتصفحات, المستخدمين
ليستطيعوا بعد ذلك التمتع بالموقع بطريقة أكثر حداثة و قراءة كان على مستوى المستخدم أو الروبوت.
هل تحسن نتائج البحث ؟
بكل تأكيد.
وبناء على ذلك سوف أقوم اليوم بشرح طريقة إدرات التوصيفات تلك لمدونتك و تحسين
ظهورك على صفحات جوجل و محركات البحث الإخرى و من هنا ننطلق لعالم السكيما.
إذا كنت تدير مؤسسة - شركة - جمعية الخ عليك بالرابط التالي : http://ift.tt/q45wsd
اذا كنت تريد تحسين ظهورك كشخصية - ملفاتك الشخصية عليك بالرابط التالي : http://ift.tt/pQ5oHU
موقع سكيما يوفر لك الكثير من علامات الـ 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://ift.tt/1A0TNsW; rel="home">TheDonBassa@</a></p>
<p class="site-description">Seeking Perfection</p>
<div class="profile_info">
إبراهيم بصة - هاويّ تطوير مواقع و تسويق إلكتروني يمكن متابعتي من خلال مواقع التواصل الإجتماعي الظاهرة بالأسفل. </div>
<!-- /Header -->
<!-- Social Links -->
<link itemtype="url" href="http://ift.tt/1H48IQ6;
<span>إبراهيم بصة</span>
<ul class="list-unstyled social-list">
<li class="social-li"><a href="https://twitter.com/TheDonBassa" rel="nofollow" alt="Ibrahim Bassa Twitter" target="_blank">
<i class="fa fa-twitter"></i></a></li>
<li class="social-li"><a href="http://ift.tt/1A0TNt0; rel="nofollow" alt="Ibrahim Bassa Facebook" target="_blank">
<i class="fa fa-facebook"></i></a></li>
<li class="social-li"><a href="http://ift.tt/1H48GYD; rel="nofollow" alt="Ibrahim Bassa LinkedIn" target="_blank">
<i class="fa fa-linkedin"></i></a></li>
<li class="social-li"><a href="http://ift.tt/1A0TNt3; rel="nofollow" alt="Ibrahim Bassa Google+" target="_blank">
<i class="fa fa-google-plus"></i></a></li>
<li class="social-li"><a href="http://ift.tt/1H48GYF; rel="nofollow" alt="Ibrahim Bassa Pinterest" target="_blank">
<i class="fa fa-pinterest"></i></a></li>
<li class="social-li"><a href="http://ift.tt/1A0TM8t; rel="nofollow" alt="Ibrahim Bassa Instagram" target="_blank">
<i class="fa fa-instagram"></i></a></li>
</ul>
<!-- /Social Links -->
</span>
<!-- /Customize DonBassa -->
أول شي سوف نقوم بعمله هو إخبار المتصفح أو الروبوت أو عناكب البحث أن هنا يبدء إستخدام المقايس العالمية المتفق عليها للـ Microdata من خلال كتابة السطر التالي :
<span itemscope="" itemtype="http://ift.tt/172THTe;
هكذا أخبرنا المتصفح أن مدى المعلومات ضمن نطاق الـ 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/TheDonBassa" rel="nofollow" alt="Ibrahim Bassa Twitter" target="_blank">
<i class="fa fa-twitter"></i></a></li>
<li class="social-li"><a itemprop="sameAs" href="http://ift.tt/1A0TNt0; rel="nofollow" alt="Ibrahim Bassa Facebook" target="_blank">
<i class="fa fa-facebook"></i></a></li>
<li class="social-li"><a itemprop="sameAs" href="http://ift.tt/1H48GYD; rel="nofollow" alt="Ibrahim Bassa LinkedIn" target="_blank">
<i class="fa fa-linkedin"></i></a></li>
<li class="social-li"><a itemprop="sameAs" href="http://ift.tt/1A0TNt3; rel="nofollow" alt="Ibrahim Bassa Google+" target="_blank">
<i class="fa fa-google-plus"></i></a></li>
<li class="social-li"><a itemprop="sameAs" href="http://ift.tt/1H48GYF; rel="nofollow" alt="Ibrahim Bassa Pinterest" target="_blank">
<i class="fa fa-pinterest"></i></a></li>
<li class="social-li"><a itemprop="sameAs" href="http://ift.tt/1A0TM8t; rel="nofollow" alt="Ibrahim Bassa Instagram" target="_blank">
<i class="fa fa-instagram"></i></a></li>
</ul>
هكذا تكون الصفحة جاهزة لإستقبال محركات البحث - المستخدمين - الروبوتات - المتصفحات و تقول لهم أن هذه الصفحة تخص إبراهيم و تحمل
بعض المعلومات عنه في مدى الـ Person . وعند الإطلاع على الوصلة المرفقة يمكن أيضاً إضافة المزيد و المزيد من الإمور و التراميز الوصفية
لتحسن كل شيء في موقعك !
شكراً لكم, إحبكم يا مجتمع I/O العزيز :)
from حسوب I/O - الأكثر شيوعاً http://ift.tt/1A0TM8v
ليست هناك تعليقات:
إرسال تعليق
دائماً، رأيكم يهمنا،