تگ Alt چیست؟ چگونه یک Alt tag بهینه و مناسب بنویسیم؟

حتما شما هم جمله معروف “ارزش یک عکس بیشتر از هزاران کلمه است” را شنیده‌اید. تصاویر خیلی بهتر و گویاتر از کلمات می‌توانند بیان کننده منظور ما باشند.

اگر چندسال به عقب‌ برگردیم، یعنی دقیقا زمانی که هنوز تکنولوژی تحت عنوان پردازش تصاویر وجود نداشت، فهمیدن محتوای تصاویر برای کامپیوترها تقریبا غیر ممکن بود. حتی همین حالا هم در بسیاری از موارد یک کامپیوتر به خوبی انسان نمی‌تواند محتوای یک عکس را تشخیص دهد.

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

اگر جزو کاربران شبکه‌های مجازی تصویر محوری، مثل اینستاگرام باشید حتما می‌دانید که یکی از روش‌های مشخص کردن محتوای تصاویر و فیلم‌ها استفاده از هشتگ‌هاست.

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

در دنیای وب هم دقیقا راه حل مشابهی برای کمک به موتورهای جستجو برای فهمیدن محتوای تصاویر وجود دارد، راه حلی نام تگ Alt.

تگ Alt چیست؟

حتما از فهمیدن این قضیه تعجب خواهید کرد که در دنیای برنامه نویسی و وب، چیزی تحت عنوان تگ Alt وجود ندارد!

alt tag در حقیقت یک مترادف اشتباه برای عبارت alt text است که به صورت یک اشتباه همگانی در بین عموم جا افتاده است.

alt اول alt text کوتاه شده عبارت alternative به معنای جایگزین است. بنابراین alt text را می‌توانیم به معنی “متن جایگزین” ترجمه کنیم.

حتی تابحال متوجه شده‌اید که چرا به این alt text متن جایگزین گفته می‌شود،

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

بد نیست که بدانید تگ alt یا با نام درست‌تر alt text به نام‌های دیگر “alt attributes” و “alt descriptions” هم شناخته می‌شود، البته ما هم در این مقاله از همان تگ alt که برای بیشتر افراد شناخته شده است استفاده خواهیم کرد.

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

کاربردهای تگ alt

3 کاربرد اصلی را برای تگ alt می‌توانیم در نظر بگیریم:

1. تقریبا اکثر مرورگرها و حتی موبایل‌های امروزی قابلیتی دارند که معمولا افراد نابینا یا دارای اختلال بینایی برای استفاده از محتواهای وبسایت‌ها از آن استفاده می‌کنند. در حقیقت یک ابزار صوتی صفحه خوان، محتوای صفحات را برای آن‌ها می‌خواند و به این ترتیب این افراد هم می‌توانند از محتواهای موجود در اینترنت بهره‌مند شوند. ابزارهای صفحه‌خوان وقتی به تصاویر می‌رسند از تگ alt تصاویر برای رساندن محتوای تصاویر استفاده می‌کنند.
2. محتوای تگ alt در مواقعی که سرعت اینترنت بسیار ضعیف و کم است و تصاویر به درستی قادر به لود شدن نیستند به جای آن‌ها به نمایش در می‌آید.
3. در نهایت تگ alt به موتورهای جستجو کمک می‌کند تا بهتر بتوانند متوجه ارتباط مفاهیم و تصاویر شوند و این تگ نقش مهمی در سئو تصاویر بازی می‌کند.

یک مثال برای نمایش تگ alt

بگذارید با یک مثال دقیقا مشخص کنیم که alt tag دقیقا چیست و کجاست،

اگر با تگ‌های HTML آشنا باشید، برای نمایش تصاویر در دنیای وب تگی تحت عنوان img در نظر گرفته شده است. به این قطعه کد دقت کنید:

<img src="mypic.jpg">

کد HTML ساده بالا در حقیقت یک تصویر به نام mypic.jpg را مشخص می‌کند. اما این تصویر هیچ متن جایگزینی ندارد که نشان دهنده محتوای تصویر باشد و از تمام مزایایی که تابحال گفتیم بی بهره است.

حالا به همان قطعه کد بالا خاصیت یا attribute به نام alt را اضافه می‌کنیم که دقیقا همان موضوع بحث ماست، حالا به کد زیر دقت کنید:

<img src="mypic.jpg" alt="یک گل رز قرمز رنگ">

با اضافه شدن attribute آلت به تصویر، حالا خیلی راحت حتی بدون دیدن آن می‌توانیم حدس بزنیم که احتمالا این عکس درباره یک گل است که احتمالا قرمز رنگ است و از جنس رز است!

به همین راحتی با نوشتن متن جایگزین، از تمام خاصیت‌ها و کاربردهای تگ alt بهره‌مند شدیم و حالا وقتی موتورهای جستجو به تصویر ما می‌رسند به راحتی می‌توانند متوجه محتوای آن و ارتباط آن با سایر محتوایمان شوند، وقتی صفحه خوان‌ها به تصویر ما می‌رسند حرفی برای گفتن دارند و وقتی تصاویر لود نمی‌شوند کاربران به راحتی می‌توانند جای خالی آن‌ها را حدس بزنند.

اما حالا که دقیقا با تگ alt آشنا شدید، حتما کنجکاو شده‌اید که چگونه می‌توانیم به بهترین شکل ممکن یک متن جایگزین مناسب برای تصاویرمان بنویسیم.

چگونه یک alt tag عالی بنویسیم؟

بهترین روش برای نوشتن متن جایگزین، نوشتن یک متن کاملا توصیفی است، به طوری که اگر چشمانتان را ببندید و از کسی بخواهید که آن را برایتان بخواند، بتوانید به صورت کاملا منطقی آن را تجسم کنید، در این حالت می‌توانید مطمئن باشید که در مسیر درستی قرار دارید.

فراموش نکنید که متن جایگزین محلی برای چپاندن کلمات کلیدی‌تان نیست و اگر بخواهید با تکرار بیش‌ از حد کلمات کلیدی در تگ‌های alt زرنگی کنید به راحتی شناسایی خواهید شد!

بگذارید با چند مثال کمی تمرین کنیم،

مثال اول را با یک دسته گل زیبا از گل‌های لاله شروع می‌کنیم،

متوسط:

<img src="flowers.jpg" alt="دسته گل">

عبارت “دسته گل” برای تگ alt خوب است اما کامل نیست، چرا که توصیف چندانی ندارد و ما می‌توانیم در مورد این تصویر چیزهای خیلی بیشتری را توصیف کنیم،

خوب:

<img src="flowers.jpg" alt="یک دسته گل شیک و زیبا از لاله‌های رنگی">

می‌توانیم ادعا کنیم که این تگ alt نسبت به حالت قبلی خیلی بهتر تصویرمان را توصیف می‌کند، شیک و زیبا بودن دسته گل و اینکه این دسته گل شامل لاله‌های رنگی است را از حالت اول نمی‌توانستیم متوجه شویم اما حالا خیلی بهتر از قبل می‌توانیم بدون دیدن تصویر یک دسته گل مشابه را در ذهنمان مجسم کنیم.

حالت‌های بد:

<img src="flowers.jpg" alt="">

و یا

<img src="flowers.jpg" alt="فروش اینترنتی دسته گل فروش آنلاین دسته گل بزرگ دسته گل لاله دسته گل ها دسته گل خواستگاری دسته گل بزرگ تهران سفارش آنلاین گل">

این دو حالت هم کاملا نامناسب و اشتباه هستند، در حالت اول attribute آلت عکس کاملا خالی باقی مانده و هیچ توصیفی از عکس ارائه نمی‌دهد، در حالت دوم هم از تگ آلت برای گنجاندن کلمات کلیدی و اسپم استفاده شده است که اصلا مناسب نیست.

یک مثال دیگر،

متوسط:

<img src="man and moon.jpg" alt="ماه">

خوب:

<img src="man and moon.jpg" alt="ماه و مرد">

عالی:

<img src="man and moon.jpg" alt="سایه یک مرد بر روی تصویر بزرگی از ماه">

فراموش نکنید که بهترین حالت برای نوشتن alt tag تصاویر، عبارت‌های کاملا توصیفی هستند که به بهترین شکل ممکن تصویر، نیت تصویر و اشیا داخل تصویر و کیفیت آن‌ها را توصیف می‌کنند.

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

به این مثال دقت کنید:

تصویر زیر مربوط به سرویس تحقیق کلمات کلیدی سایت معروف MOZ است. سایت MOZ یکی از سایت‌های معروف و نام آشنا برای سئو کاران است که سرویس‌های مختلفی برای سئو سایت‌ها ارائه می‌کند.

همینجا تا بحث سئو سایت است توصیه کنم که مقاله “سئو چیست؟” را هم مطالعه کنید، اگر از مطالعه این مقاله لذت برده باشید از خواندن آن مقاله هم حتما خوشحال خواهید شد.

خب اما در سایت‌های محتوا محور که خیلی از تصاویر، تصاویر کاملا مجازی و غیر واقعی هستند چگونه باید تگ alt را بنویسیم؟

در خیلی از موارد می‌توانیم به نیت تصاویر اشاره کنیم و بجای اینکه بنویسیم یک “تصویر آبی از سایت MOZ” محتوا و نیت تصویر را توصیف کنیم.

متوسط:

<img src="kwe.jpg" alt="تحقیق کلمات کلیدی">

خوب:

<img src="kwe.jpg" alt="سرویس تحقیق کلمات کلیدی سایت موز">

عالی:

<img src="kwe.jpg" alt="سرویس تحقیق کلمات کلیدی سایت موز برای پیدا کردن بهترین کلمات کلیدی در سئو سایت">

نکات کلیدی در خصوص نوشتن متن جایگزین تصاویر

در ادامه مهم‌ترین نکاتی که در هنگام نوشتن متن جایگزین تصاویر باید به آن‌ها دقت کنید را برایتان گرد آوری کرده‌ایم:

1. تا جای ممکن تصاویر را توصیف کنید.
   همانطور که گفتیم تگ alt تصاویر برای استفاده و راحتی کاربرانی که قادر به دیدن نیستند طراحی شده است، بنابراین توضیحات شما تا جای ممکن باید یک معنا و ارزشی را به آن‌ها منتقل کند. همچنین فراموش نکنید که جای تصاویری که با اهداف زیبایی و طراحی سایت استفاده می‌شوند در دنیای CSS است و نه HTML.
2. از زیاده گویی خودداری کنید.
   اکثر صفحه‌خوان‌های معروف، بیشترین تعداد کاراکتری که برای تگ alt می‌خوانند 125 کاراکتر است و بیشتر از آن را کات می‌کنند و دیگر نمی‌خوانند. بنابراین توصیه می‌شود که طول متن جایگزین را در حوالی 125 کاراکتر و کمتر از آن نگه دارید.
3. از کلمات کلیدی‌تان استفاده کنید.
   متن جایگزین فرصتی را فراهم می‌کند که بتوانید به صورت غیر مستقیم این سیگنال را به موتورهای جستجو بدهید که محتوای شما در خصوص یک مفهوم کلیدی خاص است. اگرچه واضح است که استفاده بیش از حد از کلمات کلیدی در تگ alt نامناسب و فعالیتی اسپمی است، اما اگر توصیف شما به گونه‌ای است که می‌توانید از کلمات کلیدی‌تان در متن جایگزین تصاویر استفاده کنید از این فرصت غافل نشوید.
4. از تکرار کلمات کلیدی‌تان خودداری کنید.
   اگر تصاویر سایت‌تان تگ alt نداشته باشند از نظر گوگل امتیاز منفی دریافت نمی‌کنید، اما اگر از تگ alt به عنوان محلی برای تکرار کلمات کلیدی استفاده کنید حتما به مشکل خواهید خورد و موتورهای جستجو به راحتی متوجه تقلب شما خواهند شد.
5. از تصاویر بجای متن استفاده نکنید.
   مسلما کاربرد تصاویر و محتواهای نوشتاری متفاوت است. استفاده از تصاویر بجای متن نه تنها امتیاز مثبتی برای سایت شما در نظر گرفته نمی‌شود بلکه بخاطر ضعف موتورهای جستجو در خواندن متن داخل تصاویر امتیاز محتواهای نوشتاری را هم از دست خواهید داد.
6. از عبارت‌هایی مثل «تصویری از …» ، «یک عکس از …» استفاده نکنید
   به صورت پیش‌فرض تگ alt درحال اشاره به یک تصویر است، بنابراین نیازی نیست که دائما این موضوع را یادآوری کنید!
7. از تگ longdesc برای توصیف‌های طولانی استفاده کنید.
   در تصاویر پیچیده‌ای که برای توصیف نیاز به نوشتن متن‌های طولانی دارند، می‌توانید از attribute به نام longdesc=”” استفاده کنید.
8. از توصیف دکمه‌های تصویری غافل نشوید.
   اگر فرم‌های داخل سایت‌تان از تصاویر به جای دکمه‌ها استفاده می‌کنند، می‌توانید به کمک تگ alt عملکرد و وظیفه آن‌ها را توصیف کنید.

اهمیت تگ alt در سئو سایت

استفاده از تگ alt بر روی تصاویر می‌تواند منجر به رقم زدن تجربه کاربری بهتری برای کاربران شما شود، علاوه بر این، نامگذاری مناسب تصاویر و استفاده از تگ title مناسب به همراه استفاده ویژگی متن جایگزین می‌تواند مزایای مستقیم و غیر مستقیم مختلفی برای سئو سایت شما به ارمغان بیاورد.

اگرچه در طی این سال‌ها فناوری تشخیص تصاویر موتورهای جستجو از جمله گوگل پیشرفت‌های خیلی چشمگیری داشته‌اند اما هنوز هم در تشخیص تصاویر به خوبی چشمان ما و برداشتی که انسان‌ها از تصاویر می‌کنند نیستند و در این زمینه فاصله زیادی با انسان دارند.

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

بگذارید با یک مثال دقیقا این موضوع را جا بیندازم،

تصویر زیر احتمالا مربوط به حساب توییتر ایلان ماسک و توییت‌های جنجالی اوست. اگر وظیفه تشخیص محتوای این تصویر را به عهده تکنولوژی‌های پردازش تصویر گوگل بگذاریم در بهترین حالت یک مرد و احتمالا لوگو توییتر تشخیص داده خواهد شد.

درصورتی که یک انسان به خوبی می‌تواند متوجه کاریکاتور ایلان ماسک و ارتباط خنده او و احتمالا توییت‌های جنجالی این چند وقت اخیر او شود. مفاهیمی که توسط هوش مصنوعی گوگل تشخیص آن‌ها تقریبا غیر ممکن است.

بنابراین هرچقدر هم که به پیشرفت هوش مصنوعی و تشخیص تصاویر امیدوار باشیم استفاده از تگ alt به درک بهتر تصاویر توسط موتورهای جستجو و رتبه گرفتن در کلماتی که دقیقا مدنظرمان هستند کمک خواهد کرد.

آموزش نوشتن تگ alt در سایت‌های وردپرسی

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

برای اینکار تنها کافیست بعد از آپلود کردن تصاویر در وردپرس از ستون کناری گزینه “متن جایگزین” را انتخاب کنید و در این قسمت متنی که برای تگ alt مدنظرتان هست را بنویسید.

وردپرس به صورت خودکار هنگام استفاده از این تصویر، ویژگی alt آن را هم با محتوای شما به تگ img تصویرتان اضافه خواهد کرد.

 ویژگی alt تصاویر را جدی بگیرید

در این مقاله به تمام زوایا ویژگی alt پرداختیم و از منظرهای مختلف به بررسی آن و نحوه نگارش آن پرداختیم. همانطور که متوجه شدید این تگ دقیقا همانند هشتگ‌های شبکه‌های مجازی به درک بهتر مفاهیم و تصاویر توسط موتورهای جستجو کمک شایانی می‌کند و به راحتی با نوشتن یک متن جایگزین خوب می‌توانیم به موتورهای جستجو کمک کنیم تا از محتوای ما سر دربیاورند و تصاویرمان را متناسب با کلماتی که واقعا مرتبط به آن‌ها هستند رتبه بندی کنند.

سرچ تصاویر گوگل یکی از ورودی‌های خوبی است که می‌تواند ترافیک مناسبی را به سایت ما سرازیر کند. استفاده مناسب از تگ alt در کنار تولید محتوا کاربرپسند و ارزشمند به جذب هرچه بیشتر کاربران به سایت ما منجر خواهد شد.

بنابراین اگر تابحال به اهمیت این ویژگی دقت کافی نکرده‌اید، وقت آن رسیده که از این فرصت استفاده کنید و با نوشتن متن‌های جایگزین مناسب ترافیک بیشتری را از موتور جستجو گوگل جذب وبسایت خود کنید.

به مانند گذشته، در پایان هر مقاله می‌توانید سوالات و ابهامات خود را در بخش نظرات با ما درمیان بگذارید تا در کمتر از 24 ساعت به آن‌ها پاسخ دهیم. از شنیدن نظرات و سوالات شما خوشحال خواهیم شد.