הזמן הגרוע ביותר לגלות תצוגה מקדימה של קישור שבור הוא לאחר ציוץ ההשקה אתה מבלה שבוע בדף, אתה כותב את ההכרזה, אתה לוחץ על שלח - והכרטיס שמופיע הוא מלבן אפור עם כותרת קטומה וללא תמונה, כי og:image הצביע על /images/og.png במקום https://yoursite.com/images/og.png. הפוסט כבר יצא הכרטיס כבר שמור במטמון אתה יכול לתקן אותו ואז לבקש מכולם לשתף מחדש.
An פתח גרף תצוגה מקדימה פותרת את זה על ידי הזזת הצ'ק מוקדם יותר. במקום לפרסם ולקוות, אתה מסתכל מה יהיה הכרטיס בזמן שהתגים עדיין ניתנים לעריכה. זו כל הנחת היסוד של פתח תצוגה מקדימה של גרף כלי: הזן את התגים שלך, או הדבק את אלה שכבר יש לך, וראה כרטיסי פייסבוק, X, לינקדאין, Slack ו-Discord משוערים המוצגים זה לצד זה, עם פסק דין של מעבר/אזהרה/כישלון בכל שדה.
הסיבה שתצוגה מקדימה בודדת אינה מספיקה היא שכל פלטפורמה קוראת את אותם תגים ומעבדת אותם אחרת. X מקצץ תיאורים בכ-110 תווים; פייסבוק מראה קרוב יותר ל-155. לינקדאין מרבה להפיל את התיאור לחלוטין ומציגה רק את התמונה, הכותרת והדומיין. Slack ממוטט את כל העניין לקובץ מצורף קומפקטי עם מסילה צבעונית. דיסקורד מטמיע את התיאור בצורה בולטת אך מכווץ את התמונה. כותרת שמתאימה יפה לכרטיס פייסבוק ניתן לחתוך באמצע המילה ב-X, ולעולם לא תשים לב אלא אם תסתכל על שניהם.
אני בונה Toolz.dev ושלח דפים ללא הרף, ונמאס לי מלולאת הפרסום-צ'ק-תיקון הכלי פועל כולו בדפדפן ואינו מבצע שיחות רשת כלל - הוא אף פעם לא מביא את כתובת האתר שלך - מה שאומר שהוא עובד גם עבור דפים שעדיין לא נפרסו, לשבת מאחורי התחברות, או לחיות בדומיין בימוי שאליו לא יכולים להגיע מנפיקי הבאגים הרשמיים של הפלטפורמה.
TL;DR: תגי גרף פתוח שולטים כיצד הקישור שלך נראה כאשר הוא משותף כל פלטפורמה קוראת אותו הדבר
og:מתייג אבל חותך ומניח אותם אחרת, אז תצוגה מקדימה של פלטפורמה אחת לא אומרת לך כלום על האחרות. ה פתח תצוגה מקדימה של גרף tool מעבד חמישה כרטיסי פלטפורמה מקבוצה אחת של תגים, מאמת כל שדה מול מגבלות הפלטפורמה הנוכחיות, מנתח בלוק תג קיים אם כבר יש לך אחד, ומעביר לך עותק מוכן<meta>בלוק - הכל בצד הלקוח, ללא גרידה וללא העלאה.
תכונות מפתח
חמש תצוגות מקדימות של פלטפורמה מסט אחד של תגים
הכלי מציג כרטיסים משוערים עבור פייסבוק, X בשניהם summary_large_image ו summary סגנונות, לינקדאין, סלאק, ודיסקורד כולם קוראים מאותם שדות, אז כשחותכים כותרת רואים אותה מתעדכנת בכל מקום בבת אחת הנקודה היא לא נאמנות מושלמת לפיקסלים - פלטפורמות מעצבות מחדש את הכרטיסים שלהן ללא אזהרה - אלא נאמנות יחסית: פרופורציות נכונות, נקודות חיתוך נכונות, סדר שדות נכון, כך שאפשר לראות איזו פלטפורמה היא זו שנשברת.
הדבק-ודלק עבור תגיות שכבר יש לך
אם הדף קיים, לעתים רחוקות ברצונך להקליד מחדש תשעה שדות הדבק את ה-HTML הגולמי - שלם <head>, dump של מקור תצוגה, או בלוק רופף של <meta> קווים - לתוך תיבת הניתוח והמנתח המובנה שולף כל og: ו twitter: תג זה מזהה וטוען אותם לתוך הטופס המנתח הוא מבוסס regex ולא DOM מבוסס, וזה מה שמאפשר לאותו קוד לרוץ בדפדפן, ב - Node, ובשולחן העבודה לבנות ללא שינוי.
אימות לכל שדה עם מגבלות אמיתיות
כל שדה מקבל סטטוס מעבר, אזהרה או כישלון כותרת מעל כ-60 תווים נכשלת תיאור בין 110 ל-155 תווים מזהיר, כי הוא קורא במלואו בפייסבוק ובלינקדאין אבל נחתך על X. קרוב משפחה og:image הנתיב נכשל על הסף - מגרדים לא פותרים אותם. א og:image מוגש על מישור http מזהיר, כי מספר פלטפורמות מסרבות להציג תמונות שאינן HTTPS. א twitter:site ערך שאינו ידית תקפה נכשל. פסקי הדין ספציפיים מספיק כדי לפעול לפי ולא "נראה בסדר" גנרי.
כללי תמונה שאתה באמת יכול לעקוב אחריהם
כרטיסי תמונה גדולים בכל פלטפורמה מרכזית מניחים תמונה של 1.91:1; 1200x630 פיקסלים הוא הגודל שמספק את כולם בבת אחת. הכלי קובע שהמטרה הזו במפורש, מסמן את מצבי הכשל שגורמים לתמונות להיעלם בשקט, ומכיוון שכרטיס עם תמונה שבורה הוא הבאג הנפוץ ביותר ב-Open Graph - הופך את המציאות שלך og:image כתובת אתר בכל תצוגה מקדימה, חוזרת למציין מיקום ברור אם התמונה לא יכולה להיטען.
מטא בלוק מוכן להעתקה, נמלט כהלכה
הפלט שנוצר הוא בלוק תג שלם, לא קטע. זה כולל og:image:width ו og:image:height, מה שחשוב יותר ממה שרוב האנשים מבינים: בלעדיהם, חלק מהמגרדים מציגים כרטיס טקסט בלבד באחזור הראשון ומציגים את התמונה רק לאחר שהורידו ומדדו אותה, מה שיכול להיות מספר שעות מאוחר יותר. הערכים נמלטים מ-HTML, כך שאמפרסנד או ציטוט בתיאור שלך לא יכולים לצאת מהתכונה ולהשחית את הסימון שלך.
100% צד הלקוח, ללא גרידה
הכלי אף פעם לא מבקש את כתובת האתר שלך. זה מכוון, וכדאי להבין מדוע: דפדפן אינו יכול להביא דף צד שלישי שרירותי בגלל מדיניות אותו מקור, ואחזור בצד השרת פירושו משלוח כתובות האתרים שלא פורסמו למישהו אחר 's יומני עבודה מהתגים שאתה מספק עוקפת את שתי הבעיות ופותחת את הנעילה של המקרה שהבאגים הרשמיים אינם יכולים להגיש - אימות דף שעדיין לא פעיל ראה פרטיות נתונים בכלים מקוונים לנימוק הרחב יותר.
כיצד להשתמש בכלי התצוגה המקדימה של גרף פתוח
שלב 1: טען את התגים שלך
יש לך שני נתיבים אם אתה כותב מטא נתונים מאפס, מלא את הטופס: og:title, og:description, og:image, og:url, og:site_name, ואז בחר an og:type וא twitter:card סגנון והוסף את שלך twitter:site ו twitter:creator ידיות.
אם בדף כבר יש תגיות, הדבק אותן במקום זאת פתח את הדף, הצג מקור (לא מפקח הדפדפן - עוד על ההבחנה הזו למטה), העתק את <head>, ושחרר אותו לתיבת הניתוח לחץ על נתח תגיות וכל מה שזוהה נטען לטופס המנתח מבין גם את הכינויים: og:image:secure_url ו og:image:url שניהם מזינים את שדה התמונה, ו twitter:title, twitter:description, ו twitter:image משמשים כ-fallbacks כאשר שלהם og: מקבילות נעדרות - מה שמשקף את האופן שבו הפלטפורמות עצמן פותרות את התגים.
שלב 2: קרא את לוח האימות
רשימת האימות מסודרת באופן שבו השדות חשובים. תקן תחילה את הכשלים: חסר og:image, נתיב תמונה יחסי, כותרת 20 תווים מעל הגבול. then look at the warnings, which are brought about the gap between platforms - תיאור שהוא בסדר לפייסבוק אבל ארוך ל-X, חסר og:site_name זה אומר שהכרטיס שלך מציג שם מארח חשוף במקום המותג שלך.
המונים בראש הפאנל נותנים לך קריאה מהירה. אפס נכשל וכמה אזהרות הוא מצב שניתן לשלוח בצורה מושלמת; אזהרות הן פשרות, לא באגים.
שלב 3: השוו את הקלפים
זה השלב שאנשים מדלגים עליו, והוא זה שתופס את הבעיות האמיתיות סרוק את כל שש התצוגה המקדימה האם הכותרת נחתכת בכרטיס הסיכום X? האם התיאור נעלם בלינקדאין (זה בדרך כלל עושה - זה צפוי)? האם התמונה נראית ממש ב-1.91:1, או שהלוגו שלך נחתך כי עיצבת גרפיקה מרובעת והכרטיס הופך אותה לרחבה?
גזוז ובדוק שוב עד שכל כרטיס קורא בצורה נקייה משמעת שימושית: כתוב לאילוץ ההדוק ביותר אם התיאור שלך קורא במלואו ב-110 תווים, הוא קורא במלואו בכל מקום אם הכותרת שלך עובדת ב-55, הוא שורד כל כרטיס וכל פריסה ניידת.
שלב 4: העתק את בלוק המטא ושלח אותו
העתק את הבלוק שנוצר לדף 's <head>. במסגרת - Next.js, Nuxt, SvelteKit, Astro - לא תדביק גלם <meta> תגיות, אבל הבלוק הוא עדיין מקור האמת שלך עבור אילו שדות בדיוק לאכלס ב-Framework's metadata API.
לאחר מכן בצע את השלב שכולם שוכחים: לגרד מחדש את כתובת האתר בכל פלטפורמה's debugger.משלוח התיקון אינו מנקה את הכרטיס השמור במטמון מחולל מטא תגים האם הכלי הנלווה כאן אם אתה צריך גם את תגי SEO הסטנדרטיים - כותרת, תיאור, קנוניים, רובוטים - שחיים לצד התגים החברתיים.
איך פרוטוקול הגרף הפתוח עובד בפועל
Open Graph התחיל בפייסבוק ב-2010 כדרך להפוך דף אינטרנט לצומת בגרף חברתי השאיפה דעכה; אוצר המילים של התג תקוע, וכעת זהו הסטנדרט דה פקטו ש-Facebook, LinkedIn, Slack, Discord, WhatsApp, Pinterest, iMessage, Signal ורוב התוכנות האחרות לפירוק קישורים קראו.
המנגנון פשוט כאשר קישור משותף, הפלטפורמה שולחת בוט לכתובת האתר שלך - facebookexternalhit, LinkedInBot, Slackbot-LinkExpanding, Discordbot, Twitterbot. הבוט הזה מבקש את ה-HTML הגולמי, קורא את <head>, מחלץ את og: ו twitter: מטא תגיות, ובונה כרטיס זהו HTTP GET יחיד וניתוח הבוט אינו דפדפן: רוב הסורקים הללו אינם מבצעים JavaScript, שהוא הגורם השורשי לז'אנר שלם של באג.
התגים עצמם
ארבעה תגים מתוארים כנדרש בפרוטוקול: og:title, og:type, og:image, ו og:url. בפועל og:description ו og:site_name הם נושאי עומס באותה מידה, כי בלעדיהם הכרטיס חשוף או נופל בחזרה לכל טקסט שהמגרד יכול למצוא בדף התגים משתמשים ב property תכונה, לא name- - <meta property="og:title" content="..." />- מה שמכשיל אנשים כי תגי הטוויטר עושים את ההיפך ומשתמשים בהם name. רוב המנתחים סלחנים לגבי זה, אבל הפלטפורמות' המאמתים שלו לא תמיד, אז כדאי לעשות נכון.
og: מול טוויטר: קדימות
X קורא תחילה תגיות של כרטיס טוויטר ונופל חזרה ל-Open Graph כשהם נעדרים. זה אומר דף עם רק og:title, og:description, ו og:image עדיין מייצר כרטיס X עובד - החזרה היא בעיצוב.
אז מה בעצם צריך א twitter: תָג? שלושה דברים. twitter:card מחליט על הפריסה, ואין מקבילה ל-Open Graph: בלעדיה, X בוחר סגנון כרטיס על סמך מה שהוא מוצא, וזו לא החלטה שאתה רוצה להאציל. twitter:site מייחס את הכרטיס לחשבון מותג. twitter:creator קרדיטים המחבר כל השאר יכול לבוא בבטחה מתוך Open Graph.
הכלל המעשי: כתוב תגיות Open Graph מלאות, ואז הוסף בדיוק את שלושת אלה twitter: תגיות. שכפול twitter:title ו twitter:description אינו מזיק אך חסר טעם אלא אם כן אתה באמת רוצה עותק שונה ב-X מאשר במקומות אחרים - וזו מדי פעם בחירה לגיטימית, שכן X' חיתוך הדוק יותר מצדיק לפעמים תיאור קצר יותר וחריף יותר.
מידות תמונה, יחסים ובעיית החיתוך
יחס הגובה-רוחב של 1.91:1 הוא המספר להפנים. 1200x630 פיקסלים פוגעים בו, הוא גדול מספיק עבור צגי רשתית, וזה מה שפייסבוק, לינקדאין ו-X מעבדים כולם ללא עיוות עבור כרטיסים בעלי תמונה גדולה.
מצב הכשל עדין: פלטפורמות בדרך כלל לא דוחות תמונה מחוץ ליחס, הן חותכות אותה. העלה גרפיקה מרובעת בגודל 1000x1000 ופייסבוק תחלץ אותה למרכז ל-1.91:1, מה שפורס בערך שליש מלמעלה ומלמטה. אם טקסט הכותרת שלך היה מרוכז אנכית הוא שורד; אם אתה שם לוגו בחלק העליון הוא לא שומר תוכן משמעותי בתוך אזור בטוח והרחק מהקצוות, כי משטחים שונים חותכים בכמויות שונות במקצת.
הקומפקטי X summary כרטיס הוא היוצא מן הכלל הוא רוצה תמונה מרובעת, מינימום 144x144, והוא יחטב במרכז באנר של 1.91:1 לריבוע - מה שבדרך כלל הורס אותו אם אתה משתמש בכוונה summary, ספק תמונה מרובעת; אם אתה מספק באנר, השתמש summary_large_image.
שמור על גודל הקובץ מתחת לכ-5 MB (Facebook's תקרה מתועדת; פלטפורמות אחרות מחמירות יותר בפועל), משמשות כ-PNG, JPEG או WebP, ותמיד השתמש בכתובת URL מוחלטת של HTTPS. נתיבים יחסיים ופרוטוקול-יחסי // כתובות URL הן שתי הדרכים הנפוצות ביותר שבהן תמונה לא מצליחה להופיע בשקט.
למה מגרדים מטמון, ואיך לשבור את המטמון
כל פלטפורמה מאחסנת את התוצאה של גירוד הדף שלך - בדרך כלל במשך כשבעה ימים, לפעמים יותר. זו לא עקשנות: ניתן לשתף קישור פופולרי אלפי פעמים בשעה, ושליפה מחדש של הדף שלך עבור כל שיתוף תהיה התקפת מניעת שירות שבוצעה על ידי הפלטפורמה. אז הם מגרדים פעם אחת ועושים שימוש חוזר.
התוצאה היא שתיקון התגים שלך אינו מתקן את הכרטיס. התצוגה המקדימה הישנה נמשכת עבור כל שיתוף קיים ועבור שיתופים חדשים עד שפג תוקפו של המטמון. כדי לכפות רענון:
- פייסבוק: מאתר הבאגים לשיתוף, באמצעות הלחצן " Scrape Again". זה גם מנקה את המטמון המשמש את אינסטגרם ו-WhatsApp.
- לינקדאין: מפקח הדואר הזנת כתובת האתר מפעילה גרידה חדשה.
- X: מאמת הכרטיסים הוצא משימוש והגישה אינה עקבית. בפועל, פרסום הקישור הוא הרענון האמין היחיד.
- רפיון: מטמוני Unpurl פוקעים מעצמם; הוספת פרמטר שאילתה לא מזיק מייצרת פתיחה חדשה באופן מיידי.
- מחלוקת: דומה - מחרוזת שאילתה שהשתנתה היא הפתרון המעשי.
טריק מחרוזת השאילתה הזה הוא פתח המילוט האוניברסלי: https://example.com/page?v=2 האם, למגרד, כתובת URL שונה ללא ערך שמור במטמון השתמש בה לבדיקה, לא לקישור הקנוני שאתה מפרסם בפועל, ושמור og:url הצבעה על הכתובת הקנונית הנקייה כך שחלקים של גרסאות עם פרמטרים מתאחדים בצורה נכונה. ה מקודד/מפענח כתובת URL שימושי כאשר הפרמטרים האלה מסתבכים.
מה קורה כאשר חסרים תגים
מגרדים נופלים לאחור, והנפילות גרועות ממה שהיית מקווה.
לא og:title והם משתמשים ב <title> תג - אשר בדרך כלל נכתב עבור תוצאות חיפוש ולעתים קרובות מסתיים בצינור ואת שם המותג שלך, קריאה מביכה כמו כותרת כרטיס. לא og:description והם משתמשים במטא תיאור, או מגרדים טקסט גוף, שיכול למשוך באנר של עוגיות או תווית ניווט. לא og:image ורוב הפלטפורמות מציגות כרטיס טקסט בלבד, אם כי חלקן מחפשות כל תמונה בדף ועשויות למצוא לוגו, אווטאר או פיקסל מעקב. לא og:url והכתובת המשותפת משמשת כפי שהיא, אז ?utm_source=twitter גרסאות מטופלות כדפים נפרדים והשיתוף שלך סופר קטע.
יש עוד מחלקת כשל אחת שכדאי לתת לה שם, כי היא בלתי נראית בניפוי באגים רגיל: תגיות מוזרקות על ידי JavaScript בצד הלקוח. אם תגי המטא שלך מוגדרים על ידי React לאחר הידרציה, מפקח הדפדפן מראה אותם בצורה מושלמת והמגרד לא רואה דבר, מכיוון שהמגרד מעולם לא הפעיל את ה-JavaScript שלך. ודא תמיד עם view-source או curl, שמציגים את ה-HTML הגולמי שהשרת החזיר בפועל - לא ה-DOM לאחר אתחול האפליקציה שלך. אותו הדבר חל על דפים שמחזירים 401, הפניה מחדש לכניסה או חסימת בוט 403 לבקשות לא מאומתות: המגרד מקבל את דף השגיאה, לא את התוכן שלך.
מקרי שימוש נפוצים
אימות טרום השקה
מקרה הליבה לפני שדף עולה לאוויר, הדבק את התגים שאתה מתכוון לשלוח ואשר כל עיבוד כרטיס זה הדבר היחיד שמאתרי הבאגים הרשמיים של הפלטפורמה לא יכולים לעשות, כי הם חייבים להביא כתובת URL חיה. בדיקת טרום השקה עולה שלושים שניות ושומרת את השיתוף מחדש של יום ההשקה.
איתור באגים בכרטיס שבור
קישור נפרש שגוי ואתה צריך לדעת למה. הדבק את התגים הנוכחיים של הדף ' קרא את חלונית האימות, והסיבה היא בדרך כלל מיידית: נתיב תמונה יחסי, א http תמונה, תיאור כפול מהמגבלה, חסר twitter:card. תקן, גרד מחדש את מאתר הבאגים של הפלטפורמה, בוצע.
ביקורת אתר's מטא נתונים בקנה מידה
עבודה דרך אתר עמוד אחר עמוד, הדבקה של כל אחד מהם <head> וקריאת פסק הדין, מעלה את הסחף המצטבר בכל פרויקט מרובה תורמים: בעמוד אחד יש תגי טוויטר ואחר לא, תיאור אחד הוא 300 תווים, שלושה עמודים חולקים את אותו גנרי og:image. הכלי הופך לבדיקת עקביות מהירה ולא לניחוש לכל עמוד.
עיצוב תמונת השיתוף
כאשר אתה בוחר או מזמין og:image, התצוגה המקדימה מראה לך מה היבול בעצם עושה לו בכרטיס רחב לעומת ריבוע. מעצבים מוסרים באופן שגרתי גרפיקה מרובעת יפה שנשחטת על ידי יבול של 1.91:1; לראות שלפני שהוא נשלח זול יותר מאשר לראות אותו אחרי.
כתיבת עותק לאילוץ ההדוק ביותר
מכיוון שהתצוגה המקדימה מציגה את X's truncation לצד Facebook's, הם הופכים מגבלת תווים מופשטת למשהו גלוי. כתיבת תיאור שקורא במלואו ב-110 תווים היא דיסציפלינה שהרבה יותר קל להחזיק כאשר אתה יכול לראות את האליפסיס מופיע תוך כדי הקלדה מְרַגֵל מכסה את העבודה השכנה של הפקת כתובת האתר הנקייה og:url צריך להצביע על.
עבודה על בימוי או מאחורי התחברות
כלים פנימיים, עבודת לקוח תחת NDA ודפים מאחורי קיר אישור אינם ניתנים להשגה על ידי מאפי באגים בפלטפורמה. מכיוון שהכלי עובד מתגים ולא מאחזור, הוא מטפל בהם באופן זהה לדף ציבורי.
השוואת פלטפורמות
הנחיה נוכחית הידועה ביותר פלטפורמות משנות את המספרים הללו ללא הודעה מוקדמת, ונקודות החיתוך נמדדות בפיקסלים ולא בתווים - כותרת מלאה בקליפים רחבים באותיות מוקדם יותר מאשר אחת מלאה בקטעים צרים. התייחסו אליהם כאל מטרות בטוחות, לא כמפרטים.
| פלטפורמה | תמונה מומלצת | יחס | הכותרת מוצגת | תיאור מוצג | הערות |
|---|---|---|---|---|---|
| פייסבוק | 1200x630 | 1.91:1 | ~60 תווים | ~155 תווים | מינימום 200x200; מרכז-יבול תמונות מחוץ ליחס |
| X / טוויטר (גדול) | 1200x628 | ~1.91:1 | ~60 תווים | ~110 תווים | דורש twitter:card=summary_large_image |
| X / טוויטר (סיכום) | 800x800 | 1:1 | ~50 תווים | ~90 תווים | מינימום 144x144; נדרשת תמונה מרובעת |
| לינקדאין | 1200x627 | ~1.91:1 | ~100 תווים | לעתים קרובות מוסתר | תיאור נשמט לעתים קרובות מהכרטיס |
| רפיון | 1200x630 | 1.91:1 | ~60 תווים | ~140 תווים | קובץ מצורף קומפקטי; מטמון ביטול פג תוקף בפני עצמו |
| דיסקורד | 1200x630 | 1.91:1 | ~60 תווים | ~160 תווים | הופך את התיאור בצורה בולטת, התמונה קטנה יותר |
הטייק אווי מהטבלה הוא יעד העיצוב: תמונה בגודל 1200x630, כותרת ב-55-60 תווים או מתחת, ותיאור שנוחת מתחת ל-110 נותן לך כרטיס שמעבד נכון בכל מקום ללא כוונון לכל פלטפורמה.
שָׁוא
מהו גודל תמונת הגרף הפתוח הנכון?
השתמש 1200x630 פיקסלים - יחס 1.91:1. זה מספק פייסבוק, לינקדאין, X, Slack, ו Discord בו זמנית עבור כרטיסי תמונה גדולה, והוא גדול מספיק כדי להישאר חד על צגים בצפיפות גבוהה שמור את הקובץ תחת כ 5 MB, לשרת אותו על HTTPS בכתובת URL מוחלטת, ולשמור טקסט חשוב הרחק מהקצוות מאז משטחים לחתוך בכמויות שונות במקצת עבור כרטיס סיכום קומפקטי X, לספק תמונה מרובעת של לפחות 144x144 במקום.
מדוע התצוגה המקדימה של הקישור שלי עדיין מציגה את התמונה הישנה לאחר שתיקנתי את התגים?
מכיוון שהפלטפורמה שמרה במטמון את התוצאה של הגירוד הקודם שלה, בדרך כלל למשך כשבוע עדכון התגים אינו מבטל את תוקף המטמון הזה. כפה אחזור חדש דרך הפלטפורמה 's debugger - Facebook Sharing Debugger's כפתור Scrape Again, או מפקח הפוסט של LinkedIn. עבור Slack ו-Discord, הוספת פרמטר שאילתה לכתובת האתר מייצרת תצוגה מקדימה לא מאוחסנת באופן מיידי, וזו הדרך המהירה ביותר לאמת תיקון.
האם אני צריך גם OG: וגם Twitter: Tags?
X נופל בחזרה ל-Open Graph כאשר המקבילות לטוויטר חסרות, אז עמוד עם שלם og: תגיות מייצר כרטיס X עובד מה Open Graph לא יכול לבטא הוא פריסת הכרטיס, אז אתה עדיין צריך להוסיף twitter:card לבחירה בין הבאנר הגדול לבין הסיכום הקומפקטי, פלוס twitter:site ו twitter:creator כדי לייחס את הכרטיס. שלושת התגיות המלאות של Open Graph הן השילוב היעיל.
כמה זמן צריך להיות og: title ו-og:description?
לשמור og:title ב-60 תווים או מתחת. ל og:description הפלטפורמות מתפצלות: X מציג בערך 110 תווים, פייסבוק ולינקדאין מציגות קרוב יותר ל-155 עד 200. כתיבה למגבלת X הדוקה יותר פירושה שהתיאור קורא במלואו בכל מקום. טקסט מעבר למגבלה לא הולך לאיבוד, רק מוסתר מאחורי אליפסיס, אז טען מראש את המילים החשובות.
מדוע התצוגה המקדימה שלי ריקה או מציגה רק את כתובת האתר?
הסיבות הרגילות, בסדר גס של תדירות: og:image האם נתיב יחסי ולא כתובת URL מוחלטת; התמונה מוגשת על פני רגיל http; התגים נמצאים מחוץ ל <head>; התגים מוזרקים על ידי JavaScript בצד הלקוח שהמגרד לעולם לא מבצע; או שהדף מחזיר סטטוס שאינו 200 או הפניה מחדש של התחברות לבוט. בדוק את ה-HTML הגולמי עם view-source או curl במקום מפקח הדפדפן - המפקח מראה את ה-DOM לאחר הפעלת JavaScript, וזה לא מה שהמגרד רואה.
האם הכלי הזה מביא את כתובת האתר שלי כדי לקרוא את התגים?
מס 'זה לא עושה בקשות רשת בכלל זה עובד מהתגים שאתה מקליד או להדביק, והכל מנותח ומעובד בדפדפן שלך דפדפנים לא יכולים להביא דפים שרירותיים של צד שלישי בגלל CORS, ו אחזור בצד השרת פירושו שליחת כתובות האתרים שלא פורסמו במקום אחר הפשרה היא שאתה מספק את התגים - ואת היתרון הוא כי דפים על localhost, על staging, או מאחורי כניסה לעבוד בדיוק כמו אלה ציבוריים.
האם אני יכול לצפות בתצוגה מקדימה של דף שעדיין לא פורסם?
כן, וזו הסיבה העיקרית להשתמש בזה ולא באגים בפלטפורמה. על מאפי הבאגים הרשמיים להביא כתובת URL חיה, כך שהם חסרי תועלת לפני הפריסה. כאן אתה מדביק את התגים שאתה מתכוון לשלוח - מהתבנית שלך, מאובייקט המטא נתונים של המסגרת שלך או מבנה מקומי - והתצוגות המקדימות מעובדות באופן מיידי.
האם תגיות Open Graph עוזרות לדירוג החיפוש שלי?
לא ישירות הם נקראים על ידי פלטפורמות חברתיות וצ'אט, לא משמשים כגורם דירוג על ידי מנועי החיפוש מה שהם משפיעים הוא שיעור הקליקים על כל נתח של הקישור שלך, אשר מניע תנועה ובעקיפין, האותות שכן חשובים חשבו עליהם כעל אופטימיזציה של המרה עבור קישורים משותפים ולא כמנוף SEO עבור התגים שכן משפיעים על קטע החיפוש שלך, השתמש ב מחולל מטא תגים.
