מדוע התצוגה המקדימה של הקישור שלי מציגה את התמונה הישנה לאחר שעדכנתי את התגים?

כל פלטפורמה גדולה מטמון את התוצאה של גירוד הדף שלך, לעתים קרובות במשך שבוע או יותר, כך קישור ששיתפת לפני התיקון ממשיך להציג את הכרטיס המעופש עדכון התגים אינו מבטל את המטמון הזה בפני עצמו. לגרד מחדש את כתובת האתר באגים הפלטפורמה - Facebook Sharing Debugger, LinkedIn Post Inspector, או על ידי שיתוף מחדש ב-Slack - כדי לאלץ אחזור חדש. הוספת מחרוזת שאילתה לא מזיקה לכתובת האתר מייצרת גם תצוגה מקדימה ללא מטמון לבדיקה.

האם אני צריך גם OG: וגם Twitter: Tags?

לא תמיד, אבל בטוח יותר לכלול את שניהם. X נופל בחזרה לתגיות Open Graph כאשר חסרים הטוויטר: מקבילות, כך שדף עם רק og: title, og: description ו-og:image עדיין יפיק כרטיס. מה שאינך יכול לבטא ב-Open Graph הוא סגנון הכרטיס: twitter: card מחליט בין הבאנר הגדול לפריסת הסיכום הקומפקטית, ו-twitter:site ו-twitter: creator מייחסים את הכרטיס לחשבונות שלך. הוסף את שלושת אלה ותן ל-og: תגיות לכסות את השאר.

כמה זמן צריך להיות OG:Title ו-OG:Description שלי?

שמור og: כותרת ב או מתחת לכ-60 תווים - רוב הכרטיסים חותכים מעבר לזה, וכרטיסים ניידים צרים חותכים מוקדם יותר. עבור og: תיאור המגבלות מתפצלות: X מציג בערך 110 תווים, פייסבוק ולינקדאין מציגות קרוב יותר ל-155 עד 200. אם אתה כותב למגבלת X הדוקה יותר התיאור שלך קורא במלואו בכל מקום. כל דבר בעבר שלא אבד, הוא פשוט מוסתר מאחורי אליפסיס, אז טען מראש את המילים החשובות.

מדוע התצוגה המקדימה שלי ריקה או מציגה רק את כתובת האתר?

הסיבות הרגילות הן og: תמונה שהיא נתיב יחסי ולא כתובת URL מוחלטת, תמונה המוגשת על http רגיל, תגים הממוקמים מחוץ ל- , תגים המוזרקים על ידי JavaScript בצד הלקוח שהמגרד לעולם לא מריץ, או הדף מחזיר סטטוס שאינו 200 או הפניה מחדש של התחברות למגרד. בדוק שהתגים מופיעים ב-HTML הגולמי שהשרת שלך מחזיר - הצג מקור ולא את מפקח הדפדפן, מכיוון שהמפקח מציג את ה-DOM לאחר הפעלת JavaScript.

האם הכלי הזה מביא את כתובת האתר שלי כדי לבדוק את התגים?

מס 'זה עובד מן התגים שאתה מקליד לתוך הטופס או להדביק ב כ - HTML, והכל מנותח ומעובד בדפדפן שלך הכתובת היחידה שהדפדפן שלך מבקש הוא כתובת ה - URL og: תמונה, כך התמונה יכולה להופיע בכרטיסים זוהי בחירה מכוונת עיצוב: דפדפנים לא יכולים להביא דפים שרירותיים של צד שלישי בגלל CORS, ו אחזור בצד השרת פירושו שליחת כתובות URL שלא פורסמו למישהו אחר, כי שום דבר לא מובא, אתה יכול לאמת דפים על localhost, staging, או מאחורי כניסה.

האם אוכל לצפות בתצוגה מקדימה של עמוד שעדיין לא פורסם?

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

מה קורה אם אני משאיר תג בחוץ?

מגרדים נופלים לאחור, והחולפות אינן ניתנות לחיזוי ללא og: title הם בדרך כלל משתמשים בתג , וללא og: description הם עשויים להשתמש במטא-תיאור או לגרד טקסט גוף. With no og:image most platforms show a text-only card, though tose will great an irrubly image from the page - not a log or a tracking pixel. With no og:url הכתובת המשותפת משמשת כפי שהיא, מה שאומר שפרמטרי מעקב יכולים לפצל את ספירת השיתוף שלך. הגדרת התגים במפורש היא הדרך היחידה לשלוט בתוצאה.

האם סימון Open Graph עוזר לדירוג החיפוש שלי?

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

האם כלי התצוגה המקדימה של הגרף הפתוח הזה בחינם ללא הרשמה?

כן, זה בחינם, אין הרשמה כל ניתוח, אימות ותצוגה מקדימה מתרחשים ב-JavaScript בתוך הדפדפן שלך, והכותרות והתיאורים שלך לעולם לא נשלחים לשרת שתי בקשות אכן עוזבות את הדף: הדפדפן טוען את ה-og:image שלך כדי לצייר אותו, ולחיצה על העתק בודקת את מגבלת השימוש היומית ומתעדת את העותק ללא התגים עצמם ניתוח ואימות המשך לעבוד במצב לא מקוון לאחר טעינת הדף, אך תמונות לא ייטענו ללא חיבור.

האם אוכל לצפות בתצוגה מקדימה של תמונת Open Graph לפני הפרסום?

כן, כל עוד הדפדפן שלך יכול להגיע לכתובת האתר של התמונה, כולל localhost או כתובת בימוי. הדבק אותו ב-og:image והוא מופיע בכל ששת הכרטיסים, או שהכרטיס מציג "התמונה לא הצליחה לטעון". התצוגה המקדימה מגבשת את התמונה כדי למלא מסגרת של 1.91:1, וריבוע עבור כרטיס הסיכום X, אז בדוק ששום דבר חשוב לא יושב ליד הקצוות הכלי אינו מודד את גודל הפיקסלים האמיתי או משקל הקובץ, והגוש שנוצר תמיד אומר 1200 על 630, אז תקן את שני התגים האלה אם התמונה שלך שונה.

מדוע תגיות Parse לא טענו את התגים שלי?

ההודעה אומרת באיזה מקרה פגעת. "לא נמצאו תגי ב-HTML המודבק". פירושו שלהדבק לא היו תגי מטא כלל, ו "תגיות שנמצאו, אבל אף אחת מהן לא הייתה og: או twitter: tags." פירושו שרק תגים כגון viewport או description היו נוכחים. המנתח קורא og:title, og:description, og:image, og:url, og:type, og:site_name והטוויטר: כרטיס, אתר, יוצר, כותרת, תיאור ותגי תמונה ניתוח מוצלח מחליף כל שדה בצורה, כך שכל תג שחסר בהדבקה הופך לריק.

Open Graph תצוגה מקדימה

הצג תצוגה מקדימה של איך הקישור שלך ייראה בפייסבוק, X, LinkedIn, Slack ו-Discord, אמת את ה-OG שלך: תגיות, והעתק מטא בלוק נכון

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/images/og/open-graph-preview.webp" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/images/og/open-graph-preview.webp" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook