فهم سمة عنوان الصورة

إن تحسين صور موقع الويب الخاص بك ليس بالمهمة اليسيرة. لا تحتاج فقط إلى التأكد من إمكانية إدارة أحجام ملفاتها لمنع أوقات تحميل الصفحات الطويلة ، ولكنها تقدم أيضًا العديد من الفرص لتحسين محرك البحث (SEO) الذي يسهل التغاضي عنه. على سبيل المثال ، قد لا تكون على دراية بسمة عنوان الصورة والدور الذي تلعبه في العناصر المرئية لموقعك.

في هذا المنشور ، سنلقي بعض الضوء على سمة عنوان الصورة ، ونناقش كيف تختلف عن سمة alt ، ونتحدث عما يعنيه ذلك بالنسبة لاستراتيجية تحسين محركات البحث الخاصة بك. سنوضح لك أيضًا كيفية إخفائه عن زوار موقعك.

دعنا نتعمق في!

اشترك في قناتنا على اليوتيوب

مقدمة لسمة عنوان الصورة

أول شيء أولاً: سمة عنوان الصورة ليست هي نفسها اسم ملف الصورة. بدلاً من ذلك ، يمكن تضمينها في علامة HTML الخاصة بالصورة أو الرسم. فيما يلي مثال ، مع سمة العنوان في النهاية:

<img src="filename.jpg" alt="description of your image" title="image title">

يتمثل التأثير الأكثر بروزًا لسمة العنوان في أنه يمكن للمستخدمين رؤيتها على أنها "تلميح أداة" في الواجهة الأمامية لموقعك عندما يحومون فوق الصورة:

لا تدعم جميع المتصفحات هذه الميزة. ومع ذلك ، فإن Firefox هو أحد المتصفحات القليلة ، وهو ثالث أكثر المتصفحات شيوعًا على الويب. يمكنك إضافة سمات عنوان الصورة في WordPress عبر مكتبة الوسائط الخاصة بك. ما عليك سوى النقر على الصورة المعنية وملء حقل العنوان :

يمكنك أيضًا إضافته مباشرةً في Block Editor. قم بتوسيع الإعدادات المتقدمة لكتلة الصورة واملأ حقل سمة العنوان :

الغرض من جعل عنوان الصورة مرئيًا عند التمرير هو توفير بعض السياق الإضافي للزائرين. على سبيل المثال ، سيتضمن بعض منشئي المحتوى أسماء الأشخاص المذكورين في الصورة ، أو التفاصيل الأساسية التي قد يستفيد المستخدمون من معرفتها.

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

عند إنشاء سمات العنوان الخاصة بك ، من الأفضل الاحتفاظ بها ببضع كلمات فقط. كن انتقائيًا ووصفيًا بحيث لا يكون نص التمرير طويلاً جدًا ويوفر قيمة للزائرين.

الفرق بين سمة العنوان مقابل السمة البديلة

ذكرنا سابقًا أنه من المهم إضافة نص بديل إلى صورك حتى إذا قمت بتضمين سمة العنوان. من الخطأ الشائع لمنشئي المحتوى أن يخلطوا بين سمة عنوان الصورة لسمة النص البديل ، أو أن يفترضوا أن استخدام كليهما أمر مبالغ فيه.

تحدد سمة alt النص البديل للصورة في علامة HTML الخاصة بها. إنها السمة الثانية المدرجة في مثالنا من قبل:

<img src="filename.jpg" alt="description of your image" title="image title">

الغرض من النص البديل هو وصف العناصر المرئية للمستخدمين الذين لا يمكنهم رؤيتها ، إما بسبب فشل تحميل الصورة أو لأنهم يستخدمون قارئ شاشة. سيتم عرض هذا النص بدلاً من الصورة في الحالات التي يتعذر فيها تقديمه:

في WordPress ، يمكنك إضافة نص بديل إلى الصور عبر مكتبة الوسائط الخاصة بك أو إعدادات أي كتلة صورة في محرر الكتلة. هذا هو المفتاح لضمان تلبية موقعك لمعايير إمكانية الوصول ، لذلك نشجعك بشدة على القيام بذلك.

من المهم للغاية عدم محاولة استخدام سمة عنوان الصورة لاستبدال سمة النص البديل. لا تدعم جميع برامج قراءة الشاشة سمة العنوان ، ولا توجد طريقة للمستخدمين الذين يعتمدون على التنقل باستخدام لوحة المفاتيح للتمرير فوق صورة لرؤيتها ، لذلك قد يؤدي ذلك إلى مشكلات خطيرة تتعلق بإمكانية الوصول على موقعك.

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

هناك الكثير من الرسائل المختلطة عندما يتعلق الأمر بمدى أهمية سمة عنوان الصورة بالنسبة إلى مُحسّنات محرّكات البحث. يدعي البعض أنها طريقة ممتازة لدمج كلمات رئيسية إضافية ، بينما يقول البعض الآخر إن روبوتات محركات البحث لا تزحف إليها.

لقص المطاردة ، فإن سمة عنوان الصورة ليست عامل ترتيب مباشر. ربما لن يؤدي تحسين صورك عن طريق إضافة عناوين إليها جميعًا إلى إحداث تغيير كبير في ظهور صفحاتك في نتائج محرك البحث.

ومع ذلك ، فإن تضمين سمات العنوان لن يضر أيضًا بموقعك من وجهة نظر تحسين محركات البحث. في الواقع ، توصي Google بذلك. إذا قامت روبوتات محرك البحث بالزحف إليها وقمت بدمج كلمات رئيسية ، فقد تتمكن من إعطاء صورك دفعة قوية في نتائج بحث صور Google على الأقل.

بالإضافة إلى ذلك ، قد تعمل عناوين الصور على تحسين تجربة المستخدم لموقعك (UX) من خلال مشاركة التفاصيل الأساسية مع الزوار. يمكن أن يساهم هذا بشكل غير مباشر في تحسين محركات البحث من خلال التأثير على عوامل الترتيب مثل مشاهدات الصفحة ومدة الجلسة ومقاييس أخرى من هذا القبيل.

ومع ذلك ، كما ذكرنا عدة مرات ، لا تدعم جميع المتصفحات والأجهزة نص التمرير. قد يكون تصفح مكتبة الوسائط الخاصة بك وإضافة العناوين إلى كل ملف مضيعة للوقت إذا لم يراها معظم المستخدمين لديك.

كيفية إخفاء عنوان الصورة تلميح في WordPress

قد تفضل إخفاء تلميح عنوان الصورة. ربما تشعر بالقلق من أن الزائرين سيجدونه مزعجًا ، أو يرغبون في استخدامه بشكل أساسي لأغراض تحسين محركات البحث ، لكن لا يشعرون أنه ضروري لمساعدة القراء على فهم المحتوى الخاص بك.

يمكنك فقط إزالة سمة العنوان من صورك في Block Editor ومكتبة الوسائط الخاصة بك. ومع ذلك ، ستفقد بعد ذلك أي فوائد محتملة لتحسين محركات البحث قد تراها منه.

ينتهي الأمر بمعظم الأشخاص الذين يرغبون في إخفاء تلميح الأداة بإضافة JavaScript إلى مواقعهم حتى يتمكنوا من الاحتفاظ بالسمة في علامات الصور الخاصة بهم ولكن مع منعها من الظهور في الواجهة الأمامية. نوصي باستخدام مكون إضافي مثل Insert Headers and Footers لتسهيل هذه العملية.

أضف التعليمات البرمجية التالية في قسم <head> ، ملفوفة في علامات البرنامج النصي:

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

إذا كنت تستخدم Divi ، فيمكنك تخطي تثبيت المكون الإضافي الإضافي وإضافة هذا الرمز بالانتقال إلى Divi> Theme Options> Integration :

سيضيف محرر الشفرة الأول على هذه الشاشة جافا سكريبت إلى قسم <head> في موقعك تمامًا مثل إدراج الرؤوس والتذييلات.

استنتاج

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

في هذا المنشور ، ناقشنا الاختلافات بين سمة عنوان الصورة وسمة alt حتى تتمكن من زيادة مُحسّنات محرّكات البحث لديك. لقد قمنا أيضًا بإرشادك إلى كيفية إخفاء تلميح أداة عنوان الصورة في الواجهة الأمامية حتى لا يتمكن الزوار من رؤيته عندما يحومون فوق صورة أو رسم.

هل لديك أي أسئلة حول سمة عنوان الصورة أو تحسين الصورة؟ اتركهم لنا في قسم التعليقات أدناه!

صورة جين كيلي / Shutterstock.com