درسنا اليوم سنشرح فيه كيفية إضافة وسم ALT مع العنوان إلى جميع الصور الموجودة بمدونتك تلقائيا لرفع وثيرة أرشفتها على محركات البحث، وذلك لكون هذا الوسم هو المسؤول في جلب الزوار الذين يبحث على الصور في محركات البحث.
إن كنت لأول مرة تسمع عن وسم ALT : فهو عبارة عن سطر نقوم بإضافته بعد عنوان الصورة داخل كود html، لوضع اسم للصورة.
فوائد استخدام كود إضافة وسم ALT تلقائياً :
- تحسين البحث عن الصور على محرك البحث جوجل، بحيث تكون الصورة التي يتم إيجادها مرتبطة بمدونتك، وبالتالي ستلاحظ أنك كسبت زواراً كثر، وهذا يساهم أيضا في تطوير السيو "SEO" الخاص بك.
- كسب صداقة محركات البحث السيو - "SEO" وتحسين نتائج موقعك.
- الرفع و الزيادة من عدد الزوار خصوصا من القادمين عبر البحث عن الصور.
- احتلال مراتب عالية في السيو - "SEO".
- أرشفة و فهرسة الصور بشكل تلقائي.
- الرفع و الزيادة من عدد الزوار خصوصا من القادمين عبر البحث عن الصور.
- احتلال مراتب عالية في السيو - "SEO".
- أرشفة و فهرسة الصور بشكل تلقائي.
- كما أن من مميزات هذا الكود أيضا أنه يقوم بتوليد وإضافة وسم ALT مع العنوان لجميع الصور القديمة و الجديدة، فبمجرد إضافته يقوم بعمل كل هذه الخطوات وتطبيقها على جميع الصور الموجودة.
طريقة تركيب كود توليد وإضافة وسم ALT مع العنوان لجميع الصور القديمة و الجديدة :
1- قم بتسجيل الدخول إلى لوحة تحكم مدونتك و اضغط على قالب من القائمة الجانبية.
2- ثم أنقر على "تحرير Html".
* لا تنسى أخذ نسخة إحتياطية لقالب مدونتك، لاسترجاعها عند حدوث أي خطأ ( تعلم كيف تقوم بأخد نسخة إحتياطية لقالب مدونتك و استرجاعها عند الضرورة ).
3- بعد ذلك اضغط على Ctrl + F للبحث عن السطر أسفله :
</body>
4- ثم انسخ فوقه مباشرة الكود التالي :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<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('.')));
$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('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
* السطر الملون بالأحمر أضفه فقط في حالة إن لم تكن تتوفر عليه داخل كود HTML الخاص بمدونتك، وتجاهله إن كان غير ذلك.
5- و قم بحفظ القالب.
*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
و دمتم في رعاية الله وحفظه
التعلـيــقــات : 0
إرســــــال تعليــــق