WordPress OG-Tags: So erhöhen Sie die Klicks auf Ihren Beitrag in sozialen Netzwerken

Hast du schon von og meta tags gehört? Implementieren Sie og Meta-Tags auf Ihrer WordPress-Site? Dieser Artikel zeigt Ihnen, was und Meta-Tags sind und wie Sie sie auf Ihrer WordPress-Website implementieren können.

Wenn ein Beitrag aus Ihrem Blog oder eine URL aus Ihrer Website auf Facebook geteilt wird, kann die Social-Media-Website die richtigen Daten daraus abrufen. Dinge wie die URL Ihres Blogs oder Ihrer Website, ein Auszug aus dem Text des Beitrags, ein ausgewähltes Bild usw. werden angezeigt, sodass Benutzer darauf klicken können.

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

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

So kann es aussehen, wenn Sie eine URL auf Facebook von einer Website aus freigeben, die nicht mit offenen Diagramm-Tags aktualisiert wird:

Facebook-Share ohne og-Tags

Auf der anderen Seite sieht es so aus, wenn Sie eine URL freigeben, die Meta-Tags für offene Diagramme implementiert:

Facebook-Aktie mit og1

Facebooks Open Graph (OG) Meta-Tags

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

Obwohl es von Facebook entwickelt wurde, werden Open-Graph-Meta-Tags auch von anderen sozialen Netzwerken (wie Twitter und LinkedIn) verwendet, um die dort stattfindende Freigabe anzupassen.

Um die offenen Diagramm-Meta-Tags in Ihre WordPress-Site aufzunehmen, müssen Sie zusätzliche hinzufügen Tags in der Ihrer Website. Laut der Diagrammprotokoll öffnensind die folgenden Eigenschaften erforderlich:

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

 

og-Tags facebook1

Durch die Verwendung offener Grafiken auf Websites kann Neil Patel gefunden eine Erhöhung der Klickrate um 39%.

Wie kann ich auf Ihrer WordPress-Site nach OG-Meta-Tags suchen?

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

Wenn es bereits hinzugefügt wurde, finden Sie Ihre og-Tags in der Abschnitt innerhalb der “

og

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

Hinzufügen von OG Meta Tags zu WordPress ohne Plugin

Um Ihren Posts und Seiten in WordPress og Meta-Tags hinzuzufügen, ohne ein Plugin zu verwenden, fügen Sie einfach das folgende Code-Snippet zu Ihrem Thema hinzu functions.php Datei.

// Hinzufügen des offenen Graphen in der Sprachattributfunktion 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'); // Lässt die Open Graph Meta Info Funktion hinzufügen add_og_meta_tag () {global $ post; if (! is_singular ()) // Wenn es sich nicht um einen Beitrag oder eine Seite handelt, fügen Sie keine og-Tags hinzu. 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 Bild enthält, verwenden Sie ein Standardbild $ default_image = "https://example.com/image.jpg"; // Ersetze dies durch ein Standard-Image auf deinem Server oder ein Image in deiner Medienbibliothek echo ' '; } else {$ thumbnail_src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'large'); Echo ' '; } echo "\ n \ n ";} add_action ('wp_head', 'add_og_meta_tag', 0);

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

Sie finden Ihre Facebook-Benutzer-ID, indem Sie Ihre Facebook-Profilseite in einem Desktop-Browser besuchen.

  1. Klicken Sie auf Ihr Profilbild und wählen Sie "Profilbild anzeigen".
  2. Dadurch wird der Foto-Viewer von Facebook für Ihr Profilbild geöffnet.
  3. Die URL sollte jetzt 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 das und ersetzen Sie damit "IHRE BENUTZER-ID" im obigen Code-Snippet.

Facebook-Benutzer-ID

Sie sind fertig! Ihre Website wird jetzt mit offenen Diagramm-Tags aktualisiert.

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

Die zwei beliebten SEO-Plugins, Yoast SEO . All in One SEO-Pack kommt mit Open-Graph-Meta-Tag-Funktionen.

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

Installieren Sie zuerst Yoast SEO. Nach der Installation sollte das neue SEO-Element im linken Admin-Seitenleistenmenü angezeigt werden.

Um og-Tags mit Yoast hinzuzufügen, gehen Sie zu SEO > Social ü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 Posts sofort offene Diagramm-Tags hinzu. Sie müssen nichts konfigurieren. 

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

Unter dem Einstellungen für die Startseite In diesem Abschnitt können Sie eine Bild-URL für Ihre Startseite definieren. Dies wird für die verwendet og: Bild Eigentum Ihrer Homepage. 

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

Endlich gibt es die Standardeinstellungen Sektion. Auf diese Weise können Sie eine Standard-Bild-URL definieren, die für einen Beitrag verwendet wird og: Bild Eigenschaft für den Fall, dass kein gekennzeichnetes Bild definiert ist.

Wenn Sie fertig sind, vergessen Sie nicht zu klicken Änderungen speichern damit Ihre Änderungen angewendet werden.

Konfigurieren von OG-Tags pro Post mit Yoast SEO

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

Joghurt pro Post og 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, stellen Sie sicher, dass Sie ihn speichern, aktualisieren oder veröffentlichen, je nachdem, was zutreffend ist, um die von Ihnen vorgenommenen Änderungen zu übernehmen.

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

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 dem All-in-One-SEO-Paket werden Ihrem Beitrag standardmäßig Standard-Tags hinzugefügt, ähnlich wie bei Yoast.

Im Vergleich zu Yoast gibt es hier mehr konfigurierbare Optionen, aber einige sind nur verfügbar, wenn Sie die Pro-Version verwenden. Trotzdemless, die Menge der konfigurierbaren Optionen in der kostenlosen Version ist mehr als genug.

  • Standard-Post-Image - Definiert, welches Bild für einen Beitrag verwendet wird og: Bild Eigentum.
  • Standard-Post-Facebook-Bild - Wenn Sie in der Standardoption für das Post-Image die Option Standardbild (siehe unten) auswählen, laden Sie hier das benutzerdefinierte Bild hoch.
  • Standardobjekttyp-Objekttypen - Mit dieser Option können Sie einen Standardwert für einen Beitrag, eine Seite oder einen Anhang 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 FB-Seite / Ihrem FB-Profil direkt folgen können. Weitere Informationen zur Konfiguration finden Sie in AIOSEOs Hilfeseite.
  • Site Name - Mit dieser Option können Sie konfigurieren, welche Werte für einen Beitrag verwendet werden og: site_name Eigentum. Sie können Tags verwenden, um den Wert für diese Eigenschaft dynamisch zu generieren, Sie können auch einen Standardtext hinzufügen oder Sie können die beiden auch mischen, wenn Sie möchten.

Im Anschluss an die obigen Punkte gibt es einen Abschnitt zum Konfigurieren der Homepage und der Tags Ihrer Site. Unter dem Homepage-Einstellungen Abschnitt können Sie Folgendes definieren:

  • Bild - für Ihre Homepage og: Bild Eigentum.
  • Titel - für Ihre Homepage og: Titel Eigentum. Sie können Variablen verwenden, um dies dynamisch zu generieren.
  • Produktbeschreibung - 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 Meta-Tags für offene Diagramme definieren können, z fb: app_id, fb: Admins, usw.

Vergessen Sie nicht, wenn Sie mit Ihrer Konfiguration zufrieden sind Änderungen speichern.

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

Sie können mit AIOSEO wie Yoast pro Post und Tags konfigurieren. Gehen Sie zum Post-Editor und scrollen Sie nach unten zur AIOSEO-Metabox und dann zur Social Tab.

aioseo per Post und Tags

Die Optionen hier ähneln denen, die oben erläutert 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 definiert haben.

Wenn Sie mit dem Hinzufügen Ihrer og-Tags zu einem Beitrag fertig sind, stellen Sie sicher, dass Sie ihn speichern, aktualisieren oder veröffentlichen, je nachdem, was zutreffend ist, um die von Ihnen vorgenommenen Änderungen zu übernehmen.

Hier erfahren Sie, wie Sie Ihrer WordPress-Site og-Tags hinzufügen. Hoffentlich hat Ihnen dieser Artikel dabei geholfen, den besseren Ansatz zu wählen, und Sie haben ein wenig darüber gelernt, wie wichtig es ist, og-Tags auf Ihrer Website zu implementieren.

Wenn Sie weitere Tipps und Tricks zu WordPress sehen möchten, lesen Sie unsere vollständigen 101 Liste der 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 offenen Diagramms zu den Sprachattributen

Funktion add_opengraph_doctype ($ output) {

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

}


add_filter ('language_attributes', 'add_opengraph_doctype');


// Lässt Open Graph Meta Info hinzufügen

Funktion add_og_meta_tag () {


globale $ post;


if (! is_singular ()) // Wenn es sich nicht um einen Beitrag oder eine Seite handelt, fügen Sie 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 Bild enthält, verwenden Sie ein Standardbild

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

Echo ' ';

}


else {

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

Echo ' ';

}


echo "\ n \ n ";

}


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

Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...