• Mekademet

'אלט טקסט' ALT TEXT - אופטימיזציה לתמונות באתרי WIX


תמונות הן אחד המקורות למידע ויזואלי שקיים ברשת. הרבה גולשים פונים לחיפושים הויזואליים על מנת להגיע למקורות מידע הרלוונטיים עבורם. גם אם הם לא מחפשים מוצר ספציפי וגם אם כן. עוד בדף תוצאות Google כבר מציע לנו אופציה של מקורות ויזואלים לחיפושים שלנו. איך זה קורה? באמצעות הגדרת ALT TEXT עבור התמונות באתר.

ככה זה נראה:


מה זה ALT TEXT?


אלט טקסט - ( ALT TEXT (alternative text - הוא תיאור מילולי לתמונה שמסבירה את התוכן שלה. המונח בדומה לכותרות הייררכיות (H1, H2) ולתגי מטא אחרים בא מעולם שפת הקוד סימון-html. כאשר אתר נבנה על ידי שפת HTML , היו מגדירים alt text יחד עם מקור התמונה כדי לקרוא, למקם ולהסביר תמונות. זה נראה בצורה כזאת בערך:

<img src="img.jpg" width="600px" height="200px" align="center" alt="My Picture"

רב האתרים כבר נבנים בפלטפורמות לבניית אתרים כאשר אנו פשוט שולפים את התמונות ממאגר התמונות שלנו וממקמים במקום הרצוי על דף באתר. לא מסתבכים עם קוד HTML. אבל! לתגית ALT עדיין נשארה חשיבות רבה.


למה זה מיועד?

יש כמה שימושים לתגית alt.


נגישות וחווית המשתמש

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

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


למטרת SEO

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


המלצות לאופטימיזצית תמונות באתר כולל המלצות של GOOGLE

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

להלן 10 המלצות לתיאורי alt text:
  • תיאור מילולי של התמונה צריך לשקף כמה שיותר את מה שרואים בתמונה

  • מומלץ גם להשתמש במילות מפתח רלונטיות לאתר, אך ללא הצפה מוגזמת וללא כל סיבה

  • התיאור לא צריך להיות ארוך מדי

  • לא מומלץ להשתמש בתיאור ב'תמונה של…', 'תיאור של….' זה כבר מובן מאליו שמדובר על תמונות.

  • לא מומלץ ולא כדאי להפוך לקובץ תמונה את הטקסט שהוא ביטוי מפתח חשוב למנועי חיפוש. חשוב שהוא ישאר כטקסט.

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

  • אם התוכן הויזואלי שבתמונה חשוב לנושא של אתר, מומלץ למקם את התמונה כמה שיותר למעלה, כמה שניתן above the fold (קו דמיוני שעובר במסך גלישה המצריך מהגולש להתחיל לגלול מסך למטה).

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

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

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

כמה אתרים מומלצים לדחיסת תמונות:

https://tinypng.com/

https://shortpixel.com/


איך מגדירים תגיות ALT באתר וויקס? בבלוג?

בדוגמה למטה ניתן לראות איפה מגדירים alt text בתמונה בודדת באתר וויקס. שימו לב להגדרה נוספת לתמונה כמו tooltip. פה הכוונה לכיתוב שמופיע ברגע שמעבירים עכבר על התמונה.

דוגמה להגדרת ALT TEXT

בגלריות של תמונות גם חשוב להגדיר כותרת ייחודית לכל תמונה. דרך settings של הגלריה מגיעים לאוסף של תמונות, לוחצים על כל תמונה ומגדירים לה כותרת (Title). היא משמשת כ-alt text במקרה הזה.


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


דוגמה להגדרת ALT TEXT לתמונה בבלוג


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

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



להערות, שאלות - צרו קשר