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

در این مقاله، ۱۵ راهکار کلیدی برای نوشتن متن جایگزین موثر و بهینه را بررسی می‌کنیم:

• ✔️

  ۱. مختصر و مفید باشید:

  متن جایگزین باید کوتاه و دقیق باشد. معمولاً بین ۵ تا ۱۵ کلمه کافی است.
• ✔️

  ۲. تصویر را به طور دقیق توصیف کنید:

  متن باید محتوای اصلی تصویر را به خوبی منعکس کند.
• ✔️

  ۳. از کلمات کلیدی مرتبط استفاده کنید:

  اگر کلمه کلیدی خاصی با تصویر مرتبط است، آن را به طور طبیعی در متن جایگزین بگنجانید.
• ✔️

  ۴. از کلمات اضافی خودداری کنید:

  نیازی به بهره‌گیری از عباراتی مانند “عکس از”، “تصویر از” یا “لوگو” نیست.
• ✔️

  ۵. به زمینه توجه کنید:

  متن جایگزین باید با محتوای اطراف تصویر مرتبط باشد.
• ✔️

  ۶. برای تصاویر تزئینی، از متن جایگزین خالی استفاده کنید:

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

  ۹. برای دکمه‌های تصویری، هدف دکمه را توضیح دهید:

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

  ۱۱. از زبان محاوره خودداری کنید:

  متن جایگزین باید حرفه‌ای و رسمی باشد.
• ✔️

  ۱۲. برای تصاویر پیچیده، توضیحات مفصل‌تری در نظر بگیرید:

  در صورت نیاز، از یک توضیح طولانی‌تر در قسمت longdesc استفاده کنید (هرچند بهره‌گیری از آن در حال منسوخ شدن است و بهتر است توضیحات را در متن اصلی صفحه قرار دهید).
• ✔️

  ۱۳. تست کنید:

  از ابزارهای صفحه خوان (Screen Reader) برای اطمینان از قابل فهم بودن متن جایگزین استفاده کنید.
• ✔️

  ۱۴. یکنواخت باشید:

  در تمام تصاویر سایت، از یک رویکرد یکسان در نوشتن متن جایگزین استفاده کنید.
• ✔️

  ۱۵. به‌روزرسانی کنید:

  اگر محتوای تصویر تغییر کرد، متن جایگزین را نیز به‌روزرسانی کنید.

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

15 راهکار برای نوشتن متن جایگزین (Alt Text) مناسب برای تصاویر در وبسایت

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

به جای نوشتن “تصویر”، مستقیماً به موضوع اصلی تصویر بپردازید. مثلا به جای “تصویر سگ”، بنویسید “سگ قهوه ای در حال بازی در پارک”. از کلمات کلیدی مرتبط با محتوای صفحه استفاده کنید، اما از زیاده روی و پر کردن کلمات کلیدی خودداری کنید. متن جایگزین را در یک جمله کوتاه و واضح بیان کنید. به مخاطب هدف و هدف تصویر در صفحه توجه داشته باشید. اگر تصویر جنبه تزئینی دارد (و اطلاعات مفیدی ارائه نمی‌دهد)، متن جایگزین را خالی بگذارید (alt=””) تا screen reader آن را نادیده بگیرد. از بهره‌گیری از عبارت هایی مانند “تصویر از”، “عکس از” یا “لوگو” خودداری کنید. screen reader ها معمولاً این کلمات را به صورت خودکار اضافه می کنند.

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

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

3. توجه به زمینه صفحه

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

4. توصیف تصاویر پیچیده

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

5. متن جایگزین برای تصاویر تزئینی

تصاویر تزئینی، تصاویری هستند که هدف آنها صرفاً زیبایی بخشیدن به صفحه است و هیچ اطلاعات مفیدی ارائه نمی دهند. برای این نوع تصاویر، متن جایگزین را خالی بگذارید: alt="". این کار به screen reader ها می گوید که تصویر را نادیده بگیرند و از سردرگمی کاربر جلوگیری می کند. بهره‌گیری از متن جایگزین غیر ضروری برای تصاویر تزئینی می‌تواند تجربه کاربری را بدتر کند. از تکرار محتوای صفحه در متن جایگزین تصاویر تزئینی خودداری کنید. اگر مطمئن نیستید که تصویر تزئینی است یا نه، بهتر است یک متن جایگزین کوتاه و توصیفی برای آن بنویسید. بهره‌گیری از CSS برای نمایش تصاویر تزئینی (به جای بهره‌گیری از تگ <img>) راه حل بهتری است.

6. بهره‌گیری از علائم نگارشی

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

7. توصیف دکمه های تصویری

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

8. محدودیت طول متن جایگزین

اگرچه محدودیتی برای طول متن جایگزین وجود ندارد، اما بهتر است متن را تا حد امکان کوتاه و مختصر نگه دارید. معمولاً توصیه می شود که طول متن جایگزین از 125 کاراکتر تجاوز نکند. screen reader ها ممکن است متن جایگزین طولانی را به طور کامل نخوانند یا آن را به درستی تلفظ نکنند. بر روی مهمترین اطلاعات تمرکز کنید و از بیان جزئیات غیر ضروری خودداری کنید. اگر نیاز به توصیف تصویر به طور کامل دارید، می‌توانید از یک کپشن در زیر تصویر استفاده کنید. متن جایگزین را به گونه ای بنویسید که خواندن آن آسان باشد و به سرعت قابل درک باشد. اگر متن جایگزین شما طولانی تر از حد مجاز است، سعی کنید آن را به دو یا چند جمله کوتاه تقسیم کنید. از ابزارهای آنلاین برای بررسی طول متن جایگزین استفاده کنید.

9. بهره‌گیری از ابزارهای بررسی دسترسی پذیری

برخی از این ابزارها عبارتند از: WAVE، Axe، و گوگل Lighthouse. از این ابزارها به طور منظم برای بررسی وبسایت خود استفاده کنید و مشکلات مربوط به دسترسی پذیری را در اسرع وقت رفع کنید. علاوه بر ابزارهای خودکار، از آزمایش دستی با screen reader ها نیز استفاده کنید. گزارش های ارائه شده توسط این ابزارها را به دقت بررسی کنید و پیشنهادات آنها را در نظر بگیرید.

10. تست با Screen Readers

بهترین راه برای اطمینان از اینکه متن جایگزین شما مناسب است، آزمایش آن با یک screen reader است. با بهره‌گیری از یک screen reader، می‌توانید تجربه کاربرانی که از این فناوری استفاده می کنند را شبیه سازی کنید و مشکلات احتمالی را شناسایی کنید. برخی از screen reader های محبوب عبارتند از: NVDA (رایگان)، JAWS (تجاری) و VoiceOver (موجود در macOS و iOS). متن جایگزین را در صفحه ای که تصویر در آن قرار دارد، آزمایش کنید. به لحن و تلفظ screen reader توجه کنید. در صورت لزوم، متن جایگزین را بر اساس نتایج آزمایش تغییر دهید. از کاربران دارای معلولیت بخواهید که وبسایت شما را آزمایش کنند و نظرات خود را ارائه دهند.

11. متن جایگزین برای لوگوها

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

12. متن جایگزین برای تصاویر در لینک ها

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

13. پرهیز از کلیشه ها

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

14. بهره‌گیری از متن جایگزین به عنوان بخشی از استراتژی سئو

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

15. سازگاری متن جایگزین با زبان صفحه

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