Alt عکس (متن جایگزین)، همچنین به عنوان «attributes alt»، «alt description» شناخته می شود و درون کد HTML برای توصیف ظاهر و عملکرد یک تصویر در یک صفحه استفاده می شود.

موارد استفاده از جایگزین متنی برای عکس ها

۱- اضافه کردن متن جایگزین به عکس، اولویت اصلی دسترسی به وب است. با توجه به اینکه کاربران با استفاده از خوانندگان ، ویژگی های alt را برای درک بهتر یک تصویر در صفحه می خوانند.

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

۳- تگ های Alt تصویر، توصیف بهتری را به خزنده موتور جستجو ارائه می دهد، و در واقع یک راه کمک به آنها برای نشان دادن یک تصویر به درستی می باشد.

نمونه کد

<img src=”pupdanceparty.gif” alt=”Puppies dancing”>

 

طراحی سایت-Alt تصاویر

بهترین و مطلوب ترین فرمت

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

یک مثال برای alt تصویر زیر:

خوب: <img src = “pancakes.png” alt = “pancakes”>
این متن alt فقط “خوب” است، زیرا بسیار توصیفی نیست. نیاز به توضیح بیشتر وجود دارد.
اما بهتر است به فرم زیر نوشته شود:
<img src=”pancakes.png” alt=”Stack of blueberry pancakes with powdered sugar”>
این متن alt جایگزین بهتری است، زیرا توصیفی دقیق تر از آنچه در تصویر است، نشان می دهد.
ممواردی که توصیه نمیشود:
<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 است.

 

طراحی سایت-Alt تصاویر

دلایل اهمیت ( alt تصویر )

۱- قابلیت دسترسی:

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

۲- SEO تصویر

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

 

طراحی سایت-Alt تصاویر

چطور متن alt خوبی بنویسیم؟

۱- تصویر را به طور خاص مشخص کنید

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

۲- متن جایگزین را خلاصه کنید.

خوانندگان صفحه نمایش محبوب ترین متن را در حدود ۱۲۵ کاراکتر قطع می کنند، بنابراین توصیه می شود آن را به تعداد کاراکتر کمتری نگه دارید.

۳- از از کلمات کلیدی استفاده کنید.

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

۴- از تصاویر به عنوان متن استفاده نکنید.

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

۵- برچسب longdesc را فراموش نکنید.

با استفاده از برچسب longdesc=”” برای تصاویر پیچیده تر که نیاز به توضیحات طولانی دارند، استفاده کنید.

۶- دکمه های فرم را نادیده نگیرید.

اگر یک فرم در وب سایت شما از یک تصویر به عنوان دکمه “ارسال” استفاده کند، به آن ویژگی alt را بدهید. دکمه های تصویر باید ویژگی alt داشته باشند که عملکرد دکمه مانند، “جستجو”، “اعمال کن”، “ثبت نام” و غیره را توصیف کند.

یک متن جایگزین خوب چگونه است؟

 

طراحی سایت-Alt تصاویر

 

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

<img src=”bird.png” alt=”Rooster”>

متن جایگزین بهتر

<img src=”bird.png” alt=”Rooster crowing”>

متن جایگزین عالی

<img src=”bird.png” alt=”Red-crested rooster crowing”>

 

طراحی سایت-Alt تصاویر

 

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

<img src=”escalator.jpg” alt=”man on escalator”>

متن جایگزین بهتر

<img src=”escalator.jpg” alt=”man walking on escalator”>

متن جایگزین عالی

<img src=”escalator.jpg” alt=”man wearing backpack walking down escalator”>

 

طراحی سایت-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”>

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