Was ist ein OpenGraph-Bild?

OpenGraph-Bilder sind Bilder, die für OpenGraph-Tags verwendet werden und in Twitter-, Facebook- und Open Graph-Vorschauen angezeigt werden.

OpenGraph-Bilder können statisch oder dynamisch sein. Dies hängt davon ab, ob sie mit einem OpenGraph-Generator oder anderen Tools erstellt werden.

Mit einem OpenGraph-Generator erstellte Bilder sind in der Regel statisch, da sie auf Basis der von Ihnen bereitgestellten Metadaten generiert werden, die normalerweise statisch sind. Wenn Sie beispielsweise Metadaten für einen Blogbeitrag bereitstellen, erstellt der OpenGraph-Generator ein statisches OpenGraph-Bild basierend auf diesen Metadaten.

Mit anderen Tools erstellte Bilder können dynamisch sein. Wenn Sie beispielsweise ein serverseitiges Rendering-Framework verwenden, um OpenGraph-Bilder zu generieren, können diese Bilder basierend auf Benutzerverhalten, Uhrzeit, Wetter oder anderen dynamischen Informationen erstellt werden.

OpenGraph-Bilder mit Tools erstellen

OpenGraph HTML-Code

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="My Article Title">
<meta property="og:description" content="This is my article description">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

Mit diesem HTML-Code wird das Bild https://example.com/og-image.png in OpenGraph auf der Seite angezeigt.

Vorschau-Effekte

Nach der Erstellung eines OG-Bildes bieten viele Websites Online-Vorschau- und Debugging-Tools an, die Ihnen bei der Diagnose von Problemen helfen. Hier sind einige gängige Tools: