עברית
לכתוב תגיות Open Graph ו-Twitter Card עם תצוגה מקדימה חיה לרשתות החברתיות.
עודכן לאחרונה
ב-Coddy לומדים דרך כתיבת קוד אמיתי בדפדפן: שיעורים אינטראקטיביים, משוב מיידי ועזרה מ-AI כשנתקעים.
כשמשתפים קישור בכל אפליקציה מודרנית, בפוסט, בהודעה פרטית או בערוץ Slack, הפלטפורמה ניגשת לכתובת ושולפת פיסת מטא-דאטה קטנה כדי להציג *כרטיס שיתוף*: הכותרת, תיאור, תמונה ושם האתר. המטא-דאטה הזו לא נלקחת מהדף הגלוי; היא מגיעה מסט מסוים של תגיות <meta> בתוך ה-<head>. פרוטוקול Open Graph, שהומצא במקור על ידי Facebook ב-2010, מגדיר את רובן. X (לשעבר Twitter) מוסיפה כמה תוספות עם הקידומת twitter:. LinkedIn, Discord, Slack, iMessage, WhatsApp ו-Pinterest קוראות כולן את אותן תגיות עם הבדלים קטנים.
לסדר את התגיות האלה נכון זו עבודה חד פעמית לכל דף, אבל ההשפעה שלה גדולה. דף בלי תמונת Open Graph נראה שבור כשמשתפים אותו. כותרת ארוכה מדי נחתכת באמצע מילה. יחס גובה-רוחב לא נכון של og:image מקבל פסים שחורים בכל פלטפורמה. הכלי הזה מאפשר לכוונן את הערכים עם תצוגות מקדימות חיות, כך שתראו בעיות של חיתוך וקיצוץ *לפני* שהדף עולה לאוויר.
הכול רץ מקומית. מצב הטופס, התצוגות המקדימות וה-HTML שנוצר לא יוצאים מהדפדפן, אז אפשר להדביק כתובות לפני השקה וטקסטים שעוד לא פורסמו בלי לחשוש מדליפות.
property (<meta property="og:title">), בעוד שתגיות SEO רגילות ותגיות Twitter Card משתמשות ב-name (<meta name="description">, <meta name="twitter:card">).title, meta description), Open Graph (og:title, og:description) ו-Twitter (twitter:title, twitter:description).og:image צריכה להיות בגודל 1200×630, מוגשת ב-HTTPS ועם כתובת מוחלטת: נתיבים יחסיים נכשלים כששרתים אחרים ניגשים לדף.twitter:card ב-X קובע את הפריסה: summary היא תמונה ממוזערת ריבועית קטנה, ו-summary_large_image היא הבאנר ברוחב מלא שרוב המותגים רוצים.כוונו ל-50-60 תווים. Facebook חותכת בסביבות 95 תווים ו-X בסביבות 70. פתחו בערך שהדף נותן, לא במותג: "How to deploy with Cloudflare Workers" עדיף על "Coddy Blog · Deployment Guide".
כוונו ל-120-155 תווים. רוב הפלטפורמות חותכות בסביבות 200. השתמשו במשפטים מלאים: התיאור מופיע מתחת לכותרת בכל כרטיס, וקטעים קטועים נראים לא גמורים.
השתמשו בכתובת https:// המוחלטת של הדף עצמו, לא בקישור מעקב או הפניה. סורקי Open Graph עוקבים אחרי og:url כשהם מאחדים שיתופים כפולים: כתובת קנונית שומרת על מוני שיתופים ותצוגות מקדימות עקביים.
1200×630 הוא הגודל האידיאלי לכרטיסי summary_large_image ב-X ולכרטיסים רגילים ב-Facebook וב-LinkedIn. PNG או JPEG, עד בערך 5 MB. תמיד השתמשו בכתובת מוחלטת: נתיבים יחסיים נכשלים כי הסורק החברתי ניגש לכתובת מהשרת שלו.
הדביקו את הבלוק מחלונית **תגיות <head> שנוצרו** לתוך ה-<head> של הדף שלכם. אחרי הפריסה, אמתו עם כלי הדיבוג של כל פלטפורמה (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) ובקשו סריקה מחדש אם תשנו את התמונה מאוחר יותר.
התגיות למטה מכסות את כל מה שפלטפורמות חברתיות קוראות היום. תגיות שמסומנות ב-property= שייכות לפרוטוקול Open Graph; תגיות שמסומנות ב-name= הן הגרסאות הרגילות של SEO ו-Twitter Card. מפרטים לעיון: Open Graph, X Cards.
| תגית | בשימוש אצל | מומלץ | הערות |
|---|---|---|---|
og:title | FB, LinkedIn, Slack, Discord | 50-60 תווים | נופלת חזרה ל-<title> אם היא חסרה, אבל הגדירו אותה בכל זאת. |
og:description | FB, LinkedIn, Slack, Discord | 120-155 תווים | נופלת חזרה ל-meta description אם היא חסרה. |
og:image | כל הפלטפורמות | 1200×630, פחות מ-5 MB, HTTPS, כתובת מוחלטת | חייבת להיות כתובת מוחלטת: נתיבים יחסיים נכשלים. |
og:image:alt | נגישות | תארו את התמונה | בשימוש קוראי מסך וחלק מהפלטפורמות. |
og:url | FB, LinkedIn | כתובת https:// קנונית | משמשת לאיחוד שיתופים של גרסאות שונות של query string. |
og:type | FB, LinkedIn | website או article | article פותחת את article:published_time ו-article:author. |
og:site_name | FB, Discord | שם המותג | מוצג כייחוס הקטן מעל הכרטיס או מתחתיו. |
twitter:card | X | summary_large_image | summary לתמונה ממוזערת ריבועית קטנה, summary_large_image לפריסת באנר. |
twitter:title | X | כמו og:title | X נופלת חזרה ל-og:title אם היא חסרה; הגדירו את שתיהן ליתר ביטחון. |
twitter:description | X | כמו og:description | נופלת חזרה ל-og:description אם היא חסרה. |
twitter:image | X | כמו og:image | נופלת חזרה ל-og:image אם היא חסרה. |
twitter:site | X | @yourbrand | שם המשתמש של המפרסם ב-X, משמש לחלק מהאנליטיקס. |
הגדירו את **og:type** ל-article, הוסיפו **מחבר** ו**זמן פרסום** בחלק הייעודי למאמרים, והשתמשו בתמונת שער בגודל 1200×630. התצוגות המקדימות מתעדכנות ומראות איך הכרטיס נראה בכל פלטפורמה.
og:type=article פותחת את התגיות הייעודיות למאמרים (article:published_time, article:author) שחלק מהפלטפורמות (Discord, LinkedIn) משתמשות בהן כדי להציג ייחוס. Twitter מתעלמת מהן אבל לא מתלוננת.
השאירו את **og:type** על website. השתמשו בשם המוצר ככותרת, בהצעת ערך של משפט אחד כתיאור, ובתמונת hero או חיתוך של צילום מסך כתמונה.
דפי נחיתה לא צריכים מטא-דאטה של מאמר. הרכיב הכי נלחץ בכרטיס משותף של דף נחיתה הוא בדרך כלל התמונה, אז השקיעו בוויזואל נקי בגודל 1200×630.
כותרת: "Concept - Section · Docs". תיאור: משפט אחד שמסביר את המושג. תמונה: שער תיעוד כללי או צילום מסך של הממשק הרלוונטי.
דפי תיעוד משותפים בערוצי Slack ובשרשורים ב-X. תמונת שער אחידה לתיעוד הופכת אותם לקלים לזיהוי בפיד עמוס עוד לפני שקוראים את הכותרת.
og:image יחסית כמו /images/cover.png. סורקים חברתיים ניגשים לדף מהשרתים *שלהם*: נתיבים יחסיים מצביעים על הדומיין של הפלטפורמה החברתית ומחזירים 404. תמיד השתמשו בכתובת https:// מוחלטת.twitter:card. בלעדיה, X מציגה כברירת מחדל כרטיס מינימלי בלי תמונה. הוסיפו twitter:card=summary_large_image כדי לקבל את פריסת הבאנר שכמעט כל מותג באמת רוצה.og:image:alt. היא לא עולה כלום, עוזרת למשתמשי קוראי מסך, וכמה פלטפורמות מציגות אותה כטקסט חלופי בכרטיס.og:image.<meta>: כותרת, תיאור, תמונה, סוג וכן הלאה. כל פלטפורמה חברתית ופלטפורמת צ'אט מרכזית קוראת אותו היום, ולכן הוא הפך לתקן בפועל למטא-דאטה של כרטיסי שיתוף.twitter: שלה לתגיות ה-og: המקבילות כשהתגיות הייעודיות ל-X חסרות, כך שטכנית אפשר להסתדר רק עם Open Graph. אבל הוספת twitter:card, twitter:site ו-twitter:creator נותנת שליטה מדויקת יותר על איך הכרטיס מוצג ב-X.<title> וה-meta description שלכם. Google אמנם קולטת לפעמים את og:image לחיפוש תמונות ולמשטחי Discover, אבל זה לא אות דירוג.