Alt Text چیست و چگونه متن جایگزین تصویر بنویسیم؟

وقتی تصویری را داخل یک صفحه وب قرار می دهیم، همه کاربران الزاماً آن تصویر را به یک شکل تجربه نمی کنند. بعضی کاربران از Screen Reader استفاده می کنند، گاهی تصویر به دلیل مشکل شبکه بارگذاری نمی شود و موتور جستجو نیز برای درک موضوع تصویر فقط به پیکسل های آن متکی نیست.

اینجاست که Alt Text یا متن جایگزین تصویر اهمیت پیدا می کند. Alt Text توضیحی متنی است که داخل ویژگی alt عنصر <img> قرار می گیرد و باید متناسب با نقش و معنی تصویر در همان صفحه نوشته شود.

متن جایگزین قبل از اینکه یک تکنیک برای SEO باشد، بخشی از دسترس پذیری وب است. در عین حال Google نیز از Alt Text در کنار محتوای صفحه و سیستم های Computer Vision برای درک موضوع تصاویر استفاده می کند.

در این راهنما بررسی می کنیم Alt Text چیست، چه تفاوتی با Title تصویر و Caption دارد، چه تصاویری به متن جایگزین نیاز دارند، چه زمانی باید از alt="" استفاده کنیم و چگونه یک Alt طبیعی و مفید بنویسیم.

Alt Text چیست؟

Alt Text مخفف Alternative Text و به معنی «متن جایگزین» است. این متن داخل ویژگی alt یک تصویر در HTML قرار می گیرد.

برای مثال:

<img
src="image-compression.webp"
alt="مقایسه حجم تصویر قبل و بعد از فشرده سازی">

در این مثال، عبارت «مقایسه حجم تصویر قبل و بعد از فشرده سازی» متن جایگزین تصویر است.

هدف اصلی Alt این نیست که هر چیزی را که در تصویر دیده می شود کلمه به کلمه توصیف کند. متن جایگزین باید اطلاعات یا عملکردی را منتقل کند که تصویر در Context همان صفحه به کاربر ارائه می دهد.

به همین دلیل ممکن است یک تصویر یکسان در دو صفحه مختلف به Altهای متفاوتی نیاز داشته باشد.

Alt Text چه کاربردی دارد؟

متن جایگزین چند نقش مهم دارد که مهم ترین آن ها به Accessibility و درک تصویر مربوط می شود.

• Screen Reader می تواند اطلاعات ضروری تصویر را برای کاربر بخواند.
• اگر تصویر نمایش داده نشود، مرورگر می تواند متن جایگزین آن را در اختیار کاربر قرار دهد.
• Google می تواند Alt را همراه با Context صفحه برای فهم بهتر موضوع تصویر بررسی کند.
• اگر تصویر به عنوان Link استفاده شود، Alt آن می تواند نقش متن لینک را نیز ایفا کند.

Google در راهنمای رسمی Image SEO، Alt Text را مهم ترین Attribute برای ارائه Metadata بیشتر درباره تصویر معرفی می کند و توضیح می دهد که برای فهم موضوع تصویر از Alt در کنار Page Content و Computer Vision استفاده می کند.

راهنمای رسمی Google درباره Alt Text و Image SEO

Alt Text در عین حال بخشی از سئو داخلی صفحه نیز محسوب می شود، اما نباید هدف دسترس پذیری آن را فدای استفاده از Keyword کنیم.

Alt Attribute چیست و چه تفاوتی با Alt Text دارد؟

این دو اصطلاح اغلب به جای یکدیگر استفاده می شوند، اما از نظر فنی تفاوت کوچکی دارند.

Alt Attribute همان ویژگی HTML است:

alt="..."

و Alt Text مقداری است که داخل آن قرار می دهیم.

مثلاً:

<img src="seo-chart.webp"
alt="نمودار رشد کلیک ارگانیک سایت">

در این کد:

• alt همان Attribute است.
• «نمودار رشد کلیک ارگانیک سایت» Alt Text است.

در گفتگوهای روزمره SEO معمولاً وقتی می گوییم «Alt تصویر»، منظورمان همان متن داخل Attribute است.

آیا هر تصویر باید Alt Text داشته باشد؟

هر عنصر <img> بهتر است وضعیت Alt مشخصی داشته باشد، اما این به معنی نوشتن توضیح متنی برای تمام تصاویر نیست.

برای بعضی تصاویر باید Alt توصیفی بنویسیم و برای بعضی دیگر باید از Alt خالی استفاده کنیم:

alt=""

انتخاب درست به نقش تصویر در صفحه بستگی دارد.

W3C تصاویر را از نظر نوع Text Alternative به گروه هایی مثل Informative، Decorative، Functional، Images of Text و Complex Images تقسیم می کند. بنابراین قبل از نوشتن Alt بهتر است اول تشخیص دهیم تصویر چه کاری در صفحه انجام می دهد.

راهنمای رسمی W3C درباره Text Alternatives تصاویر

برای تصویر اطلاعاتی چه Alt بنویسیم؟

Informative Image تصویری است که اطلاعاتی ضروری یا مفید به محتوای صفحه اضافه می کند.

مثلاً فرض کنید در مقاله ای درباره بهینه سازی تصاویر، یک نمودار نشان می دهد حجم فایل از 1.8 MB به 240 KB کاهش یافته است.

یک Alt مناسب می تواند چنین باشد:

alt="کاهش حجم تصویر از 1.8 مگابایت به 240 کیلوبایت پس از فشرده سازی"

این Alt فقط نمی گوید «نمودار»؛ اطلاعاتی را منتقل می کند که تصویر برای کاربر نمایش می دهد.

نسخه ضعیف تر:

alt="نمودار"

کلمه «نمودار» به تنهایی اطلاعات اصلی تصویر را منتقل نمی کند.

برای تصاویر تزئینی چه Alt بنویسیم؟

اگر تصویر صرفاً تزئینی است و حذف آن هیچ اطلاعاتی از محتوا کم نمی کند، معمولاً بهتر است Alt خالی داشته باشد:

<img src="blue-decoration.webp" alt="">

Alt خالی به فناوری های کمکی کمک می کند تصویر تزئینی را نادیده بگیرند و کاربر مجبور نباشد توضیحی بی فایده بشنود.

مثلاً یک Pattern پس زمینه، Divider تزئینی یا آیکونی که فقط برای زیبایی کنار Heading قرار گرفته، ممکن است به Alt توصیفی نیاز نداشته باشد.

W3C نیز برای تصاویری که فقط هدف تزئینی دارند استفاده از Null Alternative یعنی alt="" را توصیه می کند.

Alt خالی با نبودن Alt فرق دارد

این دو کد یکسان نیستند:

<img src="decoration.webp" alt="">

و:

<img src="decoration.webp">

در حالت اول عمداً اعلام کرده ایم تصویر Text Alternative نیاز ندارد. در حالت دوم Alt Attribute اصلاً وجود ندارد.

پس برای تصویر تزئینی، حذف Attribute راه حل مناسبی نیست؛ بهتر است Attribute وجود داشته باشد و مقدار آن خالی باشد.

برای تصویر لینک دار یا دکمه چه Alt بنویسیم؟

وقتی تصویر یک عملکرد دارد، Alt باید بیشتر از ظاهر تصویر، عملکرد آن را منتقل کند.

فرض کنید Logo وبتیک به صفحه اصلی لینک شده است:

<a href="/">
  <img src="webtick-logo.svg" alt="وبتیک">
</a>

یا یک آیکون Printer به تنهایی به عنوان دکمه Print استفاده شده است. Alt مناسب می تواند:

alt="چاپ مقاله"

باشد، نه:

alt="آیکون پرینتر خاکستری"

در اینجا چیزی که کاربر نیاز دارد بداند این است که با فعال کردن عنصر چه اتفاقی می افتد، نه اینکه شکل آیکون چه ظاهری دارد.

W3C برای Functional Images نیز توصیه می کند Text Alternative عملکرد یا مقصد عنصر را منتقل کند.

برای عکس محصول چه Alt Text بنویسیم؟

Alt عکس محصول باید ویژگی هایی را توصیف کند که برای تشخیص محصول در Context صفحه لازم هستند.

مثلاً برای تصویر یک کفش مشکی:

alt="کفش دویدن مردانه مشکی مدل X200"

می تواند مناسب باشد؛ به خصوص اگر رنگ و مدل در تصمیم خرید اهمیت داشته باشند.

اما Alt زیر احتمالاً بیش از حد سئو محور است:

alt="کفش مردانه کفش ورزشی کفش دویدن خرید کفش مشکی بهترین کفش ورزشی"

این عبارت به جای توضیح تصویر، مجموعه ای از Keywordهاست.

Google نیز صراحتاً توصیه می کند Alt مفید، Information-rich و متناسب با Context باشد و از Keyword Stuffing جلوگیری شود.

Alt Text برای Screenshot چگونه نوشته می شود؟

برای Screenshot لازم نیست تمام متن موجود در صفحه را دوباره داخل Alt قرار دهیم. باید بگوییم Screenshot چه اطلاعاتی را برای بخش فعلی مقاله نشان می دهد.

مثلاً اگر Screenshot از Google Search Console برای نشان دادن روند Clickهاست:

alt="نمودار افزایش کلیک ارگانیک در گزارش Performance سرچ کنسول"

اگر Screenshot فقط ظاهر یک دکمه را نشان می دهد، Alt باید روی همان نکته تمرکز کند:

alt="گزینه Request Indexing در ابزار URL Inspection"

Alt نباید تبدیل به نسخه متنی کامل Screenshot شود.

برای نمودار و اینفوگرافیک چه Alt بنویسیم؟

تصاویر پیچیده مثل نمودار، Chart، Diagram و Infographic معمولاً اطلاعات بیشتری از یک جمله کوتاه دارند.

قرار دادن تمام اطلاعات یک نمودار پیچیده در Alt باعث می شود متن جایگزین بیش از حد طولانی و استفاده از آن سخت شود.

راه بهتر این است که Alt خلاصه ای از هدف یا نتیجه اصلی تصویر باشد و اطلاعات کامل در متن اطراف تصویر ارائه شود.

مثلاً:

alt="مقایسه نرخ کلیک پنج جایگاه اول نتایج جستجو"

بعد داده های کامل نمودار داخل متن یا جدول HTML صفحه توضیح داده شوند.

W3C نیز برای Complex Images توصیه می کند اطلاعات کامل تصویر در جای دیگری از صفحه به شکل قابل دسترسی ارائه شود.

اگر تصویر شامل متن باشد Alt باید چه باشد؟

اگر نوشته داخل تصویر اطلاعات ضروری است و همان اطلاعات در متن اطراف تصویر وجود ندارد، Alt باید آن Meaning را منتقل کند.

مثلاً یک تصویر شامل عبارت:

50% تخفیف تا پایان امروز

اگر این Offer فقط داخل تصویر قرار دارد، Text Alternative نیز باید این اطلاعات را منتقل کند.

اما اگر همین عبارت بلافاصله کنار تصویر به صورت متن واقعی HTML نوشته شده است، تکرار آن داخل Alt ممکن است تجربه Screen Reader را بی دلیل تکراری کند.

به همین دلیل Alt را نمی توان فقط با نگاه کردن به خود فایل نوشت؛ باید Context صفحه را هم ببینیم.

آیا باید در Alt Text کلمه کلیدی استفاده کنیم؟

فقط زمانی که آن عبارت واقعاً تصویر را توصیف می کند.

فرض کنید تصویری در مقاله تحقیق کلمات کلیدی، داشبورد یک ابزار Keyword Research را نمایش می دهد. در این حالت:

alt="داشبورد ابزار تحقیق کلمات کلیدی و داده های Search Volume"

طبیعی است.

اما اگر تصویر یک ربات تزئینی است، نباید فقط برای SEO بنویسیم:

alt="تحقیق کلمات کلیدی سئو کلمه کلیدی Keyword Research"

استفاده از کلمه کلیدی در Alt باید نتیجه طبیعی محتوای تصویر باشد، نه تلاشی برای افزایش Keyword Density.

Keyword Stuffing در Alt Text چیست؟

Keyword Stuffing یعنی Alt را به جای توصیف تصویر، با مجموعه ای از کلمات و عبارت های هدف پر کنیم.

مثلاً:

alt="سئو تصاویر سئو عکس Image SEO عکس گوگل بهینه سازی عکس سئو تصویر سایت"

این متن هم برای کاربر نامناسب است و هم برخلاف توصیه رسمی Google است.

نسخه بهتر:

alt="مقایسه حجم تصویر JPG و WebP پس از فشرده سازی"

اگر تصویر واقعاً همین مفهوم را نشان دهد، Keyword مرتبط نیز به شکل طبیعی وارد Alt شده است.

Alt Text باید چند کلمه یا چند کاراکتر باشد؟

عدد جادویی و ثابت برای طول Alt Text وجود ندارد.

قانون هایی مثل:

Alt حتماً باید کمتر از 125 کاراکتر باشد.

را نباید به عنوان قانون عمومی Google معرفی کرد.

بهتر است Text Alternative تا حد امکان مختصر باشد، اما اطلاعات ضروری تصویر را منتقل کند.

W3C نیز تأکید می کند Alt باید مختصرترین توضیحی باشد که Purpose تصویر را منتقل می کند؛ اگر توضیح طولانی لازم است، بهتر است اطلاعات تفصیلی با روش دیگری در صفحه ارائه شود.

آیا باید در Alt بنویسیم «عکس از…» یا «تصویر از…»؟

در بیشتر موارد لازم نیست Alt را با عباراتی مثل:

تصویر یک...
عکس یک...
تصویری از...

شروع کنیم، چون فناوری کمکی معمولاً از قبل می داند عنصر موردنظر تصویر است.

مثلاً به جای:

alt="تصویر یک لپ تاپ روی میز"

معمولاً این نسخه کافی است:

alt="لپ تاپ روی میز کار کنار دفتر یادداشت"

البته اگر نوع تصویر خودش اهمیت دارد، می توان آن را گفت؛ مثلاً:

alt="نقاشی آبرنگ کوه دماوند"

چون «نقاشی آبرنگ» بخشی از اطلاعات مهم تصویر است.

تفاوت Alt Text با Caption چیست؟

Alt Text و Caption دو وظیفه متفاوت دارند.

Alt Text جایگزین متنی تصویر است و معمولاً در صفحه به شکل عادی نمایش داده نمی شود.

Caption توضیحی قابل مشاهده برای همه کاربران است که معمولاً زیر تصویر قرار می گیرد.

مثلاً:

Alt:
نمودار رشد Organic Click از فروردین تا شهریور

Caption:
بیشترین رشد کلیک سایت پس از انتشار Cluster جدید در تیرماه اتفاق افتاد.

Alt می گوید تصویر چه اطلاعاتی دارد و Caption می تواند تحلیل یا Context بیشتری درباره آن ارائه دهد.

قرار نیست این دو همیشه متن یکسانی داشته باشند.

تفاوت Alt Text با Title Attribute تصویر چیست؟

این دو نیز نباید با یکدیگر اشتباه گرفته شوند.

Alt:

<img src="chart.webp" alt="نمودار رشد ترافیک ارگانیک">

Title Attribute:

<img
src="chart.webp"
alt="نمودار رشد ترافیک ارگانیک"
title="گزارش عملکرد شش ماهه">

Title جایگزین Alt نیست و نباید به امید اینکه مرورگر Tooltip نمایش می دهد، Alt را حذف کنیم.

برای Image Accessibility، عنصر اصلی همچنان Alt Attribute است.

تفاوت Alt Text با نام فایل چیست؟

Filename آدرس و نام خود فایل تصویر است:

organic-traffic-chart.webp

Alt Text توضیح نقش همان تصویر در صفحه است:

alt="نمودار رشد ترافیک ارگانیک سایت در شش ماه"

Google می گوید Filename می تواند سرنخ بسیار محدودی درباره موضوع تصویر بدهد، اما Alt اطلاعات مهم تری برای درک تصویر فراهم می کند.

بنابراین Filename خوب مفید است، اما جای Alt را نمی گیرد.

آیا Alt Text روی رتبه Google تأثیر دارد؟

Google از Alt Text در کنار محتوای صفحه و Computer Vision برای فهم Subject Matter تصویر استفاده می کند. بنابراین Alt یکی از سیگنال های مرتبط با فهم تصویر در Image Search است.

اما این موضوع نباید به فرمول زیر تبدیل شود:

Keyword در Alt = رتبه بالاتر

هدف، ارائه توضیح مفید و Contextual است. یک تصویر نامرتبط با Keyword Stuffing در Alt به تصویر ارزشمند تبدیل نمی شود.

Alt Text را باید بخشی از مجموعه بزرگ تر بهینه سازی تصاویر و On-Page SEO در نظر گرفت.

آیا Alt Text باید با عنوان صفحه هماهنگ باشد؟

باید با خود تصویر و Context صفحه هماهنگ باشد، نه اینکه Title صفحه را کپی کند.

فرض کنید عنوان سئو صفحه چنین است:

Alt Text چیست؟ آموزش نوشتن متن جایگزین تصویر

اگر تصویر وسط مقاله یک Diagram درباره تصاویر Decorative باشد، Alt مناسب آن می تواند:

alt="مقایسه تصویر اطلاعاتی با تصویر تزئینی و Alt خالی"

باشد؛ لازم نیست H1 یا SEO Title را در Alt تکرار کنیم.

چگونه Alt Text خوب بنویسیم؟

قبل از نوشتن Alt چهار سؤال ساده بپرسید:

1. این تصویر چرا در این قسمت صفحه قرار گرفته است؟
2. اگر کاربر تصویر را نبیند، چه اطلاعاتی را از دست می دهد؟
3. آیا تصویر Informative، Decorative یا Functional است؟
4. کوتاه ترین متنی که همان Meaning را منتقل می کند چیست؟

بعد Alt را براساس پاسخ این سؤال ها بنویسید.

برای مثال تصویر یک پزشک پشت میز در مقاله ای درباره یک کلینیک ممکن است صرفاً تزئینی باشد و نیاز به Alt توصیفی نداشته باشد. اما همان عکس در صفحه معرفی پزشک، جایی که هویت او مهم است، می تواند نیاز به Alt حاوی نام پزشک داشته باشد.

Alt Text را برای «فایل تصویر» نمی نویسیم؛ برای نقشی می نویسیم که تصویر در همان Context دارد.

چند نمونه Alt Text خوب و بد

اشتباهات رایج در نوشتن Alt تصویر

• خالی گذاشتن Alt تمام تصاویر بدون بررسی نقش آن ها؛
• نوشتن توضیح برای تمام تصاویر تزئینی؛
• تکرار Keyword اصلی صفحه در تمام Altها؛
• قرار دادن یک Alt یکسان روی چند تصویر متفاوت؛
• نوشتن نام فایل مثل IMG_8244 داخل Alt؛
• استفاده از متن هایی مثل «عکس» بدون توضیح Meaning تصویر؛
• نوشتن Alt بسیار طولانی برای نمودارهایی که باید توضیح متنی جدا داشته باشند؛
• توصیف ظاهر یک دکمه تصویری به جای عملکرد آن؛
• کپی کردن Caption داخل Alt بدون بررسی Context؛
• فرض اینکه هر تصویر حتماً باید Keyword داشته باشد.

چک لیست Alt Text قبل از انتشار

قبل از انتشار صفحه، برای هر تصویر این موارد را بررسی کنید:

• آیا تصویر اطلاعاتی است یا صرفاً Decorative؟
• اگر Informative است، Alt اطلاعات اصلی آن را منتقل می کند؟
• اگر تزئینی است، آیا alt="" دارد؟
• اگر Link یا Button است، Alt عملکرد آن را توضیح می دهد؟
• آیا Keyword فقط در صورت طبیعی بودن استفاده شده است؟
• آیا Alt کوتاه و قابل فهم است؟
• آیا از Keyword Stuffing جلوگیری شده است؟
• آیا توضیح تصویر با Context همین بخش از صفحه هماهنگ است؟
• اگر تصویر پیچیده است، آیا اطلاعات کامل آن در متن صفحه نیز وجود دارد؟
• آیا Alt با Caption، Filename و Title Attribute اشتباه گرفته نشده است؟

یک روش سریع برای تصمیم گیری درباره Alt

اگر هنوز نمی دانید چه Alt بنویسید، این Decision Rule ساده مفید است:

• تصویر اطلاعات مهم دارد؟ Meaning آن را مختصر بنویسید.
• تصویر فقط تزئینی است؟ از alt="" استفاده کنید.
• تصویر یک Link یا Button است؟ عملکرد یا مقصد را بنویسید.
• تصویر یک Chart پیچیده است؟ Alt خلاصه + توضیح کامل در متن صفحه.
• تصویر متنی است؟ اگر متن جای دیگری موجود نیست، Meaning آن را در Alternative منتقل کنید.

W3C نیز یک Alt Decision Tree رسمی منتشر کرده که تقریباً همین منطق را برای تشخیص نوع Text Alternative دنبال می کند.

Alt Decision Tree رسمی W3C

جمع بندی

Alt Text توضیح متنی جایگزین تصویر است، اما نوشتن آن به معنی توصیف مکانیکی تمام جزئیات عکس نیست. متن جایگزین باید اطلاعات یا عملکردی را منتقل کند که تصویر در Context همان صفحه دارد.

برای تصاویر Informative، توضیح مختصر و معنادار بنویسید. برای تصاویر Decorative از alt="" استفاده کنید. اگر تصویر Link یا Button است، عملکرد آن را توضیح دهید و برای نمودارهای پیچیده، اطلاعات کامل را علاوه بر Alt در متن صفحه نیز ارائه کنید.

از نظر SEO نیز Alt می تواند به Google برای درک بهتر موضوع تصویر کمک کند، اما پر کردن آن با Keyword روش درستی نیست. کلمه کلیدی فقط وقتی وارد Alt شود که واقعاً بخشی از توصیف طبیعی تصویر باشد.

Alt Text خوب متنی نیست که بیشترین Keyword را داشته باشد؛ متنی است که اگر تصویر دیده نشود، اطلاعات ضروری آن را با کمترین کلمات ممکن منتقل کند.