אופטימיזציה לתמונות באתרי וורדפרס – קידום אתרים | SEO

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

כיתוב

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

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

טקסט חלופי וכותרת התמונה

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

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

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

על הדרך, הצטרפו לרשימת התפוצה !

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

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

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

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

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

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

 

פרוטוקול 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 וכו׳ וניתן להגדיר אותו בעזרת התוסף Yoast WordPress SEO, מידע נוסף על הגדרותיו ניתן למצוא במאמר שכתבתי לאחרונה.

לסיכום

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

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

 

רועי יוסף

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

תגובות פייסבוק

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

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

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

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

השאירו תגובה

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

כאשר משתמשים בפונקציה get_template_part, המשתנים מקובץ ה php שקורא לה אינם עוברים ל template part...