Neu
Keine Werbung mögen? Gehen Werbefrei Heute
Open Graph-Tags Stoppen Sie, dass Ihre Links auf Slack schrecklich aussehen
Aktualisiert am
Sie haben Wochen lang an der App gearbeitet. Der Link-Vorschau in Slack zeigt „Ohne Titel“ und ein beschädigtes Symbol. Das ist ein Problem mit Open Graph. Hier ist, wie man es in 10 Minuten behebt.
ANZEIGE Entfernen?
Sie haben drei Wochen lang die App entwickelt. Die Linkvorschau in Slack zeigt „Unbenannt“ und ein Thumbnail Ihres Footer-Logos. Dies ist ein Open Graph-Problem und es dauert etwa 10 Minuten, es zu beheben.
Was sind Open Graph-Tags?
Open Graph (og:) ist ein Protokoll, das Facebook im Jahr 2010 eingeführt hat, das heute von allen wichtigen Plattformen verwendet wird, um Linkvorschauen zu generieren. Wenn Slack, Twitter, LinkedIn oder iMessage Ihre URL ausfaltet, werden die Seite abgerufen, und sie suchen nach <meta> Tags mit dem og: Präfix, und verwenden diese, um die Karte zu erstellen.
Keine Tags → sie raten. Sie raten meistens falsch.
Die Tags, die tatsächlich wichtig sind
| Tag | Pflichtig? | Was es tut |
|---|---|---|
og:title | Ja | Der Titel, der in der Vorschau-Karte angezeigt wird |
og:description | Ja | Die Untertitel-/Zusammenfassungstext (halte unter 200 Zeichen) |
og:image | Ja | Das Vorschau-Bild. Muss eine absolute URL sein. |
og:url | Ja | Die kanonische URL der Seite |
og:type | Empfohlene | Verwenden Sie website für die meisten Seiten, article für Beiträge |
twitter:card | Empfohlene | Steuert die Größe des Twitter/X-Karten. Verwenden Sie summary_large_image. |
twitter:title | Optional | Falls zurückgegriffen wird og:title auf den meisten Clients |
twitter:description | Optional | Falls zurückgegriffen wird og:description |
twitter:image | Optional | Falls zurückgegriffen wird og:image |
Das, was die meisten Menschen am häufigsten verpassen, ist og:image. Es muss eine absolute URL sein (keine relativen Pfade), ideal 1200×630px, und unter 8 MB. Slack weigert sich besonders still, Bilder zu verwenden, die nicht den Größeanforderungen entsprechen. Achten Sie darauf, dass das Bild mindestens 600 Pixel breit ist, sonst wird das Bild nicht angezeigt.
Ein vollständiges Set an OG-Tags
Fügen Sie diese in die <head> Ihres Seiten ein. Ersetzen Sie die Platzhalterwerte:
<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />
<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />Für einen Blogbeitrag oder Artikel ändern Sie og:type Zu article und fügen Sie den Autor und das Veröffentlichungsdatum hinzu:
<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />Wie Sie Ihre Tags ohne Bereitstellung überprüfen können
Die schnellste Methode: Fügen Sie Ihre URL in IO Tools Open Graph Checkerein. Es lädt die Seite herunter, parsen die Tags und zeigt Ihnen genau das an, was Slack (oder jede andere Plattform) sieht – inklusive einer Vorschau, wie die Karte dargestellt wird. Keine Anmeldung erforderlich, keine Erweiterung zu installieren.
Wenn Sie eine localhost-URL oder eine Staging-Umgebung überprüfen wollen, die nicht öffentlich zugänglich ist, kann der Checker diese nicht erreichen. In diesem Fall können Sie die Quelle der Seite ansehen und die Tags manuell überprüfen, ob sie in der <head>enthalten sind. Sobald die Seite bereitgestellt ist, führen Sie den Checker erneut aus, um sicherzustellen, dass die Live-Version übereinstimmt.
Plattformspezifische Validatoren (für Fälle, in denen Sie eine Cache-Neuinitialisierung erzwingen müssen):
- Facebook/Meta: developers.facebook.com/tools/debug — auch das Cache von Facebook für Ihre OG-Tags leert
- LinkedIn: linkedin.com/post-inspector — nützlich, wenn Ihre Vorschau nach einer Aktualisierung veraltet ist
- Twitter/X: cards-dev.twitter.com/validator — langsamer, aber gut, um die Kartenformat zu bestätigen
Slack kachelt aggressiv. Wenn Sie Ihre Tags korrigiert haben und die alte Vorschau weiterhin angezeigt wird, können Sie eine erneute Abruf durch Hinzufügen einer Abfragezeichenkette (z. B. ?v=2) zur URL vor dem Teilen hinzufügen — nicht ideal für Produktionslinks, aber in Ordnung für QA.
Die Erstellung der Tags
Wenn Sie ein vollständiges Set an Meta-Tags interaktiv generieren möchten, anstatt sie manuell zu schreiben, bietet das IO Tools HTML Meta Tag Generator die OG-Tags, Twitter-Karten und Standard-Meta-Tags in einem Schritt an. Kopieren Sie das Ergebnis in Ihre <head>.
Häufige Fehler, die vermieden werden sollten
- Relative Bild-URLs.
/images/og.pngFunktioniert nicht. Jede Plattform lädt OG-Tags von einem externen Server ab, der keinen Kontext für Ihre Basis-URL hat. Verwenden Sie immer die vollständigehttps://Pfad. - Das gleiche Bild für alles verwenden. Ein 300×300 Avatar als OG-Bild wird technisch zwar angezeigt – als ein kleines, hässliches Thumbnail. Erstellen Sie für jede wichtige Seite ein richtiges 1200×630-Bild.
- Das Festlegen von
og:url. Ohne es wird von einigen Plattformen die URL verwendet, die sie abgerufen haben, andere erfinden ihre eigene Kanonische URL. Legen Sie es explizit fest. - Das Vergessen, die Cache zu löschen. Die meisten Plattformen speichern OG-Tags 24–72 Stunden lang. Wenn Sie die Tags auf einer Live-Seite aktualisieren, verwenden Sie die oben genannten Plattform-Validatoren, um eine frische Abruf zu erzwingen.
- Die Mischung von
propertyundnameAttributen. OG-Tags verwendenproperty=. Twitter-Tags verwendenname=. Wenn sie vermischt werden, ignorieren einige Parser das Tag komplett.
Open Graph-Tags sind eine Sache, die fünf Minuten dauern, um hinzuzufügen, und schrecklich aussehen, wenn sie fehlen. Beheben Sie sie einmal, überprüfen Sie sie mit dem Open-Graph-Checkerund gehen Sie weiter.
Das könnte Ihnen auch gefallen
Möchten Sie werbefrei genießen?
Werde noch heute werbefrei
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
ANZEIGE Entfernen?
Unverzichtbare Tools
AlleANZEIGE Entfernen?
Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug was added on Juni 22, 2026
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
ANZEIGE Entfernen?