ما هي علامة Alt وكيف يجب استخدامها؟

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

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

هيا بنا نبدأ!

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

ما هي علامة بديل؟

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

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

تُضاف علامة الجودة البديلة داخل علامة الصورة ، وهي عبارة عن وصف موجز لا يشرح فقط ما تقدمه الصورة ، ولكن الغرض منه على الصفحة. عند استخدامها في كود HTML ، تبدو علامة الصورة الكاملة كما يلي:

<img src="motorcycle-sunset.png" alt="Man in black and red checkered shirt riding an orange motorcycle at sunset."/>

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

لماذا استخدام العلامات البديلة على الصور؟

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

أنها تحسن الوصول إلى الويب

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

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

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

يمكنهم تعزيز تصنيفات محرك البحث الخاص بك

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

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

للتأكيد على الدور المهم الذي تلعبه الصور (وبدورها ، العلامات البديلة) في تحسين محركات البحث ، ضع في اعتبارك صفحة نتائج محرك البحث (SERP) لـ "سرير بحجم كينج":

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

كيفية إضافة علامة بديلة للصورة في ووردبريس

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

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

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

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

كيفية إضافة علامة بديلة للصورة في HTML

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

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

سيعرض رمز HTML علامة الصورة. ستلاحظ أن سمة النص البديل فارغة. ضع النص الخاص بك بين علامات الاقتباس:

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

تلميحات وأفضل الممارسات لكتابة علامات بديلة للصور

عند إنشاء علامات بديل ، هناك بعض النقاط الأساسية التي يجب وضعها في الاعتبار. سيساعد الالتزام بأفضل الممارسات هذه في جعل علامات alt أكثر فعالية:

• كن محددًا وصفيًا. الغرض من علامات alt هو وصف الصورة ، لذلك تريد أن تكون محددًا قدر الإمكان. إذا لم تكن متأكدًا مما إذا كان وصفك كافيًا ، ففكر في الصورة التي قد تتخيلها إذا رأيت هذا السطر من النص فقط.
• اختصر. بينما تريد أن تكون مفصلاً ، لا تحتاج أيضًا إلى جعل علامة alt الخاصة بك طويلة (أو حتى جملة كاملة). تهدف إلى حوالي 100 إلى 125 حرفًا كحد أقصى.
• لا تكن زائدة عن الحاجة. لتحقيق أقصى استفادة من علامة alt ، لا تريد تضمين أي كلمات غير ضرورية. يتضمن ذلك إضافة "صورة لـ" أو "صورة لـ" قبل الوصف. هذه العناصر غير ضرورية ، لأنها ضمنية بالفعل.
• دمج الكلمات الرئيسية ذات الصلة بشكل طبيعي . ضع في اعتبارك الكلمات الرئيسية المستهدفة ، وحيثما أمكن ، قم بدمجها بشكل عضوي في سياق الصفحة. يكون هذا أسهل عند استخدام صور وثيقة الصلة للغاية تتوافق مع النص.
• تجنب حشو الكلمات الرئيسية. أثناء استخدام الكلمات الرئيسية في علامات alt الخاصة بك يمكن أن يحسن مُحسّنات محرّكات البحث ، احرص على عدم المبالغة في ذلك. يمكن أن يؤدي حشو الكلمات الرئيسية في الواقع إلى الإضرار بمُحسنات محركات البحث لديك وينتج عنه تجربة مستخدم سيئة.
• لا تستخدم الصور في مكان النص. الغرض الأساسي من علامة alt الأساسي هو توفير سياق نصي للآلات التي لا يمكنها معالجة العناصر المرئية على الصفحة وتفسيرها. لذلك ، ليس من المنطقي استخدام النص داخل الصور ، خاصةً في العناوين وعناوين الصفحات.

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

استنتاج

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

هل لديك أي أسئلة أخرى حول ماهية علامة alt أو كيفية إضافة واحدة في WordPress؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!

صورة مميزة بواسطة Honza Hruby / shutterstock.com