Webentwicklung: Detaillierte Linkvorschauen von Websites automatisiert erstellen

Neben Bildern und Videos bieten soziale Medien auch Links — die so nur wenig Informationen preisgeben. Mithilfe einer Vorschau können Entwickler das ändern.

In Pocket speichern vorlesen Druckansicht

(Bild: Javier Brosch/Shutterstock.com)

Lesezeit: 13 Min.
Von
  • Lars Kölker
Inhaltsverzeichnis

Wer kein Developer ist, versteht vermutlich nicht, wohin ihn folgender Link führt: https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC. Nutzer erkennen zwar, dass sie zu Spotify geleitet werden, wissen aber nicht, welche Musik, welcher Podcast oder welcher Interpret dadurch zu erwarten ist. Um dieses Problem zu beheben, erstellen Social-Media-Websites eine Linkvorschau, die Usern verständlichere Informationen wie den Titel, ein Vorschaubild und so weiter anzeigt. Dieser Prozess wird von Fachleuten als "unfurling" (zu Deutsch "Entfaltung") bezeichnet.

Eine Linkvorschau des Spotify-Links auf Twitter aus dem im Artikel gezeigten Link (Abb. 1)

Die Linkvorschau von Spotify in Abbildung 1 zeigt den Titel, ein Vorschaubild, den Autor, das Jahr der Veröffentlichung sowie den Host an. Developer können durch das Angeben von Metadaten beeinflussen, wie die Linkvorschau in Social Media dargestellt wird. Zudem liest auch der Google-Bot einige der Metadaten aus, was die Darstellung in Suchergebnissen optimiert und die Suchmaschinenoptimierung (SEO) steigert.

Young Professionals schreiben für Young Professionals

Dieser Beitrag ist Teil einer Artikelserie, zu der die Heise-Redaktion junge Entwickler:innen einlädt – um über aktuelle Trends, Entwicklungen und persönliche Erfahrungen zu informieren. Bist du selbst ein "Young Professional" und willst einen (ersten) Artikel schreiben? Schicke deinen Vorschlag gern an die Redaktion: developer@heise.de. Wir stehen dir beim Schreiben zur Seite.

Dieser Artikel zeigt, welche Metadaten Entwicklerteams angeben können, um eine bestmögliche Linkvorschau für Social Media zu erstellen. Dabei beschreibt er auch, welche Daten Developer aus Websites auslesen können, um eine Linkvorschau für (externe) Links auf der eigenen Website zu erzeugen. Neben generischen Attributen wie Titel, Vorschaubild und Beschreibung existieren weitere Informationen, die von Interesse sind:

  • Autor
  • Publikations-/Modifikationsdatum
  • kostenpflichtig oder Registrierung erforderlich
  • Kategorie beziehungsweise Genre
  • Seitenname (statt "open.spotify.com" also "Spotify")
  • Lesedauer
  • Anzahl der Kommentare
  • Live-Beitrag oder nicht
  • … und gegebenenfalls Favicon sowie Farbschema

Verschiedene Sammelmethoden stehen zur Datengewinnung für eine Linkvorschau zur Verfügung, von denen hier zwei Methoden näher betrachtet werden.

Entsprechend finden APIs auch beim Web Scraping Anwendung. Dabei ist es von Vorteil, dass APIs eine einheitliche Syntax sowie häufig eine Schnittstellendokumentation aufweisen, wodurch das Lesen der Ergebnisse berechenbar ist.

Web Scraping (auch Screen Scraping, Data Mining oder Web Harvesting) beschreibt das automatisierte Sammeln von Daten aus dem Internet durch ein dafür entwickeltes Programm. In Gegensatz zu den APIs gibt es keine Schnittstellendokumentation, auf die sich ein Entwickler oder eine Entwicklerin verlassen können. Ryan Mitchell fasst es in ihrem Buch "Web Scraping with Python" verständlich zusammen: "The internet is one giant API with a somewhat poor user interface."

Bevor es an das "Scrapen" geht, sind einige Bibliotheken nötig, um das Markup in ein Document Object Model (DOM) umzuwandeln. Durch die Umwandlung in ein DOM können Entwickler dessen Knoten, bei denen es sich um HTML-Elemente handelt, abfragen. Bibliotheken existieren für die aktuellen Programmiersprachen. In diesem Beitrag kommt exemplarisch Node.JS zum Einsatz. Eine Portierung der durchgeführten Abfragen in andere Sprachen können Entwickler ebenfalls leicht umsetzen. Nach der Installation von Node.JS kann das Entwicklerteam ein Testprojekt aufsetzen. Dazu erstellt es einen Ordner, öffnet ihn in der Kommandozeile und führt den Befehl npm init -y aus, um das Projekt zu initiieren. Anschließend installieren die Entwickler die Pakete "JSDOM" und "Axios": npm install jsdom axios

Mit deren Hilfe fragt das Programm den Inhalt einer Website an und wandelt ihn in ein DOM um, wie folgendes Listing zeigt:

const axios = require('axios');
const { JSDOM } = require('jsdom');

(async () => {
const url = 'https://open.spotify.com/track/4uLU6hMCjMI75M1A2tKUQC';
	const response = await axios.get(url);
	const body = response.body;
const { document } = (new JSDOM(html)).window;
})(); 

Listing 1: Anfragen und Einlesen des HTML-Quellcodes eines Spotify-Songs mittels "Axios"

Im weiteren Verlauf ist es dann möglich, über document-Anfragen an das DOM stellen.

Metainformationen werden in HTML unter anderem in meta-Elementen gespeichert. Diese befinden sich für gewöhnlich im Head eines HTML-Dokuments und weisen folgenden Aufbau auf: <meta name="author" content="Lars Kölker">.

Die HTML-Spezifikation gibt dabei lediglich folgende im weiteren Verlauf interessanten Werte für das name-Attribut vor:

  • application-name
  • description
  • author
  • theme-color und
  • color-scheme

Eine wichtige Rolle spielt das title-Element, das nach der Spezifikation ebenfalls unter Metadaten fällt. Will eine Entwicklerin etwa alle Autoren in einem HTML-Dokument abfragen, kann sie die DOM-Abfrage aus dem folgenden Listing mittels document ausführen.

const elements = document.querySelectorAll('meta[name="author"]');
const authors = Array.from(elements)
.map(element => element.getAttribute('content')); 

Listing 2: Abfragen aller Autoren eines HTML-Dokuments