OG & Twitter Card Generator — בונה, מבקר ותצוגה מקדימה של תגי Meta
צור תגי Open Graph ו-Twitter Card <meta> מוכנים להדבקה מטופס, או הדבק <head> קיים כדי לאתר בו תגים חסרים, אורך כותרת/תיאור ותקינות twitter:card — ולאחר מכן צפה בתצוגה מקדימה בשתי האפשרויות בהדמיות מעוצבות מחדש של כרטיסי קישור של Twitter/X, פייסבוק, לינקדאין ודיסקורד.
🔒 מעובד כולו בדפדפן שלך - שום דבר שתזין כאן לא יועלה לעולם.
תוצאה
תגי Open Graph ו-Twitter Card meta קובעים איך ייראה קישור ברגע שהוא מודבק ל-Slack, iMessage, ציוץ או ערוץ Discord — כותרת, תיאור ותמונה שנבחרים על ידי ה-<head> של הדף עצמו, ולא על פי מה שהפלטפורמה שולפת במקרה מטקסט התוכן הגלוי. הכלי הזה הוא גם בונה וגם מבקר, לא ממלא תבניות גנרי. במצב BUILD, מלא כותרת, תיאור, כתובת URL של תמונה, כתובת URL קנונית, סוג תוכן וסוג כרטיס Twitter, והוא מרכיב את בלוק התגים <meta property="og:..."> ו-<meta name="twitter:..."> המדויק, מוכן להדבקה לתוך ה-<head> של הדף שלך, ומדלג על כל שדה שהשארת ריק במקום לייצר תגים חלולים עם תוכן ריק.
במצב AUDIT, הדבק את תגי ה-<head> הקיימים שלך או HTML של דף שלם, והכלי מנתח אותם עם ה-DOMParser המקורי של הדפדפן כדי לחלץ כל תג og: ו-twitter: meta שכבר נמצא, ולאחר מכן מריץ את הבדיקות שבאמת חשובות: ארבעת התגים הנדרשים בדרך כלל (og:title, og:description, og:image, og:url) מסומנים אם הם חסרים; og:title נמדד מול נקודת ה-60 תווים בערך שבה חלק מהפלטפורמות מתחילות לחתוך אותו ונקודת ה-90 תווים בערך שבה רובן יעשו זאת; og:description נמדד מול טווח 155-עד-200 תווים בערך שרוב הפלטפורמות מאפשרות לפני שהן קוטעות אותו; twitter:card נבדק מול ארבעת הערכים האמיתיים שמאמת הכרטיסים של Twitter מקבל — summary, summary_large_image, app, player — ומסומן אם הוא משהו אחר; ותגים כפולים (אותו מאפיין שהוצהר פעמיים, באג העתק-הדבק נפוץ למדי) מצוינים בשמם.
מידות התמונה זוכות לטיפול כן: הכלי הזה לא יכול לאמת את גודל הפיקסלים האמיתי של התמונה שלך מבלי לשלוף אותה, והוא בכוונה אף פעם לא עושה זאת, בהתאמה למדיניות אי-שליפת-בקשות-חיצוניות של אתר זה. אם ה-HTML שלך כבר מצהיר על og:image:width ו-og:image:height, המספרים המוצהרים האלה נבדקים מול המינימום המומלץ הנפוץ של 1200×630; אם לא, תקבל הערת הנחיה ברורה במקום אישור או פסילה מפוברקים. שני המצבים מעבדים את אותן ארבע הדמיות של תצוגה מקדימה של קישור — Twitter/X (עובר בין פריסת התמונה הממוזערת הקומפקטית "summary" לפריסת "summary_large_image" ברוחב מלא בהתאם לערך twitter:card), פייסבוק, לינקדאין ודיסקורד — כל אחת מעוצבת מחדש באמת כך שתתאים למוסכמות הטיפוגרפיה והפריסה של אותה פלטפורמה, במקום תיבה אחת עם לוגו שונה, וכל אחת מסומנת בבירור כקירוב להמחשה לצרכי תכנון, מאחר שפלטפורמות אמיתיות משנות את עיצוב התצוגה המקדימה שלהן עם הזמן והכלי הזה לעולם לא שולף או גורף מידע מהן כדי לבדוק.