تگ Alt یا Alternative Text، متنی است که به‌عنوان توضیح جایگزین برای یک تصویر در صفحات وب استفاده می‌شود. این متن در کد HTML داخل ویژگی alt قرار می‌گیرد و به مرورگرها و فناوری‌های کمکی توضیح می‌دهد که تصویر چه محتوایی دارد یا چه مفهومی را منتقل می‌کند.
برای مثال، اگر تصویری از یک گربه در حال خوابیدن روی مبل داشته باشیم، می‌توانیم از چنین کدی استفاده کنیم:
<img src="cat.jpg" alt="گربه‌ای که روی مبل خوابیده است">در حالت عادی کاربر تصویر را می‌بیند و نیازی به خواندن Alt ندارد؛ اما اگر تصویر به هر دلیلی نمایش داده نشود یا کاربر از Screen Reader استفاده کند، متن جایگزین می‌تواند اطلاعاتی را که تصویر منتقل می‌کند در اختیار او قرار دهد. مستندات MDN نیز Alt را متنی جایگزین برای تصویر معرفی می‌کند که هم برای دسترسی‌پذیری اهمیت دارد و هم در صورت نمایش داده نشدن تصویر می‌تواند به کاربر کمک کند.
بنابراین تگ Alt فقط یک ویژگی مربوط به سئو نیست؛ یکی از اجزای مهم دسترسی‌پذیری و ساختار صحیح تصاویر در وب نیز محسوب می‌شود.
تگ Alt چه کاربردی دارد؟
کاربرد اصلی Alt این است که محتوای مهم تصویر را به شکل متنی بیان کند. تصور کنید مقاله‌ای درباره مراقبت از گیاهان آپارتمانی منتشر کرده‌اید و در بخشی از آن تصویری از یک گیاه پتوس با برگ‌های زرد قرار داده‌اید.
اگر تصویر صرفاً با این نام در HTML قرار گرفته باشد:
<img src="plant.jpg" alt="">کاربرانی که تصویر را نمی‌بینند، اطلاعات چندانی درباره آن دریافت نمی‌کنند.
اما اگر تصویر نقش مهمی در محتوای مقاله داشته باشد، می‌توان نوشت:
<img src="plant.jpg" alt="برگ‌های زرد گیاه پتوس در اثر آبیاری نامناسب">در این حالت، Alt اطلاعاتی را منتقل می‌کند که از خود تصویر قابل دریافت است و با موضوع بخش مقاله ارتباط دارد.
نکته مهم این است که متن جایگزین نباید صرفاً بگوید «عکس گیاه» یا «تصویر گیاه پتوس». باید مشخص کند تصویر چه اطلاعاتی را به مخاطب منتقل می‌کند.
تگ Alt چه ارتباطی با سئو دارد؟
تگ Alt یکی از بخش‌های مهم بهینه‌سازی تصاویر برای موتورهای جستجو است، اما نباید تصور کرد که صرفاً اضافه کردن کلمه کلیدی به Alt باعث بهبود رتبه صفحه می‌شود.
موتورهای جستجو برای درک محتوای تصاویر از سیگنال‌های مختلفی استفاده می‌کنند و متن جایگزین می‌تواند در درک موضوع و محتوای تصویر نقش داشته باشد. از طرف دیگر، Alt به کاربرانی که نمی‌توانند تصویر را ببینند کمک می‌کند محتوای صفحه را بهتر درک کنند.
به همین دلیل، هدف اصلی هنگام نوشتن Alt باید توصیف دقیق و مفید تصویر باشد، نه پر کردن آن با کلمات کلیدی.
برای مثال اگر تصویری از یک دوچرخه کوهستان قرمز دارید، این Alt مناسب است:
دوچرخه کوهستان قرمز در مسیر سنگی
اما این مورد انتخاب خوبی نیست:
دوچرخه کوهستان، خرید دوچرخه کوهستان، بهترین دوچرخه کوهستان، دوچرخه کوهستان ارزان
مورد دوم بیشتر شبیه Keyword Stuffing است تا توضیح تصویر.
بنابراین اگر بخواهیم تأثیر تگ Alt در سئو را خلاصه کنیم، باید بگوییم Alt به موتورهای جستجو کمک می‌کند محتوای تصویر را بهتر درک کنند، اما کاربرد آن بسیار فراتر از یک محل برای قرار دادن کلمه کلیدی است.
چرا Alt برای دسترسی‌پذیری اهمیت دارد؟
همه کاربران یک صفحه وب را به یک شکل مشاهده نمی‌کنند. برخی کاربران ممکن است از Screen Reader استفاده کنند و برخی دیگر به دلیل مشکلات اتصال، تنظیمات مرورگر یا خطاهای بارگذاری نتوانند تصاویر را ببینند.
Screen Reader می‌تواند متن Alt تصویر را برای کاربر بخواند. به همین دلیل اگر تصویر اطلاعات مهمی را منتقل می‌کند، باید یک متن جایگزین مناسب برای آن در نظر گرفته شود. MDN توصیه می‌کند Alt تصویر باید کوتاه، واضح و متناسب با اطلاعاتی باشد که تصویر منتقل می‌کند.
برای مثال، فرض کنید در یک سایت آشپزی تصویری از مرحله‌ای از آماده‌سازی خمیر قرار داده‌اید. Alt مناسب می‌تواند این باشد:
خمیر پیتزا پس از ورز دادن و آماده شدن برای استراحت
اما نوشتن عبارتی مانند «عکس خمیر پیتزا» اطلاعات چندانی به کاربر نمی‌دهد.
یک نکته مهم درباره تصاویر تزئینی
همه تصاویر صفحه الزاماً نیازمند توضیح متنی نیستند. اگر تصویر صرفاً برای زیبایی صفحه استفاده شده و هیچ اطلاعاتی به محتوای آن اضافه نمی‌کند، می‌توان از Alt خالی استفاده کرد:
<img src="decorative.jpg" alt="">Alt خالی به فناوری‌های کمکی اعلام می‌کند که تصویر جنبه محتوایی ندارد و می‌توان از آن عبور کرد. این موضوع با حذف کامل ویژگی alt متفاوت است؛ برای تصاویر تزئینی، استفاده از alt="" روش مناسب‌تری است.
چگونه یک متن Alt مناسب بنویسیم؟
نوشتن Alt مناسب پیچیده نیست؛ کافی است خودتان را جای فردی قرار دهید که تصویر را نمی‌بیند و از خود بپرسید:
اگر قرار بود این تصویر را برای چنین فردی توضیح دهم، مهم‌ترین اطلاعاتی که باید منتقل کنم چیست؟
پاسخ این سؤال معمولاً همان چیزی است که باید در Alt قرار بگیرد.
برای مثال، تصویر یک فنجان قهوه روی میز چوبی را در نظر بگیرید.
Alt ضعیف:
عکس قهوه
Alt بهتر:
فنجان قهوه داغ روی میز چوبی کنار کتاب
اما اگر تصویر در مقاله‌ای درباره روش سرو قهوه قرار گرفته باشد، شاید اطلاعات مهم‌تری وجود داشته باشد و Alt باید بر همان بخش تمرکز کند.
در واقع Alt به زمینه استفاده از تصویر نیز وابسته است. یک تصویر واحد می‌تواند در دو صفحه مختلف به متن جایگزین متفاوتی نیاز داشته باشد. MDN نیز تأکید می‌کند که متن جایگزین باید با توجه به زمینه و هدف تصویر نوشته شود و اطلاعاتی را که از قبل در متن اطراف تصویر وجود دارد، بی‌دلیل تکرار نکند.
Alt باید چقدر طولانی باشد؟
برای بیشتر تصاویر، Alt باید کوتاه و توصیفی باشد. هدف این نیست که تمام جزئیات تصویر را در چند جمله توضیح دهید؛ هدف انتقال اطلاعات اصلی تصویر است.
برای مثال:
یک زن در حال دویدن در پارک
معمولاً برای یک تصویر عمومی کافی است.
لازم نیست بنویسیم:
یک زن جوان با لباس ورزشی مشکی و کفش‌های سفید در ساعت هفت صبح در یک پارک بزرگ با درختان بلند در حال دویدن است و در پشت سر او چند نفر دیگر نیز دیده می‌شوند.
اگر جزئیات بیشتر واقعاً برای درک محتوای صفحه ضروری باشد، می‌توان توضیح کامل‌تری در متن اصلی یا کپشن تصویر ارائه کرد. Alt نباید به یک پاراگراف طولانی تبدیل شود.
آیا باید کلمه کلیدی را در Alt تصویر قرار دهیم؟
اگر کلمه کلیدی به‌صورت طبیعی بخشی از توصیف تصویر است، استفاده از آن کاملاً منطقی است.
فرض کنید مقاله‌ای درباره «انواع قهوه» دارید و تصویری از یک فنجان اسپرسو قرار داده‌اید. اگر Alt را این‌گونه بنویسید:
فنجان اسپرسو تازه آماده‌شده
هم تصویر را توصیف کرده‌اید و هم عبارت مرتبط با موضوع را به شکل طبیعی به کار برده‌اید.
اما اگر تصویر اصلاً اسپرسو نباشد و صرفاً برای قرار دادن کلمه کلیدی بنویسید:
انواع قهوه و بهترین انواع قهوه
Alt دیگر توصیف واقعی تصویر نیست.
اولویت همیشه باید توصیف درست تصویر باشد، نه استفاده اجباری از کلمه کلیدی.
آیا استفاده بیش از حد از کلمات کلیدی در Alt اشتباه است؟
بله. قرار دادن مجموعه‌ای از کلمات کلیدی در Alt، بدون اینکه تصویر واقعاً آن‌ها را نشان دهد، روش مناسبی نیست.
برای مثال فرض کنید تصویر یک کفش ورزشی قرمز است. این Alt منطقی است:
کفش ورزشی قرمز مناسب دویدن
اما چنین عبارتی مناسب نیست:
خرید کفش، خرید کفش ورزشی، کفش ورزشی ارزان، بهترین کفش ورزشی، قیمت کفش ورزشی
این متن توضیح تصویر نیست و بیشتر برای دستکاری سیگنال‌های جستجو نوشته شده است.
Alt باید به سؤال ساده‌ای پاسخ دهد:
این تصویر چه چیزی را نشان می‌دهد یا چه اطلاعاتی را منتقل می‌کند؟
تفاوت Alt با نام فایل تصویر چیست؟
Alt و نام فایل دو چیز متفاوت هستند.
برای مثال:
نام فایل:
coffee-machine.jpg
Alt:
دستگاه اسپرسوساز خانگی در کنار فنجان قهوهنام فایل، شناسه‌ای برای خود فایل تصویر است، در حالی که Alt توضیح متنی تصویر در HTML است.
بهتر است نام فایل نیز تا حد امکان توصیفی باشد. برای مثال:
coffee-machine.jpgاز نامی مانند:
IMG_837462.jpgمعنادارتر است.
اما نباید تصور کنیم که نام فایل می‌تواند جایگزین Alt شود. هرکدام کاربرد متفاوتی دارند.
تفاوت Alt با Title تصویر چیست؟
یکی دیگر از اشتباهات رایج، یکی دانستن Alt و Title است.
Alt برای ارائه متن جایگزین تصویر استفاده می‌شود و اهمیت ویژه‌ای در دسترسی‌پذیری دارد.
Title یک ویژگی جداگانه است که می‌تواند اطلاعات تکمیلی درباره عنصر ارائه کند و نباید به‌عنوان جایگزین Alt استفاده شود.
برای یک تصویر مهم، داشتن Title بدون Alt مناسب، مشکل اصلی را حل نمی‌کند. ویژگی Alt همان چیزی است که برای ارائه متن جایگزین تصویر در HTML در نظر گرفته شده است.
چگونه در وردپرس برای تصویر Alt بنویسیم؟
در وردپرس هنگام بارگذاری یا ویرایش یک تصویر، معمولاً در بخش اطلاعات تصویر فیلدی با عنوان متن جایگزین یا Alternative Text مشاهده می‌کنید.
برای مثال اگر تصویر مربوط به یک دستور آشپزی باشد، می‌توانید در این قسمت بنویسید:
کیک شکلاتی خانگی پس از خارج شدن از فر
سپس این متن به ویژگی Alt تصویر در خروجی صفحه منتقل می‌شود.
نکته مهم این است که متن Alt را برای هر تصویر به‌صورت مستقل بررسی کنید. اگر یک تصویر چند بار در صفحات مختلف استفاده شده، بسته به زمینه استفاده ممکن است متن جایگزین متفاوتی برای آن مناسب باشد.
برای تصاویر محصولات چه Alt بنویسیم؟
در طراحی سایت‌های فروشگاهی، تصاویر محصول اهمیت زیادی دارند. Alt باید محصول و ویژگی قابل مشاهده و مهم آن را توصیف کند.
برای مثال، برای تصویری از یک ساعت مچی:
ساعت مچی مردانه با بند چرمی قهوه‌ای و صفحه مشکی
این متن بسیار بهتر از مواردی مانند:
ساعت، خرید ساعت، ساعت مردانه، ساعت ارزان
است.
اگر چند تصویر از یک محصول دارید، لازم نیست Alt همه تصاویر دقیقاً یکسان باشد. بهتر است هر تصویر بر اساس چیزی که واقعاً نشان می‌دهد توصیف شود.
برای مثال:
نمای روبه‌روی ساعت مچی مردانه با صفحه مشکی
و:
نمای بند چرمی قهوه‌ای ساعت مچی مردانه
این روش اطلاعات بیشتری در اختیار کاربر و موتورهای جستجو قرار می‌دهد.
اگر تصویر شامل متن باشد، Alt را چگونه بنویسیم؟
گاهی اطلاعات اصلی یک تصویر داخل خود تصویر قرار دارد؛ مثلاً یک پوستر، نمودار، اطلاعیه یا تصویر آموزشی.
در این شرایط باید بررسی کنید که متن موجود در تصویر چه نقشی در محتوای صفحه دارد.
اگر متن داخل تصویر برای درک محتوا ضروری است، باید اطلاعات مهم آن به شکل متنی در دسترس باشد. صرفاً قرار دادن نوشته داخل تصویر باعث نمی‌شود کاربری که تصویر را نمی‌بیند بتواند آن را بخواند.
برای مثال اگر تصویر یک پوستر با عبارت «ساعات بازدید موزه: ۹ صبح تا ۶ عصر» باشد، Alt می‌تواند اطلاعات اصلی را منتقل کند:
پوستر ساعات بازدید موزه از ۹ صبح تا ۶ عصر
البته اگر همین اطلاعات در متن اصلی صفحه نیز به‌طور کامل ارائه شده باشد، نیازی به تکرار طولانی آن در Alt نیست. هدف، جلوگیری از از دست رفتن اطلاعات مهم تصویر برای کاربری است که تصویر را نمی‌بیند.
اشتباهات رایج هنگام نوشتن Alt تصویر
نوشتن عبارت «تصویر» یا «عکس» در ابتدای Alt
معمولاً نیازی نیست بنویسید:
تصویر یک گربه روی صندلی
عبارت زیر کافی است:
گربه‌ای روی صندلی نشسته است
کاربر و Screen Reader می‌دانند که با یک عنصر تصویری مواجه هستند و لازم نیست این موضوع را دوباره در متن Alt تکرار کنید.
استفاده از نام فایل به‌عنوان Alt
عبارتی مانند:
IMG_98231.jpg
هیچ توضیح مفیدی درباره تصویر ارائه نمی‌کند.
تکرار کلمه کلیدی
Alt محل مناسبی برای فهرست کردن کلمات کلیدی نیست. متن جایگزین باید تصویر را توصیف کند.
نوشتن Alt بسیار طولانی
Alt نباید تبدیل به یک مقاله کوچک شود. اطلاعات مهم را به شکل مختصر و دقیق منتقل کنید.
خالی گذاشتن Alt برای تصاویر مهم
اگر تصویر اطلاعات مهمی را منتقل می‌کند، نباید Alt آن را بدون دلیل خالی بگذارید.
استفاده از یک Alt برای همه تصاویر
اگر چند تصویر متفاوت دارید، برای همه آن‌ها یک متن یکسان ننویسید. هر تصویر باید بر اساس محتوای خودش توصیف شود.
آیا همه تصاویر باید Alt داشته باشند؟
به‌طور کلی تصاویر محتوایی باید متن جایگزین مناسب داشته باشند و تصاویر تزئینی می‌توانند Alt خالی داشته باشند.
به عبارت ساده‌تر، قبل از نوشتن Alt از خود بپرسید:
اگر این تصویر حذف شود، آیا کاربر اطلاعات مهمی را از دست می‌دهد؟
اگر پاسخ مثبت است، یک Alt توصیفی بنویسید.
اگر تصویر صرفاً جنبه تزئینی دارد و هیچ اطلاعاتی به محتوای صفحه اضافه نمی‌کند، استفاده از alt="" مناسب است. این روش به فناوری‌های کمکی کمک می‌کند تصویر تزئینی را نادیده بگیرند.
چگونه Alt تصاویر سایت را بررسی کنیم؟
برای بررسی Alt تصاویر، لازم نیست تک‌تک تصاویر را به‌صورت دستی در کد HTML جستجو کنید. در وردپرس می‌توانید تصاویر مهم صفحات را بررسی کرده و ببینید آیا برای آن‌ها متن جایگزین مناسب نوشته شده است یا خیر.
هنگام بررسی، فقط به وجود یا عدم وجود Alt توجه نکنید؛ کیفیت متن آن نیز مهم است.
برای مثال:
alt=”کفش”
از نظر فنی Alt دارد، اما اگر تصویر یک کفش کوهنوردی قرمز را نشان می‌دهد، می‌توان توضیح دقیق‌تری ارائه کرد:
alt=”کفش کوهنوردی قرمز با زیره آج‌دار”
بنابراین یک بررسی مناسب باید سه موضوع را مشخص کند:
- آیا تصویر محتوایی Alt دارد؟
- آیا متن Alt با تصویر مطابقت دارد؟
- آیا Alt طبیعی، کوتاه و مفید نوشته شده است؟
چک‌لیست سریع برای نوشتن Alt تصاویر
پیش از انتشار صفحه، این موارد را بررسی کنید:
- آیا تصویر واقعاً به Alt نیاز دارد؟
- آیا تصویر محتوایی است یا صرفاً تزئینی؟
- آیا متن جایگزین دقیقاً محتوای مهم تصویر را توصیف می‌کند؟
- آیا متن Alt کوتاه و قابل فهم است؟
- آیا از کلمات کلیدی فقط در صورت ارتباط طبیعی استفاده شده است؟
- آیا از تکرار کلمات کلیدی خودداری کرده‌اید؟
- آیا نام فایل تصویر نیز معنادار است؟
- آیا Alt اطلاعاتی را که قبلاً در متن صفحه آمده، بی‌دلیل تکرار نمی‌کند؟
- آیا تصاویر تزئینی دارای
alt=""هستند؟
جمع‌بندی
تگ Alt تصویر متنی جایگزین است که محتوای مهم یک تصویر را برای کاربرانی که نمی‌توانند آن را ببینند یا در شرایطی که تصویر نمایش داده نمی‌شود، توصیف می‌کند. این ویژگی در HTML، علاوه بر اهمیت در دسترسی‌پذیری، می‌تواند به موتورهای جستجو برای درک بهتر محتوای تصاویر کمک کند.
با این حال، بهترین روش برای نوشتن Alt این نیست که آن را محلی برای تکرار کلمات کلیدی بدانیم. ابتدا باید ببینیم تصویر چه اطلاعاتی منتقل می‌کند و سپس همان اطلاعات را به شکل کوتاه، دقیق و طبیعی در متن جایگزین بیان کنیم.
اگر تصویری از یک گلدان سفالی حاوی گیاه سانسوریا دارید، Alt مناسب می‌تواند «گیاه سانسوریا در گلدان سفالی روی میز چوبی» باشد؛ نه عبارتی مانند «خرید گیاه سانسوریا، قیمت گیاه سانسوریا، بهترین گیاه سانسوریا».
در نهایت، یک Alt خوب باید به همان اندازه که برای موتورهای جستجو قابل درک است، برای کاربری که تصویر را نمی‌بیند نیز مفید باشد. این نگاه باعث می‌شود استفاده از تگ Alt از یک اقدام صرفاً سئویی به بخشی واقعی از بهبود کیفیت و دسترسی‌پذیری محتوای سایت تبدیل شود.
