گوگل متن جایگزین را برای لوگوها و دکمه ها توضیح می دهد

در یک پادکست Google Search Off the Record، لیزی ساسمن و جان مولر از Google درباره بهترین راه برای مدیریت متن جایگزین برای لوگوها و دکمه‌های مبتنی بر تصویر بحث می‌کنند.

بهترین روش ها برای افزودن ویژگی های alt به لوگوها و دکمه ها وجود دارد.

قوانین ممکن است در ابتدا کمی پیچیده به نظر برسند، اما درک آنها در واقع ساده است.

دریافت درست ویژگی های alt برای کاربران خوب است و در دراز مدت برای کسب درآمد عالی است.

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

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

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

در نهایت، او می پرسد که آیا هدفی از سئو برای افزودن متن جایگزین به تصاویر کاربردی مانند دکمه ها وجود دارد یا خیر.

لیزی ساسمن:
… سطح مراقبتی که در آن برای دارایی بصری صرف می کنیم، باید همان سطح انرژی را در کلماتی که آن دارایی را توصیف می کنند نیز بگذاریم. که به نظر من عالیه

دسته دیگری از تصاویر مانند چیزهای کاربردی است که گاهی اوقات می تواند یک دکمه باشد.

مثل اینکه یک گرافیک است که به عنوان چیزی عمل می کند.

بنابراین آیا متن جایگزین باید به من بگوید که قرار است چه اتفاقی بیفتد؟

اگر روی این کلیک کنید، آنگاه شما را به اینجا می برد؟

این می تواند مانند تصویری از چیزی باشد که سپس به عنوان یک دکمه نیز عمل می کند.

و آیا عملکرد را توضیح می‌دهید، یا مانند یک تصویر فلش، نمی‌دانم، مانند آن بود؟

و همچنین آیا برای سئو مهم است؟

جان مولر:
آره من فکر می کنم…

لیزی ساسمن:
می تواند مانند یک لوگو باشد.

جان مولر:
برای دسترسی، احتمالاً منطقی است که فقط کاری در اطراف آن انجام دهید.

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

متن جایگزین روی دکمه‌ها برای دسترس‌پذیری هستند نه SEO

جان مولر روشن می کند که هیچ هدفی برای سئو برای افزودن متن جایگزین به دکمه ها وجود ندارد.

اما او همچنین مشاهده کرد که متن جایگزین برای این نوع تصاویر عمدتاً به دلایل دسترسی است.

لیزی بحث را ادامه داد:

لیزی ساسمن:
… اما شاید آنها برای لوگو یا چیزی شبیه به لوگو این کار را انجام دهند. وقتی روی آن کلیک می کنید، شما را به صفحه اصلی یا چیزی می برد.

اما همچنین، “اوه، این یک لوگو است.”

پس آیا می گویید، “این لوگوی مرکز جستجوی گوگل است.”

جان مولر:
مطمئن.

لیزی ساسمن:
یا مانند متن توصیفی.

این Googlebot در لوگو است، اما آیا مهم‌ترین چیزی که در مورد تصویر می‌دانیم، لوگو بودن آن است؟

یا اینکه لوگو چه شکلی است؟

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

جان مولر:
آره

لیزی ساسمن:

شاید آرم شرکت X چیست؟

جان مولر:
آره منظورم این است که به نوعی از آن استراتژی برمی گردد که ما سعی می کنیم از آن اجتناب کنیم.

برای چه می خواهید پیدا شوید؟

لیزی ساسمن:
بله، اما این مهمترین سوال است، حدس می‌زنم، زیرا در این صورت به نوعی هدایت می‌شود…

من می توانم با تمام این سوراخ های خرگوش رانده شوم، بنابراین به نوعی، نمی دانم، به چیزهایی اولویت می دهد که باید به آنها فکر کنیم، زیرا لزوماً لازم نیست همه چیز را برای این چیزها بنویسید. حدس می زنم.”

استفاده صحیح از متن جایگزین در لوگوها و دکمه ها

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

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

سازمان رسمی استاندارد HTML، کنسرسیوم وب جهانی (W3C) توضیحی در مورد نحوه مدیریت لوگوها منتشر می کند.

لینک صفحه اصلی لوگو

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

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

<a href="https://www.w3.org/">
<img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt="W3C home">
</a>

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

نمونه متن جایگزین ارائه شده توسط W3C به سادگی می گوید: “W3C home” اما اگر بخواهید می تواند توصیفی تر باشد.

لینک صفحه اصلی لوگو و متن

انواع دیگری از پیوندهای لوگو وجود دارد که در آن یک آرم تصویر و یک متن درست در کنار یا زیر آن وجود دارد و هم تصویر و هم متن در یک کد پیوند کدگذاری می شوند.

به عبارت دیگر، دو پیوند مانند یک پیوند برای لوگو و یک پیوند برای متن وجود ندارد، بلکه فقط یک پیوند برای لوگو و متن با هم است.

در آن صورت، چون متن عملکرد پیوند را توصیف می کند، تکرار عملکرد پیوند لوگو تکراری خواهد بود.

بنابراین برای این مورد بهترین روش استفاده از یک متن جایگزین پوچ است.

این مثالی است که W3C ارائه می دهد:

<a href="https://www.w3.org/">
<img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""> W3C Home
</a>

به نحوه کدگذاری ویژگی alt برای تصویر توجه کنید:

img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""

علامت نقل قول خالی برای متن alt، صفت alt null (یا متن alt تهی) نامیده می شود. یک صفحه خوان به سادگی آن را رد می کند.

دلیل خوب بودن یک متن جایگزین پوچ این است که متنی وجود دارد که تابع پیوند چیست:

خانه W3C

متن جایگزین برای پیوند آیکون

گاهی اوقات یک پیوند به شکل یک نماد است، بدون متنی که توضیح دهد چه کاری انجام می دهد، برای مثال نمادی به شکل پاکت نامه (نماینده ایمیل یا پیام) یا چاپگر (که نشان می دهد پیوند یک چاپگر را فعال می کند).

برای این وضعیت، توصیف تصویر (مانند پاکت نامه یا چاپگر) عمل بدی است.

بهترین روش توصیف کاری است که تصویر انجام می دهد (ایمیل را شروع کنید یا یک صفحه وب را چاپ کنید).

W3C از مثال یک نماد چاپگر با کد زیر و متن جایگزین استفاده می کند:

<a href="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/javascript:print()">
<img src="print.png" alt="Print this page">
</a>

همانطور که می بینید، نمادی به شکل چاپگر عبارت «Print this page» را به عنوان متن جایگزین دارد. نشان می دهد که نماد چه کاری انجام می دهد. این مفید است.

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

مشابه مثال نماد، متن جایگزین برای یک تصویر دکمه باید آنچه را که تصویر انجام می دهد را توصیف کند.

W3C از مثال یک جعبه جستجو استفاده می کند که دارای یک ذره بین برای دکمه ارسال است.

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

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

این کد نمونه ای است که W3C به عنوان مثال نشان می دهد:

<input type="image" src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/searchbutton.png" alt="Search">

همانطور که می بینید، متن جایگزین برای دکمه جستجو کلمه “جستجو” است که عملکرد دکمه را توصیف می کند.

متن جایگزین برای دکمه ها و لوگوها

لیزی و جان وارد جزئیات نحوه رسیدگی به سناریوهای مختلف برای لوگوها و دکمه ها نشدند.

با این حال جان اشاره کرد که هیچ ارزش SEO برای متن جایگزین برای دکمه‌ها و لوگوها وجود ندارد، بلکه برای دسترسی است.

ارائه مناسب صفحات وب که برای کاربرانی که با صفحه‌خوان‌ها به صفحات وب دسترسی دارند، کارآمد است.

همانطور که قبلاً ذکر شد، افرادی که از صفحه‌خوان‌ها استفاده می‌کنند می‌توانند مشتریان یا مدافعان کسب‌وکار یا وب‌سایت شما باشند.

بنابراین خوب است که از بهترین شیوه های دسترسی استفاده کنید.

---

استناد

در W3C درباره دسترسی به دکمه‌ها و آرم‌ها بیشتر بدانید

تصاویر کاربردی

ترکیب پیوندهای تصویر و متن مجاور برای یک منبع

استفاده از ویژگی های alt در تصاویری که به عنوان دکمه های ارسال استفاده می شوند

پادکست Search Off the Record را در ساعت 15:57 دقیقه گوش دهید:

تصویر برجسته توسط Shutterstock/Evgeny Atamanenko