אופטימיזציה לתמונות באתרי וורדפרס מבחינת SEO

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

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

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

בחרו תמונה מתאימה

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

מספר דברים שכדאי לשים לב אליהם:

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

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

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

בחירת שם נכון לתמונה

אופטימיזציה לתמונה מתחילה בבחירת שם מתאים לתמונה. נכון יהיה להשתמש במילים / ביטויים (keywords) שמתארים על מה התמונה מדברת. אתם מעוניינים שגוגל יידע מהו תוכן התמונה. לדוגמא אם זו תמונה של שקיעה בכותל המערבי בירושלים, שם התמונה צריך להיות משהו כמו wailing-wall-sunset-jerusalem ולא DSC4536.jpg חלילה.

מכיוון והכותל המערבי (wailing wall) הוא נושא התמונה נדאג כי ביטוי זה יופיע בתחילת שם הקובץ. כלל אצבע חשוב הינו לא להשתמש בקו תחתון ״_״ בשם התמונה אלא בקו מפריד ״-״.

בחרו גודל נכון לתמונה

זמן הטעינה של האתר חשוב מבחינת חווית המשתמש ולכן יש לו השפעה גם מבחינת קידום האתר מבחינת גוגל. ככל שהאתר יעלה מהר יותר, מנוע החיפוש של גוגל ״יאהב״ אותו יותר ולתמונות השפעה משמעותית על זמן הטעינה של דף מסויים. מצב בו אתם מעלים תמונה מאד גדולה אשר בסופו של דבר מופיעה בקטן אינו מצב רצוי, כלומר המנעו מסיטואציה בה אתם משתמשים בתמונה בגודל 1500×2500 המופיעה באתר שלכם כתמונה בגודל של 250X150.

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

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

אם מדברים על תמונות רקע המופיעות על מסף מלא, סביר להניח כי אלו יוטמעו ב CSS כ background-image יחד  עם background-size:cover. ניתן לומר שרוב האנשים מעלים תמונות ברוחב 1920×1080 פיקסלים במקרה זה, אך בהחלט ניתן לרדת מטה וזאת בהתאם למה שמוצג בתמונה ואופי האתר.

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

הקטינו את משקל התמונה

השלב הבא באופטימיזציה לתמונות הוא להקטין את משקל התמונה ככל הניתן, זאת כאשר איכות התמונה עדיין לשביעות רצונכם. מכיוון ולמהירות הטעינה של האתר ישנה השפעה על קידום האתר (ובטח שהיא משפרת את חווית המשתמש) חשוב כי תקפידו לעשות זאת. ישנם כלים המאפשרים לדחוס את התמונה לפני שאתם מעלים אותה כגון JPEGmini Lite או ImageOptim וניתן לבצע זאת גם על ידי אתרים שונים כגון TinyPNG.

JPEG mini Lite – אופטימיזציה לתמונות באתר וורדפרס

JPEG mini Lite – אופטימיזציה לתמונות באתר וורדפרס

ישנם אף מספר תוספי וורדפרס שעושים את העבודה הזו בשבילכם והראוי ביותר לפי דעתי הוא EWWW Image Optimizer, עם זאת ישנם לא מעט חברות אחסון אשר מונעות מפלאגינים אלו לעשות את העבודה. בכל מקרה לאחר שהעליתם את התמונה תוכלו לבדוק האם התמונה דחוסה כראוי בעזרת כלים כגון GTmetrix או Google Page Speed Insights.

צרפו את התמונה למאמר

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

כיתוב (Captions)

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

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

טקסט חלופי וכותרת התמונה (Alt Text)

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

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

דוגמא לטקסט חלופי לתמונה

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

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

הצטרפו לרשימת התפוצה!

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

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

שימו לב בדוגמא הבאה כי התמונה שוברת את הגבול הימני של הטקסט וזה מקשה על קריאה של הטקסט בהמשכיות.

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

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

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

צרו מפת אתר לתמונות

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

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

במידה ואתם משתמשים בתוסף WordPress SEO by Yoast, האפשרות ליצירת מפת XML מתבצעת בלחיצת כפתור. אם אתם מעוניינים לקרוא עוד על אפשרות זו תנו מבט במדריך לשימוש בתוסף Worpress SEO by Yoast.

מפת xml - וורדפרס seo

פרוטוקול OpenGraph

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

<meta property="og:image" content="http://example.co.il/link-to-image.jpg" />

תג זה יוודא כי התמונה המצורפת תכלל כאשר תבצעו שיתוף לאותו מאמר בפייסבוק. במידה והוספתם תמונה למאמר שלכם ואינכם רואם אותה בשיתוף בפייסבוק, לחצו על Fetch new scrape information לאחר שתכניסו את הכתובת של אותו מאמר ב Open Graph Object Debugger. כלי זה יכול לעזור לכם לזהות את כל הבעיות שקיימות לעמוד מסויים מבחינת השיתוף בפייסבוק.

פרוטוקול OpenGraph קיים גם ברשתות חברתיות נוספות כגון Twitter, Pinterest וכו׳ ודרך אחת להגדיר אותו היא בעזרת התוסף WordPress SEO by Yoast.

לסיכום

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

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

אם יש לכם טיפים או דרך שונה לבצע אופטימיזציה לתמונות באתרי וורדפרס אתם מוזמנים לשתף אותנו בתגובות…   🙂

רועי יוסף
רועי יוסף

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

{ 3 תגובות… הוסף אחת }
  • נופר 16 במרץ 2016, 1:20

    תודה רבה על המדריך הנפלא 🙂 אני מאד אוהבת את הבלוג שלך ולומדת ממנו רבות על וורדפרס !!!

  • עידן 9 ביוני 2016, 7:45

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

השאירו תגובה

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

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