Kennen Sie OG-Meta-Tags? Implementieren Sie OG-Meta-Tags auf Ihrer WordPress-Website? Dieser Artikel zeigt Ihnen, was OG-Meta-Tags sind und wie Sie sie in Ihre WordPress-Website implementieren.

{autotoc}

Wenn ein Beitrag aus Ihrem Blog oder eine URL Ihrer Website auf Facebook geteilt wird, greift die Social-Media-Plattform auf die richtigen Daten zu. Dinge wie die URL Ihres Blogs oder Ihrer Website, ein Auszug aus dem Beitragstext, ein hervorgehobenes Bild usw. werden angezeigt und die Nutzer werden zum Klicken aufgefordert.

Wenn Sie jedoch ein begeisterter Facebook-Nutzer sind, haben Sie vielleicht bemerkt, dass die Daten, die es von Websites (einschließlich Ihrer) zieht, nicht immer perfekt sind. Manchmal zieht es ein Bild, das den Inhalt des geteilten Beitrags nicht genau wiedergibt, oder es extrahiert Text am Ende des Beitrags und verwendet ihn als Auszug, was fast immer nicht gut ist, und noch schlimmer, es gibt Zeiten, in denen keine anderen Daten als der Beitragstitel (oder der Inhalt des Tag) und die URL wird überhaupt geteilt!

Dies geschieht typischerweise, wenn Sie nicht implementieren oStift gRaph-Meta-Tags (auch bekannt als OG-Meta-Tags) auf Ihrer WordPress-Website. Ohne diese wichtigen Tags können Facebook (und andere Social-Media-Websites) nicht die richtigen Informationen für einen geteilten Beitrag oder Link anzeigen.

So kann es aussehen, wenn Sie auf Facebook eine URL von einer Website teilen, die nicht mit Open Graph-Tags aktualisiert wird:

Facebook-Share ohne OG-Tags

So sieht es hingegen aus, wenn Sie eine URL teilen, die Open Graph-Meta-Tags implementiert:

Facebook-Share mit og1

Facebooks Open Graph (OG) Meta-Tags

Die Open Graph-Meta-Tags von Facebook definieren, wie eine Website eines Drittanbieters (wie Ihr Blog) auf Facebook präsentiert wird.

Obwohl Open Graph-Meta-Tags von Facebook entwickelt wurden, werden sie auch von anderen sozialen Netzwerken (wie Twitter und LinkedIn) verwendet, um das dort stattfindende Teilen anzupassen.

Um die Open Graph Meta-Tags auf Ihrer WordPress-Site einzubinden, müssen Sie zusätzliche hinzufügen Tags in der Ihrer Website. Nach der Open Graph-Protokollsind die folgenden Eigenschaften erforderlich:

  • og: Titel
  • og: Typ
  • og:Bild
  • og: url

 

og tags facebook1

Durch die Verwendung von Open Graphs auf Websites, Neil Patel gefunden eine Steigerung der Klickrate um 39 %.

Wie überprüfen Sie Ihre WordPress-Site auf OG-Meta-Tags?

Wenn Sie nicht sicher sind, ob og-Tags bereits auf Ihrer Website platziert sind, sehen Sie sich den Quellcode Ihrer WordPress-Website an. Drücken Sie unter Windows oder Linux Strg + U und unter Mac Befehl + Alt + U, um den Quellcode anzuzeigen.

Wenn es bereits hinzugefügt wird, finden Sie Ihre og-Tags in der Abschnitt innerhalb des „

og

Zusätzlich können Sie die verwenden Facebook-Sharing-Debugger Tool, um zu sehen, was Facebook über Ihre Site liest.

Hinzufügen von OG-Meta-Tags zu WordPress ohne Plugin

Um Ihren Beiträgen und Seiten auf WordPress og-Meta-Tags hinzuzufügen, ohne ein Plugin zu verwenden, fügen Sie einfach den folgenden Codeausschnitt in die functions.php Datei.

// Hinzufügen des Open Graph in den Sprachattributen function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); // Fügen wir Open Graph Meta Info hinzu function add_og_meta_tag() { global $post; if( !is_singular() ) // wenn es kein Beitrag oder keine Seite ist, keine og-Tags hinzufügen return; echo " \n"; echo ' ' . "\n"; echo ' ' . "\n"; echo ' ' . "\n"; echo ' ' . "\n"; echo ' ' . "\n"; echo '  ' . "\n"; if( !has_post_thumbnail( $post->ID ) ) { // wenn der Beitrag kein vorgestelltes Bild hat, verwenden Sie ein Standardbild $default_image="https://example.com/image.jpg"; // ersetzen Sie dies durch ein Standardbild auf Ihrem Server oder ein Bild in Ihrer Medienbibliothek echo ' '; } sonst { $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'groß' ); echo ' '; } echo "\n \n"; } add_action( 'wp_head', 'add_og_meta_tag', 0 );

Stellen Sie sicher, dass Sie "IHRE BENUTZER-ID" in der Teil mit Ihrer eigenen Facebook-Benutzer-ID.

Sie können Ihre Facebook-Benutzer-ID finden, indem Sie Ihre Facebook-Profilseite in einem Desktop-Browser aufrufen.

  1. Klicken Sie auf Ihr Profilbild und wählen Sie „Profilbild anzeigen“
  2. Dadurch wird der Fotobetrachter von Facebook für Ihr Profilbild geöffnet.
  3. Die URL sollte nun ungefähr so ​​aussehen: „https://www.facebook.com/photo?fbid=xxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxxx"
  4. Suchen Sie nach dem Teil fbid=xxxxxxxxxxxxxx. Die Zahlen nach dem fbid Parameter „xxxxxxxxxxxxxxxx„“ ist Ihre Benutzer-ID.
  5. Kopieren Sie es und ersetzen Sie damit „IHRE BENUTZER-ID“ im obigen Codeausschnitt.

Facebook-Benutzer-ID

Fertig! Ihre Website ist nun mit Open Graph-Tags aktualisiert.

Hinzufügen von OG-Meta-Tags zu WordPress mit einem Plugin

Die beiden beliebten SEO-Plugins, Yoast SEO und All in One SEO-Pack verfügt über Open Graph-Metatag-Funktionen.

Hinzufügen von OG-Tags mit dem Yoast SEO-Plugin

Installieren Sie zunächst Yoast SEO. Nach der Installation sollten Sie das neue SEO-Element im linken Admin-Seitenleistenmenü sehen.

Um og-Tags mit Yoast hinzuzufügen, gehen Sie zu SEO > Social media über das Admin-Seitenleistenmenü.

Sobald Sie auf der Seite sind, gehen Sie zur Registerkarte „Facebook“.

Yoast SEO OG-Tag

Standardmäßig fügt Yoast SEO Ihren Beiträgen Open Graph-Tags hinzu. Sie müssen nichts konfigurieren. 

Sie müssen jedoch OG-Tags für die Startseite Ihrer Website konfigurieren.

Unter dem Frontpage-Einstellungen Im Abschnitt können Sie eine Bild-URL für Ihre Startseite definieren. Diese wird für die og:Bild Eigenschaft Ihrer Homepage. 

Sie können auch den Titel und die Beschreibung hinzufügen, die beide für die og: Titel und og: Beschreibung Eigenschaften bzw.

Endlich gibt es die Standardeinstellungen Abschnitt. Hier können Sie eine Standard-Bild-URL definieren, die für einen Beitrag verwendet wird. og:Bild Eigenschaft, falls kein vorgestelltes Bild definiert ist.

Wenn Sie fertig sind, vergessen Sie nicht, auf Änderungen speichern damit Ihre Änderungen übernommen werden.

Konfigurieren von OG-Tags pro Post mit Yoast SEO

Wenn Sie og-Tags manuell pro Beitrag festlegen möchten, können Sie dies tun, indem Sie zum Beitragseditor gehen, nach unten zum Abschnitt Yoast Metabox scrollen und zu Social media Tab.

Yoast pro Beitrag und Tags

Hier können Sie dann einen benutzerdefinierten Parameter für verschiedene OG-Tags definieren.

Wenn Sie mit dem Hinzufügen Ihrer OG-Tags zu einem Beitrag fertig sind, denken Sie daran, ihn zu speichern, zu aktualisieren oder zu veröffentlichen, je nachdem, was zutrifft, um die vorgenommenen Änderungen zu übernehmen.

Hinzufügen von OG-Tags mit All-in-One-SEO-Paket

Installieren Sie zunächst All in One SEO Pack. Gehen Sie nach der Installation zu All in One SEO > Social Media über das Admin-Seitenleistenmenü Ihrer Site. Sobald Sie auf der Seite sind, gehen Sie zu Facebook Tab.

Alles in einem SEO-OG-Tags

Mit All in One SEO Pack werden Ihrem Beitrag standardmäßig sofort OG-Tags hinzugefügt, ähnlich wie bei Yoast.

Im Vergleich zu Yoast gibt es hier mehr Konfigurationsmöglichkeiten, einige davon sind jedoch nur in der Pro-Version verfügbar. Dennoch ist die Anzahl der Konfigurationsmöglichkeiten in der kostenlosen Version mehr als ausreichend.

  • Standard-Beitragsbild - definiert, welches Bild für einen Beitrag verwendet wird og:Bild Eigentum.
  • Standard-Post-Facebook-Bild – Wenn Sie in der Option „Standard-Postbild“ die Option „Standardbild (unten festlegen)“ auswählen, laden Sie hier das benutzerdefinierte Bild hoch.
  • Standard-Posttyp-Objekttypen - ermöglicht Ihnen, einen Standardwert für einen Beitrag, eine Seite oder einen Anhang zu definieren og: Typ Eigentum.
  • Facebook-Autor anzeigen - Sie können Ihr Facebook-Profil mit Ihrer Website verknüpfen. Wenn Sie diese Option aktivieren, können Sie einen Beitrag mit Ihrem Facebook-Profil verknüpfen, sodass Ihre Leser Ihrer Facebook-Seite/Ihrem Facebook-Profil direkt folgen können. Weitere Informationen zur Konfiguration finden Sie bei AIOSEO. Hilfeseite.
  • Site Name - ermöglicht Ihnen die Konfiguration der Werte, die für die og:Site-Name Eigenschaft. Sie können Tags verwenden, um den Wert für diese Eigenschaft dynamisch zu generieren. Sie können auch einen Standardtext hinzufügen oder beides kombinieren, wenn Sie möchten.

Im Anschluss an die obigen Punkte gibt es einen Abschnitt zur Konfiguration der Homepage-Tags Ihrer Website. Unter dem Homepage-Einstellungen Im Abschnitt können Sie Folgendes definieren:

  • Bild - für Ihre Homepage og:Bild Eigentum.
  • Titel - für Ihre Homepage og: Titel Eigenschaft. Sie können Variablen verwenden, um dies dynamisch zu generieren.
  • Beschreibung - für Ihre Homepage og: Beschreibung Eigentum.
  • Objekttyp - für Ihre Homepage og: Typ Eigentum.

Endlich gibt es eine Erweiterte Einstellungen Abschnitt, in dem Sie zusätzliche Open Graph-Meta-Tags definieren können, wie z. B. fb: app_id, fb: Admins, usw.

Wenn Sie mit Ihrer Konfiguration zufrieden sind, vergessen Sie nicht, Änderungen speichern.

Konfigurieren von OG-Tags pro Post mit All-in-One-SEO-Paket

Du kannst mit AIOSEO wie Yoast pro Beitrag Tags konfigurieren. Gehe zum Beitragseditor, scrolle nach unten zur AIOSEO-Metabox und gehe dann zu Social media Tab.

aioseo pro Beitrag und Tags

Die Optionen hier ähneln denen, die oben besprochen wurden. Sie können benutzerdefinierte Parameter für Ihre OG-Tags für diesen Beitrag definieren und dabei alle Optionen überschreiben, die Sie in den AIOSEO-Einstellungen festgelegt haben.

Wenn Sie mit dem Hinzufügen Ihrer OG-Tags zu einem Beitrag fertig sind, denken Sie daran, ihn zu speichern, zu aktualisieren oder zu veröffentlichen, je nachdem, was zutrifft, um die vorgenommenen Änderungen zu übernehmen.

Hier erfahren Sie, wie Sie OG-Tags zu Ihrer WordPress-Site hinzufügen. Hoffentlich hat Ihnen dieser Artikel dabei geholfen, den besseren Ansatz zu finden und die Bedeutung der Implementierung von OG-Tags auf Ihrer Website zu verstehen.

Wenn Sie weitere WordPress-Tipps und Tricks sehen möchten, schauen Sie sich unsere vollständige 101 Liste mit WordPress-Tipps und Tricks.

Laden Sie die Liste der 101 WordPress-Tricks herunter, die jeder Blogger kennen sollte

101 WordPress-Tricks

Klicken Sie hier, um jetzt herunterzuladen

// Hinzufügen des Open Graph in den Sprachattributen

Funktion add_opengraph_doctype( $output ) {

returniere $output. ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"';

}


add_filter('Sprachattribute', 'add_opengraph_doctype');


// Lasst uns Open Graph Meta Info hinzufügen

Funktion add_og_meta_tag() {


globaler $post;


if( !is_singular() ) // wenn es kein Beitrag oder keine Seite ist, füge keine og-Tags hinzu

zurück;

Echo " \N";

Echo ' ' . "\N";

Echo ' ' . "\N";

Echo ' ' . "\N";

Echo ' ' . "\N";

Echo ' ' . "\N";

Echo ' ' . "\N";


if( !has_post_thumbnail( $post->ID ) ) { // wenn der Beitrag kein vorgestelltes Bild hat, verwende ein Standardbild

$default_image="https://example.com/image.jpg"; // Ersetzen Sie dies durch ein Standardbild auf Ihrem Server oder ein Bild in Ihrer Medienbibliothek

Echo ' ';

}


else {

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'groß' );

Echo ' ';

}


echo "\n \N";

}


add_action( 'wp_head', 'add_og_meta_tag', 5 );