Open Graph לעומת Twitter Card: מה ההבדל?
לא בטוח אילו תגים יש לדף שלך?
בדוק את התגיות Open Graph בחינם עם Proovd - הדבק כתובת URL וראה בדיוק איך היא נראית ב-X, LinkedIn, Slack, Discord, WhatsApp ו-Reddit.
תשובה מהירה
- Open Graph (og:) נוצר על ידי Facebook בשנת 2010
- Twitter Cards (twitter:card) נוצרו על ידי טוויטר בנפרד
- רוב הפלטפורמות תומכות בשניהם, אבל X/Twitter מעדיף twitter:card
- הגדר את שניהם עבור תאימות מקסימלית
Open Graph — התקן Facebook
Open Graph הוצג על ידי Facebook בשנת 2010. לפני תגיות OG, כאשר מישהו שיתף קישור ב-Facebook, הפלטפורמה הייתה בוחרת באופן אקראי תמונה וטקסט מהעמוד. התוצאה הייתה בלתי צפויה ולעתים קרובות לא מושכת.
Facebook אמר: "בואו ניתן למנהלי אתרים דרך סטנדרטית לשלוט בתצוגות המקדימות של הקישורים שלהם." הם יצרו קבוצה של מטא תגיות שכל אתר יכול להוסיף:
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />פלטפורמות אחרות אימצו את התקן Open Graph. LinkedIn, Discord, Slack, WhatsApp ו-Reddit כולם קוראים og: תגיות לעיבוד תצוגות מקדימות של קישורים.
Twitter Cards - תקן טוויטר
טוויטר יצרה מערכת משלה בשם "Twitter Cards" לפני ש-Open Graph הפך לאימוץ נרחב. Twitter Cards השתמש במוסכמה שונה של מתן שמות לתכונה:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />Twitter Cards יש שני סוגים עיקריים:
- סיכום — תמונה ממוזערת קטנה בצד ימין של הציוץ
- summary_large_image — תמונה גדולה שתופסת את רוב הכרטיס (מומלץ)
תאימות פלטפורמה
הנה אילו פלטפורמות משתמשות באילו תגים:
| Platform | Primary Tags | Fallback |
|---|---|---|
| X / Twitter | twitter:card | og: tags |
| og: tags | twitter:card tags | |
| Discord | og: tags | twitter:card tags |
| Slack | og: tags | twitter:card tags |
| og: tags | twitter:card tags | |
| og: tags | twitter:card tags |
למה כדאי להגדיר את שניהם
למרות שרוב הפלטפורמות תומכות בשני סוגי התגים, יש סיבות טובות להגדיר את שניהם:
- X/Twitter מעדיף תגיות twitter:card. בעוד ש-X יכול לחזור לתגיות OG, ייתכן שהוא לא יציג אותם כראוי. הגדרה של שניהם מבטיחה ש-X מציג את סוג הכרטיס הנכון.
- הוכחה לעתיד. אם פלטפורמה חדשה מושקת ומעדיפה תקן אחד על פני השני, קיום שניהם מבטיח תאימות.
- עקביות. שימוש בשניהם מבטיח שהתצוגה המקדימה שלך תיראה נכונה ללא קשר לאיזו פלטפורמה קוראים אילו תגים.
ההגדרה השלמה
להלן ההגדרה המומלצת לכל דף:
<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />רשימת רשימת תיקון מהירה
- הגדר את כל ארבעת התגיות og: (כותרת, תיאור, תמונה, כתובת אתר)
- הגדר twitter:card עם הערך "summary_large_image"
- הגדר twitter:title וtwitter:image
- השתמש באותה כתובת URL של תמונה גם עבור og:image וגם twitter:image
- בדוק עם Proovd כדי לאמת בכל הפלטפורמות
שאלות נפוצות
האם אני יכול להשתמש רק בתגיות OG ולדלג על Twitter Cards?
אתה יכול, אבל ייתכן ש-X/Twitter לא יציג את הכרטיס שלך כראוי. הגדר תמיד את שניהם לקבלת התוצאות הטובות ביותר בכל הפלטפורמות.
האם אני צריך תמונות שונות עבור OG ו-Twitter Card?
לא. השתמש באותה כתובת URL של תמונה גם עבור og:image וגם twitter:image. הפלטפורמות ישתמשו באיזה תג שהן מעדיפות.
מאמרים קשורים
אמת את התגים של OG וגם Twitter Card
בדוק את התגיות Open Graph בחינם עם Proovd - הדבק כתובת URL וראה את התצוגה המקדימה ב-X, LinkedIn, Slack, Discord, WhatsApp ו-Reddit.