Open-Graph-Tags: Vorschau für WhatsApp, LinkedIn und Facebook

Warum das wichtig ist

Ein Link, der bei WhatsApp mit großem Bild, klarem Titel und einem Satz Beschreibung erscheint, wird eher angeklickt als eine nackte Adresse. Das gilt in der Kundengruppe genauso wie bei einem LinkedIn-Beitrag über dein neues Angebot.

Ohne Open-Graph-Tags nimmt jede Plattform, was sie findet: irgendein Bild von der Seite, manchmal das Logo in Briefmarkengröße, manchmal gar keins. Den Titel ziehen sie meist aus dem <title>, die Beschreibung aus der Meta-Description oder dem ersten Absatz.

Für dein Google-Ranking spielen Open-Graph-Tags keine Rolle, deshalb zählen sie bei uns wenig. Sie sind aber schnell erledigt, und jede geteilte Seite profitiert davon.

So prüfst du es selbst

Such im Quelltext nach og:. Mindestens og:title, og:description und og:image sollten auftauchen.

Wie die Vorschau wirklich aussieht, zeigen die Werkzeuge der Plattformen: der Sharing Debugger von Facebook und der Post Inspector von LinkedIn. Beide lesen die Seite neu ein und melden Probleme wie ein zu kleines Bild.

Im kostenlosen Check sucht checkfrei die drei Tags automatisch. Fehlt eins, gibt es eine Warnung, fehlen alle, einen Fehler.

Das richtige Vorschaubild

Nimm 1200 x 630 Pixel, also ein Seitenverhältnis von etwa 1,91 zu 1. In diesem Format zeigen Facebook und LinkedIn das große Vorschaubild. WhatsApp schneidet je nach Ansicht anders zu, deshalb gehört Wichtiges in die Mitte, mit etwas Rand.

Die Adresse im og:image muss vollständig sein, mit https und Domain. Halte die Datei schlank, ein JPG oder PNG mit wenigen hundert Kilobyte reicht. Sehr große Bilder laden manche Apps gar nicht erst als Vorschau.

Ein eigenes Bild für jede wichtige Seite schlägt das Logo auf allen Seiten. Ein Foto vom Team oder vom Produkt mit einer kurzen Textzeile funktioniert in der Regel gut.

So behebst du es

<meta property="og:title" content="Dachsanierung in Rosenheim | Holzbau Maier">
<meta property="og:description" content="Ablauf, Dauer und Kosten einer Dachsanierung, mit Beispielen aus der Region.">
<meta property="og:image" content="https://www.example.de/bilder/og-dachsanierung.jpg">
<meta property="og:url" content="https://www.example.de/leistungen/dachsanierung/">
<meta property="og:type" content="website">

export const metadata = {
  openGraph: {
    title: "Dachsanierung in Rosenheim",
    description: "Ablauf, Dauer und Kosten einer Dachsanierung.",
    images: [{ url: "/og-dachsanierung.jpg", width: 1200, height: 630 }],
  },
};

Wenn die alte Vorschau bleibt

Facebook, LinkedIn und WhatsApp speichern Vorschauen zwischen. Nach einer Änderung siehst du deshalb oft noch tagelang das alte Bild. Bei Facebook und LinkedIn erzwingst du das Neuladen mit den genannten Werkzeugen. Bei WhatsApp hilft nur Abwarten oder ein angehängter Parameter wie ?v=2 am geteilten Link.