25 أكتوبر 2014

كيفية تحسين صور المدونة لمحركات البحث و سيو

كيفية تحسين عنوان و وصف الصور لمحركات البحث و سيو تلقائيا

في الدرس الاول من سلسلة دروس سيو تعرفنا على كيفية فحص الموقع و تحسينه لمحركات البحث و سيو اليوم سوف نتعرف على كيفية تحسين عنوان و وصف الصورة في محركات البحث و يتم ذلك بحيث يتم فهرسة الصور على صفحات المدونة الخاصة بك تلقائيا عن طريق محركات البحث مثل جوجل بدلا من اضافة هذا الكود يدويا
 <img alt="description of the image" height="125" scr="/image.png" width="125" />
  عندما تنشر الصورة مع هذه الطريقة سوف يكون لكل صورة نفس وصف و عنوان الموضوع


لماذا يجب تحسين الصور تلقائيا إلى سيو ؟


لأن الصور على صفحة المدونة تعتبر 30% تقريبا من المحتوى والتي يمكن استخدامها لزيادة حركة المرور على محركات البحث لأن معظم مستخدمي الإنترنت من المرجح جدا انهم يقومون بتصفح الصور عبر الإنترنت.

وإليك كيفية تثبيت كود SEO التلقائي على الصور


ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

 الان كل صورة على المدونة سوف تكون محسنة بالنسبة لسيو تلقائيا انتظرونا في الدرس الثالث من سلسلة دروس سيو 

يمكنك ايضا مشاهدة : افحص موقعك و اعرف مدى توافقه مع سيو

بالتوفيق

مواضيع ذات صلة
كيفية تحسين صور المدونة لمحركات البحث و سيو
4 / 5
بواسطة

هناك 20 تعليقًا :

  1. موضوع رائع اخي شكرا لك

    ردحذف
    الردود
    1. بل مرورك الاكثر من رائع اخي محمد شكرا لك =r

      حذف
  2. كم انت مبدع أخي الغالي..أشكرك جزيل الشكر

    ردحذف
    الردود
    1. الشكر لله يا غالي
      وانا نقطة في بحر ابداعك
      شكرا لمرورك =r

      حذف
  3. إستفدت كثير من تدوينتك هذه ومن كثير من تدويناتك الابداعية استمر الى الامام ياغالي ربنا يوفقك

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

      احترامي لشخصك الكريم =r

      حذف
  4. كنت قد علقت على هذه التدوينه من قبل ولاكنني لم انتبه الى ذلك s= المعذرة منك

    ردحذف
  5. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. و عليكم السلام و رحمة الله و بركاته
      اعتذر منك لمسح التعليق
      بالنسبة للقالب الثاني قامو بالتعديل عليه و هذا يكون بوضع اكواد html و هذه تحتاج شرح إن شاء الله نقوم بعمل موضوع لهذا

      حذف
    2. شكرا لك على الرد وفى انتظار هذا الموضوع فى اقرب وقت

      حذف
    3. اهلا بك اخي الكريم
      ايضا لو لديك خبرة في CSS و HTML يمكنك الدخول إلى هذا الموضوع

      http://mudwnp.blogspot.com/2014/12/minima-colored-3-responsive-blogger_33.html

      و تحميل القالب و اخذ الاكواد منه

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

    ردحذف
    الردود
    1. اهلا بك اختي الكريم
      اولا لا شكر على واجب
      الكود يعمل بالطريقة التالية
      قبل تحميل الصورة على مدونة بلوجر يجب تسميتها مثال : هناك صورة على سطح مكتبي و اريد و ضعها صورة اساسية في الموضوع
      لذلك قبل ان اقوم برفعها على بلوجر اقوم بتسميتها باسم الموضوع ثم اقوم برفعها هنا يأتي دور الكود
      و يأخذ الاسم الذي قمتي بتسميته للصورة تلقائيا مثال : http://test-mudwnp.blogspot.com/2015/01/blog-post_22.html
      في هذا الرابط توجد صورة لو وضعت مؤشر الماوس على الصورة سوف تجدين اسم الصورة sport 708
      الان لو انا قمت بتسمية الصورة على اسم الموضوع " الرياضة حياة "
      سوف يظهر الاسم عند وضع مؤشر الماوس " الرياضة حياة "

      اتمنى ان يكون تم التوضيح
      اي سؤال او استفسار اخر انا جاهز =r

      حذف
  7. لا شكر على واجب
    و بارك الله فيك ايضا =r

    ردحذف
  8. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. شكراً لتعليقك ولكن لا ننشر روابط إشهار

      حذف
  9. تسلم لزوقك .....

    مجرد سؤال حضرتك رغيب امين ...... او محترف آخر ........ ؟

    ردحذف
    الردود
    1. لا محترف آخر
      اسم مدونته مدونة المحترف
      اسم مدونتي مدون محترف

      حذف
  10. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r