HTML/Tutorials/Webseitenvorschau in Messenger Apps

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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[Bearbeiten]

Die Magie hinter diesem Phänomen ist nichts anderes, als passende Meta-Daten, die nach dem Open Graph protocol formuliert sind.


Open Graph Protocol


Ä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:


Beispiel: Metadaten mit Open Graph protocol
<!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[Bearbeiten]