אופטימיזציה לתמונות – כל מה שצריך לדעת (ולא רק תגי ALT…)
אופטימיזציה בסיסית לתמונות היא אחד הדברים הראשונים שבדרך כלל לומדים איך לעשות במסגרת אופטימיזציה פנימית לאתר (On Page).
המטרה של אופטימיזציה לתמונות היא בראש ובראשונה לעזור לגוגל להבין טוב יותר מה יש בתמונות שאנחנו שמים באתר (אם כי סביר להניח שבעידן ה-AI הוא הרבה יותר טוב בזה מאשר פעם…).
תמונות שעברו אופטימיזציה יכולות לתרום שלנו בכמה דרכים:
- הדף ובו התמונות יופיע באחוזים גבוהים יותר בתגובה לשאילתות שמתייחסות אליהן (לדוגמה, "כלב רועים גרמני").
- התמונות עצמן יופיעו בין התוצאות הרגילות ("המעורבבות") של גוגל. לדוגמה, תמונה יכולה להופיע מעל או מתחת לתמונה אחרת, כאשר בעמוד התוצאות יש גם תוצאות וידאו, טקסט, AI וכו'.
- בחיפושים בטלפון (שהם רוב החיפושים כיום), יש גם הרבה דפים שמופיעים עם תמונות צמודות לידן, מה שמבליט את העמוד ומעלה את אחוז הלחיצות עליו.
- התמונה תופיע בחיפוש הייעודי לתמונות. אומנם לא מדובר באפשרות חיפוש מאוד פופולארית של גוגל, אבל עדיין אפשר "לקבל" ממנה כמה קליקים ליום עבור חיפושים פופולאריים.
- האצה של האתר: תמונות רבות שאנחנו מעלים מהמצלמה של הטלפון או מקבלים מהגרפיקאים שלנו שוקלות לא מעט, למרות שאפשר לצמצם את הגודל שלהן ללא פגיעה באיכות שלהן.
לפני הכול - שימוש בתמונות מקוריות ואיכותיות
לפני שאנחנו בכלל מתחילים לדבר על אופטימיזציה ברמה הטכנית, צריך לעצור ולהסביר למה תמיד כדאי להשתמש בתמונות מקוריות באתר: כאשר גוגל בוחר אילו תמונות להציג והוא נתקל בתמונה רלוונטית שמופיעה בכמה אתרים, הוא יציג את התמונה מהאתר עם הסיגנלים הכי חזקים. וזה גם האתר שאליו הוא יקשר כשהגולש ילחץ על התמונה בתוצאות.
לעומת זאת, אם הוא יסרוק תמונה ייחודית שלא נמצאת באתרים אחרים, האתר שבו התמונה נמצאת לא יצטרך להתחרות על אותה התמונה עם האתרים האחרים.
כמובן שהתמונה גם חייבת להיות איכותית, ברזולוציה מספיק טובה וכזו שניתן יהיה לראות בה את הפרטים באופן ברור.
תגי ALT – להסביר לגוגל מה יש בתמונה
תגי ALT (קיצור של Alternative, חלופי) הן הדרך הקלאסית להסביר לגוגל מה יש בתמונה באמצעות טקסט פשוט. התג עצמו נמצא בקוד ה-HTML והוא חלק מתג התמונה, img. הגולש עצמו לא רואה את מה שכתוב בתג, אלא אם כן הוא משתמש בתוכנת עזר להקראת מסך שמיועדת לכבדי ראייה.
אפשר להכניס תגי ALT בעברית וגם להאריך אותם קצת יותר ל-5 או 6 מילים, אבל עדיף שלא מעבר לכך.
שימו לב – תג ה-ALT לא מיועד לתמונות דקורטיביות שהן חלק מהעיצוב של הדף.
איפה קובעים את תג ה-ALT במערכות ניהול אתרים מודרניות?
כיום בדרך כלל לא עורכים ישירות תג תמונה, אלא מעלים קובץ והמערכת יוצרת תג נפרד לכל תמונה.
את המקום שמיועד לתג ה-ALT בממשק הזנת התוכן למערכת אפשר למצוא בדרך כלל היכן שרשום "תיאור חלופי", "טקסט אלטרנטיבי" וכו'.
לעיתים (כמו למשל בוורדפרס) יש שדה נוסף בשם "כיתוב" או "טקסט נלווה". אלו בדרך כלל מתייחסים לטקסט שמופיע מתחת לתמונה, אבל הוא אינו תג ALT.
עוד דבר שכדאי לדעת:
במערכות רבות, כאשר מעלים תמונה אחת ומשתמשים בה בכמה מקומות, תג האלט שנקבע לה נשמר בכל מקום בו היא מופיעה.
האם בעמודים צפופים צריך שלכל תמונה יהיה תג ALT?
נניח שיש לכם עמוד קטגוריה עם הרבה מאוד מוצרים וההבדלים ביניהם הם מינוריים (לדוגמה, כד עם עיטור פסים וכד עם עיטור משולשים). האם כל כך הרבה תגי ALT באותו עמוד לא יבלבלו את גוגל?
כל עוד התיאור של כל תמונה יהיה ברור ולא תשתמשו במילות מפתח כלליות לכל התמונות ("כד מעוצב", "כד מעוצב לסלון"), אין שום בעיה.
אם אתם רוצים להימנע מעומס תגי ALT בעמוד צפוף במיוחד, תוכלו לשים כל תמונה גם בעמוד נפרד (לדוגמה, בעמוד מוצר) ולא להשתמש בתגי ה-ALT בעמודים כמו עמודי קטגוריות. עם זאת, סביר להניח שזה ידרוש שינוי בתבנית.
כיצד מוצאים תגי ALT חסרים ואיך משלימים אותם?
כדי למצוא תגי ALT חסרים אפשר להשתמש בכלי SEO Audit, שנמצאים ברוב כלי ה-SEO כמו Ahrefs או SEMRUSH.
אפשרות אחרת היא באמצעות Screaming Frog דרך פילטר Missing Alt Text בטאב Images לאחר סריקת האתר.
במידה ויש מאות או אלפי תגי ALT חסרים שאין אפשרות למלא ידנית, ניתן לשלב שימוש במערכות ראייה של בינה מלאכותית (כגון Vision AI של גוגל) כדי לייצר קבצי נתונים עם תגי ALT אוטומטים על פי מה שהמערכת "רואה" בתמונה, ולאחר מכן לייבא את התגים למערכת ניהול התוכן דרך תוסף או API (גישה ישירה למתכנתים).
שימוש בטקסט נלווה על מנת להסביר לגוגל את ההקשר של התמונה
עוד דרך מומלצת לעבוד עם עמודים שמכילים תמונות היא באמצעות טקסט נלווה. הכוונה היא לטקסט "שמקיף" את התמונה ומסביר מה יש בה.
מהבחינה הזו אין בעיה לשלב כמה תמונות באותו העמוד, כל עוד ברור איזו פסקה מתייחסת לאיזו תמונה. לחילופין, אם מדובר בגלריה, אפשר ליצור לכל תמונה עמוד שמסביר עליה או לפתוח כל תמונה בשכבת על (Overlay).
מה לא כדאי לעשות?
1.בדרך כלל לא כדאי לשים טקסט בתוך תמונה, אלא אם כן מדובר בטקסט שהוא חלק מהעיצוב של התמונה (לדוגמה, לוגו).
2.לא כדאי ליצור עמודים שכוללים רק תמונה, אלא עדיף לקשר לקובץ התמונה, כך שהדפדפן יפתח אותו בעצמו.
למה?
מבחינת גוגל, כאשר הוא רואה בעמוד רק תמונה, מדובר בעמוד בלי הקשר ובלי קונטקסט, הוא יחשיב אותו כעמוד באיכות נמוכה. וכשיש הרבה עמודים כאלו באתר, גם הדירוגים של עמודים "טובים" עלול להיפגע.
מה זו "טעינה עצלה" (Lazy Loading) והאם תמיד כדאי להשתמש בה?
טעינה עצלה היא טכניקה שבאמצעותה אפשר לטעון תמונות מהשרת בזמן אמת כאשר הגולש מגיע למקום בעמוד בו הן אמורות להיות מוצגות.
כך למעשה פועלים רוב הפידים ברשתות החברתיות, אבל אפשר למצוא "טעינה עצלה" גם באתרים אחרים. לדוגמה, באתרי אי-קומרס שבהם רוצים להציג רשימה גדולה מאוד של מוצרים.
החיסרון של Lazy Loading הוא שהטעינה מתבססת על Javascript ולכן חייבים לוודא שגוגל מצליח לקרוא את הסקריפט שטוען את התמונות בזמן אמת.
לחילופין אפשר בנוסף להשתמש באחד מהפתרונות הבאים ביחד עם הטעינה העצלה:
- לשים את רשימת התמונות במפת אתר לתמונות (כפי שהסברנו מקודם).
- ליצור גם קישורים פנימיים באתר שמפנים לדפים קבועים עם התמונות.
מפת אתר לתמונות ולמה צריך אותן
באופן דומה למפות אתר רגילות, יש גם מפות אתר לתמונות. אלו הן מפות שכוללות אך ורק קבצי תמונה. במפות האלו מופיעה כל עמוד באתר שיש בו תמונות והכתובת המלאה של כל תמונה.
אתרים שזקוקים למפות אתר לתמונות הן בדרך כלל אתרים שהתווספו אליהם הרבה מאוד תמונות בבת אחת, או אתרים שטוענים חלק מהתמונות דרך Lazy Load ויש חשש שלא כל התמונות יימצאו על ידי גוגל.
לא חסרים תוספים ליצירת מפות אתר לתמונות. לדוגמה, Simple Image XML Sitemap לוורדפרס. לרוב תוספי ה-SEO יש גם יכולות כאלו, אך לעיתים (כמו במקרה של Yoast), הן מתחבאות מאחורי גרסאות יקרות יותר.
כמובן שניתן גם להשתמש באינספור אתרים ליצירת מפות אתר, אבל אם המפה יורדת כקובץ, יהיה צורך לטעון אותה לאתר לאחר עדכון כל פעם מחדש.
כיווץ תמונות
כיום רוב התמונות בדפדפנים מותאמות לגודל של החלון או האפליקציה באופן אוטומטי. אבל בפועל התמונות יכולות לשקול לא מעט, וזה כבר פחות אפקטיבי לחיבורים סלולריים איטיים ואפילו רשתות Wi-Fi עמוסות. גוגל לוקח בחשבון גם מצבי קצה ולכן יעדיף להציג אתרים ששומרים על מהירות סבירה גם בחיבורים איטיים.
יש שתי דרכים להקטין את הנפח של התמונות:
1.להקטין את הממדים שלהן. כאן אפשר להפריד בין תמונות בתוך עמודים לבין תמונות בגודל מלא, שיכולות להישאר יחסית גדולות.
- תמונות בתוך עמודים עדיף שיהיו ברוחב של 1200px.
- תמונות בגודל מלא (לדוגמה, לעמודי פרויקטים), עדיף שיהיו ברזולוציה של 2560×1440. זו רזולוציה של הרבה מסכים מקצועיים, שהם עדיין לא מסכי 4K.
2.ניתן להקטין נפח של תמונות ללא פגיעה באיכות שלהן. בדרך כלל מדובר בתמונות מסוג PNG או JPG, שהם פורמטים נפוצים מאוד באינטרנט. תמונות מסוג webp או avif שצוברות תאוצה לאחרונה הן בדרך כלל כבר מכווצות.
אם עושים זאת עבור כמה תמונות מזדמנות, יש אתרים כמו tinypng.com שדורשים בסך הכול גרירה של התמונות והורדה שלהן מחדש.
אם צריך לעשות זאת בשוטף, יש תוספים לוורדפרס כמו imagify שמיועדים לכך באופן ספציפי. תוספים כאלו מסוגלים גם לבצע אופטימיזציה בדיעבד לכל התמונות שכבר קיימות על השרת.
שימו לב: אם אתם כבר משתמשים בתוסף להאצת אתרים, לפעמים הוא מכווץ תמונות אוטומטית, וכדאי לוודא את זה לפני שמתקינים עוד תוספים.
באופן כללי, השאיפה היא שתמונות ישקלו פחות מ-100kb-150kb.
התאמה מדויקת יותר של תמונות למובייל
במקרים שבהם רוצים ליצור תצוגה מדויקת יותר של האתר למובייל והתמונות שמשתמשים בהם במחשב הן פשוט גדולות מדי, יש אפשרות להשתמש בתמונות ברזולוציות שונות לכל סוג מסך. כתוצאה מכך גם האתר ייטען מהר יותר.
ההתאמה נעשית באמצעות תגים מיוחדים כמו srcset. בחלק ממערכות התוכן (כמו וורדפרס 4.4 ומעלה) זה נעשה אוטומטית כל פעם שמעלים תמונה. במערכות אחרות צריך לשנות את הקוד ידנית או להשתמש בתוסף.
התאמת תמונות לתצוגה בגוגל ניוז
גוגל ניוז הוא שירות של גוגל שמאפשר לאתרים שמציגים חדשות כלליות או תכנים חדשותיים (למשל, סקירת מוצרים חדשים) להופיע בתוצאות מיוחדות בחיפושים הרגילים או בחיפוש הייעודי:
על מנת לעשות זאת, האתרים יכולים ליצור פיד RSS נפרד או להשתמש במידע מובנה מסוג NewsArticle (מידע מובנה מכיל רצף של נתונים שלמנועי חיפוש קל יותר לעבד).
בכל אופן, על מנת שהתוצאה תופיע גם עם התמונה הנכונה בלי עיוותים או מריחות, יש כמה דברים שחשוב להקפיד עליהם:
- להקפיד שהרוחב של תמונת הכותרת בתוך עמוד הכתבה תהיה לפחות 1200px
- לציין את נתיב התמונה בתוך תג OG (Opengraph).
- לשים את הכתובת המלאה של התמונה במאפיין image בתוך מידע מובנה למאמר (Article), אם אתם עושים בו שימוש
בנוסף יש תג רובוטס ספציפי שאפשר לשים בלי להשפיע על קובץ robots.txt:
<meta name="robots" content="max-image-preview:large">
התאמת תמונות לתצוגה בגוגל דיסקבר
Google Discover הוא שירות דומה לגוגל ניוז, כשההבדל המרכזי הוא שכאן מדובר בהמלצות תוכן כלליות לאתרים שאינם בהכרח אתרי חדשות, אבל עדיין יכול להיות להן ערך עבור הגולש (לדוגמה, מדריכים שפורסמו לאחרונה).
מבחינת תמונות, הקווים המנחים של גוגל זהים כמעט לחלוטין לאלו של Google News.
התאמת תמונה לתצוגה בקישורים של AI Overviews
לאחרונה נכנסו לשימוש בארץ גם תוצאות AI Overviews. מדובר בסיכומים מתוך אתרים, כשהגולש יכול ללחוץ על פסקאות שונות ולראות על אילו אתרים היא מתבססת.
התצוגה המקדימה של האתרים דומה למדי לאלו של Discover, אך מדובר בתוכן מגוון יותר, ולכן רואים יותר מצבים שבהם עמודים מופיעים עם תמונה לא מתאימה כמו למשל הלוגו של האתר.
לכן יש כמה דברים שחשוב להקפיד עליהם:
- תמונות באיכות גבוהה וברוחב מתאים (שוב, לפחות 1200px).
- מוטב שלכל עמוד באתר תהיה לפחות תמונה אחת מרכזית, אפילו אם זו רק תמונת כותרת.
- יש סוג נוסף של מידע מובנה בשם imageobject שמיועד בעיקר לתמונות מקוריות שמפרסמים באתר. גוגל אומנם לא מקשרת אותו באופן רשמי ל-AI Overviews, אבל ייתכן שהוא יכול לעזור אם התמונות הלא נכונות מתעקשות להופיע.
לסיכום
אופטימיזציה של תמונות היא טכניקה פשוטה יחסית שיכולה להגדיל את החשיפה שלכם בגוגל. בן היתר באמצעות שימוש נכון בתגי ALT, שילוב טקסט בעמודים שכוללים תמונות, צמצום משקל התמונות עצמן והתאמה שלהן למובייל.
אופטימיזציה מתקדמת יותר מאפשרת למטב את התמונות באתר עבור הופעה בפידים ותוצאות מיוחדות של גוגל כגון גוגל ניוז, Google Discover ותוצאות ה-AI.
בהנחה ואין לכם יותר מכמה עשרות תמונות באתר שעדיין לא עברו אופטימיזציה, קל יחסית לבצע עבורן אופטימיזציה בדיעבד. אבל גם אם יש לכם אתר עם מאות או אפילו אלפי תמונות, ניתן לבצע אופטימיזציה חכמה לתמונות קיימות באמצעות שימוש בכלי AI.
