השקעתם שעה בכתיבת פוסט ל-LinkedIn, הדבקתם את הקישור ואתם מחכים שהתצוגה המקדימה תופיע. כלום. או גרוע מזה: מופיעה התמונה הלא נכונה, הכותרת משובשת, והתיאור הוא קטע אקראי מהטקסט של הדף שלא מובן מחוץ להקשר.
זה קורה להרבה אנשים. תצוגות מקדימות שבורות של קישורים הן אחת הבעיות הנפוצות ביותר בשיווק דיגיטלי, וגם אחת הקלות ביותר לתיקון. המדריך עובר על שמונה הסיבות הנפוצות ביותר ומראה בדיוק מה לחפש, ובכלי Open Graph Preview שמוטמע למטה אפשר לבדוק את כתובת ה-URL שלכם.
מה הם תגי Open Graph?
כשמשתפים כתובת URL ב-LinkedIn, ב-Facebook, ב-Slack, ב-Twitter/X, ב-iMessage או כמעט בכל פלטפורמה חברתית אחרת, הפלטפורמה לא מציגה סתם את הקישור הגולמי. היא מורידה את הדף ברקע, קוראת קבוצה של תגי HTML נסתרים שנקראים תגי Open Graph (OG) ומשתמשת בהם כדי לבנות כרטיס תצוגה מקדימה עשיר עם כותרת, תיאור ותמונה.
Facebook פיתחה את Open Graph במקור ופרסמה אותו כפרוטוקול פתוח ב-2010.[1] מאז הוא הפך לתקן האחיד לתצוגות מקדימות של קישורים כמעט בכל הפלטפורמות. כך נראית קבוצה טיפוסית של תגי OG בחלק <head> של ה-HTML בדף:
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of this page." />
<meta property="og:image" content="https://example.com/images/preview.jpg" />
<meta property="og:url" content="https://example.com/your-page/" />
<meta property="og:type" content="website" />
כשהתגים האלה קיימים, נכונים ונגישים, התצוגות המקדימות עובדות מצוין. כשאחד מהם חסר, שגוי או חסום, התצוגה המקדימה נשברת, ולפעמים בלי שום סימן.
המונחים חדשים לכם? במילון המונחים לקיצור קישורים יש הגדרות בשפה פשוטה לתגי Open Graph, לתצוגות מקדימות ברשתות חברתיות, לכתובות URL קנוניות ולמושגים קשורים.
בדקו את כתובת ה-URL שלכם עכשיו
לפני שעוברים על שמונה הסיבות, השתמשו בכלי שלמטה כדי לבדוק כל כתובת URL שאתם עובדים עליה. הוא מוריד את הדף כמו ש-LinkedIn ו-Facebook מורידות אותו, ומראה בדיוק אילו תגים קיימים, מה חסר ואיך תיראה התצוגה המקדימה.
נסו בחינם, בלי הרשמה
בודק Open Graph
התגים שמאחורי הקישור והכרטיס שהם יוצרים.
8 הסיבות הנפוצות ביותר לכך שהתצוגה המקדימה של הקישור שבורה
1. תגי ה-OG חסרים לגמרי
זו הסיבה הנפוצה ביותר. באתרים רבים, במיוחד ישנים, בכלים שנבנו בהתאמה אישית ובדפי אפליקציות, פשוט אין תגי Open Graph ב-HTML. כשפלטפורמה חברתית לא מוצאת אותם, היא מאלתרת: היא עשויה לקחת את התג <title> של הדף, לשלוף את הפסקה הראשונה מגוף הטקסט או לא להציג תמונה בכלל.
מה לחפש: פתחו את קוד המקור של הדף (לחיצה ימנית ← "View Page Source" ברוב הדפדפנים) וחפשו og:title. אם לא מצאתם כלום, התגים לא קיימים.
איך מתקנים: הוסיפו את חמשת התגים הבסיסיים שמופיעים למעלה לחלק <head> של הדף. ב-WordPress, תוספים כמו Yoast SEO או Rank Math מטפלים בזה אוטומטית. ברוב בוני האתרים (Squarespace, Webflow, Wix) יש לכל דף לוח הגדרות ייעודי ל-SEO או לשיתוף ברשתות חברתיות.
2. תמונת ה-OG קטנה מדי
הפלטפורמות קובעות מידות מינימליות לתמונה ומסרבות להציג תמונות קטנות מהן. LinkedIn, למשל, דורשת תמונות של 1200 × 627 פיקסלים לפחות לפורמט הכרטיס הגדול.[2] Facebook ממליצה על אותן מידות, ואם התמונה קטנה יותר היא תציג במקומה תמונה ממוזערת קטנה, או לא תציג תמונה בכלל.
האשמים הנפוצים: לוגו של החברה (בדרך כלל ריבועי וקטן), favicon, או תמונת סטוק שנדחסה לפני ההעלאה.
מה לחפש: כלי התצוגה המקדימה יראה לכם את התמונה שנמצאה ואת המידות שלה. תמונת OG במידות נכונות לפלטפורמות של היום היא 1200 × 630 פיקסלים (יחס גובה-רוחב של 1.91:1).
איך מתקנים: צרו תמונה ייעודית לשיתוף ברשתות חברתיות בגודל 1200 × 630 פיקסלים. היא שונה מתמונת הפתיחה של הדף: היא מעוצבת במיוחד כדי להיראות טוב כשהיא נחתכת לכרטיס אופקי. בכלים כמו Canva יש תבניות מוכנות בדיוק בגודל הזה.
3. הפלטפורמה שמרה במטמון תצוגה מקדימה ישנה
LinkedIn, Facebook ופלטפורמות אחרות שומרות תצוגות מקדימות של קישורים במטמון באגרסיביות, לפעמים למשך ימים ואפילו שבועות. כלומר גם אחרי שתיקנתם את תגי ה-OG, התצוגה המקדימה הישנה (והשבורה) ממשיכה להופיע, כי הפלטפורמה לא הורידה את הדף מחדש.
זה אחד המצבים המתסכלים ביותר, כי התיקון כבר עלה לאתר, אבל נראה שדבר לא השתנה.
איך מתקנים: לכל פלטפורמה גדולה יש כלי סריקה או ניפוי באגים שמכריח הורדה מחדש:
- LinkedIn: השתמשו ב-LinkedIn Post Inspector. הדביקו את כתובת ה-URL ולחצו על "Inspect", והכלי יסרוק נתונים עדכניים וינקה את המטמון של הכתובת הזו.
- Facebook / Meta: השתמשו ב-Meta Sharing Debugger. הדביקו את כתובת ה-URL ולחצו על "Scrape Again".
- Twitter/X: המטמון מתנקה בתדירות גבוהה יותר, אבל אפשר לגרום לרענון אם מוסיפים בפעם הראשונה פרמטר שאילתה שלא משפיע על הדף (למשל
?v=2) ואחר כך מסירים אותו.
אחרי כל שינוי בתגי OG, ניקוי המטמון צריך להיות הצעד הראשון.
4. הפניה מפריעה בדרך
אם הכתובת מפנה לכתובת אחרת לפני שהדף הסופי נטען, חלק מהפלטפורמות קוראות את תגי ה-OG מהכתובת שבאמצע ולא מהיעד הסופי, או לא עוקבות אחרי ההפניה בכלל.[3]
זה נפוץ במיוחד במקרים הבאים:
- קישורים מקוצרים (שמפנים לכתובת יעד ארוכה)
- כתובות ישנות שמפנות בהפניית 301 לכתובות חדשות
- קישורים עם פרמטרי מעקב שעוברים דרך שכבת הפניה
- קישורי שותפים שעוברים דרך כמה קפיצות
שרשרת הפניות, שבה כתובת A מפנה לכתובת B שמפנה לכתובת C, מחמירה את הבעיה מאוד. כל קפיצה היא עוד הזדמנות לסורק לוותר או לקרוא את הדף הלא נכון.
איך מתקנים: השתמשו במסלול ההפניה הקצר ביותר האפשרי (רצוי קפיצה אחת ישירות לדף הסופי). ודאו שלדף היעד הסופי יש תגי OG נכונים. אם אתם משתמשים במקצר קישורים, בדקו אם הפלטפורמה מעבירה את תגי ה-OG הלאה או מאפשרת להגדיר תצוגה מקדימה משלכם לרשתות החברתיות. הרבה פלטפורמות לניהול קישורים מאפשרות להגדיר נתוני OG ישירות על הקישור המקוצר עצמו, בלי קשר למה שמופיע בדף היעד.
5. תמונת ה-OG גדולה מדי (בגודל הקובץ)
המידות חשובות, אבל גם גודל הקובץ. ההנחיות הרשמיות של Facebook ממליצות לשמור תמונות OG מתחת ל-8MB,[4] אבל בפועל תמונות של יותר מ-1–2MB גורמות לעיתים קרובות לחריגה מזמן ההמתנה כשהסורקים מנסים להוריד אותן, במיוחד בשרתים איטיים יותר או באחסון משותף.
צילום מסך ב-4K, קובץ PNG לא דחוס שיוצא מתוכנת עיצוב או תמונה גולמית ממצלמה יכולים בקלות להגיע ל-5–15MB, גם כשמידות הפיקסלים נכונות.
איך מתקנים: דחסו את תמונת ה-OG לפני ההעלאה. כלים כמו Squoosh (כלי חינמי של Google לדחיסת תמונות בדפדפן) או TinyPNG יכולים להקטין את גודל הקובץ ב-60–80% בלי פגיעה נראית באיכות. השתדלו להישאר מתחת ל-500KB, כדי שהתמונה תיטען מהר ובאמינות בכל הפלטפורמות.
6. השרת מגיש סוג MIME שגוי
סוג MIME הוא התווית שהשרת מצמיד לקובץ, והיא אומרת לדפדפן (או לסורק) איזה סוג קובץ זה. אם השרת שולח תמונה עם סוג MIME שגוי, למשל JPEG שמסומן text/html, הסורקים ידחו אותה ולא יציגו תמונה, גם אם הקובץ עצמו תקין לגמרי.[5]
זה נשמע נדיר, אבל זה קורה יותר ממה שנדמה, במיוחד עם:
- תמונות שמוגשות מ-CDN עם כותרות שהוגדרו לא נכון
- קבצים שהועלו בלי סיומת מתאימה (למשל
previewבמקוםpreview.jpg) - שרתים שמגדירים כברירת מחדל כל קובץ לא מוכר כ-
application/octet-stream
מה לחפש: הכלי Open Graph Preview יראה לכם את סוג התוכן שמוחזר לתמונת ה-OG. הוא צריך להיות image/jpeg, image/png, image/gif או image/webp. כל ערך אחר יגרום לבעיות לפחות בחלק מהפלטפורמות.
איך מתקנים: אם השרת בשליטתכם, הגדירו אותו להגיש תמונות עם הכותרת Content-Type הנכונה. אם אתם משתמשים במערכת ניהול תוכן או ב-CDN, העלו את התמונה מחדש עם סיומת הקובץ הנכונה ובדקו את הכותרות שמוגשות בכלי המפתחים של הדפדפן (הלשונית Network ← לחיצה על הבקשה של התמונה ← Headers).
7. התנגשות בין תגי OG לתגי Twitter Card
LinkedIn ו-Facebook משתמשות בתגי Open Graph. Twitter/X משתמשת במערכת משלה שנקראת Twitter Cards.[6] רוב הפלטפורמות משתמשות בתגי OG כשאין תגי Twitter Card, אבל כששתי הקבוצות קיימות וסותרות זו את זו, עם כותרות שונות ותמונות שונות, חלק מהפלטפורמות מתבלבלות ומציגות את הגרסה הלא נכונה, או מתחלפות ביניהן באופן לא צפוי.
תרחיש התנגשות נפוץ: מפתח הוסיף תגי OG שמצביעים על תמונת באנר לרוחב, ומאוחר יותר מישהו מצוות השיווק הוסיף תגי Twitter Card שמצביעים על לוגו ריבועי. עכשיו LinkedIn מציגה את הלוגו הריבועי במקום הבאנר.
איך מתקנים: בדקו את שתי קבוצות התגים יחד. ברוב הדפים, התגים המקבילים של og: ו-twitter: צריכים להיות זהים, אלא אם יש לכם סיבה מכוונת להציג תוכן שונה בפלטפורמות שונות. אם אתם רוצים עקביות, הגדירו במפורש את תגי Twitter Card כך שיתאימו לתגי ה-OG:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short description." />
<meta name="twitter:image" content="https://example.com/images/preview.jpg" />
8. לכלי הבדיקה של LinkedIn יש מוזרויות משלו
הסורק של LinkedIn מתנהג אחרת מאלה של Facebook ו-Twitter בכמה דרכים בולטות:
- הוא לא עוקב אחרי כל ההפניות. הסורק של LinkedIn עוצר לפעמים בהפניה הראשונה וקורא את התגים מהכתובת שבאמצע, לא מהדף הסופי.[2]
- הוא מכבד את
X-Frame-Optionsוחלק מהכללים שלrobots.txt. אם הקובץrobots.txtחוסם את הסורק של LinkedIn (Linkedinbot), התצוגות המקדימות ייכשלו. - אימות ב-CDN של התמונות. אם תמונת ה-OG נמצאת מאחורי אימות מסוג כלשהו, טוקן או כתובת חתומה שתוקפה פג, LinkedIn תסרוק אותה בהצלחה בפעם הראשונה אבל תיכשל בניסיונות הבאים, אחרי שתוקף הטוקן פג.
- הוא מנקה את המטמון לאט יותר. גם אחרי שמשתמשים ב-Post Inspector כדי לכפות סריקה מחדש, ייתכן שפוסטים ב-LinkedIn שכבר פורסמו עם התצוגה המקדימה הישנה לא יתעדכנו, וזה מכוון.
איך מתקנים: הריצו את כתובת ה-URL ב-LinkedIn Post Inspector לפני הפרסום, לא אחריו. התייחסו לזה כבדיקה מקדימה בכל פעם שאתם משתפים קישור חשוב. ודאו שהקובץ robots.txt מתיר את Linkedinbot. הגישו את תמונות ה-OG מכתובת ציבורית וקבועה, בלי אימות ובלי טוקנים שתוקפם פג.
איך אפליקציות בונות את כרטיס התצוגה המקדימה
כל תצוגה מקדימה עשירה של קישור נוצרת באותו רצף שלבים, בכל אפליקציה שבה מדביקים את הקישור.
- הורדה. הסורק של הפלטפורמה מבקש את הכתובת עם User-Agent משלו, עוקב אחרי הפניות וקורא את ה-HTML שהשרת מחזיר. הוא לא מריץ את קוד ה-JavaScript כמו שדפדפן עושה, ולכן תגים שמוזרקים בצד הלקוח חסרים לעיתים קרובות.
- קריאת התגים. הוא מחפש
og:title,og:descriptionו-og:image(X בודקת קודם אתtwitter:*, ואם אין, עוברת ל-Open Graph; Discord ו-Slack קוראות גם oEmbed כשהאתר מפרסם אותו). אם תג חסר, הסורק משתמש במקומו בכותרת הדף או בתיאור המטא, או לא מציג כלום. - הורדת התמונה. כתובת התמונה מתבקשת בנפרד ונבדקת לפי גודל הקובץ והמידות. נתיב יחסי, הפניה, או קובץ גדול מדי או קטן מדי הם הסיבה הנפוצה ביותר לכרטיס שמוצג בלי תמונה.
- שמירה במטמון והצגה. התוצאה נשמרת במטמון לשעות או לימים, תלוי בפלטפורמה, ומוצגת בפריסה של אותה פלטפורמה: תמונה גדולה למעלה ב-
summary_large_imageשל X וב-LinkedIn, כרטיס קומפקטי ב-iMessage, הטמעה עם פס צבע ב-Discord.
הכלי לבדיקת תצוגה מקדימה של קישורים מריץ בשבילכם את השלבים אחד עד שלושה ומראה את הכרטיס הסופי בשמונה פלטפורמות זו לצד זו; הכלי לבדיקת Open Graph מראה את התגים הגולמיים שמאחוריו. אם הכרטיס נראה נכון בכלי אבל שגוי באפליקציה, הסיבה היא כמעט תמיד שלב ארבע: עותק במטמון מלפני התיקון.
רשימת בדיקה מהירה
השתמשו בה לפני שאתם משתפים כל קישור חשוב:
| בדיקה | תנאי למעבר |
|---|---|
og:title קיים | כן |
og:description קיים | כן |
og:image קיים | כן |
og:url קיים וקנוני | תואם ליעד הסופי |
| מידות התמונה | לפחות 1200 × 630 פיקסלים |
| גודל קובץ התמונה | פחות מ-1 MB (רצוי פחות מ-500 KB) |
| סוג ה-MIME של התמונה | image/jpeg, image/png או image/webp |
| קפיצות הפניה עד הדף הסופי | 1 או פחות |
| אין כתובות תמונה שתוקפן פג או שדורשות אימות | כן |
| ניקוי ב-LinkedIn Post Inspector | להריץ לפני הפרסום |
| תגי Twitter Card תואמים לתגי OG | כן |
למה זה חשוב מעבר למראה
תצוגה מקדימה שבורה היא לא רק בעיה קוסמטית. מחקרים מראים שוב ושוב שפוסטים עם תצוגה מקדימה עשירה עם תמונה מקבלים מעורבות גבוהה משמעותית מפוסטים עם קישור בטקסט בלבד. לפי נתונים של LinkedIn עצמה, פוסטים עם תמונות מקבלים 98% יותר תגובות מפוסטים בלי תמונות.[2] ב-Facebook, פוסטים עם קישור ותצוגה מקדימה מותאמת משיגים באופן עקבי תוצאות טובות יותר מפוסטים בלעדיה, גם בחשיפה אורגנית וגם בביצועי מודעות ממומנות.
אם אתם מפיצים תוכן מכל סוג, כמו פוסטים בבלוג, דפי נחיתה, דפי מוצר או הודעות לעיתונות, תיקון תגי Open Graph הוא אחת ההשקעות של 30 דקות שמחזירות הכי הרבה.
מקורות
[1] Meta Platforms, Inc. (2010 ואילך). The Open Graph Protocol. ogp.me. https://ogp.me/
[2] LinkedIn. (2024). Share on LinkedIn — Developer Documentation: Best Practices. LinkedIn Developer Platform. https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin
[3] Fielding, R., Nottingham, M., & Reschke, J. (2022). RFC 9110: HTTP Semantics, §15.4 (Redirection). Internet Engineering Task Force (IETF). https://www.rfc-editor.org/rfc/rfc9110#section-15.4
[4] Meta for Developers. (2024). Sharing Best Practices for Websites & Mobile Apps. https://developers.facebook.com/docs/sharing/best-practices/
[5] Freed, N., & Borenstein, N. (1996). RFC 2046: MIME Part Two — Media Types. IETF. https://www.rfc-editor.org/rfc/rfc2046
[6] X Corp. (2024). Cards — X Developer Platform. https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
עדכון אחרון: מאי 2026. ראו גם: מילון המונחים לקיצור קישורים: Open Graph / תגי OG, תצוגה מקדימה ברשתות חברתיות, כתובת URL קנונית, שרשרת הפניות.