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

تگ Alt چیست؟

متن جایگزین یا Alternative Text که به عناوین “Alt attribute”، “Alt text” و یا “تگ Alt” نیز معروف می باشد، بیانگر توضیح کوتاهی از عملکرد و یا عنوان یک تصویر در یک صفحه وب می باشد. یکی از نکات مهم در بهینه سازی تصاویر سایت، استفاده از ویژگی Alt برای آنها است. تگ Alt و تگ عنوان در تقویت جایگاه مطالب در نتایج موتورهای جستجو و بهبود دسترسی کاربران اینترنتی به وب‌ سایت شما تاثیر گذارند.

به شرح یا متنی که موضوع تصویر را در سایت توضیح می‌دهد، تگ Alt گفته می‌شود. اگر در هنگام بارگذاریِ صفحه‌ای از یک سایت، به هر دلیلی (سرعت پایین اینترنت، اشکال در آدرس تصویر و ...) تصویر موجود در آن لود نشود، این توضیح (تگ Alt) به‌عنوان جایگزین تصویر، مفهوم و عملکرد تصویر را به کاربر نشان می‌دهد. به همین سبب نام Alt یا  متن جایگزین (Alternative text) را برای آن در نظر گرفته‌اند. همچنین این ویژگی با عناوین دیگری مانند «Alt attribute» و « Alt text» و «Alt description» نیز شناخته می‌شود. این تگ به‌عنوان یک ویژگی کاربردی به برچسب تصویر در HTML اضافه می‌شود تا به موتورهای جستجو کمک کند که مفهوم تصاویر را بهتر درک کنند.
جالب است بدانید که این ابزار به افراد نابینا و کم‌بینا هم کمک می‌کند. این افراد معمولا از مرورگرهایی استفاده می‌کنند که دارای قابلیت بازگویی آنلاین مطالب هستند و یا با استفاده از دستگاه‌های صفحه خوان (Screen reader) صفحه‌ای از سایت را بررسی می‌کنند. بدین ترتیب تگ Alt کمک می‌کند تا نابینایان هم مفهوم تصاویر را دریافت کنند.
کد HTML خصوصیت Alt یک تصویر به این صورت نوشته می‌شود:
<img title="“image" src="“image.jpg”" alt="“image" />

بخش های کد HTML خصوصیت Alt

این کد از سه بخش تشکیل‌شده است که هر بخش کاربرد متفاوتی دارد:
img title : عنوان تصویر را نشان می‌دهد. شما هر عنوانی را که برای تصویرتان در نظر گرفته‌ باشید باید در این قسمت از کد بنویسید.
alt : شما باید تگ alt موردنظرتان را در این قسمت از کد و درست بین دو علامت نقل‌قول قرار دهید.
img src : آدرس محل ذخیره‌ی تصویر را باید در این قسمت از کد جای دهید.
هرچند ازنظر تکنیکی، در یک تصویر ویژگی‌هایی مثل Alt و عنوان، تگ محسوب نمی‌شوند اما معمولا با نام «تگ» شناخته می‌شوند. وقتی شما نشانگر موس را روی عکس قرار می‌دهید، می‌توانید تگِ عنوان را مشاهده کنید. این تگ می‌تواند به‌عنوان یک راهنما برای عکس و یا یک پیشنهاد جذاب برای کاربر باشد، پیشنهادی که او را به کلیک روی عکس تشویق کند. در حالت دوم این تگ درواقع به‌عنوان ابزاری برای فراخوان یک عمل (Call to Action) در سایت قرار می‌گیرد.

تبلیغات درون متنی/

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

تبلیغات درون متنی

تگ Alt چه تاثیری بر سئو سایت دارد؟

برای آن‌که تصاویر یک سایت توسط موتورهای جستجو بهتر درک شوند، به تگ Alt احتیاج دارند. به همین خاطر تگ Alt بر بهبود سئوی یک سایت بسیار موثر خواهد بود چراکه کمک می‌کند تا موتورهای جستجو با درک بهتر مفهوم عکس و محتوای سایت، آن را در جایگاه بهتری در صفحه نتایج قرار دهد. اهمیت این موضوع تا جایی است که گوگل، سرویس Google image را بر پایه‌ی تگ Alt ایجاد کرده است. اگر هم از سیستم تولید محتوای وردپرس استفاده کنید، افزونه یوآست سئو (Yoast SEO) قبل از بارگذاری محتوا به شما توصیه می‌کند که حداقل از یک تگ Alt استفاده کنید و بهتر است این تگ شامل کلمه کلیدی باشد. چراکه خزنده (Spider)های موتور جستجو با کمک تگ Alt راحت‌تر می‌توانند مفهوم تصاویر را index کنند.
شما متناسب با محتوای سایتتان باید از عکس‌هایی باکیفیت استفاده کنید و در تگ‌های توصیفیِ این عکس‌ها، کلمات کلیدی را به شکل مناسبی به کار ببرید. درصورتی‌که محتوای تصویرتان به جزییات زیادی می‌پردازد، بهتر است که از تگ‌های توصیفی طولانی استفاده کنید. این‌گونه تگ‌ها علاوه بر اینکه برای به‌کارگیری مناسب کلمات کلیدی دستتان را باز می‌گذارد برای درک تصویر و محتوا هم به موتورها جستجو کمک بیشتری می‌کنند. اگرچه استفاده از کلمات کلیدی در تگ‌های Alt ضروری است اما به‌هیچ‌عنوان توصیه نمی‌شود که در تمامی تگ‌ها و بیش‌ازحد لزوم از آن‌ها استفاده کنید. به‌علاوه برای نوشتن تگ Alt نیازی نیست که در ابتدای عبارتِ توصیفی موردنظرتان از «تصویر یک ...» یا «عکس یک ...» استفاده کنید. زیرا موتورهای جستجو با شناسایی این تگ به‌طور خودکار درمی‌یابند که شما از یک تصویر استفاده کرده‌اید. بنابراین نیازی به استفاده از چنین عبارت‌هایی نیست.

چگونه یک تگ alt اثربخش برای سئو ایجاد کنیم؟

هنگام استفاده از تگ‌ alt تصویر، مهم است که اطلاعات متنی بیان شود تا کاربران در نمایش تصویر مشاهده کنند و صرفا برای دادن یک لیبل به تصویرتان نباشد. یکی از توصیه‌های گوگل این است که تا آنجایی که ممکن است آنها را برای کاربران نهایی مفید کنید. در ادامه لیستی از نکات در مورد چگونگی اینکه می‌توانید یک متن alt (تگ alt) مؤثر ایجاد کنید، آمده است.

• متن را کوتاه و ساده نگه دارید؛

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

• می‌توانید موضوع صفحه را در متن alt ذکر کنید؛

یکی از مؤثرترین راه‌هایی که گوگل در مورد موضوع صفحه شما و افزایش رتبه‌بندی آن در موتورهای جستجو بیان می‌کند متن alt است. بنابراین اگر صفحه شما در مورد استراتژی بازاریابی است در نتیجه یک مزیت سئو خواهد بود که صفحه شامل یک تصویر از بازاریابی با متن alt مانند ‘alt=”Marketing”‘ داشته باشد.

• متن احاطه شده در تصویر را در نظر بگیرید؛

موقعیت تصاویر با تگ‌های alt تصویر در نزدیکی متن مناسب کمک خواهد کرد که یک تجربه قابل فهم را برای بازدیدکنندگان غیر بصری ایجاد کند.

• با به کار بردن کلمات کلیدی، وبسایت شما رتبه بهتری در موتورهای جستجو می‌گیرد؛

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

• از به کار بردن بیش از حد کلمات کلیدی (keyword stuffing) دوری کنید؛

گوگل و سایر موتورهای جستجو این نوع کارها را دوست ندارند؛ بنابراین بهتر است که از این کار اجتناب کنید. یک توصیف ساده بر روی تصویر خود کافی است و از هر نوع پنالتی شدن در گوگل اجتناب خواهد کرد.

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

• اولین هدف و کاربرد تگ Alt تصاویر، افزودن یک متن به تصاویر در وب سایت می باشد. با تعریف Alt attribute به تگ <img> یکی از قوانین در دسترس بودن (Accessibility) وب سایت را اجرا کرده ایم. به عنوان مثال هنگامی که یک کاربر توسط دستگاه های صفحه ‌خوان (Screen Reader) یک صفحه وب را مورد پیمایش قرار می دهد، این متن جایگزین برای تصاویر خوانده می شوند.
• در مواقعی که تصاویر به هر دلیلی لود نشوند (می تواند بدلیل کندی سرعت اینترنت باشد و یا مشکل داشتن آدرس تصویر و…)، تگ Alt بجای تصاویر به کاربر نمایش داده خواهند شد.
• تگ Alt تصاویر به خزنده های موتور جستجو کمک می کند تا مفهوم و توضیح تصاویر را راحت تر index کنند.

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

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

تاثیر تگ Alt بر سئو سایت:

گوگل برای تگ ‌های Alt تصاویر، ارزش نسبتاً بالایی در نظر گرفته است. این ارزش ‌گذاری به دلیل فهم آسان ‌تر تصاویر و تعیین موضوع محتوای پیرامون آنها صورت می‌ گیرد. این ارزش‌ گذاری به قدری جدی است که گوگل سرویس Google Image را به آن اختصاص داده است. همچنین، افزونه Yoast SEO محتوای وب‌ سایت را پیش از بارگذاری بررسی کرده و معمولاً توصیه می‌ کند که حداقل یک تصویر به همراه تگ Alt (متشکل از کلمه کلیدی) باید در محتوا وجود داشته باشد. به این ترتیب، در صورت نبود تصویر در محتوا یا استفاده نکردن از تگ Alt، به شما اطلاع می‌دهد.

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

تگ Alt و تگ عنوان در وردپرس:

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

همچنین، تصاویر ذخیره‌شده در دوربین ‌های عکاسی نیز با نام‌هایی نظیر DCMIMAGE10.jpg ذخیره می‌ شوند که نام آنها باید متناسب با محتوای شما تغییر کنند. پس از تنظیم عنوان، اگر هیچ متن مناسبی برای تگ Alt در نظر ندارید، بهتر است همان عنوان عکس را در قسمت متن جایگزین (تگ Alt) کپی کنید. اگرچه این کار چندان توصیه نمی‌ شود، اما بهتر از خالی گذاشتن این قسمت است.

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

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

چگونه یک تگ Alt خوب بنویسیم؟

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

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

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

<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 بدون هیچ توضیحی به حال خود رها شده است، درحالی که در مورد دوم نیز طول تگ، بیش از اندازه بلند است و تنها تعدادی از کلمات کلیدی به زور در آن گنجانده شده است.

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

در مجموع برای نوشتن یک تگ Alt مناسب به نکات زیر دقت کنید:

تصویر را به بهترین شکل ممکن توصیف کنید:

تگ Alt، مهم‌ترین عامل تشخیص مفهوم تصاویر برای موتورهای جستجو و افرادی است که از قدرت بینایی مناسبی برخوردار نیستند. اگر تصاویری دارید که مفهوم خاصی ندارند و صرفاً برای تزئین و زیبایی استفاده می ‌شوند، بهتر است آنها را به‌جای قرار دادن در کدهای HTML، در میان کدهای CSS جای دهید.

تگ Alt با طول مناسب بنویسید:

معمولاً عبارات کوتاه برای توصیف هیچ تصویری کافی به نظر نمی‌ رسند. تصویر حتی اگر درباره یک خودرو باشد نیز به مشخصاتی مانند مدل، رنگ و سال تولید نیاز دارد. بنابراین عبارت مرسدس بنز کلاس C قرمز ۲۰۱۷ کمترین توصیفی است که می‌ توان از یک خودروی مرسدس داشت. در مقابل، عبارات بلند معمولاً به ‌وسیله مرورگرهای مخصوص افراد نابینا خوانده نمی‌ شود. افزون بر این، در توصیف یک تصویر تنها باید به کلیات آن اشاره کنید. در مجموع می‌توان گفت که طول تگ Alt باید کمتر از ۱۲۵ کاراکتر باشد.

از کلمات کلیدی استفاده کنید:

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

بیهوده از کلمات کلیدی استفاده نکنید:

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

از تصاویر به جای متن استفاده نکنید:

موتورهای جستجو نمی‌ توانند متن نوشته ‌شده در تصاویر را بخوانند. بنابراین، از این کار پرهیز کنید. اگر ناچار به انجام آن هستید، هر آنچه در تصویر توضیح دادید را در تگ Alt تصویر قرار دهید.

از عبارات «تصویر یک…» و «عکس یک …» استفاده نکنید:

در حال حاضر موتورهای جستجو تصور می ‌کنند که متن Alt شما به یک تصویر اشاره دارد. بنابراین نیازی به مشخص کردن آن نیست.

دکمه ‌های فرم را نادیده نگیرید:

اگر در وب‌ سایت خود یک فرم دارید و از یک تصویر برای دکمه ارسال (Submit) استفاده می‌ کنید، حتماً از تگ Alt برای توصیف کامل عملکرد آن استفاده کنید. بنابراین نوشتن عباراتی مانند جستجو (Search)، ثبت نام (Sign Up)، ورود (Log In) و اعمال (Apply Now) در متن Alt این دکمه‌ ها ضروری است.

تگ Alt تصویرتان به جستجوی کاربران نزدیک باشد:

سعی کنید تگ Alt خود را به شکلی بنویسید که علاوه بر جذاب بودن برای کاربر، برای موتورهای جستجو نیز جذاب باشد. به این ترتیب، تصاویر شما در نتایج جستجو نمایش داده خواهند شد.

تبلیغات درون متنی/

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

تبلیغات درون متنی