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

در این مقاله، 16 راهکار کلیدی برای بهینه سازی تگ Alt را بررسی می کنیم تا بتوانید از حداکثر پتانسیل تصاویر خود بهره مند شوید:

• ✔️

  1. توصیفی باشید:

  متن Alt باید به طور دقیق و واضح، محتوای تصویر را توصیف کند.
• ✔️

  2. مختصر و مفید:

  از زیاده گویی پرهیز کنید. سعی کنید پیام اصلی تصویر را در چند کلمه کلیدی منتقل کنید.
• ✔️

  3. بهره‌گیری از کلمات کلیدی مرتبط:

  کلمات کلیدی مرتبط با موضوع صفحه را به طور طبیعی در متن Alt جای دهید.
• ✔️

  4. اجتناب از کلمات کلیدی بیش از حد:

  از پر کردن متن Alt با کلمات کلیدی (keyword stuffing) خودداری کنید، زیرا این کار تاثیر منفی بر سئو خواهد داشت.
• ✔️

  9. بهره‌گیری از متن Alt برای تصاویر دکمه ای:

  اگر از تصاویر به عنوان دکمه استفاده می کنید، در متن Alt، عملکرد دکمه را توضیح دهید (مثلا “ارسال فرم”).
• ✔️

  10. خالی گذاشتن متن Alt برای تصاویر تزئینی:

  اگر تصویر صرفا جنبه تزئینی دارد و اطلاعات مهمی را منتقل نمی کند، متن Alt را خالی بگذارید (alt=””).
• ✔️

  11. اجتناب از بهره‌گیری از عبارت “تصویر از. . . “:

  نیازی به شروع متن Alt با عبارت “تصویر از. . . ” نیست.
• ✔️

  12. بهره‌گیری از حروف کوچک:

  در نوشتن متن Alt، از حروف کوچک استفاده کنید.
• ✔️

  14. بررسی متن Alt تصاویر در سایت:

  به طور دوره ای، متن Alt تصاویر سایت خود را بررسی و در صورت نیاز، به روز رسانی کنید.
• ✔️

  15. عدم بهره‌گیری از کاراکترهای خاص:

  از بهره‌گیری از کاراکترهای خاص و غیر ضروری در متن Alt خودداری کنید.
• ✔️

  16. درک اهمیت دسترسی پذیری:

  متن Alt به کاربران دارای معلولیت کمک می کند تا محتوای تصاویر را درک کنند. به همین دلیل، در نوشتن متن Alt، به دسترسی پذیری توجه ویژه ای داشته باشید.

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

سعی کنید در هر تصویر، مناسب ترین و دقیق ترین متن جایگزین را انتخاب کنید.

16 راهکار طلایی برای بهینه‌سازی تگ Alt تصاویر در وبسایت

1. توصیف دقیق و مختصر

تگ Alt باید محتوای تصویر را به طور دقیق و مختصر توصیف کند.تصور کنید که فردی نابینا از طریق screen reader در حال مرور سایت شماست.آیا تگ Alt تصویر به او کمک می‌کند تا بفهمد تصویر چیست؟به جای بهره‌گیری از کلمات کلی مثل “عکس” یا “تصویر”، از عباراتی استفاده کنید که به طور خاص محتوای تصویر را توضیح دهند.مثلا به جای “عکس غذا”، از “بشقاب پاستا با سس مارینارا و ریحان تازه” استفاده کنید.از زیاده‌گویی پرهیز کنید.یک جمله کوتاه کافی است.هدف این است که مفهوم تصویر را به سرعت منتقل کنید.

مثال بد: <img src=”food.jpg” alt=”عکس”> مثال خوب: <img src=”pasta.jpg” alt=”بشقاب پاستا با سس مارینارا و ریحان تازه”> مثال خیلی خوب: <img src=”pasta.jpg” alt=”پاستا مارینارا با ریحان”> اینکه تا چه اندازه مختصر بنویسید به شما و تصویر برمی‌گردد.

هدف رساندن مفهوم است.

2. بهره‌گیری از کلمات کلیدی مرتبط

اگر تصویر به طور مستقیم با کلمه کلیدی اصلی صفحه مرتبط است، حتماً آن را در تگ Alt بگنجانید.این کار به موتورهای جستجو کمک می‌کند تا ارتباط بین تصویر و محتوای صفحه را درک کنند.البته، مراقب باشید که از Keyword Stuffing (پر کردن تگ Alt با کلمات کلیدی به صورت غیرطبیعی) خودداری کنید.این کار نه تنها کمکی به سئو نمی‌کند، بلکه ممکن است منجر به جریمه شدن سایت شما توسط گوگل شود.کلمه کلیدی را به طور طبیعی در توصیف تصویر بگنجانید.طوری بنویسید که انگار دارید تصویر را برای یک دوست توصیف می‌کنید.

مثال: اگر صفحه در مورد “بهترین رستوران‌های تهران” است و یک تصویر از رستوران ایتالیایی دارید: <img src=”italian-restaurant.jpg” alt=”فضای داخلی یک رستوران ایتالیایی، یکی از بهترین رستوران های تهران”> در این مثال، کلمه کلیدی “بهترین رستوران های تهران” به طور طبیعی در توصیف تصویر گنجانده شده است.

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

3. تگ Alt خالی برای تصاویر تزئینی

اگر تصویر صرفاً جنبه تزئینی دارد و اطلاعات مهمی را منتقل نمی‌کند، تگ Alt را خالی بگذارید. این کار به Screen Readers اعلام می‌کند که این تصویر را نادیده بگیرند. حذف کامل تگ Alt ممکن است باعث شود Screen Readers به طور پیش فرض نام فایل تصویر را بخوانند که می‌تواند تجربه کاربری نامناسبی ایجاد کند. تشخیص اینکه یک تصویر تزئینی است یا خیر، به محتوای صفحه و هدف تصویر بستگی دارد. اگر حذف تصویر به درک مطلب لطمه‌ای نمی‌زند، احتمالاً تصویر تزئینی است. مثال: یک خط جداکننده گرافیکی ساده: <img src=”divider.png” alt=””> مثال دیگر: آیکن‌های شبکه‌های اجتماعی که لینک هستند (در صورتی که متن جایگزین برای لینک وجود داشته باشد).

4. بهره‌گیری از زبان مناسب

تگ Alt باید به همان زبانی نوشته شود که محتوای اصلی صفحه به آن زبان است. این کار باعث می‌شود Screen Readers بتوانند به درستی متن را بخوانند و موتورهای جستجو بتوانند ارتباط بین تصویر و محتوای صفحه را بهتر درک کنند. اگر صفحه شما به زبان فارسی است، تگ Alt را نیز به فارسی بنویسید. بهره‌گیری از زبان‌های مختلف در یک صفحه می‌تواند باعث سردرگمی کاربران و موتورهای جستجو شود. اگر سایتی چند زبانه دارید، برای هر زبان نسخه جداگانه‌ای از تگ Alt را ارائه دهید. مثال: برای یک صفحه فارسی: <img src=”tehran.jpg” alt=”نمایی از شهر تهران در شب”> و برای نسخه انگلیسی همان صفحه: <img src=”tehran.jpg” alt=”A view of Tehran city at night”>

5. عدم بهره‌گیری از “تصویر از”، “عکس از” و . . .

نیازی نیست که در ابتدای تگ Alt بنویسید “تصویر از. . . ” یا “عکس از. . . “. Screen Readers و موتورهای جستجو از قبل می‌دانند که این یک تصویر است. مستقیماً به توصیف محتوای تصویر بپردازید. این کار باعث کوتاه‌تر شدن و خواناتر شدن تگ Alt می‌شود. در ضمن، از به کار بردن کلمات “a”، “an”، “the” در ابتدای تگ Alt خودداری کنید، مگر اینکه برای خوانایی ضروری باشند. مثال بد: <img src=”cat.jpg” alt=”عکس از یک گربه ملوس”> مثال خوب: <img src=”cat.jpg” alt=”گربه ملوس”> مثال بهتر: <img src=”cat.jpg” alt=”گربه پرشین سفید”>

6. توجه به طول تگ Alt

توصیه می‌شود که طول تگ Alt را زیر 125 کاراکتر نگه دارید. این کار به این دلیل است که برخی از Screen Readers ممکن است متن‌های طولانی‌تر را به طور کامل نخوانند. اگر نیاز دارید که توضیحات بیشتری در مورد تصویر ارائه دهید، می‌توانید از caption یا متن اطراف تصویر استفاده کنید. اگر تصویر پیچیده است و نمی‌توانید آن را در 125 کاراکتر توصیف کنید، مهم‌ترین جنبه‌های تصویر را در تگ Alt ذکر کنید و بقیه را در caption یا متن اطراف توضیح دهید. مثال: اگر تصویر یک نمودار پیچیده است: <img src=”chart.jpg” alt=”نمودار فروش سه ماهه دوم سال 2023″> و سپس در caption: <figcaption>نمودار فروش سه ماهه دوم سال 2023. این نمودار نشان می‌دهد که فروش در ماه خرداد به طور قابل توجهی افزایش یافته است. . .

7. عدم بهره‌گیری از تصاویر به جای متن

تا حد امکان از بهره‌گیری از تصاویر به جای متن خودداری کنید. این کار باعث می‌شود که محتوای شما برای موتورهای جستجو و Screen Readers قابل دسترس نباشد. اگر مجبور به بهره‌گیری از تصویر به جای متن هستید (مثلاً برای نمایش یک فونت خاص)، حتماً متن جایگزین را در تگ Alt ارائه دهید. بهترین راه حل این است که از CSS و فونت‌های وب برای نمایش متن با استایل‌های مختلف استفاده کنید. اگر از یک لوگو به عنوان لینک استفاده می‌کنید، تگ Alt باید نام شرکت یا سازمان باشد. مثال: اگر یک تصویر حاوی متن “تخفیف ویژه” دارید: <img src=”discount.png” alt=”تخفیف ویژه”> اما بهتر است به جای تصویر از متن استفاده کنید و با CSS آن را استایل دهید.

8. تست تگ Alt با Screen Reader

برنامه‌های Screen Reader زیادی وجود دارند که می‌توانید از آنها استفاده کنید، مانند NVDA (رایگان) و JAWS (تجاری). با بهره‌گیری از Screen Reader، به صفحه مورد نظر بروید و بررسی کنید که تگ Alt به درستی خوانده می‌شود و اطلاعات مورد نیاز را ارائه می‌دهد. در ضمن، از افراد نابینا یا کم‌بینا بخواهید که وبسایت شما را تست کنند و نظرات خود را ارائه دهند.

9. بهره‌گیری از تگ Alt برای دکمه‌های تصویری

اگر از دکمه‌های تصویری استفاده می‌کنید، تگ Alt باید عملکرد دکمه را توصیف کند. این کار به کاربران و موتورهای جستجو کمک می‌کند تا بفهمند با کلیک روی دکمه چه اتفاقی می‌افتد. به جای توصیف ظاهر دکمه، عملکرد آن را توصیف کنید. مثال: اگر دکمه‌ای برای ارسال فرم دارید: <input type=”image” src=”submit.png” alt=”ارسال فرم”> مثال دیگر: اگر دکمه‌ای برای جستجو دارید: <input type=”image” src=”search.png” alt=”جستجو”> از بهره‌گیری از عبارات کلی مانند “کلیک کنید” خودداری کنید. مستقیماً به عملکرد دکمه اشاره کنید.

10. بهره‌گیری از نقطه در انتهای تگ Alt (در صورت لزوم)

در برخی موارد، افزودن یک نقطه به انتهای تگ Alt می‌تواند به خوانایی آن توسط Screen Readers کمک کند. این کار باعث می‌شود که Screen Reader مکث کوتاهی در انتهای جمله داشته باشد. این کار مخصوصا برای تگ‌های Alt طولانی‌تر و پیچیده‌تر توصیه می‌شود. با این حال، بهره‌گیری از نقطه در انتهای تگ Alt اجباری نیست و بستگی به سبک نگارش شما دارد. اگر تگ Alt شما یک جمله کامل است، بهتر است از نقطه استفاده کنید. مثال: <img src=”sunset.jpg” alt=”غروب آفتاب در ساحل. “>

11. تست تگ Alt با ابزارهای سئو

ابزارهای سئو زیادی وجود دارند که می‌توانند به شما در بهینه‌سازی تگ Alt تصاویر کمک کنند. این ابزارها معمولاً مشکلات مربوط به تگ Alt را شناسایی می‌کنند و راهکارهایی برای بهبود آنها ارائه می‌دهند. برخی از این ابزارها عبارتند از: Screaming Frog، سایت سمروش، Ahrefs و Moz. این ابزارها معمولاً گزارش‌هایی در مورد تصاویر بدون تگ Alt، تگ‌های Alt تکراری و تگ‌های Alt طولانی ارائه می‌دهند. در ضمن، این ابزارها می‌توانند به شما در پیدا کردن کلمات کلیدی مرتبط برای استفاده در تگ Alt کمک کنند. به طور مرتب وبسایت خود را با این ابزارها بررسی کنید تا از بهینه‌سازی مداوم تگ Alt تصاویر مطمئن شوید.

12. اجتناب از تکرار کلمات کلیدی

در حالی که بهره‌گیری از کلمات کلیدی مرتبط در تگ Alt مهم است، از تکرار بیش از حد آنها خودداری کنید. این کار نه تنها به سئو سایت شما کمکی نمی‌کند، بلکه ممکن است منجر به جریمه شدن سایت شما توسط گوگل شود. به جای تکرار کلمات کلیدی، از مترادف‌ها و عبارات مرتبط استفاده کنید. تگ Alt باید به طور طبیعی نوشته شود و نباید شبیه یک لیست کلمات کلیدی باشد. مثال بد: <img src=”red-shoes.jpg” alt=”کفش قرمز کفش قرمز زنانه کفش قرمز جدید”> مثال خوب: <img src=”red-shoes.jpg” alt=”کفش زنانه قرمز رنگ جدید”> بهترین رویکرد این است که تمرکز خود را بر توصیف دقیق و مختصر تصویر بگذارید و کلمات کلیدی را به طور طبیعی در این توصیف بگنجانید.

13. عدم بهره‌گیری از کاراکترهای خاص

تا حد امکان از بهره‌گیری از کاراکترهای خاص مانند علامت تعجب (!)، علامت سوال (؟) و علامت‌های ریاضی در تگ Alt خودداری کنید. این کاراکترها ممکن است توسط Screen Readers به درستی خوانده نشوند. به جای بهره‌گیری از کاراکترهای خاص، از کلمات برای بیان منظور خود استفاده کنید. مثال: به جای <img src=”sale.jpg” alt=”تخفیف باورنکردنی!”>، از <img src=”sale.jpg” alt=”تخفیف باورنکردنی”> استفاده کنید. در ضمن، از بهره‌گیری از ایموجی‌ها در تگ Alt خودداری کنید، زیرا ممکن است توسط برخی از Screen Readers پشتیبانی نشوند. بهترین راه حل این است که از یک زبان ساده و واضح برای توصیف تصاویر خود استفاده کنید.

14. بررسی تصاویر لینک‌دار

اگر تصویری لینک‌دار دارید، تگ Alt باید مقصد لینک را توصیف کند. به عبارت دیگر، تگ Alt باید به کاربر بگوید که با کلیک روی تصویر به کجا هدایت می‌شود. به جای توصیف خود تصویر، مقصد لینک را توصیف کنید. مثال: اگر تصویری به صفحه “تماس با ما” لینک شده است: <a href=”contact.html”><img src=”contact-button.png” alt=”تماس با ما”></a> در این مثال، تگ Alt به کاربر اطلاع می‌دهد که با کلیک روی تصویر به صفحه “تماس با ما” هدایت می‌شود. اگر تصویر به یک صفحه محصول لینک شده است، تگ Alt باید نام محصول را ذکر کند. تگ Alt باید به کاربر کمک کند تا قبل از کلیک روی تصویر، بداند که به کجا می‌رود.

15. سازگاری تگ Alt با متن اطراف تصویر

تگ Alt باید با متن اطراف تصویر همخوانی داشته باشد و مکمل آن باشد.به عبارت دیگر، تگ Alt و متن اطراف تصویر باید با هم یک پیام منسجم را به کاربر منتقل کنند.تگ Alt نباید اطلاعاتی را تکرار کند که قبلاً در متن اطراف تصویر ذکر شده است.در عوض، باید اطلاعات جدیدی را اضافه کند یا اطلاعات موجود را تکمیل کند.مثال: اگر در متن اطراف تصویر نوشته شده است “این تصویر یک گربه ملوس را نشان می‌دهد”، تگ Alt نباید دوباره بنویسد “گربه ملوس”.در عوض، می‌تواند اطلاعات بیشتری در مورد گربه ارائه دهد، مانند “گربه پرشین سفید با چشمان آبی”.

تگ Alt و متن اطراف تصویر باید با هم کار کنند تا بهترین تجربه کاربری را ارائه دهند.

در واقع، در نظر بگیرید که اگر تصویر بارگذاری نشود، کاربر از طریق متن اطراف تصویر و تگ Alt بتواند مفهوم صفحه را متوجه شود.

16. به روز رسانی مداوم تگ Alt

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