מחולל תמונות OG – יוצר תמונות לשיתוף חברתי

תמונת Open Graph היא התמונה שמופיעה כאשר מדביקים קישור בצ'אט, בציוץ או בערוץ Slack – וכל פלטפורמה שמרנדרת כזו מצפה לקנבס בגודל של כ-1200×630 פיקסל, הגודל שסביבו עוצבו הכרטיסים og:image של Facebook ו-summary_large_image של Twitter. בחרו גודל שגוי והתמונה תיחתך, תהיה מטושטשת או תידחס; בחרו פריסה שגויה והכותרת תיקרא כרצועה בלתי קריאה על גבי תמונה עמוסה. הכלי הזה מחבר את התמונה ברזולוציית היעד האמיתית באמצעות ה-Canvas 2D API, כך שמה שאתם רואים בתצוגה המקדימה הוא רשת הפיקסלים המדויקת שתישלח ב-PNG.

בחרו רקע – צבע שטוח, מעבר צבע ליניארי דו-שלבי הבנוי משני צבעים לבחירתכם, או תמונה שהועלתה ונחתכת למילוי המסגרת המלאה של 1200×630 באותו אופן שבו CSS background-size: cover היה עושה, במקום להימתח מחוץ לפרופורציה. הקלידו כותרת ותת-כותרת אופציונלית: שתיהן נמדדות תו אחר תו לפי מדדי הגופן של הקנבס, כך שכותרת ראשית ארוכה מכדי להתאים לשורה אחת נשברת לשורה שנייה או שלישית בגבול מילה אמיתי, במקום לגלוש מעבר לקצה או להיחתך באופן בלתי נראה. בחרו יישור למרכז או לשמאל, בחרו צבע טקסט שיהיה קריא על הרקע שלכם, והניחו לוגו אופציונלי בפינה בגודל קבוע וקריא.

מתחת לקנבס, ארבעה כרטיסים קטנים מעריכים כיצד התמונה המוגמרת נראית לאחר שפלטפורמה אמיתית עוטפת אותה במסגרת שלה: הכרטיס של Twitter/X מציג רק את הדומיין וכותרת מודגשת מתחת לתמונה ללא שורת תיאור, Facebook מוסיף פס דומיין באותיות גדולות מעל בלוק כותרת-ותיאור, LinkedIn שם את הדומיין מתחת לכותרת ללא תיאור כלל, וההטמעה של Discord מציגה דומיין, כותרת ותיאור מעל התמונה בערכת העיצוב הכהה שלה. אלו הן הערכות מעוצבות למטרות תכנון – מתויגות בבירור כהמחשה, עם שורת דומיין שאתם מקלידים בעצמכם – לא שליפה חיה או צילום מסך של הפלטפורמות בפועל, שכן שיתוף קישור ואפשור לסורק של כל פלטפורמה לקרוא את תגיות המטא og:image ו-og:title האמיתיות של הדף שלכם הם מה שמייצר בפועל את הכרטיס החי.

הכול מרונדר מקומית על אלמנט HTML canvas בדפדפן שלכם: הכותרת, תת-הכותרת, הרקע והלוגו שהועלו לעולם אינם עוזבים את המכשיר שלכם, והקובץ המיוצא הוא PNG נקי מ-canvas.toBlob() המכיל רק את מה שחיברתם – ללא מסגרות של הדמיות, סרגלי דפדפן מזויפים או לוגואים של פלטפורמות המוטמעים בתמונה המורדת. אם תצטרכו גם לשנות גודל או להמיר את ה-PNG המיוצא אחר כך, כלי שינוי הגודל והמרת התמונות של אתר זה ממשיכים בדיוק מהנקודה שבה זה מסתיים.