מחולל תגיות מטא של Open Graph

התגים שמתוכם נבנית תצוגה מקדימה של קישור

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

• og:title: הכותרת כפי שהיא אמורה להופיע בתצוגה המקדימה.
• og:type: מהו העמוד. website מתאים לרוב העמודים ו-article מתאים לפוסט בבלוג. הפרוטוקול מגדיר גם סוגים כמו profile, book, video.movie ו-music.song.
• og:image: כתובת התמונה שמייצגת את העמוד.
• og:url: הכתובת הקנונית, שהפרוטוקול מכנה המזהה הקבוע של האובייקט.

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

מה ש-X מוסיפה: twitter:card

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

• summary_large_image: תמונה ברוחב מלא מעל הכותרת. עמוד כרטיס התמונה הגדולה של X מציין שתמונות עבורו תומכות ביחס גובה-רוחב של 2:1, עם מידות מינימום של 300 × 157 ומקסימום של 4096 × 4096 פיקסלים, מתחת ל-5MB, ב-JPG, PNG, WEBP או GIF. SVG אינו נתמך.
• summary: כרטיס קטן יותר עם תמונה מרובעת. עמוד כרטיס התקציר של X מציין שהתמונה תומכת ביחס של 1:1, מ-144 × 144 ועד 4096 × 4096 פיקסלים, ונחתכת לריבוע בכל הפלטפורמות.

אותה הפניה מפרטת כרטיסי app ו-player, שדורשים שדות נוספים של App Store או נגן וידאו, ולכן הם לא נכללים כאן. היא גם מתעדת את המגבלות שהבדיקות לעיל משתמשות בהן: 70 תווים לכותרת, 200 לתיאור ו-420 לטקסט חלופי.

גדלי תמונות שהפלטפורמות מציינות

• LinkedIn: המדריך להפיכת אתר לשיתופי מבקש og:title, og:image, og:description ו-og:url, ומציין גודל קובץ מרבי של 5 MB, מינימום של 1200 × 627 פיקסלים ויחס מומלץ של 1.91:1.
• Meta: שיטות העבודה המומלצות לשיתוף ממליצות להשתמש בתמונות ברוחב של 1080 פיקסלים לפחות למסכים ברזולוציה גבוהה, ולפחות 600 פיקסלים רוחב להצגת מודעות קישור עם תמונה. אותו דף מבקש og:image:width ו-og:image:height כדי שהסורק יוכל לעבד את התמונה מיד, בלי שיצטרך קודם להוריד ולעבד אותה.

תמונה בגודל 1200 × 630 עומדת בכל אלה: היא לפחות 1200 × 627 ל-LinkedIn, רחבה מ-1080 ל-Meta, ו-1.905:1, בטווח של 5% מ-2:1 של X’s.

בדקו זאת, ורעננו תצוגות מקדימות ישנות

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

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

מה הכלי הזה לא עושה

הוא אינו מאחזר את הדף או את התמונה שלכם, ולכן אינו יכול לראות מה באמת מפורסם, והתצוגה המקדימה למעלה היא סקיצה טקסטואלית ולא רינדור. הוא כותב את התגיות; האתר שלכם עדיין צריך להגיש אותן ב-<head> של הדף, ב-HTML שהסורק מקבל. ייתכן שתגיות שנוספות מאוחר יותר על ידי JavaScript לעולם לא ייראו. והוא אינו כותב כרטיסי app או player, או את המאפיינים הנוספים שסוגים כגון book או video.movie מגדירים.

אם אתם מעדיפים לא לכתוב את זה ביד

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

כלים חינמיים: בונה קישורי UTM · יוצר קודי QR · מדריך גדלים לרשתות חברתיות

שאלות נפוצות

אילו תגיות Open Graph נדרשות?

פרוטוקול Open Graph מפרט ארבעה מאפיינים נדרשים: og:title, og:type, og:image ו-og:url. התגיות og:description, og:site_name ותגיות הרוחב, הגובה וה-alt של og:image הן אופציונליות אך כדאי להוסיף אותן.

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

לא. מדריך סימון הכרטיסים של X אומר ש-twitter:title, twitter:description, twitter:image ו-twitter:image:alt חוזרים למקבילות ה-og: שלהם. התגית שכדאי להוסיף היא twitter:card, שבוחרת את פריסת הכרטיס.

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

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

למה הקישור שלי עדיין מציג תמונה ישנה אחרי ששיניתי את התגיות?

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

למה מרכאות וסימני אמפרסנד משתנים בפלט?

הם מקודדים ב-HTML כדי שהתגית תישאר תקינה. כותרת כמו Tom & Jerry's "Sale" הופכת ל-Tom & Jerry's "Sale" בתוך מאפיין ה-content, ודפדפנים וסורקים קוראים אותה בחזרה כטקסט המקורי.

האם הכלי טוען את התמונה שלי?

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