What are Open Graph tags?

Open Graph tags are HTML meta tags that tell social media platforms how to display your link when shared. They include og:title (the headline), og:description (the summary), og:image (the preview image), and og:url (the canonical URL).

Do I need Open Graph tags for my website?

If you share your website links on any social platform — X, LinkedIn, Slack, Discord, WhatsApp, or Reddit — you need Open Graph tags. Without them, platforms guess how to display your link, and they guess poorly.

Is Open Graph the same as Twitter Cards?

No. Open Graph was created by Facebook in 2010. Twitter Cards were created by Twitter separately. However, most platforms support both, and you should set both for maximum compatibility.

מה זה Open Graph? מדריך מלא למתחילים

אתה משתף קישור ברשתות החברתיות. התצוגה המקדימה נראית נוראית. הנה הסיבה - וכיצד תגיות Open Graph מתקנות את זה.

רוצה לראות איך הקישורים שלך באמת נראים?

בדוק את התגיות Open Graph בחינם עם Proovd - הדבק כתובת URL וראה את התצוגה המקדימה ב-X, LinkedIn, Slack, Discord, WhatsApp ו-Reddit לפני שתשתף.

תשובה מהירה

Open Graph הוא קבוצה של מטא תגיות HTML השולטות כיצד נראים קישורים במדיה חברתית
תגיות ליבה: og:title, og:description, og:image, ⟧10⟧
ללא תגיות OG, פלטפורמות מנחשות - והן מנחשות רע
הגדר תגיות OG + Twitter Card תגיות לכיסוי מלא

מה זה בעצם Open Graph

Open Graph הוא פרוטוקול שהומצא על ידי Facebook בשנת 2010. לפני Open Graph, כשמישהו שיתף קישור ב-Facebook, התצוגה המקדימה הייתה בלתי צפויה. Facebook היה מגרד את הדף בחיפוש אחר תמונות וטקסט, והתוצאה הייתה לעתים קרובות אקראית - לפעמים סמל קטן, לפעמים תמונה אקראית מהעמוד, לפעמים כלום.

Facebook אמר: "בואו ניתן למנהלי אתרים דרך סטנדרטית להגיד לנו מה להראות." הם הציגו קבוצה של מטא תגים שכל אתר יכול להוסיף ל-HTML שלהם. פלטפורמות אחרות - X, LinkedIn, Slack, Discord, WhatsApp, Reddit - אימצו את אותו תקן. כיום, Open Graph היא השפה האוניברסלית לתצוגה מקדימה של קישורים באינטרנט.

זו לא טכנולוגיה שאתה מתקין. זה רק מטא תגיות HTML בקטע של הדף שלך. זהו.

תגיות הליבה Open Graph

כל עמוד שמשותף במדיה החברתית צריך לכלול לפחות את ארבעת התגים הבאים:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

הנה מה שכל אחד עושה:

og:title — הכותרת המופיעה בכרטיס התצוגה המקדימה. בדרך כלל כותרת העמוד או כותרת המאמר.
og:description — סיכום קצר (2-3 משפטים) המופיע מתחת לכותרת.
og:image — תמונת התצוגה המקדימה. גודל מומלץ: 1200×630 פיקסלים (יחס 1.91:1).
og:url - כתובת האתר הקנונית של הדף. עוזר לפלטפורמות לזהות את כתובת האתר הנכונה.

ישנם תגים אופציונליים נוספים כמו og:type (בדרך כלל "אתר" או "מאמר"), og:site_name (שם המותג שלך), ו-og:locale (language). אבל הארבעה למעלה הם אלו החשובים ביותר עבור תצוגות מקדימות של קישורים.

איך Open Graph עובד - צעד אחר צעד

הנה מה שקורה כשמישהו משתף קישור:

מישהו מדביק כתובת URL ב-X, LinkedIn, Slack, Discord, או בכל מקום אחר.
הבוט של הפלטפורמה מביא את כתובת האתר וקורא את ה-HTML מלמעלה למטה.
זה מחפש og: tags בקטע .
הוא בונה כרטיס תצוגה מקדימה באמצעות הערכים og:title, og:description וog:image.
הכרטיס מוצג לכל מי שרואה את הקישור המשותף.

אם הפלטפורמה לא מוצאת תגיות og:, היא חוזרת להיוריסטיקה שלה - בחירת תמונות אקראיות, שימוש בתגית </code> וכו'. התנהגות הנפילה הזו היא הסיבה שכל כך הרבה קישורים משותפים נראים נורא.</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph לעומת Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>טוויטר יצרה מערכת תגים משלה בשם "Twitter Cards" לפני ש-Open Graph היה קיים. Twitter Cards השתמשו ב-<code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> ו<code>⟦10111 <code>og:</code> קידומות.</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>כיום, רוב הפלטפורמות תומכות בשניהם. אבל X/Twitter עדיין מעדיף תגיות <code>twitter:card</code> על פני תגיות OG. לכן השיטה הטובה ביותר היא להגדיר <strong>שניהם</strong>:</p> <pre><code> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" />  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">למה זה חשוב לאתר שלך</h2> <p data-i18n="b.what-is-open-graph.35">אם אתה משתף את התוכן שלך בכל מקום במדיה החברתית - מה שאתה כנראה עושה אם יש לך אתר אינטרנט - תצוגות הקישורים המקדימות שלך הן הרושם הראשוני שלך. תצוגה מקדימה מעוצבת היטב עם כותרת ברורה, תיאור משכנע ותמונה טובה מגדילה באופן דרמטי את שיעורי ההקלקה.</p> <p data-i18n="b.what-is-open-graph.36">תצוגה מקדימה שבורה - תמונה חסרה, כותרת קטומה או תיאור משובש - גורמת לתוכן שלך להיראות לא מקצועי. אנשים גוללים מעבר לזה.</p> <p data-i18n="b.what-is-open-graph.37">תגיות Open Graph הם ההבדל בין השניים. לוקח להם 5 דקות להגדיר ויש להם השפעה לא פרופורציונלית על ביצועי התוכן שלך במדיה החברתית.</p> <h2 data-i18n="b.what-is-open-graph.38">רשימת בדיקה מהירה</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>הוסף לכל עמוד <code>og:title</code>, <code>og:description</code>, <code>og:image</code> ו<code>og:url</code></li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>הוסף <code>twitter:card</code> ו<code>twitter:image</code> לתאימות X/Twitter</li> <li data-i18n="b.what-is-open-graph.41">הגדר את גודל התמונה ל-1200×630 פיקסלים</li> <li data-i18n="b.what-is-open-graph.42">השתמש בכתובות URL מוחלטות (https://...) עבור כל נתיבי התמונה</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html>בדוק עם <a href="https://proovd.in/he/">Proovd</a> כדי לראות איך הדף שלך נראה בכל הפלטפורמות</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">שאלות נפוצות</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">האם אני צריך תגיות Open Graph אם אני לא משתף במדיה חברתית?</h3> <p data-i18n="b.what-is-open-graph.46">אם אתה לא משתף קישורים בשום מקום, אתה לא צריך אותם. אבל אם יש לך אתר אינטרנט ושתף אותו אפילו פעם אחת במדיה החברתית, תגיות OG חיוניות.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">האם תגיות Open Graph משפיעות על דירוג Google?</h3> <p data-i18n="b.what-is-open-graph.48">לא ישירות. גוגל לא משתמשת בתגיות OG כגורם דירוג. אבל הם יכולים להשפיע על שיעורי קליקים מתוצאות חיפוש ושיתופים חברתיים, מה שמשפיע בעקיפין על התנועה והנראות.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">האם אני יכול להגדיר תגיות OG שונות עבור דפים שונים?</h3> <p data-i18n="b.what-is-open-graph.50">כֵּן. לכל עמוד צריך להיות תגי OG משלו התואמים לתוכן שלו. לפוסט בבלוג על כלבים צריך להיות og:title וog:image שונים מאשר דף על חתולים.</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">מאמרים קשורים</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/he/blog/discord-link-preview-not-working">Discord תצוגה מקדימה של קישור לא עובד? 7 תיקונים שצריך לנסות (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/he/blog/how-to-add-open-graph-tags">כיצד להוסיף Open Graph תגיות לכל אתר</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/he/blog/open-graph-vs-twitter-card">Open Graph לעומת Twitter Card: מה ההבדל?</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/he/blog/og-image-size-guide">Open Graph גודל תמונה: המדריך השלם לשנת 2026</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>בדוק את התגים Open Graph שלך בשניות</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>בדוק את התגיות Open Graph בחינם עם <a href="https://proovd.in/he/">Proovd</a> - הדבק כתובת URL וראה את התצוגה המקדימה ב-X, LinkedIn, Slack, Discord, WhatsApp ו-Reddit.</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>