Neu
Keine Werbung mögen? Gehen Werbefrei Heute
Open Graph Tags – Stoppen Sie, dass Ihre Links in Slack schrecklich aussehen
Veröffentlicht am
Open Graph Tags steuern das Bild, den Titel und die Beschreibung, die angezeigt werden, wenn Sie Links in Slack, LinkedIn, Twitter und Discord teilen. Lernen Sie die 6 wesentlichen Tags, wie Sie og:image korrekt einstellen und wie Sie überprüfen können, dass Ihre Vorschauen tatsächlich funktionieren.
ANZEIGE Entfernen?
Sie fügen eine URL in Slack ein. Anstatt eine reiche Vorschau mit einem großen Bild, einem Titel und einer zweizeiligen Zusammenfassung zu erhalten, erhalten Sie nur einen leeren Link – oder einen zufälligen Satz aus dem Mittelteil der Seite. Ihre Kollegen klicken dennoch darauf, aber sie wussten nicht, was sie gerade sehen würden.
Open Graph Tags beheben das. Sie sind eine Handvoll <meta> Zeilen in Ihrer Seite’s <head> die Slack, LinkedIn, Twitter, Discord und jeder anderen Plattform genau sagen, was sie anzeigen sollen, wenn jemand Ihre URL teilt. Wenn Sie sie weglassen, raten die Plattformen – schlecht.
Was sind Open Graph Tags?
Open Graph (OG) ist ein Protokoll, das Facebook 2010 eingeführt hat, damit Webseiten bestimmen können, wie sie bei der Plattform angezeigt werden. Die Idee war einfach: Strukturierte Metadaten zur HTML-Datei hinzufügen, sodass Plattformen einen richtigen Titel, eine Beschreibung und ein Bild abrufen können, anstatt zu raten. <head> Es hat so gut funktioniert, dass alle großen Plattformen es übernommen haben. Heute nutzen Slack, LinkedIn, Twitter/X, Discord, iMessage, WhatsApp und Telegram alle OG-Tags beim Erstellen von Link-Vorschauen. Facebook nutzt sie weiterhin.
Die 6 wesentlichen Open Graph Tags
Diese sechs Tags gehören auf jede Seite, die Sie teilen möchten. Wenn Sie eines der Tags weglassen, füllen die Plattformen die Lücken selbst aus – meistens falsch.
og:title
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="One or two sentences that explain what this page is about." />
<meta property="og:image" content="https://yoursite.com/images/og-image.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Site Name" />- — Der Titel, der in der Vorschau angezeigt wird. Halten Sie ihn unter 70 Zeichen. Verwenden Sie nicht einfach Ihren Tag – OG-Titel können kürzer und kräftiger sein, da sie nicht die Site-Name enthalten müssen.
<title>og:description - — Die zweizeilige Zusammenfassung unter dem Titel. 150–200 Zeichen ist der ideale Bereich. Machen Sie es nützlich, nicht allgemein. og:image
- — Das Bild, das in der Vorschau angezeigt wird. Dies ist das Tag, das die Erscheinung Ihres Links bestimmt. Mehr zu den Größen unten. og:url
- — Die kanonische URL für diese Seite. Verwenden Sie immer die vollständige URL einschließlich . Dadurch wird verhindert, dass bei verschiedenen URLs die gleiche Inhaltsseite doppelt angezeigt wird.
https://og:type - für die meisten Seiten. Verwenden Sie – Verwenden Sie
websitefür Blogbeiträge, kombiniert mitarticleog:site_namearticle:published_timeundarticle:author. - — Ihr Markennamen. Einige Plattformen zeigen ihn getrennt vom Titel an, daher halten Sie ihn kurz. Twitter/X Card Tags
Twitter hat sein eigenes System namens Twitter Cards. Die gute Nachricht: Wenn Twitter Card-Tags fehlen, fällt es zurück auf OG-Tags. Die schlechte Nachricht: Der Rückgriff ist nicht perfekt, und Twitter zeigt keine großen Bildkarten, es sei denn, Sie aktivieren dies explizit.
Fügen Sie diese neben Ihren OG-Tags hinzu:
Das entscheidende Tag ist
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="One or two sentences about this page." />
<meta name="twitter:image" content="https://yoursite.com/images/og-image.jpg" />. Legen Sie es auf twitter:cardund Sie erhalten die große Karte. Legen Sie es auf summary_large_image und Sie erhalten ein kleines Thumbnail. Ohne dieses Tag wechselt Twitter standardmäßig auf summary und Ihr sorgfältig erstelltes OG-Bild verschwindet. summary og:image — Das Tag, das das Hauptwerk leistet
Wenn es ein Tag gibt, das richtig gestellt werden muss, dann ist es
. Eine leere Vorschau könnte immer noch geklickt werden. Eine Vorschau mit einem verschwommenen, gestreckten oder fehlenden Bild wird jedoch nicht. og:imageEmpfohlene Abmessungen
1200 × 630 Pixel
- — die universelle Norm, die bei Facebook, LinkedIn, Twitter und Slack funktioniert Mindestgröße: 600 × 315 Pixel
- — kleiner als das und einige Plattformen lassen das Bild ganz aus. Dateigröße: unter 8 MB
- — Facebook und die meisten Plattformen lehnen größere Dateien ab Format: JPG oder PNG
- — JPG für Fotos, PNG für Grafiken mit Text Halten Sie wichtige Inhalte weg von den Rändern
Verschiedene Plattformen schneiden OG-Bilder unterschiedlich. Slack zeigt eine breite Karte, LinkedIn schneidet in bestimmten Kontexten zu einem Quadrat, und Mobilanwendungen machen sich selbst. Halten Sie Ihr Logo, Text und Fokus innerhalb eines zentralen Sicherheitsbereichs – etwa der inneren 80% des Bildes – um nichts Wichtiges zu schneiden.
Wie Open Graph Tags auf Ihrer Website hinzugefügt werden
Einfache HTML-Seiten
Fügen Sie die Tags innerhalb der
Ihrer HTML-Datei, vor dem schließenden <head> Tag: </head> Wenn Sie WordPress nutzen, müssen Sie keinen Code ändern. Plugins wie Yoast SEO, Rank Math oder All in One SEO verwalten Open Graph-Tags automatisch. Nach der Installation suchen Sie im „Soziale“-Abschnitt des Beitrags- oder Seiteneditors – Sie können dort einen benutzerdefinierten OG-Titel, eine Beschreibung und ein Bild für jedes Inhaltsstück unabhängig von der SEO-Überschrift und der Meta-Beschreibung festlegen.
<head>
<!-- your existing tags -->
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description." />
<meta property="og:image" content="https://yoursite.com/og.jpg" />
<meta property="og:url" content="https://yoursite.com/page/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Site Name" />
<meta name="twitter:card" content="summary_large_image" />
</head>WordPress
Next.js und React-Anwendungen
Bei Next.js App Router verwenden Sie die integrierte
Export in Ihrer metadata Wie Sie Ihre Open Graph Tags testen page.tsx:
export const metadata = {
openGraph: {
title: 'Page Title',
description: 'Page description.',
images: ['https://yoursite.com/og.jpg'],
url: 'https://yoursite.com/page/',
type: 'website',
siteName: 'Site Name',
},
twitter: {
card: 'summary_large_image',
title: 'Page Title',
description: 'Page description.',
images: ['https://yoursite.com/og.jpg'],
},
};Vertrauen Sie nicht darauf, dass Ihre Tags funktionieren – Plattformen speichern Vorschauen aktiv und die abgespeicherte Version kann Tage alt sein. Verwenden Sie diese Tools, um zu prüfen und eine Aktualisierung zu erzwingen:
Facebook Sharing Debugger
- — zeigt genau, was Facebook liest, und lässt Sie den Cache löschen und erneut abrufen LinkedIn Post Inspector
- — LinkedIn speichert hart, daher ist dies die einzige zuverlässige Methode, um eine Aktualisierung zu erzwingen Twitter Card Validator
- — zeigt, wie Ihre Karte auf Twitter/X aussehen wird — prüft jede URL direkt aus dem Browser ohne Login auf einer Plattform
- Open-Graph-Checker — bei IO Tools ist es nützlich für schnelle Überprüfungen – Sie können jede URL einfügen und alle OG- und Twitter Card-Tags in einer Ansicht abrufen, sodass Sie fehlende Tags ohne zwischen Plattformen zu wechseln erkennen können.
Der Open-Graph-Checker Wenn Sie saubere, korrekt formatierte OG-Tags von Grund auf erstellen müssen, erzeugt das
genau die Markups, die Sie für jede Seite benötigen. Generator für HTML-Meta-Tags 5 häufige Fehler bei Open Graph Tags
Verwendung einer relativen Bild-URL
- muss eine absolute URL ( —
og:image) sein. Relative Pfade wiehttps://yoursite.com/image.jpgversagen stumm und das Bild wird nicht geladen./images/og.jpgEin OG-Bild für die gesamte Website - — Ein einziges Standardbild funktioniert für die Startseite, aber Blogbeiträge, Produktseiten und Landingpages verdienen jeweils ihr eigenes. Ein allgemeines, site-weites Bild zerstört den Kontext, der die Klickbarkeit der Vorschauen macht. Vergessen von
- — Ohne es wechselt Twitter standardmäßig auf ein kleines Thumbnail, selbst wenn Sie ein perfektes 1200×630-OG-Bild haben. Fügen Sie es immer explizit hinzu.
twitter:cardVeröffentlichung von Änderungen ohne Cache-Neuauflage - — Plattformen speichern OG-Daten aktiv. Nach der Aktualisierung der Tags verwenden Sie den Debugger der Plattform, um eine erneute Abfrage zu erzwingen, sonst zeigt sich das alte Vorschau-Image für Tage. Schreiben einer og:description, die wie ein Titel aussieht
- — Verwenden Sie das Beschreibungsfeld, um Informationen hinzuzufügen, die nicht im Titel enthalten sind: was der Leser lernen wird, für wen es gilt, welches Problem es löst. Open Graph Tags — Stoppen Sie, dass Ihre Links in Slack schlecht aussehen 2
Das könnte Ihnen auch gefallen
Neu
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 hinzugefügt am 13. Juni 2026
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
ANZEIGE Entfernen?