איך אופטימיזציה לתמונות תפקח לגוגל את “העיניים”

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

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

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

התמונה באדיבות Tim Mcrae

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

1. שימושיות – לא לכל משתמשי האינטרנט ראייה מושלמת, למעשה חלקם אף לא רואים כלל ומשתמשים במספר פרמטרים כדי להבין מה יש בתמונות. בנוסף יש מקרים בהם אנשים גולשים באמצעות screen reader (למרות שבימינו זה כבר נדיר).
2. טרפיק (תעבורה) – אופטימיזציה נכונה לתמונות יכולה להגדיל משמעותית את הסיכוי, לכך שהן יופיעו במיקומים גבוהים כאשר מחפשים תמונות בגוגל (images.google.co.il) – מה שעשוי להגדיל את הטרפיק הכולל לאתר שלכם (קראו על ניסוי הטרפיק הגדול שעשיתי כדי לקבל רעיונות לאפיקי תעבורה נוספים).
3. Targeting – כאשר אנחנו מטרגטים דף מסויים על מילת מפתח X, אופטימיזציה נכונה של התמונות בדף עבור אותו ביטוי X מסייעת בחיזוק רלוונטיות הדף בעבור שאילתות חיפוש רלוונטיות. או במילים אחרות – אם אתם רוצים לחזק את הדף בביטויי שאתם מקדמים, אופטימיזציה נכונה לתמונות בדף יכולה מאד לסייע.

הוסיפו טקסט איכותי לתג ה-ALT

זהו אותו מלבן קטן שמופיע ליד התמונה כאשר נעמדים עליו עם הסמן של העכבר (alt מהמילה alternative – חלופי). כך מגדירים אותו בקוד ה-HTML:

<img src=”egypt-airplane.jpg” alt=”מטוס מצרי משנת 1995″/>

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

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

<img src=”ball.jpg” alt=””/> לא מומלץ

<img src=”ball.jpg” alt=”ball”/> עדיף

<img src=”ball.jpg” alt=”blue ball in the field”> הכי טוב

<img src=”ball.jpg” alt=”blue ball buy big balls and small beautiful ball”/> להימנע בכל תוקף!

המקרה הרביעי היא הגרוע מכולם משום שהוא גובל בספאם מהסוג דחיסת מילים (Keyword Stuffing), שיכול לגרום לענישה של האתר ופגיעה בדירוגיו האורגניים.

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

תנו לקובץ התמונה שם מתאים

חשוב לתת לכל קובץ תמונה שם ייחודי ולא סתם שמות חסרי משמעות כמו img00342.jpg. אם זוהי תמונה של כלב, השם brown-dog.jpg יהיה הרבה יהיה משמעותי עבור גוגל ויספק לו רמז נוסף בנוגע לאובייקט שמצוי בתמונה. מלבד שיפור האופטימיזציה עבור מנועי החיפוש, שם רלוונטי לתמונה יכול להגדיל את הסיכוי שהיא תמצא בתוצאות חיפוש התמונות של גוגל – מה שיכול להגדיל את הטראפיק לאתר. הכלל הזה כמובן פחות רלוונטי באלגוריתם של גוגל.ישראל, שכן בדיקה קצרה תראה כי שמות הקבצים הם לרוב באנגלית.

פזרו סביב התמונה טקסט רלוונטי

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

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

הוסיפו caption לתמונה

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

יש לזה 2 יתרונות עיקריים:

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

איך מוסיפים?

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

שלב א’: הוסיפו את קטע הקוד הבא לקובץ CSS חיצוני או הישר מתחת ל- <HEAD> בתבנית שלכם:

<style type=”text/css”>
.picture { background-color: #F9F9F9;
border: 1px solid #CCCCCC; padding: 3px;
font: 11px/1.4em Arial, sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>

שלב ב’: במקום בו תרצו שהתמונה תופיע, הוסיפו אותה באמצעות קוד ה- HTML הבא שכבר כולל את ה-caption. התהליך זהה להוספה רגילה של תמונה אלא שהקוד הזה פשוט הוכנס לתג <DIV>.

<div class=”picture choose left or right” style=”width:image width+2px;”> <img src=”image sourch path” width=”image width” height=”image height” alt=”alt text goes here” /> <br />image caption goes here</div>

* כמובן שיש למלא את כל הפרמטרים המודגשים כאן בהתאם לצרכים שלכם.

בידקו שאין חסימה בקובץ robots.txt

קובץ זה מגדיר לזחלנים מה ניתן לאנדקס באתר ומה לא ויושב פיזית בשורש (ROOT) של ההיררכייה. אם ברצונכם לאפשר לגוגל לאנדקס את התמונות כך שיופיעו בחיפושים של google images, חשוב לא לכלול שום שורה שתחסום את הגישה לתיקיית התמונות. יש 2 סוגי פקודות לחסימת תמונות: חסימת התיקייה בה מאוחסנות התמונות בהיררכייה וחסימת הרובוט שמאנדקס את התמונות. וודאו שאין בקובץ ה- robots.txt התייחסות לאחת מ-2 החסימות הללו.

דוגמא לפקודה שתחסום את כל סוגי הזחלנים מלאנדקס את תיקיית התמונות:

User-agent: *
Disallow: /images/

דוגמא לפקודה שתחסום את זחלן התמונות של גוגל מלאנדקס כל תיקייה שהיא:

User-agent: Googlebot-Image
Disallow: /

השתמשו בתמונות איכותיות ורלוונטיות לתוכן

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

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

ביחרו בפורמט האופטימלי לקובץ

גוגל מציג תמונות בכל הפורמטים הנפוצים – gif, jpg, png, bmp ואין שום ראייה לכך שיש לו העדפה מסוימת. יחד עם זאת, אופטימייזרים רבים טוענים כי תמונות גדולות מהרגיל יקבלו עדיפות קטנה יותר משום שהן יכולות להשפיע לרעה על זמן טעינת העמוד (למשל תמונות מהפורמט BMP גדולות מהרגיל). בנוסף, אנשים לרוב נוטים לקבל חווית גלישה טובה יותר מצפייה בתמונה נקיות, בהן אפשר לראות את הפרטים הקטנים.

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

לקריאה נוספת: עוד מידע על אופטימיזציה למנועי חיפוש