در یک پادکست Google Search Off the Record، لیزی ساسمن و جان مولر از Google بهترین راه برای مدیریت متن جایگزین برای آرمها و دکمههای مبتنی بر تصویر را مورد بحث قرار میدهند.
بهترین شیوهها برای افزودن ویژگیهای alt به آرمها و دکمهها وجود دارد.
قوانین ممکن است در ابتدا کمی پیچیده به نظر برسند، اما درک آنها در واقع ساده است.
دریافت صحیح ویژگیهای alt برای کاربران خوب است و در دراز مدت برای کسب درآمد عالی است.
افزودن متن جایگزین به تصاویر کاربردی
لیزی ساسمن بحث را با ارجاع به تصاویر کاربردی، تصاویری که هدف کاربردی در صفحه وب دارند، شروع میکند.
او می پرسد که آیا متن جایگزین باید توضیح دهد که دکمه چه کاری انجام می دهد یا تصویر روی دکمه در موقعیتی که یک دکمه یک نماد است، چیست.
در نهایت، او میپرسد که آیا هدفی از سئو برای افزودن متن جایگزین به تصاویر کاربردی مانند دکمهها وجود دارد یا خیر.
«لیزی ساسمن:
… سطح مراقبتی که در آن برای دارایی بصری صرف می کنیم، باید همان سطح انرژی را در کلماتی که آن دارایی را توصیف می کنند نیز بگذاریم. که به نظر من عالی است.دسته دیگری از تصاویر مانند چیزهای کاربردی است که گاهی اوقات ممکن است یک دکمه باشد.
مثل اینکه یک گرافیک است که به عنوان چیزی نیز عمل می کند.
پس آیا متن جایگزین باید به من بگوید که چه اتفاقی قرار است بیفتد؟
اگر روی این کلیک کنید، شما را به اینجا میبرد؟
می تواند مانند تصویری از چیزی باشد که سپس به عنوان یک دکمه نیز عمل می کند.
و آیا عملکرد را توضیح میدهید، یا مانند یک تصویر پیکانی، مانند آن بود، نمیدانم…
و همچنین، آیا برای SEO مهم است؟
جان مولر:
آره فکر می کنم…لیزی ساسمن:
می تواند مانند یک لوگو باشد.جان مولر:
برای دسترسی، احتمالاً منطقی است که فقط کاری در مورد آن انجام دهید.اما برای SEO، افراد قرار نیست دکمه پرداخت یا چیزی شبیه به آن را جستجو کنند.”
متن جایگزین روی دکمهها برای دسترسی هستند نه SEO
جان مولر روشن میکند که هیچ هدفی برای سئو برای افزودن متن جایگزین به دکمهها وجود ندارد.
اما او همچنین مشاهده کرد که متن جایگزین برای این نوع تصاویر عمدتاً به دلایل دسترسی است.
لیزی بحث را ادامه داد:
«لیزی ساسمن:
… اما شاید آنها برای لوگو یا چیزی شبیه به لوگو این کار را انجام دهند. وقتی روی آن کلیک میکنید، شما را به صفحه اصلی یا چیزی میبرد.اما این هم، “اوه، این یک لوگو است.”
بنابراین میگویید، “این نشانواره مرکز جستجوی Google است.”
جان مولر:
مطمئنا.لیزی ساسمن:
یا متن توصیفی را دوست دارید.این نشانواره Googlebot است، اما آیا مهمترین چیزی که در مورد تصویر میدانیم این است که یک لوگو است؟
یا نشانواره چگونه است؟
من حدس میزنم از این زاویه، مردم احتمالاً به دنبال لوگو هستند.
جان مولر:
بله.لیزی ساسمن:
مثلاً آرم شرکت X چیست؟
جان مولر:
آره منظورم این است که به نوعی از آن استراتژی برمی گردد که ما سعی می کنیم از آن اجتناب کنیم.میخواهید برای چه چیزی پیدا شوید؟
لیزی ساسمن:
بله، اما فکر میکنم این مهمترین سوال است، زیرا در این صورت به نوعی هدایت میشود…من میتوانم با تمام این سوراخهای خرگوش غرق شوم، بنابراین به نوعی، نمیدانم، به چیزهایی که باید به آنها فکر کنیم اولویت میدهد، زیرا لزوماً لازم نیست همه چیزها را برای آنها بنویسید. من حدس میزنم این چیزها.”
استفاده صحیح از متن جایگزین در لوگوها و دکمه ها
روش صحیح استفاده از متن جایگزین در تصاویری مانند لوگوها در واقع به پیوند بودن یا نبودن تصویر بستگی دارد.
اگر تصویر نشانواره بهعنوان پیوندی به صفحه اصلی عمل میکند، درست است که آن تصویر را با عملکردی که دارد برچسبگذاری کنید، به طوری که بازدیدکنندهای که از صفحهخوان استفاده میکند نمیتواند این نشانواره را پیوندی به صفحه اصلی نشان دهد. صفحه.
سازمان رسمی استاندارد HTML، کنسرسیوم وب جهانی (W3C) توضیح در مورد نحوه مدیریت آرم ها منتشر می کند.
پیوند صفحه اصلی نشانواره
لوگویی که به عنوان پیوند صفحه اصلی عمل میکند باید حاوی متن جایگزینی باشد که به کاربر صفحهخوان میگوید که نشانواره پیوند صفحه اصلی است.
W3C از این مثال از کد استفاده میکند:
کد بالا برای لوگویی است که ممکن است در بالای صفحه با آن روبرو شوید و به عنوان پیوندی به صفحه اصلی نیز عمل می کند.
نمونه متن جایگزین ارائه شده توسط W3C به سادگی می گوید: “W3C home” اما اگر بخواهید می تواند توصیفی تر باشد.
لوگو و متن پیوند صفحه اصلی
انواع دیگری از پیوندهای نشانواره وجود دارد که در آن یک آرم تصویر و یک متن درست در کنار یا زیر آن وجود دارد و هم تصویر و هم متن در یک کد پیوند کدگذاری شدهاند.
به عبارت دیگر، دو پیوند مانند یک پیوند برای آرم و یک پیوند برای متن وجود ندارد، بلکه فقط یک پیوند برای لوگو و متن با هم وجود دارد.
در این صورت، چون متن عملکرد پیوند را توصیف میکند، تکرار عملکرد پیوند نشانواره تکراری خواهد بود.
بنابراین در این مورد بهترین روش استفاده از متن جایگزین پوچ است.
این مثالی است که W3C ارائه میکند:
صفحه اصلی W3C
به نحوه کدگذاری ویژگی alt برای تصویر توجه کنید:
img src="w3c.png" alt=""
به علامت نقل قول خالی برای متن alt، صفت alt null (یا متن alt تهی) می گویند. یک صفحهخوان به سادگی از آن رد میشود.
دلیل خوب بودن یک متن جایگزین پوچ این است که متنی وجود دارد که تابع پیوند چیست:
صفحه اصلی W3C
متن جایگزین برای پیوند نماد
گاهی اوقات یک پیوند به شکل یک نماد است، بدون متنی که توضیح دهد چه کار می کند، برای مثال نمادی به شکل پاکت نامه (نماینده ایمیل یا پیام) یا چاپگر (که نشان می دهد پیوند چاپگر را فعال می کند. ).
در این شرایط، توصیف تصویر (مانند پاکت نامه یا چاپگر) عمل بدی است.
بهترین روش توصیف کاری است که تصویر انجام می دهد (ایمیل را شروع کنید یا یک صفحه وب را چاپ کنید).
W3C از مثال نماد چاپگر با کد و متن جایگزین زیر استفاده میکند:
همانطور که می بینید، نمادی که به شکل چاپگر است عبارت «Print this page» را به عنوان متن جایگزین دارد. نشان می دهد که نماد چه کاری انجام می دهد. این مفید است.
متن جایگزین برای یک دکمه
مثل مثال نماد، متن جایگزین برای یک تصویر دکمه باید کار تصویر را توصیف کند.
W3C از مثالی از یک کادر جستجو استفاده میکند که دارای یک ذره بین برای دکمه ارسال است.
روش بد برای انجام این کار استفاده از متن جایگزین برای توصیف این است که تصویر یک ذره بین است.
بهترین روش استفاده از متن جایگزین برای توصیف عملکرد تصویر است.
این کد نمونه ای است که W3C به عنوان مثال نشان می دهد:
همانطور که می بینید، متن جایگزین برای دکمه جستجو کلمه “جستجو” است که عملکرد دکمه را توضیح می دهد.
متن جایگزین برای دکمهها و لوگوها
لیزی و جان به جزئیات نحوه رسیدگی به سناریوهای مختلف برای نشانوارهها و دکمهها وارد نشدند.
اما جان اشاره کرد که هیچ ارزش SEO برای متن جایگزین برای دکمهها و لوگوها وجود ندارد، بلکه برای دسترسی است.
بهترین روش ارائه مناسب صفحات وب است که برای کاربرانی که با صفحه خوان به صفحات وب دسترسی دارند، کاربردی است.
همانطور که قبلاً ذکر شد، افرادی که از صفحهخوانها استفاده میکنند میتوانند مشتریان یا مدافعان کسبوکار یا وبسایت شما باشند.
بنابراین، استفاده از بهترین شیوههای دسترسپذیری برای خط آخر خوب است.
نقلها
درباره دسترسی به دکمهها و نشانوارهها در W3C بیشتر بیاموزید
تصاویر کاربردی
ترکیب پیوندهای تصویر و متن مجاور برای یک منبع
استفاده از ویژگیهای alt در تصاویری که به عنوان دکمههای ارسال استفاده میشوند
به پادکست Search Off the Record در دقیقه ۱۵:۵۷ گوش دهید:
تصویر ویژه توسط Shutterstock/Evgeny Atamanenko