مهم (تخفیف درصد بالا): جهت حمایت از کاربران و کسب و کارهای آسیب دیده تا پایان امشب 50 و 90 درصد تخفیف فعال شد... جزئیات

متن جایگزین تصویر؛ راهنمای نوشتن و تأثیر آن بر رتبه سایت


متن جایگزین تصویر؛ راهنمای نوشتن و تأثیر آن بر رتبه سایت

متن جایگزین تصویر؛ راهنمای نوشتن و تأثیر آن بر رتبه سایت

امروزه تقریباً ۱۹٪ از نتایج جستجوی گوگل (SERPs) شامل تصاویر میشن. این یعنی حتی اگر تمام اصول بهینه‌سازی موتورهای جستجو را در سایت رعایت کرده باشی، ممکن است منبع مهمی از ترافیک ارگانیک را نادیده گرفته باشی: سئوی تصاویر.

چطور میشه از این منبع ترافیک استفاده کرد؟ با استفاده از متن جایگزین تصویر (Image Alt Text).
توی این مطلب یاد میگیریم چطور متن alt بنویسیم تا تصاویرمون توی موتورهای جستجو رتبه بگیرن و ترافیک بیشتری جذب کنیم.

متن alt چیست؟

متن alt که با اسم تگ alt یا توضیح alt هم شناخته میشه، یه متن نوشتاریه که اگه تصویر توی یه صفحه وب به هر دلیلی بارگذاری نشه، به جای اون تصویر نمایش داده میشه.
این متن به ابزارهای صفحه خوان (Screen Readers) کمک میکنه تا تصاویر رو برای کاربران نابینا یا کم بینا توصیف کنن و همچنین باعث میشه موتورهای جستجو بتونن سایت شما رو بهتر بخزن (Crawl) و رتبه بندی کنن.

چه سئوی سایتتون رو خودتون انجام بدین چه نه، بهینه سازی alt text تصاویر سایت یه راه عالی برای بهبود تجربه کاربری بازدیدکننده هاست، فارغ از اینکه از کجا وارد سایت شما شدن.

چرا متن alt تصویر اهمیت داره؟

متن alt تصویر به سه دلیل اهمیت زیادی داره: دسترسی‌پذیری (Accessibility)، تجربه کاربری (User Experience) و ترافیک حاصل از جستجوی تصاویر.

Image Alt Text

اگه این دلایل رو بدونی، راحت تر میتونی برای همه تصاویرت یه متن alt موثر بنویسی.

دسترسی‌پذیری (Accessibility)

سال ۱۹۹۹، کنسرسیوم W3C دستورالعمل های Web Content Accessibility Guidelines 1.0 رو منتشر کرد تا توضیح بده چطور میشه محتوای وب رو برای کاربران دارای معلولیت قابل دسترس تر کرد. یکی از این دستورالعمل ها این بود: “برای محتوای صوتی و تصویری جایگزین های معادل ارائه بدید.
یعنی هر صفحه وبی که شامل تصویر یا فیلم، صدا، اپلت و غیره هست، باید اطلاعات معادلی برای اون محتوای بصری یا شنیداری ارائه بده.

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

مثلا فرض کنید یه صفحه وب شامل تصویری از یه فلش رو به بالا هست که به فهرست مطالب لینک شده. متن جایگزین مناسب برای اون تصویر میتونه باشه: “رفتن به فهرست مطالب”.
این باعث میشه کسی که از صفحه خوان یا هر تکنولوژی کمکی دیگه استفاده میکنه، بدون اینکه تصویر رو ببینه، بفهمه هدف اون تصویر چیه.

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

تجربه کاربری (User Experience)

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

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

ترافیک از طریق تصاویر (Image Traffic)

یکی دیگه از کارهای مهمی که متن alt براتون انجام میده اینه که باعث میشه تصاویرتون توی نتایج جستجو ظاهر بشن چه توی Google Images، چه توی بخش image packs.
image packs نتایج خاصی هستن که به صورت یه ردیف افقی از لینک های تصویری نمایش داده میشن و میتونن توی هر جایگاه ارگانیکی ظاهر بشن (حتی جایگاه شماره ۱ توی صفحه نتایج، مثل مثالی که اول مطلب دیدیم).

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

از سال ۲۰۱۸، تیم بلاگ HubSpot یه استراتژی سئوی جدید رو پیاده کرد که بخشی از اون تمرکز بیشتری روی بهینه سازی متن alt تصاویر داشت.
این کار باعث شد ترافیک تصاویر بلاگ در کمتر از یک سال، ۷۷۹٪ افزایش پیدا کنه و نتیجه اش ۱۶۰,۰۰۰ بازدید ارگانیک بیشتر بود.

چطور به تصاویرمون alt text اضافه کنید

توی بیشتر سیستم های مدیریت محتوا (CMS)، وقتی روی یه تصویر توی محتوای پست کلیک میکنید، یه ماژول برای بهینه سازی تصویر یا ویرایش متن ظاهر میشه که میتونید از اونجا متن alt رو وارد یا ویرایش کنید.

بیا با هم مراحل انجام این کار توی Content Hub و WordPress رو بررسی کنیم.

چطور توی HubSpot CMS متن alt اضافه کنیم

توی HubSpot، وقتی روی یه تصویر کلیک کنید و بعد روی آیکون ویرایش (که شبیه مداد هست) بزنید، یه پنجره پاپ آپ برای بهینه سازی تصویر باز میشه.

اینم نمایی از پنجره بهینه سازی تصویر توی Content Hub داخل پنل HubSpot شما هست:
(اینجا تصویری وجود داره که در صورت نیاز میتونم توضیحش رو هم به صورت متنی اضافه کنم.)

Image Alt Text

بعد از اینکه متن alt رو وارد کردید، اون به صورت خودکار داخل کد HTML صفحه نوشته میشه.
اگه سیستم مدیریت محتوای شما (CMS) پنجره ساده ای برای ویرایش متن alt نداره، میتونید از همین بخش کد منبع (Source Code) تصویر رو ویرایش کنید.

Image Alt Text

اینجا یه نمونه از تگ alt توی کد منبع یه مقاله رو میبینید:

چطور توی سیستم مدیریت محتوای WordPress متن alt اضافه کنیم

توی WordPress، وقتی روی یه تصویر کلیک کنید، به طور خودکار تب “Block” در سایدبار باز میشه.
توی بخش “Image Settings”، میتونید متن alt رو توی فیلد خالی وارد کنید.

Image Alt Text

وقتی که آماده بودید، روی دکمه “Update” از نوار ابزار بالای صفحه کلیک کنید.

مهم ترین قاعده برای متن alt؟

توصیفی و خاص بودن.

اما توجه داشته باشید که این قاعده زمانی ارزش خودش رو از دست میده که متن alt، بستر (context) تصویر رو هم در نظر نگیره.

Image Alt Text

متن alt ممکنه به سه روش مختلف اشتباه باشه. به مثال های زیر توجه کنید.

۳ مثال از متن alt تصویر (خوب و بد)

در ادامه قصد داریم تا به بررسی 3 مثال از متن alt تصویر بپردازیم:

۱. کلمه کلیدی در مقابل جزئیات

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

Image Alt Text

متن Alt بد

چه اشتباهی در این خط متن alt وجود داره؟

alt=”HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it”

بیش از حد اشاره به HubSpot شده.

استفاده از متن alt برای پر کردن کلمات کلیدی داخل جملات پراکنده باعث میشه که متن به تصویر زیاد مربوط نباشه و محتوای کافی نداشته باشه. این کلمات کلیدی ممکنه برای ناشر مهم باشن، اما برای ربات های وب مهم نیستن.

در واقع، متن alt بالا باعث میشه گوگل نتونه بفهمه تصویر چطور با باقی صفحه یا مقاله ای که توش منتشر شده ارتباط داره و این مانع میشه که تصویر برای کلمات کلیدی بلند (longtail keywords) مرتبط که علاقه بیشتری پشتشونه، رتبه بگیره.

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

متن Alt خوب

با در نظر گرفتن متن alt بد بالا، متن alt بهتری برای این تصویر میتونه باشه:

alt=”Orange mural that says ‘ship it’ on a wall at HubSpot’s Singapore office”

۲. جزئیات در مقابل دقت

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

Image Alt Text

متن Alt بد

alt=”Baseball player hitting a ball at a baseball field”

این خط متن alt به طور فنی اولین قاعده متن alt رو رعایت میکنه توصیفی باشه اما به روش درست توصیف نمیکنه.
بله، تصویر بالا یه زمین بیسبال و یه بازیکن که توپ رو میزنن رو نشون میده اما این تصویر همچنین ممکنه مربوط به پارک فنوی (Fenway Park) باشه و David Ortiz از تیم Boston Red Sox که داره یه توپ رو به سمت راست میدان می‌زند. این جزئیات مهمیه که گوگل برای ایندکس درست تصویر به اون نیاز داره، مثلا اگه این تصویر توی یه پست بلاگ در مورد ورزش های بوستون باشه.

متن Alt خوب

با در نظر گرفتن متن alt بد بالا، متن alt بهتری برای این تصویر میتونه باشه:

alt=”David Ortiz of the Boston Red Sox batting from home plate at Fenway Park”

۳. دقت در مقابل بستر (Context)

دقت به صحت و درستی عددی یا واقعی اطلاعات اشاره دارد، در حالی که بستر (Context) به شرایط، محیط یا چارچوبی که اطلاعات در آن معنا پیدا میکند، مربوط است.

Image Alt Text

هر دو تصویر بالا دارای بستر واضحی هستند که می‌تواند به نوشتن متن alt خوب کمک کند یکی از دفتر های HubSpot است و دیگری از پارک فنوی اما اگر تصویر شما بستر رسمی نداشته باشد (مثل نام مکانی) که بتوانید از آن برای توصیف تصویر استفاده کنید، چه کار باید کرد؟

در این مواقع باید از موضوع مقاله یا صفحه وبی که تصویر رو در اون منتشر می‌کنید استفاده کنید. در اینجا چند مثال از متن alt بد و خوب بر اساس دلیل انتشار تصویر آورده شده است:

برای مقاله‌ای در مورد تحصیل در مدرسه کسب‌وکار

متن alt بد

alt=”Woman pointing to a person’s computer screen”
این متن alt به طور معمول به عنوان یک متن alt مناسب شناخته میشه، اما با توجه به هدف ما از انتشار این تصویر همراه با مقاله‌ای درباره رفتن به مدرسه کسب‌وکار، از کلمات کلیدی مهمی استفاده نکردیم که می‌توانند به گوگل کمک کنند تا تصویر رو به بخش‌های خاص مقاله ربط بدهند.

متن alt خوب

با در نظر گرفتن متن alt بد بالا، متن alt بهتری برای این تصویر می‌تواند باشد:
alt=”Business school professor pointing to a student’s computer screen”

برای صفحه‌ای در مورد نرم‌افزار آموزشی برای معلمان مدارس کسب‌وکار

متن alt بد

alt=”Teacher pointing to a student’s computer screen”
این متن alt تقریبا به اندازه متن alt خوب از مثال قبلی توصیفی و خاص است، پس چرا برای صفحه‌ای در مورد نرم‌افزار آموزشی کافی نیست؟ این مثال به موضوع مدرسه کسب‌وکار وارد می‌شود و مشخص می‌کند که مخاطب ایده‌آل این صفحه، معلمان هستند. بنابراین، متن alt تصویر باید این نکته رو منعکس کنه.

متن alt خوب

با در نظر گرفتن متن alt بد بالا، متن alt بهتری برای این تصویر می‌تواند باشد:
alt=”Professor using education software to instruct a business school student”

بهترین شیوه‌های نوشتن متن Alt برای تصاویر

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

  • تصویر را توصیف کنید و خاص باشید. از هم موضوع تصویر و هم بستر آن برای راهنمایی استفاده کنید.
  • بستر مرتبط با موضوع صفحه را اضافه کنید. اگر تصویر شامل مکان یا فرد شناخته شده‌ای نیست، بستر را بر اساس محتوای صفحه اضافه کنید. برای مثال، متن alt برای تصویر استوک از فردی که روی کامپیوتر تایپ می‌کند می‌تواند “زنی که در حال بهینه‌سازی سایت وردپرس برای سئو است” یا “زنی که در حال تحقیق در مورد پلتفرم‌های بلاگ رایگان است” باشد، بسته به موضوع صفحه.
  • متن alt خود را کمتر از ۱۲۵ کاراکتر نگه دارید. ابزارهای صفحه‌خوان معمولاً وقتی متن alt به این طول می‌رسد، آن را قطع می‌کنند و از توصیف طولانی در لحظات ناخوشایند برای خواندن این متن برای افراد با مشکلات بینایی جلوگیری می‌کنند.
  • متن alt را با “تصویر از…” یا “عکس از…” شروع نکنید. مستقیماً به توصیف تصویر بروید. ابزارهای صفحه‌خوان (و گوگل به طور کلی) آن را به عنوان تصویر از کد منبع صفحه شناسایی می‌کنند.
  • از کلمات کلیدی خود استفاده کنید، اما به‌طور محدود. فقط کلمات کلیدی هدف مقاله خود را وارد کنید، اگر به‌طور طبیعی می‌توان آن‌ها را در متن alt گنجاند. در غیر این صورت، از کلمات کلیدی معنایی یا فقط مهم‌ترین کلمات در یک کلمه کلیدی بلند استفاده کنید. به عنوان مثال، اگر کلمه کلیدی اصلی مقاله شما “چطور سرنخ‌ها را تولید کنیم” باشد، می‌توانید از “تولید سرنخ” در متن alt خود استفاده کنید، چون “چطور” به‌طور طبیعی نمی‌تواند در متن alt قرار گیرد.
  • کلمات کلیدی خود را در هر تصویر از متن alt پر نکنید. اگر پست بلاگ شما شامل تصاویری از محتوای بدنه است، کلمه کلیدی خود را در حداقل یکی از این تصاویر قرار دهید. تصویری که فکر می‌کنید بیشتر نمایانگر موضوع شما است را انتخاب کنید و کلمه کلیدی را به آن اختصاص دهید. در تصاویر دیگر، توصیف‌های زیباشناختی بیشتری قرار دهید.
  • برای اشتباهات املایی بررسی کنید. کلمات اشتباه در متن alt می‌تواند تجربه کاربری را خراب کند یا ربات‌های موتور جستجو را گیج کند که سایت شما را خزیده‌اند. متن alt را مثل هر محتوای دیگه‌ای که در صفحه دارید، بررسی کنید.
  • برای هر تصویر، متن alt اضافه نکنید. باید برای بیشتر تصاویر روی صفحه وب متن alt اضافه کنید تا سئو، تجربه کاربری و دسترسی‌پذیری بهتر بشه اما استثنائاتی هم وجود داره. تصاویری که صرفاً دکوری هستند یا در متنی نزدیک توصیف می‌شوند، باید ویژگی alt خالی داشته باشند. برای توضیحات دقیق‌تر درباره اینکه چه زمانی باید متن alt اضافه کنید و چه زمانی نه، این درخت تصمیم را بررسی کنید.
Image Alt Text

خب در ادامه، میخوایم به تاثیر متن Alt روی سئو بپردازیم.

چطور متن Alt روی سئو تأثیر می‌گذارد

طبق گفته گوگل، متن alt همراه با الگوریتم‌ های بینایی کامپیوتری و محتوای صفحه برای درک موضوع تصاویر استفاده می‌شود.

بنابراین، متن alt به گوگل کمک می‌کند تا نه تنها موضوع تصاویر را درک کند، بلکه موضوع کل صفحه وب را نیز بفهمد. این می‌تواند شانس شما را برای ظاهر شدن تصاویر در نتایج جستجوی تصویری افزایش دهد.

با راه‌اندازی تجربه جستجوی تولیدی (Search Generative Experience – SGE) توسط گوگل، متن alt با کیفیت و بستر مناسب اطمینان می‌دهد که محتوای شما در ترکیب جدیدی از اطلاعات کلیدی به‌کمک هوش مصنوعی قرار می‌گیرد.

برای مثال، گوگل می‌گوید که SGE می‌تواند تجربه خرید جامع‌تری را برای کاربران فراهم کند با گزینه‌های قابل توجه، توضیحات محصول، قیمت‌ها و تصاویر در یک نمای واحد. اگر تصاویر محصولات شما دارای متن alt توصیفی و خاص باشند، شما به موتورهای جستجو این زمینه را می‌دهید تا زمانی که محصول شما گزینه‌ای با کیفیت بالا در نتایج جستجوی کسی باشد، آن را نمایش دهند.

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

Image Alt Text

چرا این تصویر با متن alt بهینه شده، در نتایج جستجوی تصویری برای کلمه کلیدی بلند “how to remove duplicates in excel” ظاهر می‌شود؟
از آنجا که این تصویر متن alt بهینه شده دارد، در نتایج جستجوی تصویری برای کلمه کلیدی بلند “how to remove duplicates in excel” نمایش داده می‌شود. از آنجا که این پست همچنین در نتایج جستجوی وب برای همان کلمه کلیدی ظاهر می‌شود، بازدیدکنندگان ممکن است از دو کانال مختلف به پست بلاگ دسترسی پیدا کنند.

اضافه کردن متن Alt به تصاویر سایت شما

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

هر چقدر بیشتر تصاویر خود را بهینه‌سازی کنید، استراتژی سئوی شما در آینده بهتر خواهد بود

ممنونیم که تا انتهای آموزش همراه ما بودین، خوشحال میشیم سوالات و نظراتتون رو با ما در میان بگذارین.

نظرات کاربران

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

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

آموزش های پیشنهادی

نوشته های دیگر در دسته بندی مقالات آموزشی

مدل سازی سه بعدی در Unreal Engine 5

مدل سازی سه بعدی در Unreal Engine 5؛ نکات و ترفندهای کاربردی

مدل سازی سه بعدی در Unreal Engine 5 با ترفندهای حرفه ای
اسکرین شات با وضوح بالا

اسکرین شات در آنریل انجین 5؛ روش گرفتن تصاویر با کیفیت

اسکرین شات در آنریل انجین ۵؛ آموزش سریع ثبت تصاویر واضح و با کیفیت
آموزش هک

آموزش هک