قبل از آغاز مقاله با تگ Alt، میخواهم کمی به عقب بازگردیم و درباره اهمیت تصاویر در یک مقاله آنلاین صحبت کنیم. شما برای جذاب شدن، بهتر خوانده شدن و گاهی برای کوتاه کردن مطالب، اغلب از تصاویر در مقالات خود استفاده میکنید. اما تصاویر نقش مؤثری در فهم بهتر مطالب توسط کاربران اینترنتی دارند. همچنین کاربرد آنها تنها به همین مورد خلاصه نمیشود.
استفاده از تصاویر مناسب، یکی از راههای موثر در بهبود سئو وبسایت شماست. تصاویر جذاب نه تنها باعث جذب توجه کاربران به مطالب شما میشوند، بلکه میتوانند ترافیک بیشتری را به سمت سایت شما جذب کنند. لذا استفاده از تصاویر مناسب و جذاب، برای بهبود رتبه سایت شما در موتورهای جستجوی اینترنتی بسیار موثر است.
یکی از موارد مهم در بهینه سازی تصاویر سایت، استفاده از ویژگی Alt برای آنها میباشد. تگ Alt و تگ عنوان در بهبود جایگاه مطالب در نتایج موتورهای جستجو و افزایش دسترسی کاربران اینترنتی به وبسایت شما تأثیرگذار هستند. در این مطلب، سعی کردهایم تا تمامی نکات مرتبط با تگ Alt و تگ عنوان و روش بهینهسازی آنها را با بیانی ساده و روان شرح دهیم.
به همین دلیل، اگر میخواهید با تگ Alt و روش بهینه سازی آن آشنا شوید، باید این مقاله را به طور کامل مطالعه کنید.
تگ Alt چیست؟
در وبسایتها، استفاده از تگ Alt برای توصیف تصاویر بسیار مهم است. این تگ، توضیحی است که برای تصویر ارائه میشود و میتواند به عنوان جایگزین متنی برای تصویر در صورت خطا در بارگذاری استفاده شود. در واقع، تگ Alt میتواند به کاربران کمک کند تا در صورت عدم نمایش تصویر، مفهوم و عملکرد آن را درک کنند. به همین دلیل، توصیه میشود که در تمام تصاویر استفاده شده در وبسایت، تگ Alt به درستی و با دقت تعریف شود.
به علاوه، مرورگرها معمولاً قابلیتی به نام تگ Alt دارند که برای افراد نابینا یا دارای اختلال بینایی مفید است. با استفاده از تگ Alt، متن جایگزین برای تصاویر فراهم میشود که با خواندن آن توسط مرورگر، مفهوم و محتوای تصاویر برای این افراد قابل فهم میشود. البته، این تنها یکی از کاربردهای تگ Alt نیست و کاربردهای دیگری نیز دارد.
کد زیر نمونه یک تگ تصویر HTML کامل است:
<img title="image" src="image.jpg" alt="image" />همانطور که قابل مشاهده است در کد بالا 3 قسمت میبینید که که در زیر کاربرد هر کدام را توضیح میدهیم:
- src: این قسمت، مربوط به افزودن تصویر به صفحات وب است. برای اینکه تصویری را در سایت خود قرار دهید، باید آدرس تصویر را که در یک محل ذخیره شده است، در این قسمت قرار دهید.
- alt: این قسمت، مربوط به تگ alt در صفحات وب است. این تگ باعث میشود زمانی که کاربری نمیتواند تصویر را ببیند، بتوانند از طریق متن جایگزین تگ alt، اطلاعات مورد نیاز را دریافت کنند.
- title: این قسمت در واقع یک متن برای عنوان تصویر شماست. در این قسمت باید برای تصویر خود یک عنوان مناسب و مرتبط قرار دهید.
ویژگیهای عنوان و Alt در یک تصویر، از نظر تکنیکی تگ نیستند اما با نام تگ عنوان و تگ Alt شناخته میشوند. تگ Alt توضیحی درباره مفهوم و کاربرد تصویر ارائه میدهد. بنابراین، اگر شما از یک تصویر به عنوان دکمه خرید کالای X استفاده میکنید، تگ Alt باید به شکلی شبیه به “دکمه خرید کالای X” باشد. این امر به بهبود مخاطبین با محتوای شما کمک میکند و بهبود قابل توجهی در بهینهسازی موتورهای جستجو نیز دارد.
وقتی که نشانگر موس روی تصاویر حرکت میکند، تگ عنوان نمایش داده میشود. این تگ میتواند به عنوان یک راهنمای ساده درباره تصویر، یا به عنوان یک پیشنهاد جذاب برای ترغیب کاربران به کلیک روی تصویر عمل کند. به عنوان مثال، در تصویر دکمه خرید، تگ عنوان میتواند به عنوان یک ابزار فراخوانی برای عمل (که به آن Call-to-Action میگویند) به کار رود، مانند خرید محصول X با تنها 20 هزار تومان.
به طور معمول، تصاویر استفاده شده در یک وبسایت برای بهبود قابلیت دسترسی و جستجوی آنها توسط موتورهای جستجو به تگ Alt نیاز دارند. بهتر است تصاویری که برای طراحی و تزئین وبسایت استفاده میشوند، در بین کدهای CSS قرار گیرند و نه در کدهای HTML. اگر این امکان وجود ندارد، میتوانید تگ Alt را خالی بگذارید، اما بهتر است از آن برای توضیح محتوای تصویر استفاده کنید.
تاثیر تگ Alt بر سئو سایت
طبق سیاستهای گوگل، تگ Alt تصاویر میتواند بهبود قابل توجهی در سئو وبسایت شما داشته باشد. این تگها به کاربران با مشکلات بصری کمک میکنند تا محتوای تصویر را درک کنند و به علاوه به گوگل کمک میکنند تا محتوای تصویر را درک کند و به جستجوها ارائه دهد. این امر به خصوص برای تصاویری که در محتوای شما استفاده میشوند که موضوع گوناگونی دارند، مثل تصاویر محصولات، بسیار مفید است. بهترین راه برای اطمینان از وجود تگ Alt مناسب برای تصاویر شما، استفاده از افزونه Yoast SEO یا افزونه Rank Math SEO است که به شما کمک میکند تا تگهای Alt را برای تصاویر بدرستی پر کنید و از نظر سئو بهینه شوید.
با این وجود، باید به یاد داشت که افزونه Yoast تنها یک ابزار پردازش خودکار است و نمیتواند به طور کامل مفهوم محتوای شما را درک کند. علاوه بر این، استفاده از کلمات کلیدی در تگ Alt تصاویر الزامی است، اما باید از استفاده بیش از حد از آنها در تمام تگها خودداری کنید. در واقع، برای بهینهسازی تصاویر، باید از تصاویر مناسب، باکیفیت و مرتبط با محتوای خود استفاده کنید و در تگ توصیفی آنها از کلمات کلیدی مناسب استفاده کنید. هرچند، در برخی موارد، محتوای تصویر به قدری جزئیاتی است که استفاده از کلمات کلیدی کوتاه و کلی در تگ Alt آن مناسب نیست، اما استفاده از تگ Alt طولانی و توصیفی، کمک میکند که تصویر و محتوای شما برای موتورهای جستجوگر قابل فهم باشد و برای بهبود سئو وبسایت شما مؤثر است.
تگ Alt و تگ عنوان در وردپرس
اگر شما از وردپرس برای مدیریت محتوای وب سایت و وبلاگ خود استفاده می کنید، به راحتی می توانید از قابلیت های در نظر گرفته شده برای تگ عنوان و تگ Alt تصاویر بهره ببرید. وردپرس به طور پیش فرض نامی که تصاویر با آن ذخیره می شوند را برای تگ عنوان یا نام تصویر در مطلب در نظر می گیرد. در صورتی که این نام با محتوای مطلب شما ارتباطی ندارد، توصیه می شود که این نام را تغییر دهید.
باید به این نکته توجه داشت که تصاویری که با دوربین عکاسی گرفته شدهاند، با نامهای DCMIMAGE10.jpg و غیره در فضای ذخیرهسازی ذخیره میشوند. این نامگذاری باید با محتوای تصویر مطابقت داشته باشد. پس از تنظیم عنوان، در صورتی که متن مناسبی برای تگ Alt در نظر ندارید، بهتر است همان عنوان عکس را در قسمت متن جایگزین (تگ Alt) کپی کنید. اگرچه این کار چندان توصیه نمیشود، اما بهتر از خالی گذاشتن این قسمت است.
وردپرس با امکانات کاربرپسندی که در اختیار مدیران وبسایت قرار میدهد، امکان بهینهسازی تصاویر با استفاده از تگ Alt را فراهم میکند. عدم استفاده از این امکانات به جز تنبلی دلیل دیگری ندارد. با این تغییرات جزئی، میتوانید سئوی وبسایت خود را بهبود داده و جایگاه بهتری در نتایج موتورهای جستجو کسب کنید. این تغییرات تنها چند دقیقه زمان میبرند و با استفاده از آنها، وبسایت شما بهینهتر و دوستانهتر برای کاربران و موتورهای جستجو خواهد بود.
چگونه یک تگ Alt خوب بنویسیم؟
با بستن چشمهای خود، به شخص دیگری واگذار کنید که تگ Alt تصاویر شما را بخواند. اگر میتوانید تصوری کامل و منطقی از تصاویر خود در ذهن داشته باشید، بهتر است از شیوه درستی برای نوشتن تگهای Alt استفاده کنید. برای مثال، در تصویر زیر یک بشقاب از پنکیک بلوبری قابل مشاهده است.
<img src="pancakes.png" alt="pancakes">تگ Alt مثال بالا نسبتاً خوب بوده است. زیرا در آن از عبارات توصیفی استفاده نشده و میتوان به راحتی از آن متوجه شد. هر چند این تصویر یک بشقاب ساده پنکیک بلوبری است، اما با توجه به تگ 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 و عدم بهم ریختگی آن استفاده شده است. بدین معنا نیست که نباید تگ Alt خود را به زبان فارسی بنویسید. در واقع، استفاده از تگ Alt به زبان فارسی برای کاربران فارسیزبان، میتواند بهبود قابل توجهی در تجربه کاربری آنها داشته باشد. اما در هر صورت، باید به گونهای توضیحاتی در تگ Alt قرار داد که کاربران با هر زبانی بتوانند از تصویر درک کاملی داشته باشند.
در مجموع برای نوشتن یک تگ Alt مناسب به نکات زیر دقت کنید:
- تصویر را به بهترین شکل ممکن توصیف کنید: تگ Alt به عنوان مهمترین عامل در تشخیص مفهوم تصاویر، برای موتورهای جستجو و افرادی که از قدرت بینایی مناسبی برخوردار نیستند، بسیار مهم است. در صورتی که تصاویری در سایت خود دارید که مفهوم خاصی ندارند و فقط برای تزئین و زیبایی استفاده میشوند، بهتر است آنها را به جای قرار دادن در کدهای HTML، در میان کدهای CSS جای دهید. این کار به شما کمک میکند تا کدهای شما سادهتر شود و زمان بارگیری صفحات سایت شما نیز کاهش پیدا کند.
- تگ Alt با طول مناسب بنویسید: معمولاً عبارات کوتاه برای توصیف تصاویر کافی به نظر نمیرسند. حتی تصویری که درباره یک خودرو باشد نیز به مشخصاتی مانند مدل، رنگ و سال تولید نیاز دارد. بنابراین، بهتر است عبارت مرسدس بنز کلاس C قرمز 2017 را به عنوان توصیف تصویر استفاده کنید. با این حال، باید توجه داشت که عبارات بلند، توسط مرورگرهای مخصوص افراد نابینا خوانده نمیشوند و در توصیف تصاویر، تنها باید به کلیات آن اشاره کنید. بهتر است تگ Alt را با طولی کمتر از 125 کاراکتر تنظیم کنید. به این ترتیب، توصیف تصاویر شما بهبود مییابد.
- از کلمات کلیدی استفاده کنید: تگهای Alt، فضایی مناسب برای استفاده از کلمات کلیدی هستند و در نتیجه، به شما فرصت دوبارهای برای علامتدادن به موتورهای جستجو میدهند تا به ارتباط محتوای شما با یک عبارت خاص بیشتر پیببرند. بنابراین، ارتباط محتوا با تصاویر باید نخستین اولویت شما در نوشتن تگ Alt باشد و قرار دادن کلمه کلیدی در تگ Alt حداقل در یکی از تصاویر، میتواند در بهبود رتبه وبسایت شما مؤثر باشد.
- بیهوده از کلمات کلیدی استفاده نکنید: اگرچه گوگل نمیتواند نقاط ضعف مطالب شما را شناسایی کند، اما استفاده از کلمات کلیدی در تگهای Alt بدون رعایت ارتباط تصاویر با محتوای متنی، ممکن است برای شما مشکلاتی ایجاد کند. بهتر است تصاویر را با عبارات مناسب توصیف کرده و از دوبله سازی محتوا خودداری کنید.
- از تصاویر به جای متن استفاده نکنید: باید به خاطر داشت که موتورهای جستجو قادر به خواندن متن موجود در تصاویر نیستند. بنابراین، بهتر است از قرار دادن متن در تصاویر خودداری کنید. در صورتی که این امر برای شما ضروری است، بهتر است توضیحات مربوط به تصویر را در تگ Alt آن قرار دهید.
- از عبارات «تصویر یک…» و «عکس یک …» استفاده نکنید: در حال حاضر، به اعتقاد موتورهای جستجو، متن Alt شما به یک تصویر اشاره میکند. بنابراین، لازم نیست آن را مشخص کنید تا محتوای تکراری ایجاد نشود.
- دکمههای فرم را نادیده نگیرید: اگر شما یک فرم در وبسایت خود دارید و از یک تصویر برای دکمه ارسال (Submit) استفاده میکنید، حتماً باید از تگ Alt برای توصیف کامل عملکرد آن استفاده کنید. به همین دلیل، نوشتن عباراتی مانند جستجو (Search)، ثبت نام (Sign Up)، ورود (Log In) و اعمال (Apply Now) در متن Alt این دکمهها ضروری است.
- تگ Alt تصویرتان به جستجوی کاربران نزدیک باشد: بهتر است تگ Alt تصاویر خود را به گونه ای بنویسید که علاوه بر جذاب بودن برای بازدیدکنندگان، برای موتورهای جستجو نیز جالب باشد. با این کار، تصاویر شما در نتایج جستجو نمایش داده خواهند شد.
حتماً در پایان، با ذکر مثالهای کاربردی این مطلب را به پایان برسانیم. برای مثال، فرض کنید یک تصویر از مردی که در حال حرکت بر روی پلهبرقی است، در سایت شما وجود دارد. در این صورت، تگ Alt مناسب برای این تصویر میتواند یکی از موارد زیر باشد:
- تگ Alt خوب: یک مرد در پله برقی
- تگ Alt بهتر: یک مرد سوار بر پله برقی
- بهترین تگ Alt: یک مرد در حال حرکت بر روی پله برقی بلند
به این ترتیب، با استفاده از تگ Alt مناسب، کاربرانی که با مشکلات بصری روبرو هستند، نیز میتوانند از تصویر شما بهره ببرند و همچنین بهبود جستجویی شما نیز تضمین میشود.
نتیجهگیری
قرار دادن تگ Alt برای تصاویر، تاثیر بسیار مثبتی بر روی وضعیت سئو و ترافیک سایت دارد. در واقع، اگر کاربری به دنبال تصویر خاصی در نتایج جستجوی گوگل باشد، با دیدن تصویر مناسب شما در نتایج جستجو، به سایت شما هدایت میشود و باعث افزایش ترافیک و پیدا شدن سایت شما توسط کاربران جدید میشود. به عبارتی، تگ Alt، به کاربران کمک میکند تا تصاویر سایت شما را در نتایج جستجوی گوگل و دیگر موتورهای جستجویی پیدا کنند و در نهایت ترافیک سایت شما را افزایش دهند.
حتماً در صورت داشتن تصاویر بدون عنوان و تگهای مناسب در سایت خود، بهتر است زمان کافی را صرف نوشتن عناوین و تگهای Alt مناسب برای هر تصویر کنید. این کار به شما کمک میکند تا در نتایج موتورهای جستجو بهبود پیدا کنید و همچنین به کاربران با ناتوانیهای بصری کمک میکند تا بهتر از تصاویر شما استفاده کنند. همچنین، این کار زمان کمتری نسبت به بهبود جستجویی شما اختصاص میدهد.
