קידום תמונות בגוגל: טקסט חלופי, שמות וגודל.

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

איך גוגל מבין תמונה

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

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

טקסט חלופי: מה זה ולמה הוא כפול

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

• נגישות: קוראי מסך מקריאים אותו לאנשים עיוורים או לקויי ראייה. לפי התקן הישראלי IS 5568, שמבוסס על WCAG, תמונה שמוסיפה מידע חייבת חלופה טקסטואלית. הסבר מלא יש במאמר על נגישות אתרים בישראל.
• הבנה של גוגל: גוגל משתמש בו כדי לדעת מה בתמונה ואיך היא קשורה לעמוד.

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

איך כותבים טקסט חלופי טוב

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

שלוש דוגמאות לאותה תמונה

• חלש: "תמונה1" או "IMG_4521".
• דחוס: "שיפוצים באר שבע שיפוץ דירות קבלן שיפוצים זול".
• טוב: "מטבח אחרי שיפוץ, עם משטח עץ, אריחים לבנים ותאורה מעל האי".

מתי לא צריך טקסט חלופי

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

שם הקובץ

לפני שמעלים תמונה, נותנים לה שם שמתאר אותה. IMG_4521.jpg לא אומר לגוגל כלום. kitchen-renovation-white-tiles.webp אומר הרבה. שמות קצרים באנגלית, באותיות קטנות, עם מקפים בין המילים, הם הבחירה הנוחה ביותר: הם לא מתפרקים לרצף של סימנים כמו שמות בעברית, והם עובדים בכל מערכת.

גודל ומשקל: איפה רוב האתרים נופלים

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

• מקטינים כל תמונה בערך לגודל שבו היא מוצגת בפועל. תמונה שמוצגת ברוחב 600 פיקסלים לא צריכה להיות ברוחב 4,000.
• שומרים בפורמט מודרני כמו WebP, שבדרך כלל שוקל הרבה פחות מ-JPG באיכות דומה. ללוגו ולאייקונים מתאים לרוב SVG.
• מכינים כמה גדלים לכל תמונה, כך שבטלפון תיטען גרסה קטנה ובמחשב גדולה יותר.
• טוענים תמונות שנמצאות נמוך בעמוד רק כשגוללים אליהן (lazy loading). את התמונה הראשית במסך הראשון דווקא טוענים מיד.
• מגדירים רוחב וגובה לכל תמונה, כדי שהעמוד לא יקפוץ בזמן הטעינה.

הסבר מעמיק יש במאמרים על מהירות אתר ועל מהירות אתר ועיצוב.

הקשר בעמוד וכיתובים

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

תמונת שיתוף

כששולחים קישור לאתר בוואטסאפ או מפרסמים אותו בפייסבוק, מופיעה תצוגה מקדימה עם תמונה, כותרת ותיאור. את התמונה הזו קובעים בקוד, בתגית og:image. בלי תגית כזו, הרשת בוחרת תמונה בעצמה, ולפעמים זה האייקון של כפתור הוואטסאפ או חתיכה חתוכה מהלוגו. תמונת שיתוף טובה היא תמונה ייעודית במבנה רוחבי, עם הלוגו או הצילום המרכזי, שנראית ברורה גם בגודל קטן בתוך צ'אט. לכל עמוד חשוב, כמו עמוד שירות או מאמר, כדאי תמונה משלו. זה לא משפיע ישירות על הדירוג בגוגל, אבל משפיע מאוד על הסיכוי שמישהו ילחץ על הקישור ששלחתם.

טקסט בתוך תמונה

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

תמונות אמיתיות או תמונות מאגר

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

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

איך זה נראה בטלפון

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

צ'קליסט לפני שמעלים תמונה

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

לסיכום

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