Erstellen einer Meta-Tags-Scraping-API in Unterzeilen mit Code

Haben Sie sich jemals gefragt, wie Sie mit Messaging-Apps wie WhatsApp oder Telegram eine Vorschau eines von Ihnen gesendeten Links sehen können?

WhatsApp- und Telegram-URL-Vorschau

In diesem Beitrag erstellen wir mit Deno eine Scraping-API, die eine URL akzeptiert und die Meta-Tags dafür abruft, sodass wir Felder wie Titel, Beschreibung, Bild und mehr von fast jeder Website abrufen können.

Zum Beispiel:

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

wird dieses Ergebnis liefern

{
  "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"
}

ziemlich cool, nicht wahr?

Meta-Tags und warum wir sie brauchen

Meta-Tags sind HTML-Elemente, die verwendet werden, um Suchmaschinen und anderen Clients zusätzliche Informationen über eine Seite bereitzustellen.
Diese Tags umfassen normalerweise ein Namens- oder Eigenschaftsattribut, das die Art der Informationen definiert, und ein Inhaltsattribut, das den Wert dieser Informationen enthält. Hier ist ein Beispiel für zwei Meta-Tags:

<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">

Das erste Tag enthält eine Beschreibung der Seite, während das zweite ein Open Graph-Tag ist, das ein Bild definiert, das angezeigt werden soll, wenn die Seite in sozialen Medien geteilt wird.

Eine praktische Anwendung von Meta-Tags ist die Erstellung eines Lesezeichen-Managers. Anstatt den Titel, die Beschreibung und das Bild für jedes Lesezeichen manuell hinzuzufügen, können Sie diese Informationen mithilfe von Meta-Tags automatisch aus der mit Lesezeichen versehenen URL entfernen.

Diagramm öffnen

Open Graph ist ein Internetprotokoll, das ursprünglich von Facebook entwickelt wurde, um die Verwendung von Metadaten innerhalb einer Webseite zur Darstellung des Inhalts einer Seite zu standardisieren. Es hilft sozialen Netzwerken, umfangreiche Linkvorschauen zu erstellen.
Lesen Sie hier mehr darüber.

Warum Deno?

1. Deno verfügt über sichere Standardeinstellungen, was bedeutet, dass eine explizite Genehmigung für den Datei-, Netzwerk- und Umgebungszugriff erforderlich ist, wodurch das Risiko von Sicherheitslücken verringert wird.
2. Deno basiert auf Webstandards, verwendet ES-Module und zielt darauf ab, Webplattform-APIs (wie Fetch) anstelle proprietärer APIs zu verwenden, wodurch der Deno-Code dem Code, den Sie im Browser schreiben, sehr ähnlich ist – aber dennoch einige Spezifikationen aufweist Abweichung vom Browser.
3. Deno verfügt über integrierte TypeScript-Unterstützung, sodass Sie TypeScript-Code ohne Build-Schritt schreiben können.
4. Deno wird mit einer Standardbibliothek geliefert, die Module für allgemeine Aufgaben wie HTTP-Server, Dateisystemoperationen und mehr enthält.
5. Deno bietet einen Linter, Formatter und Test Runner, sodass Sie die Plattform nutzen können, anstatt sich auf Pakete oder Tools von Drittanbietern verlassen zu müssen, was sie zu einem All-in-one-Tool für die Javascript-Entwicklung macht.
6. Deno bietet Deno Deploy, eine skalierbare Plattform für serverlose JavaScript-/Typescript-Anwendungen, die weltweit verteilt sind und minimale Latenz und maximale Betriebszeit gewährleisten.

Die API, die wir erstellen, wird aus zwei Teilen bestehen, einer Funktion zum Abrufen und Parsen der Meta-Tags und einem API-Server, der auf HTTP-Anfragen antwortet.

Abrufen der Meta-Tags

Beginnen wir damit, dass wir zu Deno Deploy gehen und uns anmelden.
Klicken Sie nach der Anmeldung auf „Neuer Spielplatz“

Damit geben wir uns einen Hallo-Welt-Ausgangspunkt.
Jetzt fügen wir eine Funktion namens getMetaTags hinzu, die eine URL akzeptiert und die Fetch-API verwendet, um den HTML-Code der angeforderten URL abzurufen und ihn an ein Paket zur HTML-Analyse (deno-dom) weiterzuleiten.
Um deno-dom zu unserem Projekt hinzuzufügen, können wir den jsr-Paketmanager verwenden:

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

Jetzt verwenden wir die Fetch-API, um den HTML-Code als Text abzurufen:

{
  "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"
}

Nachdem wir den HTML-Code erhalten haben, können wir ihn mit deno-dom analysieren und dann Standard-DOM-Funktionen wie querySelectorAll verwenden, um alle Meta-HTML-Elemente abzurufen, sie zu iterieren und getAttribute zu verwenden, um den Namen, die Eigenschaft und den Inhalt jedes einzelnen abzurufen dieser Tags:

<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">

Abschließend fragen wir noch den