שליטה על תמונה מצורפת ללינק
,

שליטה על התמונה שתוצג בשיתוף לינק בפייסבוק

by

שתפו

שליטה על התמונה שתוצג בשיתוף לינק בפייסבוק (share links)

רבים מבעלי ומפתחי אתרים נתקלו לא פעם בסיטואציה בה משתפים לינק של אתר או פוסט בפייסבוק, והתמונה המוצגת באופן אוטומטי איננה התמונה אותה היינו רוצים שתוצג.
התמונה המוצגת בטעות היא לרוב תמונה כלשהי שנמצאת באתר כגון הלוגו. הבעיה מחמירה כאשר התמונה המוצגת איננה מתאימה מבחינת הגודל או הרזולוציה ונראית רק בפוסט עצמו.
אז איך באמת שולטים על איזו תמונה תופיע בשיתוף לינקים בפייסבוק ואיך דואגים שהיא תופיע בצורה טובה?
הסוד נמצא באלמנט שנקרא open graph) OG).
Open graph זהו פרוטוקול המאפשר ל-URL של דף אינטרנטי לאחסן בתוכו מידע עשיר אשר ניתן יהיה לעשות בו שימוש.
המידע הבסיסי אותו הפרוטוקול מאחסן הוא:
og:title – כותרת של כתובת ה-URL. זה הכיתוב שיופיע בצמוד ל-URL בעת שיתוף הלינק בפייסבוק.
og:type – סוג התוכן המופיע ב-URL.
og:image – התמונה שתופיע בעת שיתוף ה-URL.
og:url – ה-URL עצמו.

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

WordPress
בחלק גדול מתבניות הפרמיום, אופציה זו מגיע מובנית וניתן להפעילה מחלק ההגדרות של התבנית. במידה ואין אז ניתן להתקין פלאגין המכיל תכונה זו, המפורסם שבהם הוא YOAST SEO.
יש לעדכן תחת אפשרויות social את דף הפייסבוק של העסק, וכאשר מקליקים על לשונית facebook, יש לסמן את add open graph meta data ותחת image url יש לעדכן את התמונה שנרצה שתופיע בשיתוף הלינק של האתר בפייסבוק.

בחירת תמונה לשיתוף לינק

בחירת תמונה לשיתוף לינק

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

בחירת תמונה לשיתוף לינק

WIX

עבור אתרי wix, האופציה של עדכון התמונה עבור שיתוף בפייסבוק נמצאת תחת העורך בנתיב הבא:
Settings > Social Settings > Upload Thumbnail > choose an existing image or click Upload Images

בחירת תמונה לשיתוף לינק

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

  • האם תגיות open graph מוגדרות באתר – על מנת לבדוק כי אכן התגיות מוגדרות (אמורות להופיע במידה ועקבתם אחרי ההוראות), יש לגלוש לאתר (דפדפן כרום), להקיש על כפתור ימני ו-inspect element. בין תגיות ה-head, אמורות להופיע תגיות ה-open graph. במידה והן אינן מופיעות, יתכן כי לא הפעלתם את התכונה בתבנית הפרימיום, בתוסף הייעודי או לא הזנתם אותה ידנית.

להלן דוגמא כיצד אמורות להופיע התגיות באופן תקין:

בחירת תמונה לשיתוף לינק

  • תקינות מופע תגית open graph – ישנם מקרים בהם מופיעות תגיות כפולות. מקרים אלו קורים במידה ומותקנים שני תוספים עם אפשרות open graph. במקרה זה מומלץ להסיר או לכבות אחד מהם.
  • גודל תמונות – פייסבוק ממליצה להגדיר תמונות לשיתוף עם גודל מינימלי של 200X200 פיקסלים. במידה והגדרתם תמונה קטנה מזה, פייסבוק עלול לא להתייחס אליה.
  • שמות קבצי תמונה – שמות קבצי תמונה עם רווחים או סימנים לא מקובלים יכולים להוות בעיה. עדיף להעלות תמונות כאשר שם הקובץ הינו מחרוזת רציפה של תווים.
  • מידע מלא בתגיות – פייסבוק מעדיף שאנו נגדיר את המידע בתגיות כגון שם האתר, כותרת וכדומה. כאשר מידע זה אינו מוגדר, הוא יימשך מהאתר כחלק מהממשק והדבר עלול להביא לתוצאה לא רצויה מבחינתנו.

במידה ועדין ישנן בעיות במופע התמונות בשיתוף, ניתן להיכנס לכלי הניטור של פייסבוק בשם facebook linter או face url debugger כאן
נזין את כתובת האתר שלגבי שיתוף הלינק שלו יש לנו בעיה, בהקלקה על show existing scrape information נוכל לצפות במידע שפייסבוק שולף לגבי ה-url שלנו .
במידה וישנו error מסוים, הוא יופיע באדום.

לאתר שתיקנו את הבעיה (כגון העלאת תמונה בגודל המומלץ), נקליק על fetch new scrape information. פייסבוק ינקה את ה-cache לגבי ה-url שלנו ויבצע סריקה מחדש.

בחירת תמונה לשיתוף לינק

* במידה ואתם משתמשים בתוספי cache באתר, יש לרוקן את ה-cache לפני ביצוע סריקה מחדש דרך הממשק של url debugger.

בהצלחה, דייזי עיצוב גרפי www.daisydesign.co.il

שתפו

7 תגובות על “שליטה על התמונה שתוצג בשיתוף לינק בפייסבוק”

  1. תמונת פרופיל של יוני
    יוני

    מאמר מועיל מאוד. תודה רבה.

  2. תמונת פרופיל של לימור
    לימור

    תודה רבה, המאמר מועיל מאוד,
    אך אם אני רוצה שלכל עמוד שעושים לו שייר תיהיה תמונה שונה,
    איך מגדירים תמונה לעמוד?

  3. תמונת פרופיל של דייזי עיצוב גרפי
    דייזי עיצוב גרפי

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

  4. תמונת פרופיל של אסי
    אסי

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

    1. תמונת פרופיל של דייזי עיצוב גרפי
      דייזי עיצוב גרפי

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

  5. תמונת פרופיל של אסי
    אסי

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

  6. תמונת פרופיל של אסי
    אסי

    גם אחרי שהחלפתי תמונה בדיוק לגודל של 200/200 זה עדיין לא התעדכן, גם הכלי של פייסבוק נשאר על HTML ישן שלי ולא מתעדכן לחדש, ממש מוזר…

כתיבת תגובה

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