Dynamic Open Graph Article | Base4u Solutions

הקדמה: האתגר של SPA וחזי קישורים בחברתיות

יישומי אינטרנט חד-עמודיים (SPA), כמו IsraWay, מספקים חוויה עשירה ואינטראקטיבית על ידי טעינה דינמית של תוכן. עם זאת, אופי דינמי זה מהווה אתגר משמעותי לפלטפורמות חברתיות (WhatsApp, Facebook, Twitter) וקוראי מנועי חיפוש.

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

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

הפתרון הטכני: מטפלי תגים דינמיים

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

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

שתי פונקציות ראשיות:

crawlerArticleHandler - עבור מאמרים ב-/ArticleView?id=[articleId]
crawlerBusinessHandler - עבור פרופילי עסק ב-/BusinessProfile?id=[businessId]

פרטי ההטמעה

1. זיהוי קוראי אינטרנט

שלב ראשון בתהליך ה-rendering הדינמי שלנו הוא קביעה האם הבקשה הנכנסת היא מקורא או דפדפן רגיל. זה נעשה על ידי בדיקת כותרת User-Agent של בקשת HTTP.

const CRAWLERS = [
  'facebookexternalhit', 'facebot', 'whatsapp',
  'twitterbot', 'linkedinbot', 'googlebot'
];

const isCrawler = (userAgent) => {
  if (!userAgent) return false;
  return CRAWLERS.some(crawler => 
    userAgent.toLowerCase().includes(crawler)
  );
};

2. בניית כתובות Canonical

זה קריטי שתגי המטא המעוצבים מצביעים על גרסת הייצור הקנונית של ה-URL (לדוגמה, https://israway.io), לא על סביבת פיתוח או sandbox.

3. טיפול בתמונות

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

אינטגרציה Frontend

בחזית, רכיבים האחראים על שיתוף (כמו QuickShareButton ו-CopyLinkButton) מוגדרים להשתמש ב-shareUrl המצביע על מטפלי קראול שלנו.

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

התוצאות והשפעה

+85%

עלייה בשתוף חברתי

100%

תצוגות עמודים קראול-תומכות

<100ms

זמן תגובה ממוצע

סיכום

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

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

שיפור שיתוף חברתי: הטמעת Dynamic Open Graph Meta Tags