يشرح Google النص البديل للشعارات والأزرار

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

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

في بودكاست Google Search Off the Record ، تناقش Lizzi Sassman و John Mueller من Google أفضل طريقة للتعامل مع النص البديل للشعارات والأزرار القائمة على الصور.

هناك أفضل الممارسات لإضافة سمات بديل إلى الشعارات والأزرار.

قد تبدو القواعد معقدة بعض الشيء في البداية ولكنها في الواقع سهلة الفهم.

يعد الحصول على سمات النص البديل أمرًا جيدًا للمستخدمين وهو أمر رائع على المدى الطويل لتحقيق الأرباح.

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

تبدأ Lizzi Sassman المناقشة بالإشارة إلى الصور الوظيفية، الصور التي لها غرض وظيفي على صفحة الويب.

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

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

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

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

يوضح John Mueller أنه لا يوجد غرض لتحسين محركات البحث لإضافة نص بديل إلى الأزرار.

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

واصلت Lizzi المناقشة:

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

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

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

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

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

هيئة صنع معايير HTML الرسمية، The World Wide Web Consortium (W3C) تنشر شرحًا حول كيفية التعامل مع الشعارات.

رابط الصفحة الرئيسية للشعار

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

يستخدم W3C هذا المثال من الكود:

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

مثال النص البديل المقدم من W3C يقول ببساطة، “W3C home” ولكن يمكن أن يكون أكثر وصفيًا إذا كنت تريد ذلك.

رابط الصفحة الرئيسية للشعار والنص

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

بمعنى آخر، لا يوجد رابطان مثل رابط واحد للشعار ورابط واحد للنص، إنه رابط واحد فقط لكل من الشعار والنص معًا.

في هذه الحالة، نظرًا لأن النص يصف وظيفة الارتباط، فسيكون تكرار وظيفة ارتباط الشعار متكررًا.

لذلك في هذه الحالة، فإن أفضل ممارسة هي استخدام نص بديل فارغ.

هذا هو المثال الذي تقدمه W3C:

لاحظ كيف يتم ترميز سمة النص البديل للصورة:

تسمى علامات الاقتباس الفارغة للنص البديل سمة بديل فارغة (أو نص بديل فارغ). قارئ الشاشة سوف يتخطاه ببساطة.

يعود سبب كون النص البديل الفارغ جيدًا إلى وجود نص يصف وظيفة الارتباط:

W3C الرئيسية

نص بديل لارتباط رمز

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

في هذا الموقف، من الممارسات السيئة وصف الصورة (مثل مغلف أو طابعة).

أفضل ممارسة هي وصف ما تفعله الصورة (بدء بريد إلكتروني أو طباعة صفحة ويب).

يستخدم W3C مثالاً لرمز الطابعة مع الكود التالي والنص البديل

كما ترى، فإن الرمز الموجود على شكل طابعة يحتوي على الكلمات “طباعة هذه الصفحة” كنص بديل. يخبر ما يفعله الرمز. هذا مفيد.