تگ alt تصاویر چیست و چه کاربردی دارد؟

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

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

تگ alt تصاویر چیست؟

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

از منظر سئو، آلت تگ به موتورهای جستجو مثل گوگل کمک می‌کند تا درک بهتری از تصاویر یک صفحه پیدا کنند و بتوانند آن‌ها را در نتایج جستجوی مرتبط نمایش دهند. وقتی آلت تگ به‌درستی و به‌صورت توصیفی نوشته شود، نه‌تنها به بهبود رتبه صفحه در نتایج جستجو کمک می‌کند، بلکه شانس دیده شدن تصویر در Google Image را هم افزایش می‌دهد.

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

تفاوت تگ alt و تگ عنوان

• تگ alt برای توصیف محتوای تصویر به‌کار می‌رود و در صورت بارگذاری نشدن تصویر یا استفاده از صفحه‌خوان، نمایش داده می‌شود. 
• تگ title توضیحی مختصر است که هنگام قرار گرفتن نشانگر ماوس روی تصویر، به صورت بالاپر (Tooltip) ظاهر می‌شود. 
• در واقع، alt نقش اصلی در دسترس‌پذیری و سئو دارد، در حالی که title کاربردی تکمیلی و تأثیر محدودتری دارد.

چرا متن جایگزین عکس در سئو مهم است؟

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

قابلیت دسترسی برای همه کاربران

از سال 1999، W3C (کنسرسیوم وب جهانی) دستورالعمل‌هایی را برای دسترسی‌پذیری بهتر محتوای وب ارائه داد. یکی از اصلی‌ترین توصیه‌ها، استفاده از جایگزین متنی برای محتوای تصویری و شنیداری بود. این یعنی:

اگر کاربری نتواند تصویر شما را ببیند، باید بتواند محتوای آن را از طریق یک توضیح متنی درک کند.

برای مثال، اگر در صفحه‌ای تصویری از یک فلش رو به بالا دارید که کاربر را به “فهرست مطالب” هدایت می‌کند، متن جایگزین باید چیزی مثل «رفتن به فهرست مطالب» باشد. این موضوع به‌ویژه برای کاربران نابینا یا دارای اختلالات بینایی که از صفحه‌خوان‌ها استفاده می‌کنند، اهمیت دارد.

ارتقای تجربه کاربری

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

این یعنی حتی در شرایطی که تصویر دیده نمی‌شود، پیام آن همچنان منتقل می‌شود.

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

افزایش ترافیک ارگانیک از طریق جستجوی تصاویر

متن جایگزین فقط برای کمک به کاربران نیست؛ بلکه به موتورهای جستجو هم کمک می‌کند تا بفهمند تصویر درباره چیست. این یعنی:

پاگر alt text خوبی بنویسید، تصاویرتان شانس نمایش در Google Images و بسته‌های تصویری در نتایج جستجو را پیدا می‌کنند.

همین قابلیت باعث شد تیم وبلاگ HubSpot با اجرای یک استراتژی سئو مبتنی بر بهینه‌سازی متن جایگزین، تنها در کمتر از یک سال، ترافیک تصویر خود را به طرز چشمگیری افزایش دهد. این یعنی بیش از ۱۶۰ هزار بازدید ارگانیک بیشتر!

به این مطلب هم سر بزنید: سئو ویدیو چگونه است؟

چطور یک تگ alt بهینه بنویسیم؟

1.     تصویر مناسبی انتخاب کنید

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

<img src=”decorative-image-title.jpg” alt=””>

برای تصاویری که محتوای اضافی ارائه می‌دهند، باید حتماً تگ alt مناسبی بنویسید که توضیحی جامع و مفید از تصویر باشد. به عنوان مثال:

<img src=”marketing-funnel.jpg” alt=”تصویری از قیف بازاریابی با مراحل مختلف نمایش داده شده”>

2.   تصویر را دقیق و مختصر توصیف کنید

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

<img src=”yoga-woman.jpg” alt=”زنی در حال انجام یوگا در فضای باز”>

نکته: برخی توصیه می‌کنند که تعداد کاراکترهای متن جایگزین را در حدود 125 کاراکتر نگه دارید تا از محدودیت‌های فناوری‌های کمکی جلوگیری کنید.

3.     کلمات کلیدی مرتبط  انتخاب کنید

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

<img src=”marketing-funnel-guide.jpg” alt=”راهنمای قیف بازاریابی برای موفقیت در استراتژی‌های فروش”>

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

نوشتن تگ alt در کد html

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

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

ساختار پایه‌ای استفاده از alt در HTML:

<img src=”path-to-image.jpg” alt=”توضیح مختصر و کاربردی درباره تصویر”>

چند نمونه تگ alt حرفه‌ای برای موقعیت‌های مختلف:

نمایش لوگوی برند:

<img src=”logo.png” alt=”لوگوی فروشگاه اینترنتی چاوش ابزار”>

تصویر یک محصول (مثلاً دریل):

<img src=”drill-x200.jpg” alt=”دریل برقی مدل X200 مناسب برای کارهای صنعتی و خانگی”>

تصویر خدمات یا مراحل نصب ابزار:

<img src=”installation-guide.jpg” alt=”راهنمای تصویری نصب صفحه سنگ روی فرز”>

تصویر تیم پشتیبانی یا فضای کاری:

<img src=”support-team.jpg” alt=”تیم پشتیبانی فنی چاوش ابزار در حال پاسخ‌گویی به مشتریان”>

تصویر تزئینی بدون نیاز به alt:

<img src=”decorative-line.png” alt=””>

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

به این مطلب هم سر بزنید: انواع سئو که باید بشناسید

مثال های عملی از alt تصویر خوب و بد

در اینجا چند مثال عملی برای نوشتن تگ alt تصویر خوب و بد را آورده‌ایم تا بهتر متوجه شوید:

1.   کلمه کلیدی در مقابل توصیف واقعی

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

متن جایگزین بد:

alt=”خرید لباس زنانه آنلاین برند فروشگاه پوشاک خرید آنلاین قیمت مناسب تهران”

مشکل: فقط پر از کلمات کلیدی پشت سر هم است، بدون ارتباط معنایی. برای گوگل و کاربر هیچ ارزشی ندارد و مصداق keyword stuffing است.

متن جایگزین خوب:

alt=”ورودی فروشگاه لباس زنانه آنلاین در مرکز خرید تهران با ویترین تابستانی”

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

2.  ویژگی عمومی در مقابل جزئیات خاص

تصویر: عکسی از یک سرآشپز که در حال تزئین بشقاب غذا در یک رستوران معروف است.

متن جایگزین بد:

alt=”آشپز در حال تزئین غذا”

مشکل: خیلی عمومی و کلی؛ هیچ اطلاعات خاصی درباره موقعیت، نقش شخص، یا نوع غذا نمی‌دهد.

متن جایگزین خوب:

alt=”سرآشپز رستوران ایتالیایی در حال تزئین پاستا با سس ریحان تازه”

این تگ alt دقیقاً می‌گوید چه کسی، کجا و چه کاری انجام می‌دهد. به سئو و درک تصویر کمک می‌کند.

3.     متن بدون زمینه در مقابل متنی مرتبط با محتوا

تصویر: یک معلم در کلاس آنلاین، در حال صحبت با دانش‌آموزان از طریق لپ‌تاپ

متن جایگزین بد:

alt=”زن در حال صحبت با لپ‌تاپ”

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

متن جایگزین خوب (برای مقاله‌ای درباره آموزش از راه دور):

alt=”معلم کلاس آنلاین در حال تدریس به دانش‌آموزان از طریق تماس تصویری”

این تگ alt هم به نقش فرد اشاره کرده (معلم)، هم به هدف تصویر (تدریس)، هم به زمینه مقاله (آموزش آنلاین).

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

جمع‌بندی

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

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

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

منبع: https://blog.hubspot.com/marketing/image-alt-text