تگ alt تصاویر وب‌سایت چیست؟
تگ alt تصاویر وب‌سایت چیست؟ » در این مقاله، متن جایگزین (Alt text) تصاویر در وب سایت را معرفی می کنیم و کاربردها و نحوه تعریف آن و تاثیر آن بر سئوی سایت را بیان می کنیم. دلایل اهمیت تعریف تگ alt را نیز بیان خواهیم کرد و در نهایت نمونه هایی کاربردی برای نحوه تعریف تگ alt تصاویر مختلف را خواهیم دید.

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

 Image alt text tutorial

متن جایگزین تصاویر در وب (تگ Alt)

 

تگ alt تصاویر و تاثیر آن بر سئوی سایت

 

متن جایگزین (Alt text) چیست؟

متن جایگزین یا Alternative Text که به عناوین "اتریبیوت alt" و یا "تگ alt" نیز معروف می باشد (که تگ alt یک اشتباه مصطلح است!) بیانگر توضیح کوتاهی از عملکرد و یا عنوان یک تصویر در یک صفحه وب می باشد.

 

کاربرد متن جایگزین تصاویر (تگalt ):

۱- اولین هدف و کاربرد تگ alt تصاویر، افزودن یک متن به تصاویر در وب سایت می باشد. با تعریف اتریبیوت alt به تگ <img> یکی از قوانین در دسترس بودن (Accessibility) وب سایت را اجرا کرده ایم. بعنوان مثال هنگامی که یک کاربر توسط دستگاه های صفحه‌خوان (Screen Reader) یک صفحه وب را مورد پیمایش قرار می دهد، این متن جایگزین برای تصاویر خوانده می شوند.

۲- در مواقعی که تصاویر به هر دلیلی لود نشوند (می تواند بدلیل کندی سرعت اینترنت باشد و یا مشکل داشتن آدرس تصویر و…)، تگ alt بجای تصاویر به کاربر نمایش داده خواهند شد.

۳- تگ alt تصاویر به خزنده های موتور جستجو کمک می کند تا مفهوم و توضیح تصاویر را راحتتر ایندکس کنند.

 

تگ alt تصاویر

 

در تصویر بالا، بخش زردرنگ سمت راست، بیانگر متن جایگزین (تگ alt) تصویر سمت چپ می باشد.

 

نمونه کد تگ alt :

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

 

فرمت بهینه (Optimal Format):

بهترین فرمت تعریف تگ alt بدین صورت است که به اندازه کافی توصیفی باشد اما حاوی کلمات کلیدی بیش از حد (Keyword Stuffing) و اسپم نباشد. اگر شما چشم هایتان را ببندید و یک نفر متن جایگزین را برای شما بخواند و سپس شما بتوانید تصویر را حدس بزنید، می توان گفت تگ alt مناسبی برای آن تصویر انتخاب کرده اید.

بعنوان مثال برای تصویر زیر داریم:

فرمت تعریف تگ alt

تگ alt اول:

<img src="pancakes.png" alt="pancakes">

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

 

تگ alt دوم:

<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">

تگ alt فوق تعریف بهتری دارد و تصویر را بهتر توصیف می کند و مانند تگ alt اول فقط دارای کلمه pancakes نمی باشد.

 

تگ alt سوم:

<img src="pancakes.png" alt="">

تعریف تگ alt بصورت فوق یعنی رشته خالی توصیه نمی شود.

 

تگ alt چهارم:

<img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">

در این تگ alt استفاده بیش از حد از کلمه کلیدی pancake را مشاهده می کنیم یعنی از keyword stuffing استفاده شده است که مسلما تعریف خوبی برای متن جایگزین تصویر پنکیک نمی باشد.

 

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

 

دلایل اهمیت تگ alt:

۱- در دسترس بودن (Accessibility):

متن جایگزین یا به اصطلاح عموم "تگ alt" یکی از اصول طراحی وب سایت دردسترس (Accessible Web Design) می باشد. هدف اصلی تگ alt توصیف تصاویر برای افراد و یا خزنده هایی است که قادر به مشاهده تصویر نمی باشند. همانطور که قبلا عرض کردیم، از کاربردهای تگ alt می توان به موارد زیر اشاره کرد:

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

 

۲- سئوی تصویر (Image SEO):

استفاده از تگ ALT برای تصاویر باعث بهبود تجربه کاربری (UX: User Experience) خواهد شد. همچنین تعریف تگ ALT می تواند باعث بهبود سئو به دو صورت صریح (Explicit) و ضمنی (Implicit) شود. علاوه بر تعریف اتریبیوت عنوان (Title Attribute) و نیز نام فایل فیزیکی تصویر، تعریف تگ alt می تواند در سئوی تصاویر یک وب سایت بسیار موثر باشد.

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

» مقاله آموزش مقدماتی سئوی سایت را مطالعه نمائید.

 

نحوه نوشتن تگ ALT خوب برای تصاویر:

 1- تصویر را بطور مشخص توصیف کنید: متن جایگزین یا تگ ALT برای ارائه توضیح نسبتا کوتاهی راجع به تصاویر می باشند. در صورتی که یک تصویر هیچ توضیح و مفهومی برای کسب و کار شما ندارد (مانند تصویر بک گراند) می توانید بجای تعریف این عکس در HTML ، آنرا در استایل های CSS خود تعریف کنید.

۲- تگ ALT را نسبتا کوتاه در نظر بگیرید: اکثر صفحه-خوان (Screen-Reader) های محبوب بازار تگ های alt طولانی تر از ۱۲۵ کاراکتر را cut می کنند. پس توصیه می شود تعداد کاراکترهای تگ alt را کمتر از ۱۲۵ در نظر بگیرید.

۳- از کلمات کلیدی خود استفاده کنید: امکان دیگری که تگ Alt برای شما مهیا می کند، تعریف کلمات کلیدی مورد هدف تان است. علاوه بر این، می توانید به خزنده های موتورهای جستجو اعلام کنید که صفحه وب سایت شما به رشته جستجوی خاصی (Search Query) مرتبط می باشد. با اینکه هدف اصلی تگ alt بیان توضیح کوتاهی درباره عکس می باشد، سعی کنید حداقل در یکی از تصاویر صفحه وب خود از کلمات کلیدی خود استفاده کنید.

۴- از Keyword Stuffing اجتناب کنید: اگرچه در صورت تعریف یک تگ alt ضعیف و غیراستاندارد، گوگل وب سایت شما را جریمه نخواهد کرد، اما در صورت استفاده بیش از حد از کلمات کلیدی (Keyword Stuffing) مسلما از طرف گوگل مورد جریمه قرار خواهید گرفت.

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

۶- از عبارات "تصویر …" یا "عکس …" در تگ alt استفاده نکنید: یا در صفحات انگلیسی وب سایت، از عبارات "Image of…" یا "picture of…" استفاده نکنید. زیرا مشخص است که تگ alt برای توصیف یک تصویر است و نیازی نیست عبارات مذکور را بیان کنید.

۷- از longdesc="" برای تعریف متون طولانی استفاده کنید: در مواردی که می خواهید تگ alt طولانی تری تعریف کنید، از تگ longdesc استفاده کنید.

۸- از دکمه های تصویری فرم غافل نشوید: در برخی از فرم ها ممکن است از Image Button برای ارسال فرم استفاده شود. پس باید برای تصویر اینگونه دکمه ها نیز تگ alt تعریف شود. مانند "ارسال" یا "ثبت نام" و…

 

یک تگ alt خوب به چه صورت می باشد؟

در این بخش، با دو مثال زیر، تگ alt مناسب را بصورت کاربردی توضیح می دهیم:

مثال ۱-

man wearing backpack walking down escalator

 

تگ alt خوب:

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

تگ alt بهتر:

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

تگ alt عالی:

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

 

مثال ۲-

Moz Keyword Explorer tool for SEO keyword research

 

تگ alt خوب:

<img src="kwe.png" alt="kw explorer">

تگ alt بهتر:

<img src="kwe.png" alt="keyword research in Keyword Explorer">

تگ alt عالی:

<img src="kwe.png" alt="Moz Keyword Explorer tool for SEO keyword research">

 

مطالعه بیشتر:

 

منبع: https://moz.com/learn/seo/alt-text 


برچسب‌ها:

اتریبیوت altتگ altتگ alt تصاویردرج alt تصاویرسئوی تصویرمتن altمتن alt عکسمتن جایگزینمتن جایگزین تصاویر


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هفت − پنج =