شاید تا حالا دقت کرده باشی که وقتی توی یه وب سایت میگردی، همه چیز با هم هماهنگ و سر جاش به نظر میاد؛ از متن گرفته تا تصاویر، انگار همه دارن یه داستان رو برات تعریف میکنن. حالا فکر کن داری یه مقاله درباره تاریخچه ی عجیب و غریب کافههای نیویورک میخونی و وسط خوندن، به یه تصویر برخورد میکنی که به دلایلی بارگذاری نمیشه. چیزی که میبینی فقط یه جعبه خالیه و شاید یه آیکون کوچک شکست خورده که بهت چشمک میزنه و هیچ توضیحی هم نیست که بفهمی این تصویر چی بوده و چه معنی ای داشته!
دقیقاً همین جاست که تگ alt میتونه همه چیز رو تغییر بده. این عنصر مخفی، همون توضیحیه که میتونه به جای تصویر صحبت کنه و به آدمایی که تصاویر رو نمیبینن کمک کنه تا محتوای صفحه رو بهتر درک کنن. ولی فقط این نیست؛ همین تگ کوچک و ساده به موتورهای جستجو هم میفهمونه که توی تصویر چه خبره و چطور باید محتوای صفحه رو درک کنن. بدون تگ alt، انگار یه بخشی از وب سایتت رو به تاریکی سپردی؛ جایی که هیچکس، حتی گوگل هم نمیتونه ببینه.
و حالا سؤالی که شاید برات پیش بیاد اینه: تگ alt دقیقاً چیکار میکنه؟ چطور میتونه توی سئو و دسترسی پذیری این قدر تاثیرگذار باشه؟ در ادامه میخوایم عمیقتر بریم توی این دنیا و از رازهای نهفته این تگ مهم پرده برداریم.

وقتی میخوای یه وب سایت رو طوری بسازی که همه، حتی کسایی که نمیتونن تصاویر رو ببینن، بتونن باهاش ارتباط بگیرن، باید از تگ alt استفاده کنی. تگ alt یا همان توضیحات جایگزین (Alternative Text) یک ویژگی ساده در HTML هست که به تصاویر اضافه میشه تا توضیحی مختصر از محتوای اون تصویر رو در اختیار کاربران و موتورهای جستجو بذاره. فکر کن یه عکس از یه گربه بامزه توی صفحه وب داری؛ تگ alt میتونه توضیح بده که این گربه دقیقاً چه کاری انجام میده یا چرا توی این صفحه هست.
کاربرد اصلی تگ alt برای دسترسی پذیریه. یعنی اگر فردی با مشکلات بینایی از صفحه خوانها (Screen Readers) استفاده کنه، این تگ کمک میکنه که بفهمه اون تصویر درباره چیه. صفحه خوانها اطلاعات تگ alt رو برای کاربر میخونن و این یعنی کسی که نمیتونه تصویر رو ببینه، باز هم میتونه با محتوای تصویر ارتباط بگیره. در نتیجه، تگ alt یک ابزار کلیدی برای وب سایت هایی محسوب میشه که میخوان به نیازهای کاربران مختلف احترام بذارن.
حالا شاید فکر کنی که این تگ فقط برای کسانی که تصاویر رو نمیبینن، کاربرد داره؛ اما باید بگم این طور نیست! یکی از فواید دیگش اینه که به موتورهای جستجو کمک میکنه تا محتوای تصویر رو بشناسن و بهینه سازی کنن. یعنی گوگل و دیگر موتورهای جستجو از این تگ استفاده میکنن تا بفهمن محتوای تصویری درباره چیه و اون رو توی نتایج جستجو قرار بدن. پس استفاده ازش نه تنها برای دسترسی پذیری کاربرانه، بلکه برای سئوی سایت هم ضروریه.
اما استفاده از تگ alt هم قلق هایی داره. مثلاً باید توضیحاتش دقیق و مختصر باشه. نباید به جای توصیف تصویر، فقط کلمات کلیدی رو پشت سر هم ردیف کنی، چون این کار نه به کاربر کمک میکنه و نه به سئو. بهتره توضیح alt دقیقاً چیزی باشه که به تصویر مربوطه و به شکل طبیعی به کاربر کمک کنه که بفهمه اون تصویر چه پیامی داره.
در نهایت، شاید بشه گفت این تگ مثل یک ترجمه برای تصاویر عمل میکنه؛ یه ترجمه که از دیدگاه افراد مختلف، چه کسانی که به تصاویر دسترسی دارن و چه کسانی که ندارن، به محتوای سایت معنای بیشتری میده. بدون این تگ، انگار یه بخشی از داستان سایت ناتمام مونده و همه نمیتونن اون رو درک کنن.
حالا که میدونی تگ alt چیه شاید برات جالب باشه بدونی این ایده از کجا شروع شد و چرا اصلاً به این ویژگی نیاز پیدا کردیم؟
تگ alt به دنیای وب به عنوان پاسخی به نیاز روزافزون به دسترسی پذیری و کاربردپذیری وارد شد. در دهه 90 میلادی، زمانی که اینترنت تازه در حال رشد بود، دسترسی به محتوای بصری به اندازه امروز راحت نبود. بسیاری از کاربران، حتی اگر اینترنت پرسرعتی هم داشتند، به خاطر کمبود استانداردها یا مرورگرهای محدود نمیتونستن همه تصاویر رو ببینن. به همین خاطر، طراحان وب دنبال راهی بودن که اگر تصویری به هر دلیلی قابل نمایش نبود، توضیحی کوتاه و جایگزین در دسترس کاربر قرار بگیره.
یکی از انگیزههای اصلی برای افزودن تگ alt به تصاویر، توجه به نیازهای افراد نابینا بود. سازمانهای حامی افراد دارای معلولیت، از جمله کنسرسیوم شبکه جهانی وب (W3C)، پیشنهاد دادن که از تگ alt برای بهبود دسترسی پذیری وب سایتها استفاده بشه. به این شکل، کاربران با استفاده از نرم افزارهای صفحه خوان میتونستن از محتوای تصویر هم بهره مند بشن. در واقع، این تگ ساده به مرور به یکی از پایههای استانداردهای دسترسی پذیری تبدیل شد.
در سالهای بعد، با افزایش اهمیت سئو و رقابت سایتها برای جذب کاربران بیشتر، استفاده از تگ alt به یک الزام برای بهینه سازی موتورهای جستجو تبدیل شد. گوگل و سایر موتورهای جستجو از تگ alt به عنوان یک فاکتور برای درک بهتر محتوای تصاویر استفاده میکنن. در واقع، این تگ به سایتها کمک میکنه که تصاویرشون هم مثل بقیه محتوا، در جستجوها پیدا بشه و به کاربران نمایش داده بشه.
امروزه، تگ alt یکی از استانداردهای پایه در طراحی وب سایت هاست و نه تنها برای سئو، بلکه برای ایجاد تجربه ای بهتر و جامعتر برای کاربران به کار میره. به لطف این تگ، وب به محیطی دسترس پذیرتر تبدیل شده؛ جایی که همه میتونن از محتوای اون بهره مند بشن، حتی اگر نتونن تصاویر رو ببینن.
حالا که دیدی تگ alt چطور به دنیای وب قدم گذاشت و چطور به یکی از ستونهای دسترسی پذیری تبدیل شد، شاید برات سوال باشه که این تگ دقیقاً چطوری کار میکنه؟ بیایم به لایههای زیرین این تگ کوچیک ولی تأثیرگذار نگاهی بندازیم و ببینیم چطور از دل کدها ظاهر میشه و به سایتها زندگی میده.
حالا که کنجکاویت حسابی برانگیخته شده، بریم سراغ کارکرد واقعی تگ alt. وقتی در کد HTML یک تصویر رو اضافه میکنی، میتونی یک ویژگی به نام "alt" براش تعریف کنی. این alt همون متن جایگزینیه که اگر تصویر به هر دلیلی نمایش داده نشه، به کاربر نشون داده میشه. البته این متن، تنها یک جایگزین ساده برای زمانی که تصویر لود نمیشه نیست؛ بلکه برای افرادی که از صفحه خوانها استفاده میکنن هم فوق العاده مفیده.
فرض کن میخوای توی سایتت تصویری از برج ایفل اضافه کنی. توی کد HTML، مشخصات تصویر رو مینویسی و بعدش alt رو بهش اضافه میکنی. مثلاً میتونی بنویسی "برج ایفل در غروب". حالا اگر کسی نتونه تصویر رو ببینه، این جمله کوتاه میتونه اون رو متوجه محتوای تصویر کنه. به این ترتیب، تجربه کاربری بهتری برای اون فرد ایجاد کردی، بدون اینکه تصویر اصلی لود بشه.
این توضیحات alt توی موتورهای جستجو هم خیلی مهمه. موتورهای جستجو نمیتونن مثل ما آدمها تصاویر رو بفهمن؛ اونها از متن استفاده میکنن تا بفهمن تصویر درباره چیه. پس این متن alt، به نوعی توضیحیه که به گوگل میگه "این تصویر درباره چی هست". به همین دلیل، توی کلمات alt باید از توضیح دقیق و مرتبط استفاده کنی، نه اینکه یه عالمه کلمه کلیدی نامربوط رو توش بریزی.
از طرف دیگه، این تگ به طور طبیعی میتونه توی وب سایت هایی که بارگذاری تصاویر سنگینه، کمک بزرگی باشه. تصور کن کاربر داری که از اینترنت ضعیف استفاده میکنه و سایتت سنگین بارگذاری میشه. با تگ alt، حتی اگر تصاویر نمایش داده نشن، باز هم کاربر با متن جایگزین رو به رو میشه و میتونه تا حدودی به محتوای سایت پی ببره.
حالا که فهمیدیم این تگ چطور کار میکنه، یه سؤال دیگه پیش میاد: این تگ چه کمکی به سئوی سایتت میکنه و چرا انقدر روی بهینه سازی اون تأکید میشه؟ این بخش رو از دست نده چون رازهای زیادی توی تگ alt وجود داره که میتونه سایتت رو در نتایج جستجو بهتر و قویتر کنه!
تگ alt فقط یک توضیح برای تصاویر نیست؛ در واقع یکی از ابزارهای مهم برای بهینه سازی سایت در موتورهای جستجو، به ویژه گوگل، محسوب میشه. این تگ، به گوگل کمک میکنه تا بتونه محتوای تصویر رو بفهمه و به اون امتیاز بده. چون گوگل برخلاف ما نمیتونه خود تصویر رو ببینه، تگ alt رو به عنوان راهی برای درک محتوای تصویری در نظر میگیره. اما چطور این تگ به سئو کمک میکنه و چرا این قدر مهمه؟
اول از همه، این تگ باعث میشه که تصاویر شما شانس بیشتری برای دیده شدن توی نتایج جستجوی تصویری گوگل داشته باشن. وقتی گوگل محتوای متنی alt رو میخونه و به تصویر لینک میده، این یعنی تصویر شما به درخواستهای جستجو مرتبط تره. پس اگر کسی به دنبال یک تصویر خاص باشه، تصویر شما میتونه توی نتایج جستجو نمایش داده بشه و ترافیک خوبی رو به سایتتون بیاره. به همین خاطر، توی متن alt از کلماتی استفاده کن که دقیقاً بیانگر محتوای تصویر باشه و به کاربر نشون بده که این تصویر چی رو توضیح میده.
تگ alt یکی از فاکتورهای کلیدی در بهینه سازی تجربه کاربری (UX) هم محسوب میشه، که این موضوع هم به طور غیرمستقیم روی سئو اثر میذاره. موتورهای جستجو مثل گوگل از معیارهای UX برای سنجش کیفیت سایت استفاده میکنن و وقتی تصاویر سایت به طور مناسب متن جایگزین (alt) داشته باشن، تجربه کاربری بهتری ایجاد میشه. این یعنی کاربران وقتی توی سایت شما هستن، اطلاعات بهتری از محتوای تصاویر میگیرن و همین باعث میشه که سایت شما رتبه بهتری در نتایج جستجو کسب کنه.
اما یه نکته مهم توی استفاده ازش اینه که نباید کلمات کلیدی رو به زور توی اون بچپونی. گوگل خیلی زود متوجه میشه که یه alt با کلمات غیرمرتبط پر شده و حتی ممکنه جریمت کنه. پس بهتره توی altها همیشه به طبیعیترین شکل ممکن توضیح بدی که اون تصویر چی رو نمایش میده. مثلاً اگر تصویری از یک لپ تاپ اپل داری، توی alt بنویسی "لپ تاپ اپل مک بوک پرو" نه اینکه فقط کلمه "لپ تاپ" رو صد بار تکرار کنی!
برای نوشتن تگ alt به شکلی که هم دسترسی پذیری رو افزایش بده و هم به سئوی سایت کمک کنه، باید حواست باشه که به طور دقیق و مختصر محتوای تصویر رو توضیح بدی. بیایم با یه مثال عملی کدنویسی شروع کنیم تا دقیقاً ببینی چطور میتونی یه تگ alt خوب و کاربردی بنویسی:
<img src="macbook-pro.jpg" alt="لپ تاپ اپل مک بوک پرو 2022 با صفحه نمایش رتینا" />در این مثال، داریم تصویری از یه مک بوک پرو اپل رو به صفحه اضافه میکنیم. ویژگی alt اینجا دقیقاً توضیح میده که تصویر چی رو نشون میده؛ بدون هیچ اغراقی و با کلمات دقیق. مثلاً نوشتیم "لپ تاپ اپل مک بوک پرو 2022 با صفحه نمایش رتینا." این متن جایگزین، کوتاه و گویاست و اگر کسی نتونه تصویر رو ببینه، از طریق این توضیح میتونه بفهمه که تصویر چی بوده.
نکته مهم اینجاست که باید از توضیحات طبیعی استفاده کنی و از تکرار بی دلیل کلمات کلیدی پرهیز کنی. گوگل و سایر موتورهای جستجو ترجیح میدن متنی که توی alt مینویسی، دقیق و مرتبط باشه.
حالا که با نحوه نوشتن یه تگ alt آشنا شدی، بریم سراغ نکات کلیدی ای که باید در نوشتنش رعایت کنیم تا به بهترین نتیجه دست پیدا کنیم.
حالا که تصمیم گرفتی تگهای alt رو به بهترین شکل بنویسی و سایتت رو حرفه ایتر کنی، بیایم چند نکته کاربردی رو بررسی کنیم که با رعایتشون میتونی altهای مؤثرتری بسازی. این تگهای کوچک، نه تنها در تجربه کاربری تأثیر بزرگی دارن، بلکه میتونن در سئوی سایتت هم یه نقش کلیدی ایفا کنن و باعث بشن تصاویرت در نتایج جستجو بیشتر دیده بشن.

حالا که تمام این نکات طلایی رو یاد گرفتی، وقتشه که با نگاه دقیقتری به نقاط قوت و ضعف این تگ ساده اما مؤثر بپردازیم تا ببینی چه تأثیراتی میتونه در دنیای وب و سئو داشته باشه.
تگ alt، به عنوان ابزاری مهم در دسترسی پذیری و سئو، مزایای زیادی برای سایتها به همراه داره، اما استفاده از اون همیشه بدون چالش هم نیست. بیایم اول نگاهی به نقاط قوتش بندازیم و بعد ببینیم چه ضعف هایی هم ممکنه داشته باشه.
تگ alt به خاطر ویژگیهای منحصربه فردش، میتونه تأثیرات مهمی در بهبود تجربه کاربری و افزایش دیده شدن سایت داشته باشه.
با وجود مزایای زیاد، تگ alt بدون چالش هم نیست و ممکنه محدودیتها و ضعف هایی داشته باشه.
حالا بریم سراغ ابزارها و افزونه هایی که میتونن به بهینه سازی تگ alt کمک کنن و این کار رو سریعتر و دقیقتر کنن.

حالا که حسابی با اهمیت و جزئیات این تگ آشنا شدی، شاید به این فکر کنی که چطور میتونی توی سایتت به راحتی و به شکل حرفه ای ازش استفاده کنی. خبر خوب اینه که ابزارها و افزونه هایی هستن که کار رو برایت سادهتر میکنن و به بهینه سازی تگ alt کمک زیادی میکنن.
افزونه Yoast SEO، یکی از بهترین ابزارهای سئو برای وردپرسه که بهت کمک میکنه تصاویر بدون تگ alt رو شناسایی کنی. با این افزونه، اگه یادت بره برای تصویری تگ alt بذاری، فوراً بهت هشدار میده. به راحتی میتونی با کمک Yoast تگهای alt استاندارد و بهینه بنویسی و کیفیت سئوی سایتت رو ارتقا بدی. این افزونه یه همراه همیشگی برای داشتن سایتی کامل و بهینه ست.
SEMrush یه ابزار قدرتمند و جامع برای تحلیل و بهبود سئوئه. با این ابزار، میتونی تگهای alt تصاویر رو بررسی کنی و ببینی چقدر بهینه هستن. SEMrush همچنین پیشنهادات مفیدی برای بهتر کردن سئو سایتت ارائه میده. اگر دنبال ارتقای سایتت هستی، SEMrush یه انتخاب بی نظیره.
Screaming Frog یه ابزار دقیق برای اسکن کامله که بهت کمک میکنه تصاویر بدون تگ alt رو پیدا کنی. اگه سایتی بزرگ داری، این ابزار میتونه خیلی از کارها رو برات سادهتر کنه. Screaming Frog بهت اجازه میده مطمئن شی که هیچ تگ alti از دستت در نرفته. این ابزار برای مدیریت بهینه ی تصاویر و سئو فوق العاده ست.
Alt Text Tester یه ابزار کوچیک و کاربردیه که تگهای alt تصاویر سایتت رو بررسی میکنه. به راحتی میتونی بفهمی تگهای فعلیت استاندارد و مناسب هستن یا نه. در صورت نیاز، میتونی با این ابزار تگهای alt رو بهینه کنی. Alt Text Tester یه همراه عالی برای بهبود جزئیات سئوئه.
اگه از Shopify استفاده میکنی، این افزونه کار اضافه کردن تگ alt برای تصاویرت رو راحت میکنه. با این ابزار، تگ alt تصاویر به صورت خودکار تنظیم میشه و نیاز نیست دستی وارد کنی. این افزونه برای فروشگاههای آنلاینی که وقت کمی برای مدیریت جزئیات دارن، عالیه. با Automatic Alternative Text for Shopify دیگه نگران چیزی نیستی!
این ابزارها و افزونهها نه تنها به بهبود تگهای alt کمک میکنن، بلکه باعث میشن تجربه کاربری سایتت بهتر بشه و موتورهای جستجو هم راحتتر سایتت رو بشناسن.

تگ alt یا همان متن جایگزین، توضیح کوتاهیه که در صورت لود نشدن تصویر یا استفاده از صفحه خوان، محتوای تصویر رو برای کاربران نمایش میده. این تگ هم به دسترسی پذیری کمک میکنه و هم به بهینه سازی سئوی تصاویر.
یه تگ alt خوب باید مختصر، دقیق و مرتبط با محتوای تصویر باشه. مثلاً به جای کلمات کلیدی نامرتبط، یه توصیف کوتاه مثل "کیک تولد شکلاتی با شمع" بنویس تا کاربر به خوبی متوجه بشه تصویر درباره چیه.
نه، فقط برای تصاویر مهم و کاربردی که به محتوای صفحه کمک میکنن، از تگ alt استفاده کن. تصاویر تزئینی نیازی به تگ alt ندارن و میتونی با استفاده از""=alt از نمایش اونها در صفحه خوانها جلوگیری کنی.
بله، تگ alt یکی از عوامل تأثیرگذار در سئوی تصاویر و دیده شدن اونها در جستجوی تصویریه. با انتخاب alt مناسب، موتورهای جستجو راحتتر محتوای تصویر رو درک میکنن و احتمال دیده شدنش در نتایج جستجو بیشتر میشه.
بله، ولی حواست باشه که کلمات کلیدی به صورت طبیعی و مرتبط با تصویر باشن. استفاده بیش از حد یا نامربوط از کلمات کلیدی میتونه به سئوی سایتت آسیب بزنه.
Yoast SEO و Rank Math دو افزونه محبوب وردپرس هستن که بهت کمک میکنن تصاویرت رو بررسی کنی و در صورت نداشتن alt، به راحتی بهینه سازی کنی.
تگ alt شاید در ظاهر یه ویژگی ساده باشه، اما تأثیر بزرگی روی تجربه کاربری و سئوی سایت داره. این تگ به ما کمک میکنه تا تصاویر رو برای همه افراد، حتی اونایی که نمیتونن تصاویر رو ببینن، قابل درک و مفید کنیم. از صفحه خوانها گرفته تا کاربرانی که با اینترنت کند کار میکنن، تگ alt یه پل ارتباطی بین تصویر و مخاطب ایجاد میکنه و تجربه بهتری برای همه میسازه.
در بحث سئو هم این تگ جایگاه خاص خودش رو داره. وقتی گوگل و موتورهای جستجو نمیتونن محتوای یک تصویر رو تشخیص بدن، تگ alt وارد عمل میشه و توضیح لازم رو بهشون میده. با این روش، تصاویرت در نتایج جستجوی تصویری گوگل راحتتر دیده میشن و سایتت بازدید بیشتری میگیره. البته به شرطی که متن جایگزین به درستی و به شکل طبیعی نوشته شده باشه.
برای نوشتن یه تگ alt خوب، باید نکات طلایی رو رعایت کنی؛ مختصر و دقیق باشه، از کلمات کلیدی مرتبط استفاده کنی و محتوای اضافی و نامربوط رو حذف کنی. ابزارها و افزونههای مختلفی هم هستن که بهت کمک میکنن تا متنهای جایگزین رو سریعتر و بهینهتر بسازی و هیچ تصویری رو بدون alt نذاری.
در نهایت، این تگ یکی از اون جزئیاتیه که اگر بهش توجه کنی، هم به سئوی سایتت کمک میکنه و هم یه تجربه بهتر و دسترس پذیرتر برای کاربران سایتت فراهم میکنه. حالا با این دانش، آماده ای که سایتت رو حرفه ایتر کنی و به همه کاربران فرصت بدی که از محتوای ارزشمندت بهره مند بشن.
اگر سوال یا تجربه ای درباره استفاده از این تگ داری یا ابزار و افزونه ای سراغ داری که توی بهینه سازی alt کمکت کرده، خوشحال میشم توی کامنتها باهامون به اشتراک بذاری.
دوره الفبای برنامه نویسی با هدف انتخاب زبان برنامه نویسی مناسب برای شما و پاسخگویی به سوالات متداول در شروع یادگیری موقتا رایگان شد: