שליטה על התמונה שתוצג בשיתוף לינק בפייסבוק (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

על הכותבת

דייזי עיצוב גרפי

Facebook Google+

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