Création d'une API de grattage de balises méta sous les lignes de code

Vous êtes-vous déjà demandé comment les applications de messagerie comme Whatsapp ou Telegram vous permettent de voir un aperçu d'un lien que vous envoyez ?

Aperçus des URL WhatsApp et Telegram

Dans cet article, nous allons créer une API de scraping avec Deno qui accepte une URL et récupère les balises méta correspondantes, afin que nous puissions obtenir des champs tels que le titre, la description, l'image et plus encore à partir de presque n'importe quel site Web.

Par exemple :

curl https://metatags.deno.dev/api/meta?url=https://dev.to

donnera ce résultat

{
  "last-updated": "2024-10-15 15:10:02 UTC",
  "user-signed-in": "false",
  "head-cached-at": "1719685934",
  "environment": "production",
  "description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "keywords": "software development, engineering, rails, javascript, ruby",
  "og:type": "website",
  "og:url": "https://dev.to/",
  "og:title": "DEV Community",
  "og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "og:site_name": "DEV Community",
  "twitter:site": "@thepracticaldev",
  "twitter:title": "DEV Community",
  "twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "twitter:card": "summary_large_image",
  "viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
  "apple-mobile-web-app-title": "dev.to",
  "application-name": "dev.to",
  "theme-color": "#000000",
  "forem:name": "DEV Community",
  "forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
  "forem:domain": "dev.to",
  "title": "DEV Community"
}

plutôt cool, n'est-ce pas ?

Balises méta et pourquoi en avons-nous besoin

Les balises méta sont des éléments HTML utilisés pour fournir des informations supplémentaires sur une page aux moteurs de recherche et à d'autres clients.
Ces balises incluent généralement un attribut de nom ou de propriété qui définit le type d'informations et un attribut de contenu qui contient la valeur de ces informations. Voici un exemple de deux balises méta :

<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">

La première balise fournit une description de la page, tandis que la seconde est une balise Open Graph qui définit une image à afficher lorsque la page est partagée sur les réseaux sociaux.

Une application pratique des balises méta consiste à créer un gestionnaire de favoris. Au lieu d'ajouter manuellement le titre, la description et l'image de chaque signet, vous pouvez automatiquement extraire ces informations de l'URL du signet à l'aide de balises méta.

Ouvrir le graphique

Open Graph est un protocole Internet créé à l'origine par Facebook pour standardiser l'utilisation de métadonnées dans une page Web pour représenter le contenu d'une page. Il aide les réseaux sociaux à générer des aperçus de liens riches.
En savoir plus ici.

Pourquoi Déno ?

1. Deno a des paramètres par défaut sécurisés, ce qui signifie qu'il nécessite une autorisation explicite pour accéder aux fichiers, au réseau et à l'environnement, réduisant ainsi le risque de failles de sécurité.
2. Deno est construit sur les standards du Web, utilise des modules ES et vise à utiliser les API de la plate-forme Web (comme fetch) par rapport aux API propriétaires, ce qui rend le code Deno très similaire au code que vous écrirez dans le navigateur - mais a encore quelques spécifications écart par rapport au navigateur.
3. Deno intègre la prise en charge de TypeScript, vous permettant d'écrire du code TypeScript sans étape de construction.
4. Deno est livré avec une bibliothèque standard qui comprend des modules pour les tâches courantes telles que les serveurs HTTP, les opérations du système de fichiers, etc.
5. Deno fournit un exécuteur Linter, Formatter et Test, vous permettant d'utiliser la plate-forme au lieu de compter sur des packages ou des outils tiers, ce qui en fait un outil tout-en-un pour le développement Javascript.
6. Deno fournit Deno Deploy, une plate-forme évolutive pour les applications JavaScript/Typescript sans serveur distribuées à l'échelle mondiale, garantissant une latence minimale et une disponibilité maximale.

L'API que nous construisons comprendra deux parties, une fonction de récupération et d'analyse des balises méta, et un serveur API qui répondra aux requêtes HTTP.

Obtenir les balises méta

Commençons par accéder à Deno Deploy et nous connecter.
Après vous être connecté, cliquez sur "Nouveau terrain de jeu"

Cela nous donnera un point de départ pour bonjour le monde.
Nous allons maintenant ajouter une fonction appelée getMetaTags qui accepte une URL et utilise l'API Fetch pour obtenir le code HTML de l'URL demandée et le transmet à un package pour l'analyse HTML (deno-dom).
Pour ajouter deno-dom à notre projet, nous pouvons utiliser le gestionnaire de packages jsr :

curl https://metatags.deno.dev/api/meta?url=https://dev.to

Nous allons maintenant utiliser l'API Fetch pour obtenir le code HTML sous forme de texte :

{
  "last-updated": "2024-10-15 15:10:02 UTC",
  "user-signed-in": "false",
  "head-cached-at": "1719685934",
  "environment": "production",
  "description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "keywords": "software development, engineering, rails, javascript, ruby",
  "og:type": "website",
  "og:url": "https://dev.to/",
  "og:title": "DEV Community",
  "og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "og:site_name": "DEV Community",
  "twitter:site": "@thepracticaldev",
  "twitter:title": "DEV Community",
  "twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
  "twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
  "twitter:card": "summary_large_image",
  "viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
  "apple-mobile-web-app-title": "dev.to",
  "application-name": "dev.to",
  "theme-color": "#000000",
  "forem:name": "DEV Community",
  "forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
  "forem:domain": "dev.to",
  "title": "DEV Community"
}

Après avoir obtenu le code HTML, nous pouvons utiliser deno-dom pour l'analyser, puis utiliser les fonctions DOM standard comme querySelectorAll pour obtenir tous les éléments méta HTML, les parcourir et utiliser getAttribute pour obtenir le nom, la propriété et le contenu de chacun. de ces balises :

<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">

Enfin, nous interrogerons également le