top of page
BestSite logo

אתרי WIX מתקדמים

קביעת תמונת השיתוף בפייסבוק לאתרי Wix ו Wix Studio המדריך המלא

עודכן: לפני יום 1

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

במאמר זה נעסוק בהגדרת תמונת השיתוף (og:image) ושאר תגיות Open Graph באתרי Wix ובWix Studio,  תוך הסבר על משמעות כל תג, כיצד להגדירם בפועל, ואיך לבדוק שהתוצאה תקינה בעזרת הכלי Sharing Debugger של פייסבוק.

תמונת שיתוף לפייסבוק

מה זה Open Graph?

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

התגים החשובים ביותר כוללים:

  • og:url

  • og:type

  • og:title

  • og:image

  • og:description


הסבר על כל תג  Open Graph

og:url

מה זה?  הכתובת המדויקת של העמוד.

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

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

טיפ: ודאו שה URL  כולל HTTPS ולא  HTTP


og:type

מה זה: מציין את סוג התוכן בדף (דף רגיל, מוצר, מאמר ועוד).

ערכים נפוצים:

  • website   לאתרי תדמית ודפי נחיתה

  • article   לפוסטים ובלוגים

  • product   לדפי מוצר


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

איך להגדיר ב Wix? וויקס לא מאפשרת שליטה ישירה על ערך זה. ניתן להשתמש בקוד מותאם (Velo) באתרי Wix Studio כדי לשלב אותו ידנית בתוך .

og:title

מה זה? הכותרת שתוצג בכרטיס השיתוף.

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

איך להגדיר ב Wix? דרך הגדרות SEO של כל עמוד (ב Wix Editor או ב Wix Studio), תחת "כותרת חברתית" (Social Share ).

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

og:image

מה זה? קישור לתמונה שתופיע בכרטיס השיתוף.

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

דרישות פייסבוק:

  • גודל מומלץ: 1200x630 פיקסלים

  • פורמט JPG או PNG

  • עדיפות ליחס רוחב גובה של 1.91:1

  • מינימום: 600x315 פיקסלים

איך להגדיר ב Wix / Wix Studio:

  • Editor: דרך "שיתוף חברתי" בכל עמוד.

  • Wix Studio: ניתן להוסיף תגית <meta property="og:image"> ידנית דרך תגיות מותאמות בקוד (Custom Code או Velo).

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

og:description

מה זה? טקסט קצר שמתאר את תוכן הדף.

למה זה חשוב? משפיע על ההבנה של הקהל לגבי מה שהוא עומד לקבל  זה השלב שבו הוא מחליט אם ללחוץ או לא.

איך להגדיר ב Wix?

  • Editor: דרך "תיאור חברתי"

  • Studio: כמו title, אפשר להוסיף דרך הקונפיגורציה או דרך קוד מותאם


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

איפה מגדירים את תגי Open Graph ב-Wix?

Wix Editor

  1. ערכו את העמוד הרצוי

  2. לחצו על "Page Settings"

  3. עברו ל  SEO Basics

  4. הזינו את Social Share Title, Description ו  Image

  1. בחרו עמוד במבנה האתר

  2. עברו ל  SEO & Social Share בצד ימין

  3. הזינו את Social Share Title, Description ו  Image

אין צורך להוסיף תגיות meta ידנית   Wix מטמיעה אותן אוטומטית לפי ההגדרות.

 

שימוש ב  Facebook Sharing Debugger

מה זה הכלי הזה?

זהו כלי של פייסבוק שמאפשר לכם:

  • לראות איך פייסבוק מפרשת את הדף שלכם

  • לנקות את המטמון (cache) של פייסבוק

  • לבדוק אם יש שגיאות בתגיות Open Graph

איך להשתמש:

  1. היכנסו לכתובת: https://developers.facebook.com/tools/debug/

  2. הדביקו את כתובת הדף שלכם ולחצו על "Debug"

  3. פייסבוק תציג את ה  Link Preview ואת רשימת כל ה  meta tags שנמצאו

  4. אם עשיתם שינוי בתמונה או בתגיות, לחצו על "Scrape Again" כדי לרענן את המטמון

דגשים חשובים:

  • שינוי תגיות לא ישפיע מיידית בפייסבוק בלי לבצע Scrape Again

  • ודאו שהתמונה זמינה לציבור  כלומר שאינה חסומה בהרשאות

  • בדקו תקלות נפוצות כמו Missing og:image או Image too small

  • סריקת תמונת השיתוף
ערכי ה Open Graph

 

שיתוף קישור בווטסאפ לעומת פייסבוק   תמונת השיתוף והזמנים לעדכון


כאשר משתפים קישור לאתר ב WhatsApp (באפליקציה או ב WhatsApp Web), התצוגה של הקישור נשענת על תגיות Open Graph, בדומה לפייסבוק. עם זאת, קיימים הבדלים מהותיים באופן שבו WhatsApp קוראת ושומרת את המידע הזה:

  1. אילו תגיות נטענות בווטסאפ:

    WhatsApp משתמשת בעיקר בתגיות og:title ו og:image. בניגוד לפייסבוק, היא מתעלמת בדרך כלל מ og:description, ולעיתים גם מה favicon. התוצאה היא תצוגה מינימליסטית שמכילה לרוב רק כותרת ותמונה.

  2. מטמון (Cache) איטי בהרבה:

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

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

  3. לעומת זאת בפייסבוק:

    Facebook מאפשרת רענון מיידי של הנתונים באמצעות הכלי Sharing Debugger, שבפועל שולח בקשת Scrape לשרת שלכם ושומר מחדש את התוכן שנמצא בתגיות. לכן ניתן לראות שינויים מיידיים לאחר שינוי og:image או og:title בפייסבוק אך לא בווטסאפ.

  4. למה WhatsApp מתנהגת כך?

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

  5. האם יש הבדל בין שיתוף מהמכשיר לבין WhatsApp Web?

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

 

 

סיכום

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

השקיעו כמה דקות גם בבדיקת השיתוף עם Sharing Debugger כדי לוודא שהכול עובד חלק.


Comments


<שם המושג>

<פירוש המושג>

bottom of page