איך אופטימיזציה לתמונות תפקח לגוגל את "העיניים" | AskPavel
קידום אתרים » קידום אתרים בגוגל » איך אופטימיזציה לתמונות תפקח לגוגל את "העיניים"

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

איך עושים אופטימיזציה לתמונות

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

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

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


התמונה באדיבות 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 גדולות מהרגיל). בנוסף, אנשים לרוב נוטים לקבל חווית גלישה טובה יותר מצפייה בתמונה נקיות, בהן אפשר לראות את הפרטים הקטנים.

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

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


אודות פבל ישראלסקי

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

עשוי לעניין אותך גם...

הטמעת סכמה עבור תוכן מסוג How To ו- FAQ

הטמעת Schema מסוג FAQ ו- How-to בגוגל [מדריך בסיסי 2019]

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

31 תגובות

  1. האם דוגמא לשימוש בקוד שנתת ,היא תמונה בראש הדף של Tim Mcrae.

  2. יולי דסיאטניקוב

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

    • פבל ישראלסקי

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

      • יולי דסיאטניקוב

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

        • פבל ישראלסקי

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

  3. היי פבל
    מה לדעתך אפשר לעשות שהאתר בנוי על מערכת CMS והתיקיות חסומות עם ROBOTS אבל עדיין משום מה רואים תמונות פה ושם של האתר האם כדאי לשים את התמונות על שרת חיצוני שרק מאחסן תמונות ? זה נראה לי גם יכול להוריד משקל מהעמוד לא ?

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

    ממש אחלה בלוג אגב.
    שחר

    • פבל ישראלסקי

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

      שמח שאהבת.

  5. פוסט מעולה כמו תמיד

  6. שלומי אסף

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

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

    כלומר אתה רוצה לומר שגוגל סופר את הBounce Rate של אתרים ומחשב אותו באלגוריתם תוצאות החיפוש?
    אם כן, כיצד הם יודעים לחשב זאת באשר לא מותקן GA באתר?

    כיצד גוגל יודע להתייחס לBR בין אתר לאתר? בין אופי אתר אחד למשנהו?

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

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

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

    משתמש זה יכנס לבדוק את המשרה ולאחר בדיקת העמוד הוא יצא מיד ויעלה את הBR.

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

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

    תודה על המוני פוסטים מועילים ומצויינים.

    שלך, שלומי אסף.

    • פבל ישראלסקי

      היי אסף!
      ראשית – תודה, אני שמח מאד שאהבת את מה שאני כותב 🙂

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

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

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

  7. שלומי אסף

    היי פאבל- שאלה נוספת- מה הוא הCaption שציינת? האם הוא מאפיין של אלמנט IMG, או ספאן בעל יישות זו?

    תהרוג אותי, אבל גם אני וגם הIDE שלי (או גיגולים ברשת) לא מכירים את התקן הזה.

    שלך
    שלומי.

    • שלומי אסף

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

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

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

      שבוע מצוין!!
      שלומי 🙂

      • שלומי אסף

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

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

        • פבל ישראלסקי

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

          • שלומי אסף

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

          • פבל ישראלסקי

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

      • פבל ישראלסקי

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

        • שלומי אסף

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

          • פבל ישראלסקי

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

          • שלומי אסף

            כתבת למעלה "שים לב שהם לא מאונדקסים בגרסת האינדקס של גוגל כך שהם בעצם לא נראים לדעתי" – תוכל להרחיב בנושא? למה אתה מתכוון?

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

            http://www.webdesign.org.il

          • פבל ישראלסקי

            יש רק 5 דרגות עומק בתגובה משורשרת אז אני מגיב לתגובה האחרונה שלך כאן: אם תיקח למשל דף שמכיל את תגית title (או בקישור או בתמונה) ותבדוק את גרסת ה- cache שלה, אתה לא תראה שם את הטקסט שבתגית. תוכל לקרוא כאן איך בודקים את זה: https://www.askpavel.co.il/blog/indexing-check

  8. שלומי אסף

    היי פאבל. אשמח לגנוב/לנצל פוסט זה על מנת לשמוע דעתך בנוגע לbackground-replacement.

    כעת הרמתי פרויקט העושה שימוש מאסיבי בפונטים לא מערכתיים.
    הווה אומר המון כותרות גראפיות ולא טקסטואליות. לגבי מקרה זה אני יודע שגוגל בסדר גמור עם זה מבחינת נסיוני האישי, תפוצת השיטה וההנחיה הרשמית של גוגל בנושא
    http://googlewebmastercentral.blogspot.com/2008/05/design-patterns-for-accessible.html

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

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

    אך עדיין- האם זה לגיטימי, כמה שזה ידידותי? האם השימוש שלי חצה את גבולות הBackground-replacement וגלש למחוזות הCloaking?

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

    הייתי מספיק ברור? הצלחת להבין אותי ללא הדבקת קישור? (לא שיחררנו את הגרסה עדיין)

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

    • פבל ישראלסקי

      אני לא בטוח שהבנתי אותך.

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

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

      • שלומי אסף

        אני מגיש לגוגל בדיוק את מה שהמשתמש רואה, כמו האתר הזה שהדבקתי בהודעה מקודם http://www.hineniholidays.com

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

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

  9. כתבה ממש שימושית (כמו הרוב הגדול של הכתבות פה)
    איך אני מגיעה בכלל לשורה הזו שבה כותבים את התג? האם זה בעורך התוכן של האתר?

  10. תיקון הכללי

    אני לקחתי על עצמי לשנות לפי הכללים שנתת
    מקווה שכמו תמיד אני יצליח עם העיצות שלך…

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

תודה רבה על השיתוף ! לייק קטן לעמוד שלנו, ותשארו בעניינים על כל מה שחדש כאן :

שתפו את הפוסט עם חברים