Open Graph Meta Tags – Was du wissen musst

Möchtest du, dass deine Social Media Posts bemerkt werden?

Täglich werden über 4 Millionen Blogbeiträge verfasst, daher ist es entscheidend, deine Arbeit in sozialen Netzwerken zu teilen. Open Graph ist eine der wichtigsten Komponenten, um ein breiteres Publikum zu erreichen.

Nicht alle wissen um die Bedeutung von Open Graph. Was ist es überhaupt? Wie kann es dir helfen, bemerkt zu werden?

Was ist Open Graph?

„Open Graph meta tags, ähnlich wie meta descriptions und Titel, bestimmen, wie URLs geschrieben werden, wenn sie in sozialen Medien geteilt werden.“

Dank des Open Graph Projekts von Facebook zur Standardisierung sozialer Informationen über Websites hinweg ist es einfacher, Seiteninhalte auf Social-Networking-Sites zu definieren.

Diese tags liefern Social-Networking-Diensten Informationen wie den Titel, die Beschreibung und das Featured Image der Seite im head-Bereich einer Webseite. Dieser Prozess bewahrt die Konsistenz und Authentizität der angezeigten Informationen.

Warum Open Graph verwenden?

Open Graph wird in verschiedenen sozialen Netzwerken unterstützt, wie zum Beispiel:

• Facebook;
• Twitter/X;
• Pinterest;
• Viber;
• Telegram;
• WhatsApp.

Laut Google verbessert das Protokoll „Empfohlene Inhaltsblöcke“.

Was passiert, wenn Open Graph nicht verwendet wird?

Da Facebook unsicher ist, was in der Vorschau angezeigt werden soll, kann es jedes beliebige Bild verwenden (es kann sogar ein Werbebanner oder etwas aus deinem Header nehmen).

Infolgedessen kann Facebook nicht bestimmen, welche Abschnitte der Vorschau angezeigt werden sollen.

• Open Graph erstellt Vorschauen für Social Media-bezogene Websites.
• Open Graph tags helfen Nutzern, Inhalte in sozialen Feeds zu finden, was führt zu erhöhten Website-Besuchen.

Je weiter oben dein Material erscheint, während Besucher auf deiner Website-Seite nach unten scrollen, desto mehr Aufmerksamkeit erhält es. Es ermöglicht Nutzern, eine Vorschau zu erhalten, bevor sie klicken.

Verwende OG tags, um Nutzern zu helfen, dein Material auf Facebook und anderen Social Media Plattformen zu finden.

OG meta-Elemente werden verwendet, um Snippets zu erstellen, wenn URLs in privaten Unterhaltungen auf Websites geteilt werden, die das Protokoll nutzen.

Die Bedeutung des Open Graph Protokolls für dein Unternehmen

Diese Art der Interaktion wird durch das Open Graph Protokoll von Facebook vereinfacht. Open Graph markup ist eine Methode zur Organisation und Verfolgung von Vorschaudaten. Es ermöglicht dir die vollständige Kontrolle darüber, wie dein Material in sozialen Netzwerken außerhalb deines eigenen angezeigt wird.

Um die Integration zu erleichtern, wurden Rich Graph Objects erstellt, die Facebooks Standardsatz von Eigenschaften teilen. Facebook hat die Kontrolle über den Informationsfluss von externen Quellen (oder geliked usw.). Diese Informationen werden von Open Graph meta tags bereitgestellt, wenn sie durch den Header einer Website laufen.

Da viele Menschen eine Seite über Social Media aufrufen, sind Open Graph tags wichtiger denn je. Die CTR kann steigen, wenn die Suche verbessert wird. Open Graph erleichtert den Prozess des Social Media Sharings. Open Graph wird auf Social-Networking-Sites weitgehend unterstützt. Die Open Graph tags von Twitter/X sind ein gutes Beispiel; Twitter/X unterstützt Open Graph.

Was genau bedeutet das?

Warum solltest du dir die Mühe machen, deine serverseitigen Inhalte mit Open Graph zu kennzeichnen? Besteht die Möglichkeit, dass die zusätzlichen tags die Leistung deiner Website verbessern und mehr Besucher anziehen? Hier sind einige Gründe, warum wir glauben, dass Open Graph einen großen Unterschied machen kann.

Die meisten prominenten sozialen Netzwerke nutzen Open Graph tags

Wenn du nicht die Zeit hast, HTML zu lernen, kannst du stattdessen Facebook Open Graph tags verwenden. Du kannst diese Labels nutzen, um die Namen, Beschreibungen und Fotos, die auf allen wichtigen Social-Networking-Sites erscheinen, zu personalisieren.

Open Graph tags sind tatsächlich für Social Media

Open Graph wurde entwickelt, um Informationsbeispiele innerhalb des sozialen Netzwerks anzuzeigen. Es organisiert Informationen auf Weisen, die über das bloße Teilen einer Webseite hinausgehen.

Feature-optimiertes Bild

Du kannst Open Graph tags verwenden, um festzulegen, welches Bild in deiner sozialen Vorschau erscheinen soll. Die Standardoption muss nicht gewählt werden. Menschen klicken eher auf Links zu deinem Blogbeitrag oder deiner Website, wenn diese gut aussehen.

Es geht um soziale Vorschauen, nicht um Suchvorschauen

Sowohl Suchmaschinenoptimierung als auch Social Media Marketing sind entscheidend, aber sie haben unterschiedliche Anforderungen. Open Graph Komponenten lösten ein altes SEO-Problem: die Tatsache, dass Vorschauen von Social-Network-Beiträgen unattraktive Titel und Beschreibungen hatten.

Der Seitentitel, meta descriptions und Open Graph title, description, URL und Bild tags müssen alle einzigartig sein, damit Inhalte für Suchmaschinen und soziale Netzwerke optimiert werden können.

Du hast Kontrolle über dein Material

Ob du dein Material selbst postest oder jemand anderes es tut, du hast die vollständige Kontrolle darüber, wie es in sozialen Medien erscheint.

Selbst wenn du jeden Social Media Post personalisierst, wird die Mehrheit deiner Kunden die Vorschau ignorieren. Besucher, die dein Material teilen möchten, werden dies mit einem gut gewählten Bild, Titel und einer Beschreibung tun, wenn deine Open Graph tags so gut wie möglich sind. Dies ist sehr wichtig, da du die volle Kontrolle über die Informationen hast, die über dein Unternehmen verbreitet werden.

Arten von Open Graph tags

Open Graph tags wie og:title, og:image, og:type und og:url ermöglichen es Social-Networking-Plattformen, deine Informationen anzuzeigen. Du musst diese kritischen tags verwenden, aber du kannst auch andere nutzen.

Ein Facebook-Screenshot mit Verbindungen zu den Komponenten og:image, og:url, og:title und og:description.

og:site_name

Der og:site_name tag sollte die Domain enthalten, unter der dein Inhalt gefunden werden kann. Infolgedessen ersetzt er den Markennamen, der im meta title gewesen wäre (und daher im og:title tag).

Der og:site_name tag sollte den Namen deiner Website oder Marke enthalten, während der og:title tag den Titel deines Artikels enthalten sollte.

og:site_name Code <meta property="og:site_name" content="Your Site Name" />

Verwende denselben site name tag auf deiner gesamten Website.

og:title

Der og:title tag wird zur Festlegung des Seitentitels empfohlen. Es ähnelt der Verwendung von meta titles in SEO. Wenn du einen bestehenden meta title verwendest, stelle sicher, dass das og:title-Feld frei von Inhalten ist, die spezifisch für deine Marke oder Website sind.

og:title Code <meta property="og:title" content="Title" />

Dieser tag sollte auf jeder Seite deiner Website erscheinen, die ein Nutzer auf Facebook, Twitter/X oder einer anderen Social-Networking-Site teilen möchte.

Halte den Titel zwischen 40 und 50 Zeichen lang; andernfalls wird er abgeschnitten.

Wenn du möchtest, dass mehr Menschen deine Website besuchen, muss der Titel mehr tun, als sie nur zu beschreiben.

Im Gegensatz zu Suchmaschinen-meta titles solltest du deinen Domainnamen oder andere identifizierende Informationen nicht angeben.

og:type

Verwende den og:type tag, um den Typ des eingereichten Materials anzugeben. Dies informiert die Social-Networking-Site über die Art des Inhalts, den du teilst, z. B. einen Blogbeitrag, eine Webseite, ein Video oder eine Audiodatei.

og:type Code <meta property="og:type" content="article" />

Verwende den Objekttyp „article“ für Informationen, die Erklärungen erfordern, wie z. B. Blogbeiträge.

Füge den Objekttyp „website“ zu den anderen Seiten der Website hinzu.

Du musst das richtige Dateiformat verwenden, wenn du eine Datei übertragen möchtest, die sowohl Text als auch Audio oder Video enthält. Diese Seite enthält eine Liste aller Objektkategorien.

og:locale

Der og:locale tag liefert Informationen über die Sprache, in der das übertragene Material verfasst ist. Nutzer von Social-Networking-Sites sollten darauf aufmerksam gemacht werden, dass auf Websites veröffentlichte Inhalte in verschiedenen Sprachen angezeigt werden können.

og:locale Code <meta property="og:locale" content="en_GB" />

Da Facebook davon ausgeht, dass alles, was keinen og:locale tag hat, in amerikanischem Englisch verfasst ist, kannst du diesen tag ignorieren (en_US), wenn du eine Website in den Vereinigten Staaten betreibst, die ausschließlich aus englischem Material besteht.

Wenn der von dir bereitgestellte Inhalt in einer anderen Sprache als amerikanischem Englisch verfasst ist, stelle sicher, dass du den korrekten OG tag verwendest.

og:url

Verwende einfach den og:url tag, um anzugeben, wo du den Inhalt veröffentlichen möchtest.

og:url Code <meta property="og:url" content="https://www.yourdomain.com/title.html" />

Dieser tag muss die kanonische URL der Seite angeben.

og:description

Die Aussage, die in einem og:description tag enthalten ist, muss prägnant, unkompliziert und so ansprechend wie möglich sein, um Leser zum Besuch einer Website zu ermutigen.

Du kannst die Informationen wiederverwenden, solange sie relevant sind, da dieser tag einem ähnelt, der von Suchmaschinen verwendet wird.

og:description Code <meta property="og:description" content="Your description." />

Es wäre hilfreich, wenn du deine Beschreibung zwischen 50 und 100 Zeichen lang halten könntest. Facebook-Posts sollten höchstens zwei bis vier Wörter lang sein; längere Posts werden eher gelöscht.

Um die meisten Klicks und Aufmerksamkeit für das von dir bereitgestellte Material zu erhalten, sollte die von dir angegebene Beschreibung so detailliert und überzeugend wie möglich sein.

og:image

Gib die URL des Bildes an, das im sozialen Auszug verwendet werden soll, indem du das og:image-Element nutzt. Verwende ein Bild, das sowohl interessant als auch direkt relevant für den Inhalt des Artikels ist, um die Wahrscheinlichkeit zu erhöhen, dass Nutzer auf deine Website klicken.

Dieses OG-Element funktioniert ähnlich wie Bild-schema markup, das von Suchmaschinen verwendet wird, um Rich Results bereitzustellen.

og:image Code <meta property="og:image" content="https://yourdomain.com/wp-content/uploads/your-image.png" />

Wenn du möchtest, dass die teilbaren Seiten deiner Website in der Bild-Suchmaschinenoptimierung höher ranken, verwende innovative Fotos, die zu deinem Branding passen. Selbst wenn eine Seite wahrscheinlich nicht häufig geteilt wird, ist es eine gute Idee, sie mit deinem Logo zu branden, falls jemand sie in Zukunft teilt.

Um pixelig oder minderwertig zu wirken, sollte dein Originalbild ein Seitenverhältnis von 1.91:1 und eine Auflösung von mindestens 1200 x 630 Pixeln haben.

Die og:image:width und og:image:height tags stellen sicher, dass zuvor geteilte Bilder korrekt angezeigt werden. Installiere Yoast auf deiner WordPress-Website, falls du dies noch nicht getan hast, um sie automatisch hinzufügen zu lassen. Falls nicht, hier ist der Code:

<meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />

Open Graph zu WordPress hinzufügen

OG tags zu WordPress hinzuzufügen ist der einfachste, gängigste und simpelste Weg, dies mit dem Yoast SEO Plugin zu erreichen. Dieses Plugin sollte bereits installiert sein, wenn deine Website so eingerichtet ist, dass Suchmaschinen sie leicht finden können.

Aktualisiere die Seite oder den Artikel, in den Open Graph eingefügt werden soll, über die „Social“-Option von Yoast SEO.

Fülle die Felder og:image, og:title und og:description im Facebook-Akkordeon aus.

Yoast konfiguriert deinen og:url tag, Twitter/X Card und Bildgrößen für dich. Wenn du Yoast nicht anweist, ein bestimmtes Bild zu verwenden, wird es das Hauptbild des Beitrags nutzen.

Wenn deine Website geteilt wird, wird standardmäßig kein Bild angezeigt. Du kannst dies ändern, indem du einen Screenshot der gesamten Website bereitstellst. Dieser Fehler tritt auf, wenn einer Bild-URL der og:image tag fehlt.

Auf der Haupt-Einstellungsseite von Yoast kannst du das sitewide og:image auswählen.

Das Hinzufügen von OG tags in deinem WordPress-Blog ist wirklich einfach. Du musst nur gehen zu:

WordPress Sidebar : Yoast>Social>Facebook.

Schalte den Schalter um und speichere dann das vorhandene Bild. Wir glauben, du solltest ein Logo auswählen. Du kannst dasselbe auch für Twitter/X und Pinterest tun.

Open Graph manuell hinzufügen

Wenn du programmieren kannst und keines der vorherigen Systeme verwendest, sind OG tags einfach zu installieren.

Du kannst den folgenden Inhalt auf deine Website kopieren und einfügen, aber bitte passe ihn an deine Bedürfnisse an.

<meta property="og:site_name" content="INSERT SITE NAME" /> <meta property="og:title" content="INSERT TITLE" /> <meta property="og:description" content="INSERT DESCRIPTION" /> <meta property="og:url" content="INSERT URL" /> <meta property="og:type" content="INSERT TYPE" /> <meta property="og:image" content="INSERT IMAGE URL" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="INSERT IMAGE URL" />

Deine Open Graph meta tags testen

Nehmen wir an, du hast verstanden, wie du Open Graph auf deiner Website einbindest.

Wenn deine Website richtig klassifiziert ist, sollte sie hervorragend aussehen, wenn sie in sozialen Medien geteilt wird. Teste deine Arbeit immer, bevor du sie veröffentlichst.

Bevor du eine URL teilst, überprüfe nochmals, ob deine OG tags korrekt abgerufen und angezeigt werden.

Diese Tools können nützlich sein, um deine OG tags zu testen:

• Pinterest Rich Pins Validator
• Twitter/X Card Validator
• Facebook Sharing Debugger
• LinkedIn Post Inspector

Gib einfach eine URL in einen dieser Dienste ein, um die ursprünglichen meta tags zu erhalten. Wenn du sie teilst, bekommst du ein Gefühl dafür, wie sie für andere aussehen wird.

Überprüfe das Bild, den Titel und die Beschreibung der Vorschau, bevor du fortfährst. Du kannst Benachrichtigungen über tags erhalten, die du nicht benötigst, die du entweder hinzufügen oder ignorieren kannst.

Wenn der URL-Test fehlschlägt, solltest du es mit einem anderen tag erneut versuchen. Überprüfe, ob jedes Tool funktionsfähig ist, indem du seine URL besuchst. Du kannst darüber sprechen, wenn es fertig ist.

Fazit

Es ist entscheidend, die Kontrolle darüber zu behalten, was du in sozialen Medien teilst. Traffic und Conversion Rates steigen, wenn Rich Items in Open Graph angezeigt werden. Beginne mit einem einzigen Blogbeitrag. Sobald du das Ergebnis gesehen hast, wird es viel einfacher sein, Open Graph tags in deinen zukünftigen Beiträgen anzuwenden.

Häufig gestellte Fragen