متن جایگزین تصویر (alternative text) یکی از مجموعه فنونی است که به لحاظ کلامی به نام های (alt attributes)، و (alt descriptions) شناخته شده، اما به لحاظ فنی، به عنوان (alt tags) معرفی می شود. لازم به ذکر است که از این مفهوم در کد (HTML) و برای توصیف ظاهر و عملکرد تصویر در یک صفحه استفاده خواهد شد.
متن جایگزین عکس چه استفاده هایی دارد؟
متن جایگزین را به عکس هایی اضافه نماید که به عنوان اولویت اصلی در دسترسی به وب در نظر گرفته شده اند. بسیاری از کاربران وب و خوانندگان صفحه نمایش (صفحه خوان ها) از (alt attribute) برای درک بهتر یک تصویر روی صفحه استفاده می نمایند.
2. اگر بارگذاری یک فایل تصویری امکان پذیر نباشد، (alt tags) به جای یک تصویر نمایش داده خواهند شد.
3. (alt tags) تصویر زمینه / توصیف بهتری را به خزنده موتور جستجو فراهم آورده و به آن ها کمک می کند تا یک تصویر را به درستی نمایش دهند.
به تصویر سمت چپ توجه کنید. متون برجسته می توانند تمام متن های جایگزین را نشان دهد.
قسمت های های لایت شده در کد نشان دهنده خاصیت alt برای تصویر سمت راست می باشد
نمونه کد :
<img src="pupdanceparty.gif" alt="Puppies dancing">
فرمت بهینه و مطلوب :
بهترین فرمت برای متن جایگزین تصویر و یا همان (alt text) کاملا توصیفی است، اما هیچ تلاشی برای اسفاده از کلمات کلیدی به صورت اسپم انجام ندهید . اگر شما بتوانید چشمان خود را ببندید و شخصی متن جایگزین را برای شما بخواند و تصور دقیقی از تصویر در ذهن شما تداعی شود، شما در مسیر درستی قرار دارید.
بیایید به چند نمونه از (alt text) که برای تصویر پنکیک زغال اخته ارائه شده است، نگاهی بیندازیم:
کد خوب و مناسب:
<img src="pancakes.png" alt="pancakes">
می توان گفت که این متن جایگزین تنها "خوب" است، زیرا چندان توصیفی نبوده و از این ویژگی تا حدودی به دور است. بله، این یک تصویر از پنکیک زغال اخته است. اما می توان از نوشته های بیشتری برای توصیف آن استفاده نمود.
کد بهتر و مناسب تر:
<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
این کد دستوری برای متن جایگزین بهتر است، زیرا توصیفی دقیق تری از آنچه در تصویر است، ارائه می دهد. این تصویر تنها ستونی از "پنکیک" نیست (همان طور که در اولین مثال از متن جایگزین نشان داده شده است)؛ این یک پنکیک زغال اخته با گرد و غباری از پودر شکر است!
استفاده از این کد توصیه نمی شود:
<img src="pancakes.png" alt="">
و یا :
<img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">
هیچ کدام از این نمونه ها توصیه نمی شود. در واقع، اولین کد هیچ الگویی از متن را ندارد (توجه داشته باشید نقل قول کاملا خالی است)، و این در حالی است که مثال دوم نشانگر کلمات کلیدی در متن جایگزین است.
چرا متن جایگزین (alt text) حائز اهمیت است؟
1 - قابلیت دسترسی
متن جایگزین به عنوان یک اصول کلی از طراحی و قابلیت دسترسی به وب در نظر گرفته شده است. هدف اصلی (و هنوز هم اولیه) این است که تصاویر را برای بازدیدکنندگانی که نمیتوانند آن ها را ببینند، توصیف نماید. این امر شامل کاربران وب و یا مرورگرهایی است که تصاویر را مسدود می کنند. از طرفی دیگر، آن دسته از کاربرانی که دارای نقص دید و یا در غیر اینصورت قادر به تصویر بصری نیستند، نیز در این گروه قرار خواهند گرفت. ادغام متن جایگزین و تصاویر شما تضمین می کند که تمام کاربران، بدون در نظر گرفتن توانایی های بصری، می توانند محتوای سایت خود را درک نمایند.
2 - چگونگی استفاده از تصاویر بر اساس سئو
در راستای استفاده از متن جایگزین در تصاویر شرایط لازم برای یک تجربه کاربری بهتر ایجاد خواهد شد، اما این موضوع ممکن است به شما کمک کند تا مزایای صریح و ضمنی سئو را کسب نمایید. اجرای عنوان تصویر (image title) و نام گذاری فایل ها (file naming) یکی از بهترین شیوه هایی است که می تواند در کنار متن جایگزین قرار گرفته و به سئو کمک نماید.
در طول سال های اخیر، فناوری تشخیص تصاویر موتور به طور چشمگیری پیشرفت کرده است، و این در حالی است که خزنده های جستجو هنوز هم نمی توانند تصاویر را بر روی یک صفحه وب مانند آنچه ما می توانیم مشاهده کنیم، مشاهده نمایند. بنابراین، چندان غاقلانه نیست که تنها تفسیری از آن را در اختیار مخاطب قرار دهیم. اگر آن ها درک نکرده و یا مفهوم را اشتباه متوجه شوند، ممکن است شما آن را به عنوان کلیدواژه های ناخواسته رتبه بندی نموده و یا به طور کلی آن را از رتبه بندی حذف نمایید.
در اینجا مثالی آورده شده است:
گوگل ممکن است تصویر زیر را ببیند و بتواند رمزگشایی نماید که این یک مرد با کراوات و عینک است که بر روی صندلی خود قرار دارد.
جیم هالپرت از دفتر (نسخه ایالات متحده)
اگر شما برای رتبه دادن به " جیم هالپت از دوایت شروت" در تلاش هستید، لازم است که به موتور جستجو کمک نمایید.
به این معنا، متن جایگزین شما فرصتی دیگر برای ارائه کلمات کلیدی مورد نظر را ارائه خواهد نمود. با استفاده از کلمات کلیدی در صفحه (به عنوان عامل رتبه بندی موتور جستجو)، ایجاد متن جایگزین می تواند هر دو تصویر را توصیف نموده و در صورت امکان، کلمه و یا عبارات کلیدی مورد نظر شما را در بر گیرد.
طریقه ی نوشتن یک متن جایگزین خوب و مناسب :
1. شما باید تصویر مورد نظر خود را تا جایی که امکان دارد، توصیف نمایید. متن جایگزین، برای اولین بار، به گونه ای طراحی خواهد شد که توضیحات متنی از تصاویر را برای کاربرانی که قادر به دیدن آن ها نیستند، ارائه نماید. اگر تصویر واقعا معنی / ارزش اصلی را ارائه نداده و تنها برای اهداف طراحی در نظر گرفته شود، بهتر از در css استفاده شود نه در html.
2. متن جایگزین را (نسبتا) کوتاه و مختصر بنویسید. اکثر نمایش دهنده صفحات بیشتر از حدود 125 کاراکتر را نمایش نمیدهند. پس بهتر است متن شما بیشتر از این تعداد نباشه.
3. تا حد ممکن، از کلمات کلیدی خود استفاده کنید. متن جایگزین فرصت دیگری را برای اضافه کردن کلمه کلیدی در یک صفحه فراهم آورده و به همین دلیل می تواند به موتور های جستجو بفهماند که صفحه شما حول چه عبارات جستجویی می باشدولی در صورتی که اولویت اول شما باید توصیف و ارائه زمینه برای تصویر باشد، و این در حالی است که قرار دادن کلید واژه ها در متون جایگزین خالی از لطف نبوده و می تواند کمک شایانی را برای ارائه تصویر بهتر فراهم نماید.
4. از پر کردن و استفاده ی بیش از حد نسبت به کلمات کلیدی پرهیز نماید. گوگل نمی تواند نقاط ضعف شما را در متن جایگزین پر نماید، اما اگر یک فرصت مناسب برای جمع آوری کلمات کلیدی مرتبط فراهم شود، استفاده از آن بی تاثیر نخواهد بود. بر نوشتن متون جایگزین توصیفی تمرکز بیشتری نموده و زمینه های لازم برای ارائه ی تصویر را فراهم آورید. در صورت امکان از کلید واژه های مورد نظر خود استفاده نموده و آن را در متن جایگزین قرار دهید.
5. هرگز از تصاویر به عنوان متن استفاده نکنید. استفاده از این شیوه چندان مناسب نبوده و نمی تواند بهترین روش برای توسعه وب در سئو فراهم نماید. از آنجاییکه موتورهای جستجو نمی توانند متن موجود در تصاویر را بخوانند، استفاده از تصاویر به جای کلمات کار مناسبی نیست . در صورت انجام این کار، توضیح دهید که عکس شما بیانگر چه چیزی را در متن جایگزین است.
6. هرگز از کلماتی مانند تصویری از... (image of) و یا (picture of) در متن جایگزین خود استفاده نکنید. کاملا مشخص است که متن جایگزین شما به یک تصویر اشاره دارد، بنابراین نیازی به مشخص کردن آن نیست.
7. استفاده از (longdesc =) را فراموش نکنید. با استفاده از برچسب (longdesc =) برای تصاویر پیچیده تر که نیاز به توضیحات طولانی دارند، میتوانید توضیحات کامل تر ارایه کنید.
8. هرگز دکمه های فرم را نادیده نگیرید. اگر یک فرم در وب سایت شما از یک تصویر به عنوان دکمه "ارسال" استفاده نماید، اضافه کردن (alt attribute) ضروری خواهد بود. دکمه های تصویر باید از (alt attribute) برخوردار باشند. در واقع، (alt attribute) می تواند عملکرد دکمه هایی مانند، "جستجو"، "اعمال"، "ثبت نام" و غیره را توصیف نماید.
متن جایگزین خوب چیست؟
بیایید نمونه هایی از متن جایگزین را به صورت عملی بررسی نماییم:
یک متن جایگزین خوب: <img src="bird.png" alt="خروس">
متن جایگزین بهتر: <img src="bird.png" alt="بانگ زدن خروس">
بهترین متن جایگزین: <img src="bird.png" alt="خروسی که سر قرمز دارد در حال بانگ زدن است">
یک متن جایگزین خوب: <img src="escalator.jpg" alt="مرد در پله برقی">
متن جایگزین بهتر: <img src="escalator.jpg" alt="مردی که در پله برقی راه میرود">
بهترین متن جایگزین: <img src="escalator.jpg" alt="مردی که کوله پشتی مشکی دارد بر روی پله برقی حرکت میکند">
یک متن جایگزین خوب: <img src="kwe.png" alt="kw explorer">
متن جایگزین بهتر: <img src="kwe.png" alt="keyword research in Keyword Explorer">
بهترین متن جایگزین: <img src="kwe.png" alt="Moz Keyword Explorer tool for SEO keyword research">
مطالب مرتبط با این موضوع
دیدگاه خود را درباره این مطلب بنویسید: