טקסט חלופי – Alt Text

מה זה בכלל Alt Text?

התרגום הישיר הוא ״טקסט חלופי״, אבל אתם תתקלו במונח הזה בצורתו המקורית בעיקר: Alt Text (לפעמים גם Alt Description או Alt Attributes) והוא מתאר דבר מאוד פשוט: מדובר בתיאור שמתלבש על קוד ה-HTML ומתאר את הנראות והפונקציונאליות של תמונה בדף אינטרנט.

טקסט Alt משמש בעבור:

1. הוספת Alt Text לתמונות היא בראש ובראשונה עיקרון של נגישות לאינטרנט. משתמשים לקויי ראייה המשתמשים בקוראי מסך יקבלו פידבק על התמונה דרך הטקסט הזה כדי להבין טוב יותר את התמונה שבדף.
2. תגיות Alt Text יוצגו במקום תמונה אם לא ניתן לטעון קובץ תמונה.
3. תגיות Alt Text מספקות הקשר/תיאור טוב יותר של תמונות לסורקי מנועי חיפוש כך שאתם למעשה עוזרים להם לאנדקס את התמונה כראוי וכפי שנכון לאתר שלכם.

הטקסט המודגש בתמונה מציג את ה-Alt Text (Alt Description) של התמונה משמאל.

דוגמה ל-Alt Text

<img src = "pupdanceparty.gif" alt = "גורים רוקדים">

פורמט אופטימלי בעבור Alt Text

הפורמט הטוב ביותר מספק תיאור מהימן ואמיתי לתמונה, אך אינו מכיל ניסיונות ספאמיים למילוי מילות מפתח.
כלל האצבע במקרה הזה הוא פשוט במיוחד: עצמו את העיניים שלכם ותנו למישהו להקריא לכם את ה-Alt Text
.דמיינתם את התמונה ששמתם בדף? אתם בכיוון הנכון. התיאור צייר לכם תמונה אחרת ממה שקיים בדף? נסו מחדש.

בואו נסתכל על כמה דוגמאות ל-Alt Text שמתייחסות לתמונה הזו של ערמת הפנקייקים המגרה הזו:

תיאור סביר:

<img src = "pancakes.png" alt = "פנקייקים">

התיאור הזה הוא רק "סביר" מכיוון שהוא לא מספק מספיק מידע תיאורי.
כן, זו תמונה של ערמת פנקייקים, אבל יש עוד הרבה דברים שאפשר לומר על הדימוי הזה.

תיאור טוב:

<img src = "pancakes.png" alt = "ערמת פנקייקים עם אוכמניות ואבקת סוכר">

התיאור הזה הוא אלטרנטיבה טובה יותר מכיוון שהוא מתאר הרבה יותר את מה שיש בתמונה.
זו לא סתם ערימה של "פנקייקים" (כפי שהמחיש דוגמת הטקסט הראשון); זו ערימה של פנקייקים עם אוכמניות שמצופות באבק של אבקת סוכר!

תיאורים לא מומלצים:

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

או

<img src = "pancakes.png" alt = "לביבות פנקייק עוגות פנקות עוגות חמות עוגות חם ארוחת בוקר אוכל הטוב ביותר ארוחת הבוקר העליונה ארוחות בוקר מתכוני ארוחת בוקר מתכון לפנקייק">

אף אחת מהדוגמאות הללו איננה מומלצת.
שורת הקוד הראשונה למעשה לא מכילה טקסט כלל (שימו לב שהציטוטים ריקים),
ואילו הדוגמה השנייה מדגימה מילות מילות מפתח בטקסט שאינן מתארות את התמונה ונותנות רק ערך ״ספאמי״ לכל התיאור.

מדוע טקסט Alt חשוב?

1.    נגישות

Alt Text הוא עיקרון של עיצוב אתרים נגיש.
מטרתו המקורית (והמרכזית עדיין) היא לתאר תמונות למבקרים שאינם מסוגלים לראות אותם.

זה כולל קוראי מסך ודפדפנים שחוסמים תמונות, אך זה כולל גם משתמשים לקויי ראייה או שאינם מסוגלים לזהות תמונה חזותית.
הכללת Alt Text עם התמונות שלכם מבטיחה שכל המשתמשים, ללא קשר ליכולת הראייה, יוכלו להעריך את התוכן באתר שלכם.

2.    SEO לתמונות

השימוש ב-טקסט אלטרנטיבי בתמונות שלכם יכול לספק לכם חוויית משתמש טובה יותר באתר, אך זה עשוי גם לעזור לכם להרוויח יתרונות מפורשים ומדידים יותר של SEO
במאמץ די מינימלי.
יחד עם יישום שיטות העבודה המומלצות לשמות התמונות ושמות הקבצים, התיאורים שתשתמשו בהם עשויים גם לתרום לקידום האתר דרך התמונות שבו.

בעוד שטכנולוגיית זיהוי התמונות של מנוע החיפוש השתפרה מאוד עם השנים,
סורקי החיפוש עדיין לא יכולים "לראות" את התמונות בדף אתר כמו שאנחנו יכולים, ולכן לא חכם להשאיר את הפרשנות אך ורק בידיהם.

אם הם לא מבינים או טועים, ייתכן שתוכלו לדרג מילות מפתח לא מכוונות או להחמיץ את הדירוג לגמרי.

הנה דוגמה: גוגל אולי תראה את התמונה הבאה ותוכל לפענח שמדובר בגבר חובש עניבה ומשקפיים, שיושב ליד שולחן העבודה.

ג'ים הלפרט מהמשרד (גרסת ארה"ב)

אם אתם מנסים לדרג את האתר שלכם תחת "החיקוי של ג'ים הלפרט לדווייט שרוט",
עם זאת, תצטרכו לתת למנוע החיפוש יד והכוונה כדי שהוא יוכל לאנדקס אתכם כמו שאתם רוצים.

במובן זה, "טקסט אלטרנטיבי" מציע לך הזדמנות נוספת לכלול את מילת המפתח שלך.
כאשר השימוש במילות מפתח בעמוד עדיין מושך משקל כגורם הדירוג במנועי חיפוש,
האינטרס שלך הוא ליצור Alt Text המתאר גם את התמונה וגם אם ניתן לכלול מילת מפתח או ביטוי מילות מפתח שאליו אתה ממקד.

כיצד אוכל לכתוב Alt Text טוב?

נסו לתאר את התמונה באופן ספציפי ככל האפשר

 התיאור הזה נועד בראש ובראשונה לספק הסברי טקסט לתמונות למשתמשים שאינם מסוגלים לראות אותן.
אם תמונה באמת לא משדרת משמעות או ערך והיא רק שם למטרות עיצוב, היא צריכה להיטמע בתוך ה-CSS ולא בתוך קוד ה-HTML.

שמרו על תיאור (יחסית) קצר

קוראי המסכים הפופולריים ביותר חותכים טקסט אלטרנטיבי (ALT) אחרי בערך 125 תווים, לכן רצוי לשמור על התיאורים במגבלות ספירת התווים הזו, או אפילו פחות.

השתמשו במילות המפתח שלכם

ה-Alt Text מאפשר לכם הזדמנות נוספת לכלול את מילת המפתח שלך בעמוד, וכך הזדמנות נוספת לסמן למנועי חיפוש שהדף שלך רלוונטי ביותר לשאילתת חיפוש מסוימת.
העדיפות הראשונה שלכם צריכה להיות תיאור ומתן הקשר לתמונה, אבל אם הגיוני לעשות זאת, תכללו את מילת המפתח שלכם ב-Alt Textשל תמונה אחת לפחות בעמוד.

 בהוספת ALT הימנעו מ״ספאם״ של מילות מפתח

גוגל לא תחסיר לכם נקודות בעבור Alt Text שנכתב בצורה גרועה, אבל אתם יכולים להסתבך אם תשתמשו בו כהזדמנות למלא כמה שיותר מילות מפתח רלוונטיות שתוכל לחשוב עליו.
התמקדו בכתיבת Alt Text תיאורי המספק הקשר לתמונה, ואם אפשר, תכללו מילת מפתח רלוונטית אחת, לא יותר מזה.

אל תשתמשו בתמונות כטקסט

כאן אני מדבר אתכם פחות על שיטות עבודה מומלצות ויותר עיקרון כללי לפיתוח אתרים ידידותי לקידום שלכם.
מכיוון שמנועי חיפוש אינם יכולים לקרוא טקסט בתמונות שלך, עליך להימנע משימוש בתמונות במקום מילים.
אם עליכם לעשות כן, הסבירו מה אומרת התמונה שלכם ב-"טקסט האלטרנטיבי" כדי שגם גוגל יוכלו לקרוא, להבין את התוכן ולקדם אותו בהתאם.

לעולם אל תתחילו תיאור תמונה במילים: ״תמונה של״

ההנחה היא שהטקסט האלטרנטיבי שלכם מתייחס לתמונה, כך שאין צורך לציין את העובדה הזו, וזה מגביל את אורך התיאור שלכם.

אל תשכחו להשתמש בכלי של התיאור הארוך

השתמשו בתג longdesc=”” כשאתם זקוקים לתיאור ארוך ומפורט יותר בעבור התמונות שלכם.

אל תזניחו טפסים וכפתורים

אם טופס באתר שלך משתמש בתמונה ככפתור "שלח", וודאו שאתם נותנים גם לו תיאור.
לחצני תמונה צריכים להיות בעלי Alt Attributes המתארות ​​את פונקציית הכפתור כמו "חיפוש", "החל כעת", "הירשם" וכו׳.

איך נראה Alt Text טוב?

בואו נסתכל על כמה דוגמאות Alt Text בפעולה:

תיאור טוב:

<img src = "bird.png" alt = "תרנגול">

תיאור טוב יותר:

<img src = "bird.png" alt = "תרנגול קורא">

התיאור הכי טוב:

<img src = "bird.png" alt = "תרנגול אדום-חזה קורא"

תיאור טוב:

<img src = "escalator.jpg" alt = "איש במדרגות נעות">

תיאור טוב יותר:

<img src = "דרגנוע הנפלאה" alt = "אדם הולך על במדרגות נעות">

התיאור הכי טוב:

<img src="escalator.jpg" alt="גבר עם תרמיל הולך במדרגות הנעות">