Alles Wissenswerte über Open Graph

Open Graph bestimmt wie Ihre Links beim Teilen aussehen und mit wenigen Einstellungen lässt sich der erste Eindruck Ihrer Marke deutlich verbessern.

Die versteckte Wirkung von Open Graph und warum geteilte Links oft schlechter aussehen als erwartet

Die meisten Menschen bemerken Open Graph erst dann wenn es fehlt.
Vor kurzem schrieb mir ein Kunde auf WhatsApp und fragte warum unsere geteilten Links immer so gut aussehen. Stimmiges Vorschaubild. Passender Titel. Kurzer Teaser Text. Die Vorschau wirkte professionell. Seine dagegen zufällig.

Der Grund ist Open Graph.
Und wenn Sie verstanden haben wie es funktioniert werden Sie es nie wieder ignorieren.

Was ist Open Graph

Open Graph ist ein Satz von Meta Tags im HTML Kopfbereich einer Webseite. Diese Tags teilen Plattformen wie LinkedIn Facebook WhatsApp oder X mit welches Bild welchen Titel und welchen Text sie anzeigen sollen wenn ein Link geteilt wird.
Fehlen diese Tags raten die Plattformen. Das führt häufig zu unpassenden Vorschauen.

Warum Open Graph wichtig ist

Die Link Vorschau ist der erste Eindruck Ihrer Webseite außerhalb Ihrer Webseite.
Sie beeinflusst wie vertrauenswürdig professionell und klar Ihre Marke wahrgenommen wird.
Gut gestaltete Open Graph Einstellungen erhöhen die Klickrate und erzeugen ein konsistentes Erscheinungsbild.

Die wichtigsten Open Graph Attribute

Attribut Erklärung
og:title Legt den Titel fest, der in Link Vorschauen angezeigt wird
og:description Kurzbeschreibung oder Teaser Text
og:image Vorschaubild das beim Teilen angezeigt wird
og:url Kanoni sche URL zu der die Vorschau gehört
og:type Definiert die Art des Inhalts für bessere Verarbeitung durch Plattformen

Weitere hilfreiche Attribute

Attribut Erklärung
og:site_name Name der Webseite für mehr Marken Klarheit
og:locale Legt Sprache und Region fest
og:image:width Bildbreite für bessere Skalierung
og:image:height Bildhöhe für bessere Skalierung

Wo Open Graph genutzt wird

Plattformen die auf Open Graph zurückgreifen sind unter anderem

  • LinkedIn
  • Facebook
  • WhatsApp
  • Slack
  • X
  • iMessage
  • Discord

Sobald eine Plattform Link Vorschauen anzeigt spielt Open Graph eine zentrale Rolle.

Wie wir Open Graph bei einem Kundenprojekt eingesetzt haben

Für eine neue Kundenwebseite haben wir die komplette Open Graph Struktur aufgebaut.
Wir haben Bilder gestaltet Titel auf den Inhalt abgestimmt individuelle Beschreibungen geschrieben und im CMS einen eigenen Bereich für zukünftige Blogbeiträge eingerichtet.
Der Kunde war überrascht wie stark sich die Außenwirkung seiner Marke dadurch verbessert hat.
Jeder geteilte Link sah professionell und bewusst gestaltet aus.

Iridium Works Webseite: Open Graph Bilder in Figma

Die Vorteile einer sauberen Open Graph Optimierung

  • Starker erster Eindruck außerhalb der eigenen Webseite
  • Höhere Klickrate
  • Konsistenz auf allen Plattformen und Messenger Diensten
  • Professionelle Präsentation der Marke
  • Mehr Kontrolle über das Erscheinungsbild geteilten Contents

Ein paar Minuten Arbeit pro Seite genügen um Ihrer Marke überall ein einheitliches Gesicht zu geben.

Über den Autor

Lucas ist ein Serienunternehmer mit einer Leidenschaft für Design und Softwareentwicklung. Im Laufe der Jahre hat er mehrere Unternehmen aufgebaut und Marken auf der ganzen Welt dabei geholfen, ihren Kunden digitale Erlebnisse zu bieten. Er schreibt über neue Technologien, Designtrends und befasst sich eingehend mit Webtechnologie.

Lucas Weiper
CEO
bei Iridium Works
📍
Koblenz, Deutschland
🔗
Gesamte Biogrpafie
🔗
LinkedIn Profil
Lassen Sie uns gemeinsam Ihre digitale Zukunft gestalten.
Wir entwickeln digitale Erlebnisse für Pioniere, die den Status quo herausfordern wollen, damit sie sich an die Spitze ihrer Konkurrenz setzen können.
Text reading 'Iridium Works' with a blue marbled texture fill on a transparent background.
Black and white close-up portrait of a man with a bald head, full beard, and checkered shirt looking directly at the camera.
Portrait of a woman with long dark hair, wearing black glasses, a black blazer, and a light gray top, against a plain gray background.
Smiling bald man with a beard wearing a white dress shirt with his arms crossed, standing against a dark blue textured wall.
Smiling man wearing glasses, a navy blazer, white shirt, and jeans, sitting on a wooden stool against a plain background.
Young man with glasses, beige zip-up sweater, white shirt, and gray pants sitting on a wooden stool against a light gray background.
© Iridium Works GmbH. Alle Rechte vorbehalten.
Willkommen bei digitaler Excellence.