النص البديل

النص البديل (ALT Attributes) هل تعلم متى يمكنك فعليا رؤيته على مواقع الويب؟ تخيل معي إذا تعذر عرض صورة قمت برفعها على أحد مقالات لاي سباب كان، فلا يزال بإمكان الزائرين فهم ماهية الصورة من قراءة النص. يتم استخدام النصوص البديلة أيضًا بواسطة قارئات الشاشة لمساعدة المكفوفين على فهم الصورة.

التعريف بالنص البديل

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

أهمية استخدام النص البديل

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

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

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

في هذه الحالات، تعرض متصفحات الويب النص البديل.

النص البديل والسيو

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

كود HTML الخاص بسمات ALT في الصور

ALT هي سمة إلزامية في HTML. على الرغم من أن معظم المتصفحات تتجاهل سمات ALT المفقودة ، إلا أنها إلزامية لجميع علامات <img> و <area> لصفحة ويب متوافقة مع المعايير. لذلك ، يجب أن تبدو شفرة HTML للصور على الأقل كما يلي:

<img src="imagefilename.jpg" alt="alternative text">

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

<img src="background.jpg" alt="">

ولكن أنا أرى لا ضرر بإضافة نص تعبيري عن تلك الرسومات الزخرفية مثل

<img src="background.jpg" alt="Website Container Violet Gradient Backgound">

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

متطلبات سمات ALT

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

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

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

نصوص بديلة مناسبة لأنواع الصور المختلفة

يعتمد المحتوى الأمثل لنص البديل عالي الجودة إلى حد كبير على الغرض من الصورة ومحتواها. أولا يجب أن يخطر في بالك السؤال عن النص الذي سيحل محل الصورة إذا لم تكن موجودة في المقام الأول. بالإضافة إلى ذلك، يمكن أن يساعد التمايز في أنواع الصور التالية في صياغة سمة ALT الصحيحة لـ SEO:

• الصور المستقلة: محتوى رسومي يمثل نفسه. على سبيل المثال، الصور في المعارض والألبومات، لقطات شاشة توضيحية للتطبيقات، “صور ممتعة”، صور للتنزيل أو الشراء وما شابه. يوفر النص البديل وصفًا قصيرًا ولكن ذو مغزى للصورة بما في ذلك الكلمة الأساسية الأكثر أهمية لتحسين محركات البحث في البحث عن الصور.
• الصور المضمنة: تحل هذه الرسومات محل كلمات مفردة أو بضع كلمات لأسباب جمالية أو لتوفير المساحة. يتضمن ذلك الوجوه الضاحكة والرموز التعبيرية والرموز والأيقونات بالإضافة إلى الصور التوضيحية البسيطة. تحتوي سمة ALT المقابلة على النص الذي تحل محله الصورة – على سبيل المثال، 😀 “رمز تعبيري مبتسم” أو ببساطة “ابتسامة عريضة” 😁.
• الصورة التوضيحية: الرسوم البيانية والإحصاءات واللقطات التوضيحية. إذا كان الرسم يلخص النص المحيط فقط دون تقديم معلومات جديدة، يجب أن يحتوي النص البديل على نسخة مختصرة من محتوى الصورة. للحصول على تفسيرات أطول، يكون النص العادي المحيط أكثر ملاءمة لأنه مفيد لجميع الزوار.
• رسومات زخرفية بدون قيمة إعلامية: صور خلفية وإطارات وخطوط وما شابه ذلك. نظرًا لاستخدام هذه الصور حصريًا للجماليات المرئية، يتم تزويدها بسمات ALT فارغة، ولكن ما ضرر لو قدمنا نص بديل يصفها.

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

بينما لا يمكن تطبيق ALT إلا على علامات <img> ، فإن TITLE هي سمة عامة تدعمها معظم عناصر HTML. والغرض منه هو إضافة تعليقات أو تفسيرات قصيرة أو معلومات إضافية. تعرض مستعرضات الويب العنوان كتلميح أداة عندما يكون مؤشر الماوس عليه. نظرًا لأهميتها في إمكانية الوصول وسهولة الاستخدام، تعد النصوص البديلة أكثر أهمية لتحسين محركات البحث من عناوين الصور. لذلك فإن ALT هي مواصفة إلزامية، بينما لا يتم استخدام TITLE إلا بشكل مقتصد وحذر. وما يلي مثال على شكل كود إتش تي أم ال الخاص بذلك:

<img src="imagefile.jpg" alt="alternative text" title="Img. Title">

اطلع على: عناوين الصور وأسباب استخدامها.

قوانين إضافة النص البديل للصور

1. يجب إضافة إحدى العبارات المفتاحية المستهدفة ضمن سياق النص البديل.
2. لا تكتب العبارة المفتاحية لوحدها كنص بديل.
3. يمنع استخدام النص البديل ذاته لأكثر من صورة واحدة.
4. النص بديل يجب أن لا يقل عن 30 حرف.
5. سمة النص البديل لا تزيد عن 100 حرف.
6. النصوص البديلة إجبارية دوما إن كان للصورة البارزة أو للصور الداخلية.
7. هذه النصوص يجب أن تكون وصف جيد للصورة حتى لو كانت صورة زخرفية أو تعبيرية.
   • اكتب نص بديل لشخص أعمى.
   • أوضح ألوان الصورة. (أمر اختياري ويمكنك الاستغناء عنها إن لزم الأمر)
   • إن كانت تعبر عن حدث أو فعل أو زمان أو المكان يجب إيضاح ذلك.
   • اكتب المعزى من هذه الصورة.
   • النص البديل يعتبر تلخيص للمحتوى المحيط بالصورة.
8. النص البديل للصورة البارزة:
   • يحتوي على العبارة المفتاحية الرئيسية بالعربية.
   • يفضل أيضا كتابه العبارة الرئيسية بالإنجليزية.
9. النص البديل للصور الداخلية:
   • تحتوي على أحد العبارات المفتاحية ذات صلة أو مرادفة.
   • النص البديل ليس بنسخ للعنوان الفرعي بشكل حرفي.
   • تستخدم فقط العبارة المفتاحية العربية.

أمثلة على النص البديل

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

النص البديل الذي استخدمته أنا هنا هو رجل يحتضن طائر كناري الأصفر بيديه ويعتني به وخلفية الصورة سوداء.

لنحلل هذا النص البديل لنفهم مكوناته

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

أمثلة أخرى

أخطاء شائعة عن ملء حقول النص البديل للصور

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

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

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