OG Image Generator - יוצר תמונות שיתוף חברתי

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

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

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

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