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

תגי Open Graph הם קטעי HTML קטנים שקובעים איך הדף שלכם ייראה כשמישהו משתף אותו בפייסבוק, לינקדאין, סלאק, דיסקורד או X (טוויטר). מלאו למטה כותרת, תיאור, כתובת URL, תמונה וכמה אפשרויות נוספות, צפו בתצוגה המקדימה של כרטיס השיתוף מתעדכנת מיידית, והעתיקו את תגי ה-<meta> שנוצרו ישירות לתוך ה-<head> של הדף שלכם. הכול קורה בדפדפן שלכם — שום דבר לא נשלח לשרת.

מהו הכלי הזה?

Open Graph הוא פרוטוקול, שנוצר במקור על ידי פייסבוק, המאפשר לכל דף אינטרנט לתאר את עצמו באמצעות קבוצה קטנה של תגי <meta property="og:..."> הממוקמים ב-<head> של ה-HTML. כשמישהו מדביק את הקישור שלכם באפליקציה חברתית, בתוכנת צ'אט או במסנג'ר, האפליקציה הזו קוראת את התגים האלה כדי לבנות את כרטיס התצוגה המקדימה — כותרת, תיאור ותמונה ממוזערת — במקום לנחש על סמך תוכן הדף.

טוויטר (X) משתמשת בקבוצת תגים קשורה אך נפרדת, <meta name="twitter:...">, כדי לשלוט באופן ספציפי איך נראית תצוגת קישור מקדימה בפלטפורמה שלה. רוב האתרים מגדירים את שתי הקבוצות: תגי Open Graph לתאימות רחבה, ותגי Twitter Card לכיוונון עדין של התצוגה המקדימה ב-X (למשל, בחירה בכרטיס עם תמונה גדולה לעומת כרטיס תקציר קטן).

בלי התגים האלה, קישור משותף או שלא מציג תצוגה מקדימה כלל, או שהפלטפורמה מנסה לנחש כותרת ותמונה מהתוכן הגולמי של הדף — ולעיתים קרובות בוחרת כותרת שגויה, תמונה מקרית שמוטמעת בטקסט, או כלום. הגדרה מפורשת של og:title, og:description ו-og:image נותנת לכם שליטה מלאה באופן שבו התוכן שלכם מוצג לפני שמישהו לוחץ עליו.

למה להשתמש בו?

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

איך להשתמש

הזינו את כותרת הדף שלכם ותיאור קצר (שאפו לפחות מ-~60 תווים לכותרת, ~155–160 תווים לתיאור).
הזינו את כתובת ה-URL הקנונית של הדף ואת כתובת ה-URL המוחלטת של תמונת התצוגה המקדימה (כתובות URL של תמונות חייבות להיות מלאות, למשל https://example.com/image.jpg, לא נתיב יחסי).
לבחירתכם, הגדירו את שם האתר, בחרו og:type (website, article, product, profile, video, music), ובחרו סוג Twitter Card (summary או summary_large_image).
בדקו את כרטיס התצוגה המקדימה החיה כדי לוודא שהכותרת, התיאור והתמונה משתלבים היטב יחד.
לחצו על "העתק" והדביקו את תגי ה-<meta> שנוצרו לתוך ה-<head> של הדף שלכם, לפני תג הסגירה </head>.

דוגמה

קלט

כותרת: "10 כלי פיתוח חינמיים שבאמת תשתמשו בהם"
תיאור: "רשימה נבחרת של כלים מבוססי-דפדפן ל-JSON, ביטויים רגולריים, UUID ועוד — בלי צורך בהתקנה."
כתובת URL: https://example.com/blog/dev-tools
תמונה: https://example.com/images/dev-tools-cover.jpg

פלט

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

רק השדות שמילאתם נכללים בפלט, כך שאם תשאירו את שם האתר ריק, og:site_name פשוט יושמט מהפלט.

טעויות נפוצות שכדאי להימנע מהן

היעדר מוחלט של og:image — בלעדיו רוב הפלטפורמות או שלא מציגות תמונת תצוגה מקדימה כלל, או שהן נופלות חזרה על תמונה אקראית שנשלפה מהדף, מה שבדרך כלל נראה שבור ולא מקצועי.
שימוש בנתיב תמונה יחסי כמו /images/cover.jpg במקום כתובת URL מלאה כמו https://example.com/images/cover.jpg — זחלנים חברתיים בדרך כלל לא יכולים לפענח נתיבים יחסיים.
יחס רוחב-גובה שגוי של התמונה — תמונה מרובעת או אנכית נחתכת בצורה מגושמת כשהפלטפורמות כופות אותה למסגרת נופית של 1.91:1; תמיד עצבו את תמונת השיתוף שלכם בקרבת 1200×630.
כותרות או תיאורים שנחתכים — שמרו על og:title מתחת ל-~60 תווים ועל og:description מתחת ל-~155–160 תווים כדי שלא ייחתכו עם שלוש נקודות ברוב הפלטפורמות.
שכחה לעדכן תצוגות מקדימות שמורות במטמון — אחרי שינוי תגי og בדף חי, התצוגה המקדימה הישנה יכולה להישאר במטמון של פייסבוק או לינקדאין עד שתכפו ידנית סריקה מחדש עם כלי הניפוי שלהם.

היכן נעשה שימוש בכל תג

og:title, og:description ו-og:image הם שלושת התגים שכמעט כל פלטפורמה קוראת כדי לבנות תצוגה מקדימה. og:url מודיע לזחלנים איזה קישור קנוני לשייך לתצוגה המקדימה, וזה חשוב אם אותו תוכן נגיש דרך מספר כתובות URL. og:site_name מציג תווית קטנה (כמו שם הפרסום או המותג) מעל הכותרת בחלק מהפלטפורמות, כמו פייסבוק.

og:type משנה איזה סוג אובייקט הדף מייצג עבור זחלנים התומכים במודל האובייקטים העשיר יותר של Open Graph — למשל, article מפעיל את og:article:published_time ו-og:article:author בפלטפורמות שקוראות אותם, אם כי רוב התצוגות המקדימות החברתיות מתעלמות מהשדות הנוספים האלה ומשתמשות רק בשלישייה הבסיסית של כותרת/תיאור/תמונה.

twitter:card שולט בפריסה ספציפית ב-X: summary מציג תמונה ממוזערת מרובעת קטנה לצד הטקסט, בעוד summary_large_image מציג תמונה ברוחב מלא מעל הטקסט — האפשרות השנייה כמעט תמיד עדיפה עבור תוכן עם תמונת שער משמעותית.

שאלות נפוצות

מה הגודל הרצוי לתמונת og:image שלי?

1200×630 פיקסלים הוא הגודל המומלץ — הוא גדול מספיק עבור מסכים עם צפיפות פיקסלים גבוהה ומתאים ליחס הרוחב-גובה של כ-1.91:1 שאליו פייסבוק, לינקדאין ו-X חותכים את התמונה. שמרו על גודל הקובץ מתחת ל-5–8MB, השתמשו ב-JPG או PNG, וודאו שכתובת ה-URL של התמונה היא כתובת מוחלטת מלאה ולא נתיב יחסי — רוב הזחלנים לא יודעים לפענח נתיבי תמונה יחסיים כראוי.

למה התצוגה המקדימה שלי לא מופיעה כשאני משתף את הקישור?

הסיבות הנפוצות ביותר הן: og:image חסר, כתובת URL יחסית של תמונה במקום מוחלטת, הזחלן חסום על ידי robots.txt, או שהפלטפורמה מציגה גרסה שמורה במטמון של תצוגה מקדימה ישנה. גם פייסבוק וגם לינקדאין שומרות במטמון תצוגות מקדימות באגרסיביות — השתמשו ב-Sharing Debugger של פייסבוק או ב-Post Inspector של לינקדאין כדי לכפות סריקה מחדש אחרי עדכון התגים שלכם.

מה ההבדל בין תגי og: לתגי twitter:?

תגי og: (og:title, og:description, og:image וכו') הם התקן של Open Graph, שנקרא על ידי פייסבוק, לינקדאין, סלאק, דיסקורד, ווטסאפ ורוב הפלטפורמות האחרות. תגי twitter: הם הפורמט הייחודי של טוויטר/X. אם twitter:title או twitter:image חסרים, X חוזרת אוטומטית לתג ה-og: המקביל — אבל הגדרה מפורשת של שניהם נותנת לכם שליטה רבה יותר, כולל האפשרות לבחור summary_large_image לתמונת תצוגה מקדימה גדולה.

באיזה og:type כדאי להשתמש?

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

האם הכלי הזה שומר או שולח את הנתונים שלי לאיזשהו מקום?

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