النص البديل مهم لأربعة أسباب رئيسية.

1. يحسن الوصول
2. يمكن أن تحسن “الصلة الموضوعية”
3. يمكن أن تساعدك على الترتيب في صور جوجل
4. يعمل كنص رابط لروابط الصور

1. يحسن النص البديل إمكانية الوصول

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

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

يتحدث Google عن أهمية النص البديل للمستخدمين الذين يستخدمون برامج قراءة الشاشة في دليل بدء تحسين محركات البحث (SEO) .

2. يمكن للنص البديل تحسين “الصلة بالموضوع”

تبحث Google في الكلمات الموجودة على الصفحة لفهم ما تدور حوله.

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

كيف يرتبط هذا بالصور؟

لأنه في بعض الأحيان ، يكون السياق “مغلقًا” في الصور التي يتعذر على Google قراءتها.

بينما يمكن لـ Google أن تقول على وجه اليقين أن هذه صور كلاب بدون alt text ، قد تكون السلالة المحددة أقل وضوحًا – وهنا يأتي دور النص البديل.

3. يمكن أن يساعدك ال alt text في الترتيب في صور Google

صور Google هي ثاني أكبر محرك بحث في العالم. إنها مسؤولة عن 20.45٪ من جميع عمليات البحث عبر الإنترنت ، مما يجعلها متقدمة على YouTube و Bing ومحركات البحث الأخرى  مجتمعة.

هذا يعني أن هناك فرصة لزيادة حركة المرور من صور Google.

ما عليك سوى إلقاء نظرة على عدد النقرات التي أجريناها على مدونة Ahrefs من صور Google في الأشهر الثلاثة الماضية:

يقول جون مولر من Google أن ال alt text جزء مهم من تحسين صور Google:

4. يعمل ال alt text كنص رابط لارتباطات الصور

يشير نص الرابط  إلى الكلمات القابلة للنقر التي تربط صفحة ويب بأخرى. تستخدمه Google لفهم المزيد عن صفحة الويب وما يدور حولها.

لكن ليست كل الروابط عبارة عن نصوص. بعض الصور.

تنص Google على:

إذا قررت استخدام صورة كارتباط ، فإن ملء ال alt text يساعد Google في فهم المزيد حول الصفحة التي ترتبط بها . تخيل أنك تكتب نصًا رابطًا لرابط نصي.

ما عليك سوى إضافة سمة alt إلى <img>العلامة في شفرة HTML.

صورة بعلامة بديل: 

<img src=“pie.jpg” alt=“steak and ale pie”>

إذا كنت تستخدم نظام إدارة محتوى حديثًا ، فيجب أن يكون من الممكن إضافة نص بديل دون الحاجة إلى البحث في كود HTML.

على سبيل المثال ، في WordPress ، يوجد حقل للنص البديل عند إضافة صورة إلى صفحة أو منشور:

الأشياء متشابهة في أنظمة إدارة المحتوى الأخرى.

لا ، هذه فكرة خاطئة شائعة.

إذا كانت الصورة موجودة لأغراض التزيين ولا تحمل معلومات مهمة ، فلا داعي لإضافة نص بديل.

على سبيل المثال ، تحتوي بعض مواقع الويب على رموز لفصل المحتوى:

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

الشيء نفسه ينطبق على الصور العامة أو المخزنة مثل هذا:

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

لكن ، هذه نقطة مهمة …

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

هذا هو الشكل الذي يبدو عليه:

<img src="spacer.gif" alt="">

تعرف على المزيد في هذا الدليل من WebAIM .

النص البديل ليس علم الصواريخ.

اتبع أفضل خمس ممارسات ، ويجب أن تكون جيدًا.

• كن موجزا . النص البديل المطول مزعج لمن يستخدمون برامج قراءة الشاشة. استخدم أقل عدد ممكن من الكلمات. (استخدم سمة longdesc إذا كان الوصف الطويل ضروريًا.)
• كن دقيقا.  ركز على وصف الصورة.
• تجنب حشو الكلمات الرئيسية.  هذا ليس مكانًا للكلمات المفتاحية.
• تجنب التصريح بأنها صورة.  ليست هناك حاجة لتضمين “صورة …” أو “صورة …” في الأوصاف. يمكن لكل من Google وقارئات الشاشة العمل على ذلك بأنفسهم.
• تجنب التكرار.  لا تكرر المعلومات الموجودة بالفعل في سياق الصورة. على سبيل المثال ، إذا كانت لديك صورة لستيف جوبز وكان النص الموجود أسفل الصورة مباشرةً يقرأ “ستيف جوبز” ، فلا داعي لإضافة هذا الوصف إلى علامة بديل. يجب أن تفهم Google أن التسمية التوضيحية هي ال alt text بشكل فعال.

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

دعنا نتأكد من فهمنا لما يصلح وما لا يصلح من خلال بعض الأمثلة.

سيئ: <img src=“cheesecake.png” alt=“picture of cheesecake”>
حسنًا : <img src=“cheesecake.png” alt=“cheesecake”>
جيد : <img src=“cheesecake.png” alt=“strawberry cheesecake”>
الأفضل :<img src=“cheesecake.png” alt=“strawberry cheesecake with cream”>

سيئ : <img src=“steve-jobs.png” alt=“steve jobs apple iphone ipad mac”>
حسنًا : <img src=“steve-jobs.png” alt=“steve jobs”>
جيد : <img src=“steve-jobs.png” alt=“apple founder, steve jobs”>
الأفضل :<img src=“steve-jobs.png” alt=“apple founder, steve jobs, holding the iphone 4”>

سيئ : <img src=“amp.png” alt=“image4">
حسنًا : <img src=“amp.png” alt=“orange amplifier”>
جيد : <img src=“amp.png” alt=“orange amplifier - 30 watts”>
الأفضل :<img src=“amp.png” alt=“orange AD30HTC - 30 watt amplifier”>

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

الكثير من الأدوات قادرة على الزحف إلى موقعك والعثور على سمات بديلة مفقودة ، بما في ذلك مراجعة موقع Ahrefs .

لكن عدم وجود alt text لا يمثل دائمًا مشكلة لأنه لا تتطلب جميع الصور نصًا بديلًا.

على سبيل المثال ، ألق نظرة على سمات ال alt text المفقودة هذه:

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

لذلك ، بدلاً من الزحف إلى موقعك والاستحواذ على كل سمة بديلة مفقودة (تحتوي معظم المواقع على الكثير من السمات المفقودة) ، فإن الفكرة الأفضل هي تدقيق علامات alt وتحسينها للصفحات التي تحصل بالفعل على زيارات.

هناك سببان لهذا:

1. لديهم قراء ضعاف البصر.  2.4٪ من مواطني الولايات المتحدة  لديهم إعاقة بصرية. هذا واحد من كل 42 شخصًا تقريبًا مما يعني أنه في المتوسط ، إذا استقبلت صفحتك 10000 زائر شهريًا ، فلن يتمكن 240 منهم من استهلاك المحتوى الخاص بك بشكل صحيح.
2. يمكن أن يحصلوا على المزيد من حركة المرور. يمكن أن يساعد النص البديل في ترتيب الصور بشكل أفضل في صور Google ، مما يؤدي إلى زيادة حركة المرور. حتى أن مجرد زيادة بنسبة 1٪ لصفحة بها 10000 زيارة شهرية تعني 100 زائر إضافي.

ها هي العملية:

الخطوة 1. ابحث عن الصفحات الأكثر زيارة من البحث العضوي

تحقق من Google Analytics أو Google Search Console أو تقرير “أهم الصفحات” في موقع Ahrefs Site Explorer .

الخطوة 2. قم بمراجعة سماتك البديلة

قم بتثبيت ملحق Alt Text Tester Chrome المجاني ، وقم بتحميل الصفحة بأكبر عدد من الزيارات ، ثم قم بتنشيط الامتداد.

من المفترض أن ترى النص البديل معروضًا عندما تقوم بالتمرير فوق صورة.

إذا كانت سمة ال alt text مفقودة ، فسترى تحذيرًا.

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

على سبيل المثال ، لا يستغرق الأمر سوى بضع ثوانٍ من التمرير في هذا المنشور لمعرفة أن جميع الصور مُحسَّنة جيدًا …

… في حين أن الشيء نفسه لا ينطبق على هذه الصفحة على المرآة:

الخطوه 3. كرر لمزيد من الصفحات

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

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

على سبيل المثال ، عشرة منشورات فقط على حساب مدونة Ahrefs تمثل 51٪ من حركة المرور العضوية الشهرية …

… حتى نتمكن من تدقيق ال alt text وتحسينه بسهولة لمعظم صفحاتنا ذات عدد الزيارات المرتفع في دقائق.

افكار اخيرة

يعد تحسين ال alt text أمرًا مهمًا ، ولكنه ليس تحسينات تحسين محركات البحث على الصور. يجب عليك أيضًا تحسين أسماء الملفات وتقديم صور سريعة الاستجابة والتفكير في التحميل البطيء وغير ذلك الكثير.