HTML/Tutorials/Webseitenvorschau in Messenger Apps
In Messenger-Programmen wie Signal, Threema oder Wire oder auch in Chats bei Steam oder Teamspeak kann man nach dem Versenden einer URL manchmal eine Box mit einer Vorschau zu der Website sehen. Wie geht das? Der folgende Artikel möchte zeigen, wie man seine Website ausrüsten muss, damit das klappt.
Open Graph protocol
Die Magie hinter diesem Phänomen ist nichts anderes, als passende Meta-Daten, die nach dem Open Graph protocol formuliert sind.
Ähnlich wie bei Dublin Core tragen die hier benötigten Metadaten ein Präfix "og:" in ihrem Namen, der nicht – wie in reinem HTML üblich – als name-Attribut, sondern gemäß der RDFa-Spezifikation als property-Attribut notiert wird:
- og:image
- og:title
- og:type
- og:url
Im Quelltext der Website sieht das dann so aus:
<!doctype html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<head>
<title>Meine Website</title>
<meta property="og:image" content="https://example.org/images/logo.jpg" />
<meta property="og:title" content="Meine Website" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.org/" />
</head>
<body>
<h1>Meine Website</h1>
<p>... Inhalt ...</p>
</body>
</html>
Außer den hier vorgestellten grundsätzlichen Angaben gibt es noch eine Vielzahl weiterer möglicher Angaben. Hinter dem Open Graph protocol steckt die Absicht von inhaltlich reichhaltigen Websitevorschau-Boxen, für die sehr detaillierte Möglichkeiten geschaffen wurden, um in sozialen Medien passende Werbeflächen mit einer einheitlichen Datenstruktur anbieten zu können.
Weblinks
- blog.selfhtml.org: Sichere Messenger im Vergleich – weil Privatsphäre zählt
- Open Graph protocol (englisch)
