יום שבת, 3 באוקטובר 2015

איך נקבע את מראה תצוגת הקישורים בפייסבוק - Open Graph בבלוגר


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





רוב התכנים המפורסמים בפייסבוק הם שיתוף מדפי אינטרנט. בפעם הראשונה
שמישהו משתף קישור, הסורק של פייסבוק (Facebook Crawlerיעבור
בתבנית ה- HTML של כתובת האתר כדי לאסוף ולהציג מידע אודות התוכן
בפייסבוק כמו כותרת, תיאור, ותמונה ממוזערת.

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

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




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

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

השימוש בו פשוט וקל:
הדביקו את קישור הפוסט שאתם רוצים לשתף/ לתקן ולחצו על Debug.


בחלון החדש ניתן לראות את כל המידע שהסורק הצליח לחלץ מהפוסט
ע"י לחיצה על Show existing scrape information.



לחיצה על Fetch new scrape informatio תגרום לסריקה חדשה ולתיקון
חלק מן הבעיות.



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

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

באמצעות תגי Metadata הנקראות Open Graph, אותם יש להטמיע בתבנית
הבלוג נוכל לבחור איך הקישור יוצג בפיד. האפשרויות הן עצומות וניתן לקבוע
כל פרט שתרצו ובכל רשת חברתית שקיימת, אך זה מתאים רק למי שממש מבין
בנושא ה- HTML (כל המידע נמצא ב- The Open Graph protocol).

לפני התקנת הקוד בתבנית:
  • וודאו כי קיים ברשותכם Facebook App ID. מזהה אפליקציה של פייסבוק קיים אצל מי שכבר התקין בעבר את תיבת התגובות של פייסבוק. מדריך יצירת אפליקציה של פייסבוק ניתן למצוא כאן, בסעיף 1.
  • קראו והתחילו להשתמש במטה תג (לא חובה, אבל הוא חלק מהגדרות הקוד שתתקינו בהמשך).
להתקנת הקוד, היכנסו לתפריט מרכז השליטה של הבלוג ולחצו על "תבנית".


בצעו גיבוי לתבנית הקיימת, אליה תוכלו לחזור במידה ותהיה בעיה כלשהי.
לחצו על "ערוך HTML".


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

אתרו בתבנית  <html (נמצא בשורות הראשונות של התבנית)
הוסיפו את הקוד 'xmlns:og='http://ogp.me/ns# בסופו (לפני תו
הסגירה <) והקפידו על רווח (אצל כל אחד זה מסתיים אחרת, על פי עדכונים
ושינויים שבוצעו בתבנית).
צפייה בתמונה למטה תעזור לכם להבין היכן להדביק את הקוד.



אתרו את </head> והדביקו תחתיו את הקוד הבא:

<meta expr:content='data:blog.title' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>




לחצו על "שמור תבנית".

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

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

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


וזה עבד! 

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

סורק פייסבוק לא יצליח לחלץ מידע על תמונות הקטנות מ- 200X200 פיקסל.
גודל תמונה לתצוגה נכונה בפייסבוק צריך להיות 1200X630 פיקסל או אם
תרצו גודל 600X315 פיקסל (בניסיונות שאני עשיתי, הסורק הצליח רק עם
התמונה הגדולה).

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

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

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


זהו. ארוך אבל שווה! 
בהצלחה.

לבלוגרים העובדים במערכת WordPress ישנו תוסף מאוד קל באמצעותו 
תוכלו לקבוע את הפרמטרים המתאימים לכם עבור תצוגת הפוסטים - 
WordPress SEO by Yoast.

מוזמנים להירשם כמנויים בבלוג שלי ולקבל עדכונים במייל ו/או ללחוץ לייק 
בדף הפייסבוק של הבלוג.



4 תגובות:

  1. מעולה מעולה מעולה! אין עלייך תודה!

    השבמחק
    תשובות
    1. תודה רבה קרן. חיכיתי לפידבקים כדי לדעת שזה עובד לא רק אצלי.

      מחק
  2. אין עלייך רותי! תותחית על!

    השבמחק
    תשובות
    1. תודה רבה ביבי. נשיקות.

      מחק