העתק והדבק כולל תצוגה מקדימה כולל טיפים לתמונה/מטמון

מחולל תגיות OGP (פלט אוטומטי של og:title/og:image וכו')

Q: "לכלול גם תגיות Twitter Card?"

"כן. ניתן ליצור יחד את twitter:card ותגיות קשורות. X יכול להשתמש בתגיות OG כברירת מחדל, כך שגם הגדרות מינימליות יעבדו."

Q: "גודל תמונה מומלץ?"

"כמדריך, Meta מציעה 1200×630 ומעלה (מינימום 600×315) ויחס קרוב ל-1.91:1. ל-summary_large_image של X יש יחס ומינימום שונים. בחר לפי פלטפורמת היעד."

Q: "התצוגה המקדימה לא מתעדכנת"

"לרוב מדובר במטמון (cache). משוך מחדש באמצעות כלי ניפוי, ואם שינית את התמונה, השתמש בכתובת תמונה חדשה."

הזן URL, כותרת, תיאור וכתובת תמונה. צור יחד תגיות מטא של Open Graph ושל Twitter Card.

השימוש ב-Fetch מתבצע ישירות בדפדפן (מגבלות CORS חלות).

קלט

תגיות מטא שנוצרו / תצוגה מקדימה

1) מידע ליבה

חובה

כותרת (og:title) חובה

מדריך: 30–60 תווים 0

תיאור (og:description) אופציונלי

מדריך: 80–120 תווים 0

URL של התמונה (og:image) חובה

תצוגה מקדימה מופיעה כאשר התמונה נטענת.

יחס נוכחי -

שם האתר (og:site_name) אופציונלי

סוג (og:type) חובה

בחר אתר או מאמר.

2) Twitter Card

ניתן לכיווץ / פעיל כברירת מחדל

כלול תגיות Twitter Card

twitter:card

twitter:site (אופציונלי)

twitter:creator (אופציונלי)

כללי סנכרון אוטומטי

• אם twitter:title ריק, השתמש ב-og:title.
• אם twitter:description ריק, השתמש ב-og:description.
• אם twitter:image ריק, השתמש ב-og:image.

3) מתקדם

פתח רק אם דרוש כוונון עדין.

og:locale (אופציונלי)

og:image:alt / twitter:image:alt

טקסט נגישות. X מציין עד 420 תווים.

og:image:width

og:image:height

הוספת רוחב/גובה יכולה לעזור לקולרים לרנדר מהר יותר.

תגיות מאמר (רק כאשר og:type=article)

article:published_time

article:modified_time

השתמש ב-ISO 8601 במידת הצורך.

תגיות מטא שנוצרו

תצוגה מקדימה

תצוגת OG

example.com

כותרת לתצוגה מקדימה

התיאור יופיע כאן.

אפליקציות SNS/צא'ט רבות נראות דומות לזה

תצוגת X card summary

example.com

כותרת לתצוגה מקדימה

התיאור יופיע כאן.

מעבר בין summary ל-summary_large_image

הערות (אופציונלי)

הערות יופיעו כאן בהתאם לקלטים שלך.

אפשרויות

שמור קלטים בתוך ה-URL שתף את הקישור כדי לפתוח מחדש עם אותן הגדרות הסרת רווחים אוטומטית מסיר גם רווחים ברוחב מלא בצע Escape למירכאות כפולות שמור על מאפייני המטא בטוחים

מדריך גודל תמונה (דוגמאות)

בחר OG או X כדי לראות גדלים לדוגמה

מותאם ל-OG מותאם ל-X

רמז ליחס גובה-רוחב -

איך להשתמש / דוגמאות

מלא URL, כותרת, תיאור וכתובת תמונה.
בחר og:type ו-(אופציונלית) הגדרות Twitter Card.
העתק את התגיות שנוצרו והדבק בתוך ה-<head>.

דוגמה מהירה

הזן URL + כותרת + תמונה, ואז העתק את הסט המומלץ.

הערות וטיפים

מה זה OGP?

OGP (Open Graph Protocol) מאפשר לפלטפורמות חברתיות לקרוא את הכותרת, התיאור והתמונה של הדף שלך.

על ידי הגדרת og:title/og:description/og:image, אתה יכול לשלוט באיך קישורים משותפים נראים.

Twitter Cards (X) משתמשים במטא-נתונים דומים ויכולים להשתמש בתגיות OG כברירת מחדל.

הנחיות לגודל תמונה (לייצוב תצוגות מקדימות)

הנחיות Meta (Facebook)

• מינימום 200×200.
• לתצוגה טובה יותר, 1200×630 ומעלה; לפחות 600×315 מצוין כנקודת ייחוס. (Facebook Developers)
• יחס קרוב ל-1.91:1 עוזר למנוע חיתוך (בקירוב, לא מחייב).
• הנחיות לגודל קובץ כוללות 8MB ומטה.

הנחיות כרטיסי X (Twitter)

• summary_large_image תומך ביחס 2:1; מינימום 300×157, מקסימום 4096×4096. (X Developer)
• גודל קובץ מתחת ל-5MB ופורמטים נפוצים (JPG/PNG/WEBP/GIF) מצוינים כנקודת ייחוס.

כאשר שינויים לא מופיעים (מטמון ומשיכה מחדש)

• קולרים של SNS שומרים נתוני OG במטמון. השתמש בכלי הניפוי (debugger/inspector) של כל פלטפורמה כדי למשוך מחדש. (Facebook Developers)
• אם החלפת את התמונה והיא לא מתעדכנת, ייתכן שכתובת התמונה עצמה נשמרה במטמון; שנה את שם הקובץ או הוסף query string.
• הוספת og:image:width/height יכולה לשפר את יציבות הרינדור. (Facebook Developers)

כלים לאימות

Meta Sharing Debugger

משיכה מחדש ובדיקה של תגיות OG.

LinkedIn Post Inspector

רענון התצוגה המקדימה השמורה של LinkedIn.

X Card Validator

בדיקת רינדור של Twitter Card.

שאלות נפוצות

לכלול גם תגיות Twitter Card?

כן. ניתן ליצור יחד את twitter:card ותגיות קשורות. X יכול להשתמש בתגיות OG כברירת מחדל, כך שגם הגדרות מינימליות יעבדו.

גודל תמונה מומלץ?

כמדריך, Meta מציעה 1200×630 ומעלה (מינימום 600×315) ויחס קרוב ל-1.91:1. ל-summary_large_image של X יש יחס ומינימום שונים. בחר לפי פלטפורמת היעד.

התצוגה המקדימה לא מתעדכנת

לרוב מדובר במטמון (cache). משוך מחדש באמצעות כלי ניפוי, ואם שינית את התמונה, השתמש בכתובת תמונה חדשה.