preview של אתר בשיתוף לינק

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

תגי מטא בטבע

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

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

מקומם של תגים אלו בדרך כלל נמצאים בhead של כל מסמך html שמעונין בכך שידעו מה הולך שם, ויש קונבנציה בשמות התגים ככה שיהיה אפשר להוציא את המידע הזה. מי שקבע את הסנדרט הזה ממש בשביל תצוגה מקדימה היה פייסבוק, וכל אחד יכול להתשמש בזה בשביל להציג את preview, גם אם זה לא ממש מדויק ״לפי הספר״. כלומר, גם אם לא נמצא תג של title, עדיין נוכל לקחת את title עצמו מהעמוד (כמו שאפשר לראות בדוגמא להלן) וכן על זה הדרך. יש תגים וקונבציות בשביל ווב ומובייל. בכל preview, אנו ניגשים לאתר, קוראים את המידע של התגים האלה ומציגים אותו. דיסקליימר – אי אפשר לעשות את מהקלינט מחמת שאין אפשרות לקרוא לאתר אחד מאתר אחר. לכן צריכים לפנות לשרת שיעשה את העבודה.

בכל מקרה, כדי ממש את זה פשוט צריכים להכנס לאתר ולחכות שהוא יטען, ולקרוא את התגיות מטא האלה. מכיון שזה רק פרסור פשוט של html הלכתי על הכייון של cheerio ספריה קלת משקל (בניגוד ל-puppeteer ששוקלת 100 מגה, ולא מתאימה לקלאוד פנקשיינס מכמה טעמים), שמפרסרת HTML, עם סינטקס של jQuery ע"ה. הסרבר פונה לאתר, טוען את HTML כטקסט, קם לתחיה לאוביקט חי בcheerio והשאר היסטוריה. שמתי את זה בcloud function וכעת אני יכול להשתמש בזה מכל מקום, בכל פרויקט.

const functions = require("firebase-functions");

exports.getArticleSummary = functions.https.onRequest(
  async (request, response) => {
    const _body =
      typeof request.body === "string"
        ? JSON.parse(request.body)
        : request.body;
    const fetch = require("node-fetch");
    const cheerio = require("cheerio");
    console.log(_body.article);
    const res = await fetch(   _body.article    );
    const _res = await res.text();

    const $ = cheerio.load(_res);
  
    const title =
      $('meta[property="og:title"]').attr("content") ||
      $("title").text() ||
      $('meta[name="title"]').attr("content");
    const description =
      $('meta[property="og:description"]').attr("content") ||
      $('meta[name="description"]').attr("content");
    const url = $('meta[property="og:url"]').attr("content");
    const site_name = $('meta[property="og:site_name"]').attr("content");
    const image =
      $('meta[property="og:image"]').attr("content") ||
      $('meta[property="og:image:url"]').attr("content");
    const icon =
      $('link[rel="icon"]').attr("href") ||
      $('link[rel="shortcut icon"]').attr("href");
    const keywords =
      $('meta[property="og:keywords"]').attr("content") ||
      $('meta[name="keywords"]').attr("content");
    const published_time =
      $('meta[property="article:published_time"]').attr("content") ||
      $('meta[name="published_time"]').attr("content");

    response.send({
       title,
      published_time,
       description,
       url,
       site_name,
       image,
      icon,
      keywords
    });
  }
);