Extraire les images de partage social et les balises Open Graph

L'API HTMLRewriter de Bun peut être utilisée pour extraire efficacement les images de partage social et les métadonnées Open Graph du contenu HTML. Cela est particulièrement utile pour créer des fonctionnalités d'aperçu de liens, des cartes de médias sociaux ou des scrapers web. Nous pouvons utiliser HTMLRewriter pour faire correspondre des sélecteurs CSS aux éléments HTML, au texte et aux attributs que nous souhaitons traiter.

interface SocialMetadata {
  title?: string;
  description?: string;
  image?: string;
  url?: string;
  siteName?: string;
  type?: string;
}

async function extractSocialMetadata(url: string): Promise<SocialMetadata> {
  const metadata: SocialMetadata = {};
  const response = await fetch(url);

  const rewriter = new HTMLRewriter()
    // Extraire les balises meta Open Graph
    .on('meta[property^="og:"]', {
      element(el) {
        const property = el.getAttribute("property");
        const content = el.getAttribute("content");
        if (property && content) {
          // Convertir "og:image" en "image" etc.
          const key = property.replace("og:", "") as keyof SocialMetadata;
          metadata[key] = content;
        }
      },
    })
    // Extraire les balises meta Twitter Card comme repli
    .on('meta[name^="twitter:"]', {
      element(el) {
        const name = el.getAttribute("name");
        const content = el.getAttribute("content");
        if (name && content) {
          const key = name.replace("twitter:", "") as keyof SocialMetadata;
          // Utiliser les données Twitter Card uniquement si nous n'avons pas de données OG
          if (!metadata[key]) {
            metadata[key] = content;
          }
        }
      },
    })
    // Repli vers les balises meta régulières
    .on('meta[name="description"]', {
      element(el) {
        const content = el.getAttribute("content");
        if (content && !metadata.description) {
          metadata.description = content;
        }
      },
    })
    // Repli vers la balise title
    .on("title", {
      text(text) {
        if (!metadata.title) {
          metadata.title = text.text;
        }
      },
    });

  // Traiter la réponse
  await rewriter.transform(response).blob();

  // Convertir les URL d'image relatives en URL absolues
  if (metadata.image && !metadata.image.startsWith("http")) {
    try {
      metadata.image = new URL(metadata.image, url).href;
    } catch {
      // Conserver l'URL originale si l'analyse échoue
    }
  }

  return metadata;
}

// Exemple d'utilisation
const metadata = await extractSocialMetadata("https://bun.com");
console.log(metadata);
// {
//   title: "Bun — A fast all-in-one JavaScript runtime",
//   description: "Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a fast all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager.",
//   image: "https://bun.com/share.jpg",
//   type: "website",
//   ...
// }