ویژگی ALT یا متن جایگزین برای لوگوها و دکمه ها، متفاوت از انواع دیگر المان ها تنظیم می شود. گوگل درباره روش درست تنظیم کردن آن، اینگونه توضیح می دهد:
- متن جایگزین لوگو و دکمه، از نظر سئو هیچ ارزشی ندارد.
- متن جایگزین مناسب برای لوگوها و دکمه ها، می تواند مزایای بلندمدتی برای کاربران و صاحبان سایت داشته باشد.
روش های بسیاری برای افزودن ویژگی alt یا متن جایگزین برای لوگوها و دکمه ها وجود دارد. شاید قوانین در ابتدا کمی پیچیده به نظر برسند اما در واقع درک آنها ساده است. تنظیم صحیح ویژگی های alt، برای کاربران مفید خواهد بود و در بلندمدت نیز تاثیر مثبت آنها را مشاهده خواهند کرد.
استفاده صحیح از متن جایگزین برای لوگوها و دکمه ها
روش صحیح استفاده از متن جایگزین در تصاویری مانند لوگو، به این موضوع بستگی دارد که آیا تصویر یک لینک است یا خیر.
تصویر(1)
اگر تصویر لوگو به عنوان لینکی در صفحه اصلی اشاره می کند، بهتر است آن را با عملکردی که دارد علامت گذاری کنید تا بازدیدکننده ای که از یک صفحه خوان استفاده می کند، متوجه شود، لوگو لینکی به صفحه اصلی است.
لینک صفحه اصلی لوگو
لوگویی که به عنوان لینک صفحه اصلی عمل می کند، باید حاوی متن جایگزینی باشد که به کاربر دارای صفحه خوان بگوید لوگو حاوی لینک به صفحه اصلی است.
به عنوان مثال:
<a href="https://www.example.org/">
<img src="example.png" alt="example home">
</a>
کد بالا مربوط به لوگویی است که به عنوان لینکی به صفحه اصلی نیز عمل می کند.
نمونه متن جایگزین ارائه شده در مثال بالا، "example home" ذکر شده اما اگر بخواهید، می تواند توصیفی تر باشد.
لینک صفحه اصلی لوگو و متن
تصویر(2)
انواع دیگری از متن جایگزین برای لوگوها و دکمه ها وجود دارد که در آن یک تصویر و یک متن در کنار یا زیر یکدیگر قرار می گیرند و هم تصویر و هم متن تحت یک کد، لینک داده شده اند. به عبارت دیگر، یک لینک برای لوگو و یک لینک برای متن وجود ندارد، بلکه فقط یک لینک برای هر دو ایجاد شده است. در این صورت، چون متن عملکرد لینک را توصیف می کند، تکرار عملکرد لینک برای لوگو، نیازی نخواهد بود. بنابراین بهترین روش استفاده از یک متن جایگزین خالی است.
به عنوان مثال:
<a href="https://www.example.org/">
<img src="example.png" alt=""> example Home
</a>
به نحوه کدنویسی ویژگی alt برای تصویر توجه کنید:
img src="example.png" alt=""
علامت نقل قول خالی برای متن alt، صفت alt null (یا متن alt خالی) نامیده می شود و یک صفحه خوان به سادگی از آن عبور می کند. دلیل اهمیت متن جایگزین خالی این است که نشان می دهد متنی برای تشریح لینک وجود دارد:
example Home
متن جایگزین برای لینک آیکون
تصویر(3)
گاهی اوقات یک لینک به شکل آیکون ظاهر می شود، بدون متنی که توضیح دهد چه کاری انجام خواهد داد. برای مثال آیکونی به شکل پاکت نامه (نشان دهنده ایمیل یا پیام) یا چاپگر که اتصال به چاپگر را فعال می کند. در این موقعیت، توصیف تصویر (مانند پاکت نامه یا چاپگر) مناسب نخواهد بود. بهترین روش، تشریح کاری است که تصویر انجام می دهد. به عنوان مثال، «ایمیل ارسال نمایید» یا «یک صفحه وب را چاپ کنید».
به عنوان مثال، می توانید از یک آیکون چاپگر با کد زیر و متن جایگزین استفاده نمایید:
<a href="javascript:print()">
<img src="print.png" alt="Print this page">
</a>
همانطور که مشاهده می کنید، آیکونی به شکل چاپگر، عبارت «Print this page» را به عنوان متن جایگزین، به همراه دارد و مشخص می کند که آیکون چه کاری انجام می دهد.
متن جایگزین برای یک دکمه
مشابه مثال آیکون، متن جایگزین برای تصویر یک دکمه، باید آنچه که تصویر انجام می دهد را توصیف کند. به عنوان مثال یک باکس جستجو که دارای یک آیکون ذره بین برای دکمه ارسال است را در نظر بگیرید. بدترین متن جایگزین برای توصیف این دکمه، عبارت «تصویر یک ذره بین است» می باشد. بهترین راهکار، استفاده از متن جایگزینی جهت توصیف عملکرد تصویر است.
به عنوان مثال، کد زیر این موضوع را نشان می دهد:
<input type="image" src="searchbutton.png" alt="Search">
همانطور که مشاهده می نمایید، متن جایگزین برای دکمه جستجو، کلمه "Search" است که عملکرد دکمه را توصیف می کند.
تصویر(4)
متن جایگزین برای لوگوها و دکمه ها
متن جایگزین برای لوگوها و دکمه ها، از نظر سئو هیچ ارزشی ندارند، بلکه برای دسترسی راحت تر استفاده می شوند. ارائه مناسب صفحات وب به کاربرانی که با استفاده از صفحه‌خوان‌ها به صفحات وب دسترسی پیدا می کنند، می تواند در جذب کاربران موثر باشد. همانطور که قبلاً ذکر شد، افرادی که از صفحه‌خوان‌ها استفاده می‌کنند می‌توانند مشتریان یا مدافعان کسب‌وکار یا وب‌سایت شما باشند. بنابراین بهتر است که از مناسب ترین روش ها، برای جذب آنان استفاده کنید.