“النص البديل alt text” هو اختصار لـ “alternative text“. وهو وصف قصير مكتوب للصورة ، مما يجعل هذه الصورة قابلة للقراءة عندما يتعذر عرضها لسبب ما. النص البديل المكتوب جيداً مهم لإمكانية الوصول إلى موقع الويب الخاص بك ، وتحسين السيو.
فهرس المحتويات
ما هو النص البديل Alt Text؟
يتم استخدام النص البديل (Alt Text) ، والمعروف أيضا باسم “سمات النص البديل” ، أو “الأوصاف البديلة” ، أو “العلامات البديلة” ضمن تعليمات HTML البرمجية لوصف مظهر الصورة ووظيفتها على الصفحة.
ما هي استخدامات النص البديل Alt Text
- إضافة نص إلى الصور هو أولاً وقبل كل شيء مبدأ الوصول إلى الويب. سيتم قراءة سمة بديل للمستخدمين المعاقين بصريا الذين يستخدمون برامج قراءة الشاشة لفهم الصورة على الصفحة بشكل أفضل.
- سيتم عرض النص بدلاً من الصورة إذا تعذر تحميل ملف الصورة.
- يوفر النص البديل سياق / أوصافا أفضل للصورة لبرامج زحف محركات البحث ، مما يساعدهم على فهرسة الصورة بشكل صحيح.
مثال على نص بديل
<img src="cutecat.gif" alt="Cat Dancing">
تنسيق النصوص البديلة الأمثل للسيو
يعتبر أفضل تنسيق للنص البديل Alt Text بأن يكون وصفي بدرجة كافية و أن لا يحتوي على أي محاولات غير مرغوب فيها لحشو الكلمات المفتاحية.
إذا كان بإمكانك أن تغمض عينيك ، وتطلب من شخص ما قراءة النص لك ، وتخيل نسخة دقيقة بشكل معقول من الصورة ، فأنت على المسار الصحيح.
لنلقِ نظرة على بعض الأمثلة للنص البديل لهذه الصورة للبيتزا:
مقبول:
<img src="pizza.png" alt="pizza">
هذا النص “مقبول” فقط لأنه ليس وصفيا للغاية. نعم ، هذه صورة لوجبة بيتزا ولكن ، هناك المزيد ليقال عن هذه الصورة.
جيد :
<img src="pizza.png" alt="delicious pizza with cheese with vegetables">
يعتبر هذا النص بديلا أفضل لأنه أكثر وصفيا لما هو موجود في الصورة. هذه ليست مجرد “بيتزا” (كما أوضح مثال النص الأول) ؛ إنها بيتزا لذيذة مع الجبنة والخضروات
لا ينصح بـ
<img src="pizza.png" alt="">
<img src="pizza.png" alt="pizza meal delicious pizza meal pizza taste pizza pizza good taste">
لا تستخدم أي من هذه الأمثلة. لاحظ أنه لا يحتوي السطر الأول من التعليمات البرمجية في الواقع على أي نص بديل على الإطلاق (لاحظ أن علامات الاقتباس فارغة)
بينما يوضح المثال الثاني حشو الكلمات المفتاحية في النص وهذا شيء قد يضر بالسيو لموقعك
ما أهمية النص البديل Alt Text؟
- إمكانية الوصول
النص البديل هو أحد مبادئ تصميم الويب الذي يمكن الوصول إليه. والغرض الأصلي منه (ولا يزال أساسيا) هو وصف الصور للزوار غير القادرين على رؤيتها.
يتضمن ذلك برامج قراءة الشاشة والمتصفحات التي تحظر الصور ، ولكنها تشمل أيضا المستخدمين ضعاف البصر أو غير القادرين على التعرف على الصورة بصرياً.
يضمن تضمين نص مع صورك أن بإمكان جميع المستخدمين ، بغض النظر عن القدرة البصرية ، تقدير المحتوى الموجود على موقعك.
يمكنك معرفة المزيد بحسب ما أقرته شركة جوجل - تحسين السيو وتجربة المستخدم
يمكن أن يؤدي استخدام النص البديل على صورك إلى تحسين تجربة المستخدم ، ولكنه قد يساعدك أيضا في
كسب مزايا تحسين محركات البحث الصريحة والضمنية. إلى جانب تنفيذ أفضل ممارسات عنوان الصورة وتسمية الملف ، بما في ذلك النص البديل قد يساهم أيضا في تحسين محركات البحث للصور.
بينما تحسنت تقنية التعرف على صور محرك البحث بشكل كبير على مر السنين ، لا تزال برامج زحف البحث غير
قادرة على “رؤية” الصور على صفحة موقع ويب كما نستطيع ، لذلك ليس من الحكمة ترك التفسير في أيديهم
فقط.
إذا فهموا الأمر بشكل خاطئ ، فمن الممكن أن تقوم إما بالترتيب للكلمات المفتاحية غير المقصودة أو يفوتك الترتيب تماماً.
كيف أكتب نصاً جيدا؟
- صف الصورة بأكبر قدر ممكن من الدقة. تم تصميم النص البديل ، أولاً وقبل كل شيء ، لتوفير تفسيرات نصية للصور للمستخدمين غير القادرين على رؤيتها. إذا كانت الصورة لا تنقل أي معنى أو قيمة وكانت موجودة فقط لأغراض التصميم ، فيجب أن تعيش داخل CSS ، وليس HTML.
- اجعل النص البديل قصير تقطع برامج قراءة الشاشة الأكثر شيوعا النص البديل بحوالي 125 حرفا ، لذلك ينصح بالاحتفاظ به لعدد الأحرف أو أقل
- استخدام كلماتك المفتاحية يوفر لك النص البديل فرصة أخرى لتضمين كلمتك المفتاحية المستهدفة على إحدى الصفحات ، وبالتالي فرصة أخرى للإشارة إلى محركات البحث بأن صفحتك وثيقة الصلة باستعلام بحث معين. بينما يجب أن تكون أولويتك الأولى هي وصف الصورة وتوفير سياق لها ، إذا كان من المنطقي القيام بذلك ، فقم بتضمين كلمتك المفتاحية في النص البديل لصورة واحدة على الأقل على الصفحة
انظر : الكلمات المفتاحية Keywords وكيف تختارها بالشكل الصحيح - تجنب حشو الكلمات المفتاحية لن تقوم Google بإرساء نقاط لك للحصول على نص بديل مكتوب بشكل سيئ ، ولكنك ستواجه مشكلة إذا استخدمت النص البديل كفرصة لإضافة العديد من الكلمات المفتاحية ذات الصلة .ركز على كتابة نص بديل وصفي يوفر سياقا للصورة ، وإذا أمكن ، يتضمن كلمتك المفتاحية المستهدفة ، واترك الأمر عند هذا الحد.
- لا تستخدم الصور كنص. هذا أقل من أفضل الممارسات الخاصة بالنص البديل وأكثر من عقيدة تطوير الويب الصديقة لمحركات البحث العامة. نظرا لأن محركات البحث لا تستطيع قراءة النص داخل صورك ، يجب تجنب استخدام الصور بدلاً من الكلمات. إذا كان لا بد من القيام بذلك ، فشرح ما تقوله صورتك في النص البديل Alt Text.
- لا تهمل أزرار النموذج إذا كان أحد النماذج على موقعك على الويب يستخدم صورة على أنها زر “إرسال” ، فامنحها سمة النص البديل. يجب أن تحتوي أزرار الصورة على سمة بديل تصف وظيفة الزر مثل ، “بحث” ، “قدم الآن” ، “اشتراك” ، وما إلى ذلك.
كيف يبدو النص البديل الجيد؟
دعنا نلقي نظرة على مثال للنص البديل أثناء العمل:
مقبول :
<img src=”جناح طائرة.png” alt=”رجل على جناح الطائرة”>
جيد :
<img src=”جناح طائرة.png” alt=”رجل جالس على جناح الطائرة”>
جيدا جداً :
<img src=”جناح طائرة.png” alt=”رجل مرتدي بدلة وربطة عنق جالس على جناح الطائرة”>
بعض الأسئلة التي قد تدور في ذهنك عن Alt Text
أشر إلى مكان ما على الصفحة باستخدام الماوس ، وانقر بزر الماوس الأيمن واختر “فحص inspect” من القائمة. سيظهر رمز المصدر للصفحة على الجانب الأيمن من الشاشة.
انقر فوق الرمز الأول الموجود على يسار لوحة أكواد HTML ، ثم ابحث عن الصورة على الصفحة التي ترغب في رؤية علامة alt الخاصة بها وانقر عليها أيضا. سيتم تمييز كود HTML لهذا العنصر بكل سمات الصورة
بمجرد النقر فوق “فحص” ، ستحتاج إلى البحث عن علامة HTML ذات الصلة في اللوحة التي تعرض الكود المصدر للصفحة. النص البديل مسبوق بعلامة تقرأ “alt =” ، وما يليه هو النص
عند فحص صورة في التعليمات البرمجية المصدر لصفحة ، إذا كانت علامة alt بعد “alt =” تعرض علامتي اقتباس فقط بدون محتوى بينهما ، فإن سمة alt فارغة ، أي لا يوجد نص بديل.
في Microsoft Word ، يمكنك النقر بزر الماوس الأيمن على الصورة وتحديد “تعديل النص البديل” من القائمة. املأ وصف الصورة في مربع الإدخال وانقر على “موافق”.
نعم ، ويجب عليك. يسمح تضمين علامات الترقيم المناسبة في النص البديل لقراء الشاشة بتقديم تجربة مستخدم أفضل.
الحد الأقصى لطول النص الموصى به لاستيعاب معظم برامج قراءة الشاشة هو 125 حرفاً.
يعد جزءاً مهماً في تحسين محركات البحث وإمكانية وصول المستخدم ، لذا حاول أن تضعهما في الاعتبار أثناء تحسين علامات alt.
استنتاج أخير
في الختام: كتابة نص رائع للصور يجعلك مصمماً أفضل الصور خادعة ، وإتاحتها يمكن أن يتطلب الكثير من التفكير. بالنسبة لي ، فإن الجانب الأكثر قيمة في التفكير كمصمم هو أنه يجبرني على التفكير في معنى الصورة والغرض منها.
ساعدتني ممارسة كتابة النص للصور في تحسين تصميماتي. لقد قمت بالتصحيح الذاتي أثناء التصميم: بمحاولة كتابة نص بديل لرمز ، اكتشفت أن الرمز نفسه غامض للغاية ، مما دفعني بعد ذلك إلى تعديل تصميماتي لجعل الرمز أكثر قابلية للفهم.
من خلال التفكير بشكل أكبر في الصور التي تقوم بتضمينها في تصميمك أو عمل المحتوى والتأثير الذي تتركه على جميع أنواع الأشخاص ، فأنا على ثقة من أنك ستتمكن من جعل عملك أقوى بكثير. يمكن أن تكون الصور شكلًا قوياً جدا من المعلومات – مما يجعلها أكثر قوة من خلال الفكر الذي يدخلها.
انظر ايضا :
