Social Cards: Open-Graph-Tags und das Vorschaubild

Was eine Link-Vorschau ist

Wenn jemand einen Link in einem sozialen Netzwerk oder Messenger teilt, liest die Plattform die Seite und baut eine kleine Karte: ein Bild, einen Titel, einen kurzen Text und die Domain. Die meisten Plattformen lesen dafür die Tags des Open-Graph-Protokolls, meta-Elemente im head der Seite. X, früher Twitter, liest zusätzlich eigene Tags, die mit twitter: beginnen. Jede Plattform gestaltet ihre Karte selbst und entscheidet, wie viel Text sie zeigt. Du entscheidest, was die Seite den Plattformen sagt.

Die Grund-Tags

Das Open-Graph-Protokoll, veröffentlicht auf ogp.me, nennt vier Eigenschaften, die jede Seite haben soll: og:title, og:type, og:image und og:url. og:url ist die kanonische Adresse der Seite. Freiwillig, aber nützlich sind og:description, og:site_name und og:locale, also Sprache und Region der Tags, zum Beispiel de_DE.

<meta property="og:title" content="Summer sale: all mugs reduced">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Six blue mugs on a wooden table">
<meta property="og:description" content="Until 31 August: lower prices on mugs and plates.">
<meta property="og:site_name" content="Example Shop">
<meta name="twitter:card" content="summary_large_image">

Schreib jede Adresse vollständig, mit https://. Das Protokoll definiert eine Adresse als URL mit http:// oder https://. Ein Pfad wie /img/sale.jpg ist deshalb kein gültiger Wert. og:url soll zum canonical-Link der Seite passen. Steht ein Tag zweimal mit verschiedenen Werten da, gibt das Protokoll dem ersten den Vorzug.

Das Vorschaubild

Die meisten Vorschauen zeigen das Bild breit. Häufig empfohlen wird ein Seitenverhältnis von etwa 1,91 : 1, zum Beispiel 1200 × 630 Pixel. Das passt in die meisten Karten ohne Zuschnitt. Quadratische Bilder werden oft oben und unten beschnitten, setz Wichtiges deshalb in die Mitte. Für Google Discover empfiehlt Google Bilder, die mindestens 1200 Pixel breit sind, eine große Vorschau, erlaubt mit der Einstellung max-image-preview:large, und ein Bild, das über og:image oder Markup von schema.org angegeben ist. Google rät außerdem von allgemeinen Bildern wie dem Logo der Website ab.

og:image:width und og:image:height nennen die Größe des Bildes in Pixeln. og:image:alt beschreibt, was auf dem Bild zu sehen ist, keine Bildunterschrift. Das Protokoll sagt, dass eine Seite mit og:image auch og:image:alt angeben soll.

Titel und Beschreibung

og:title kann vom title-Element abweichen. Der Name der Website muss nicht hinein, denn den trägt og:site_name. Plattformen kürzen lange Texte an eigener Stelle, stell die wichtigen Wörter also nach vorn. Open-Graph-Tags zählen auch außerhalb sozialer Netzwerke. Google nennt den Inhalt von og:title als eine der Quellen für Titellinks in den Suchergebnissen, berücksichtigt og:site_name beim Websitenamen und führt og:image als einen Weg auf, ein bevorzugtes Bild anzugeben.

Tags für X

Das Tag twitter:card wählt die Art der Karte. Der Wert summary_large_image verlangt ein großes, breites Bild, summary ein kleines. Hat deine Seite schon Open-Graph-Tags, reicht oft twitter:card zusätzlich. Die Entwicklerseiten von X ließen sich für diesen Ratgeber nicht lesen. Prüf die aktuellen Regeln deshalb dort, bevor du dich auf eine Einzelheit verlässt.

Eine Karte je Seite

Viele Websites setzen für jede Seite denselben Titel und dasselbe Bild, oft über das Theme. Dann sieht jeder geteilte Link gleich aus. Gib jeder wichtigen Seite eigene Werte für og:title, og:description und og:image: einer Produktseite das Produktfoto, einem Artikel sein Hauptbild. Für og:type nutzt das Protokoll unter anderem website für eine allgemeine Seite und article für einen Artikel. Ein Shop- oder Redaktionssystem kann diese Tags automatisch aus Titel, Zusammenfassung und Hauptbild jeder Seite füllen. Prüf nach einer Änderung je Vorlage eine Seite.

Warum sich die Vorschau nicht ändert

Viele Plattformen speichern eine Karte, sobald sie sie gebaut haben. Änderst du später Bild oder Titel, sehen andere vielleicht noch eine Weile die alte Karte. Ein neuer Dateiname für ein neues Bild hilft, weil die Plattform dann eine neue Adresse sieht. Manche Plattformen bieten ein Werkzeug, das die Seite neu abruft.

Bevor du eine Seite teilst

• Sind og:title, og:type, og:image und og:url da, und ist og:url die kanonische Adresse?
• Ist jede Adresse vollständig, mit https://?
• Ist das Bild breit genug, lädt es, und steht das Wichtige in der Mitte?
• Sind og:image:alt, og:image:width und og:image:height gesetzt?
• Gibt es ein twitter:card-Tag, und ist der Titel kurz genug?

Mit Do4U arbeiten

Das Werkzeug Social-Vorschau prüfen zeigt, wie eine Seite aussieht, wenn jemand ihren Link teilt, und prüft die Tags hinter der Vorschau. Du gibst eine Adresse ein. Do4U liest die Seite und den Anfang ihres Vorschaubilds. Der Code sammelt die Open-Graph-Tags, die Tags für Twitter/X-Karten und die Ersatzwerte, also Titel, Meta-Beschreibung und erstes Bild, dazu den canonical-Link und die Sprache. Format und Größe des Bildes liest er aus der Datei und vergleicht sie mit den Tags. Du bekommst eine neutrale Vorschau, eine Tabelle aller Tags, Funde mit kurzer Begründung und Tags zum Kopieren. Tags, die eine Seite nur per JavaScript setzt, sieht das Werkzeug nicht. Es wird keine KI genutzt, und die Prüfung ist kostenlos, mit einer Grenze pro Tag.

Do4U findet Hinweise, du prüfst und entscheidest. Die Vorschau ist eine neutrale Skizze: Wie eine Plattform den Link zeigt, entscheidet die Plattform.