למה תצוגת הקישור שלכם נראית שגויה, ואיך לתקן אותה עם Open Graph

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

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

איך נוצרת תצוגה מקדימה של קישור

כשמדביקים קישור לפוסט או להודעה, האפליקציה שולחת בוט סורק לדף. הבוט קורא את תגי ה-<meta> ב-<head> ומצייר מהם את הכרטיס. התגים האלה מגיעים מפרוטוקול Open Graph, שמגדיר ארבעה כחובה:

• og:title: כותרת הדף כפי שהיא צריכה להופיע בכרטיס.
• og:type: מהו הדף, בדרך כלל website או article.
• og:image: התמונה.
• og:url: כתובת ה-URL הקנונית של הדף, שהפרוטוקול קורא לה המזהה הקבוע שלו.

מוסיפים og:description ויש לכם את הכרטיס. סט מלא ומינימלי נראה כך:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

סיבה 1: התגים חסרים

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

סיבה 2: כתובת התמונה יחסית

קל לפספס את זה, כי הדף נראה תקין בדפדפן שלכם. content="/images/og.jpg" עובד לדפדפן שכבר נמצא באתר, אבל הבוט נמצא מחוצה לו. כתבו את הכתובת המלאה, שמתחילה ב-https:// ובדומיין שלכם. אותו דבר נכון גם ל-og:url.

סיבה 3: לתמונה יש גודל או צורה שגויים

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

• LinkedIn כותבת במדריך להפיכת אתר לניתן לשיתוף שהתמונה צריכה להיות לפחות 1200 × 627 פיקסלים, ביחס המומלץ של 1.91:1, ולא גדולה מ-5 MB.
• השיטות המומלצות לשיתוף של Meta ממליצות על תמונות ברוחב של לפחות 1080 פיקסלים למסכים ברזולוציה גבוהה, וברוחב של לפחות 600 כדי להציג מודעות קישור עם תמונה.
• כרטיס התמונה הגדולה של X תומך ביחס 2:1, מ-300 × 157 ועד 4096 × 4096 פיקסלים, עד 5MB, בפורמטים JPG, PNG, WEBP או GIF, ואינו תומך ב-SVG, לפי התיעוד למפתחים שלה (הדף המקורי מפנה כעת למקום אחר, ולכן הקישור הזה עובר דרך Internet Archive).

מידה אחת מתאימה לשלושתן: 1200 × 630. היא עוברת את המינימום של LinkedIn, 1200 × 627, רחבה מ-1080 של Meta, והיחס שלה הוא 1200 ÷ 630 = 1.905, בטווח של 5% מ-2:1 של X. תמונה מרובעת או גבוהה תיחתך לכרטיס רחב, לכן שמרו את החלק החשוב במרכז. מחשבון יחס הגובה-רוחב מראה מה חיתוך מהמרכז משאיר.

כתבו גם את המידות בתגים. Meta מבקשת og:image:width ו-og:image:height, כדי שהבוט שלה יוכל להציג את התמונה מיד, במקום להוריד ולעבד אותה קודם. המדריך לוובמאסטרים שלה אומר זאת בפשטות: ציינו את הגובה והרוחב, כדי שהתמונה תיטען כראוי בפעם הראשונה שהדף משותף.

סיבה 4: התגים מתווספים על ידי JavaScript

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

סיבה 5: תווים מיוחדים שברו את התג

כותרת שמכילה מירכאות כפולות, כמו The "only" linen you need, סוגרת את התכונה content="..." מוקדם, והשאר של הכותרת הולך לאיבוד. תווים שחשובים בתוך תכונה צריכים לעבור escape: " הופך ל-", & הופך ל-&, ו-< הופך ל-<. דפדפנים ובוטים מחזירים אותם לתווים המקוריים כשהם קוראים את התג. המחולל עושה זאת בשבילכם, וזו חצי מהסיבה להשתמש בו.

סיבה 6: האפליקציה זוכרת את הגרסה הישנה

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

• Facebook: הדביקו את ה-URL ב-Sharing Debugger של Meta. המדריך לוובמאסטרים של Meta כותב שהכלי מציג אילו תגים הבוט משך, יחד עם שגיאות או אזהרות, ומפעיל משיכה חדשה. השיטות המומלצות של Meta מוסיפות שתוכן שנמשך מתעדכן אחרת בתוך תקופה סטנדרטית של 24 שעות.
• LinkedIn: הריצו את ה-URL דרך Post Inspector. בדף העזרה של LinkedIn המגבלה ברורה: הרענון משנה את התצוגה רק לפוסטים חדשים. פוסטים שכבר כוללים את הקישור ישמרו את הישנה.

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

תג twitter:card: שורה אחת, לא ארבע

X קוראת גם את Open Graph. במדריך התגים של הכרטיסים שלה מופיע גיבוי לכל תג: twitter:title נופל ל-og:title, twitter:description ל-og:description, twitter:image ל-og:image, ו-twitter:image:alt ל-og:image:alt. לכן אין צורך לחזור על הכול. השורה היחידה להוסיף היא twitter:card: summary_large_image לתמונה ברוחב מלא, או summary לתמונה קטנה ומרובעת. אם משמיטים אותה, אותו מדריך אומר ש-X עשויה להציג כרטיס סיכום קטן במקום, וזו הסיבה שתמונה גדולה מגיעה לפעמים כתמונה ממוזערת. אותו מדריך מגביל כותרת ל-70 תווים, תיאור ל-200 וטקסט חלופי ל-420.

בדיקה של חמש דקות לפני ההשקה

1. פתחו את מקור הדף ומצאו את תגי ה-og:. כל ארבעת הנדרשים, ובנוסף תיאור.
2. ודאו ש-og:image ו-og:url מתחילים ב-https://.
3. פתחו את כתובת התמונה לבד בדפדפן. היא צריכה להיטען, בגודל 1200 × 630 או קרוב לכך.
4. הדביקו את ה-URL ב-Sharing Debugger וב-Post Inspector, וקראו את הכרטיסים.
5. רק אז שתפו.

איפה Hermoso נכנס

Hermoso היא סוכנת שיווק מבוססת AI: היא חוקרת את המודעות שכבר עובדות בשוק שלכם, מייצרת מודעות תמונה ווידאו שמותאמות למותג, מתזמנת פוסטים לחשבונות הרשתות שלכם ומפעילה קמפיינים ממומנים בחשבונות המודעות שלכם. תצוגה מקדימה טובה לקישור היא מה שהופך את הפוסטים האלה לראויים ללחיצה. Hermoso פועלת באפליקציית הווב, או בתוך Claude, ChatGPT ו-Cursor דרך שרת ה-MCP שלה.

שאלות נפוצות

למה הקישור שלי מוצג בלי תמונה ב-Facebook או ב-LinkedIn?

בדרך כלל תג og:image חסר, משתמש בנתיב יחסי במקום בכתובת https:// מלאה, או מצביע על תמונה קטנה מדי. LinkedIn מבקשת לפחות 1200 × 627 פיקסלים. אחרי התיקון, הריצו את ה-URL דרך Sharing Debugger של Meta או Post Inspector של LinkedIn, כדי שהם ימשכו אותו מחדש.

איזה גודל צריכה להיות תמונת Open Graph?

1200 × 630 פיקסלים עובד ברשתות הגדולות. היא עומדת במינימום של LinkedIn, 1200 × 627, ביחס של כ-1.91:1, רחבה מ-1080 הפיקסלים ש-Meta ממליצה עליהם, וקרובה ל-2:1 ש-X תומכת בו לכרטיסי תמונה גדולה.

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

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

האם אני צריך תגי twitter: אם יש לי תגי og:?

רק twitter:card. כש-X חסרות לה גרסאות twitter:, היא נופלת ל-og:title, og:description, og:image ו-og:image:alt.