Gute Inhalte ziehen ein relevantes Publikum auf Ihre Website und es besteht eine gute Chance, dass einige dieser Personen Ihre Inhalte in sozialen Medien teilen möchten. Manchmal treten jedoch Probleme auf, wenn geteilte Inhalte in einem sozialen Stream nicht richtig angezeigt werden. Hier kann die Verwendung von Open Graph-Tags helfen.
Mit Open Graph können Sie die Darstellung von Titel, Bild, Beschreibung und mehr Ihres Inhalts steuern, wenn er über soziale Kanäle geteilt wird. Vielleicht kennen Sie bereits gängige Meta-Tags wie Title-Tags und Description-Tags. Aber viele Blogger wissen nicht, dass es andere spezifische Meta-Tags für soziale Netzwerke wie Google+, Facebook, Twitter und Pinterest gibt. Der Grund, warum diese Social-Networking-Sites begonnen haben, Metadaten zu verwenden, ist die korrekte Anzeige von Inhalten zusammen mit verwandten Bildern, Beschreibungen und Links. Durch die Definition dieser Meta-Tags können Sie sicherstellen, dass Ihre Inhalte in den sozialen Medien auf einen Blick leichter zu teilen und zu verstehen sind.
Jede Social-Network-Site hat unterschiedliche Präferenzen. Pinterest und Google+ bevorzugen Schema-Tags, unterstützen aber auch Open Graph Protocol Tags, die von Facebook, Google+ und Pinterest bevorzugt werden.
Die Open Graph-Tags befinden sich zwischen dem Abschnitt
der Webseite. Die am häufigsten verwendeten Tags sind:- og: Titel
- og: Beschreibung
- og: URL
- og:site_name
- og: Bild
- og: Typ
Diese machen wahrscheinlich nicht viel Sinn, daher sind hier einige Diagramme von sozialen Netzwerken, die mit den Open Graph-Tags klar gekennzeichnet sind.
Darüber hinaus hat Twitter eigene benutzerdefinierte Tags definiert, die als Twitter Cards bekannt sind. Diese Tags ermöglichen es Ihren Links, mehr Informationen anzuzeigen, wenn sie getwittert werden. Ähnlich wie Open Graph-Tags befinden sich auch die Twitter-Karten-Tags zwischen dem Abschnitt
einer Webseite. Die am häufigsten verwendeten Twitter-Tags sind:- twitter:karte
- twitter:site
- twitter:Schöpfer
Während Sie Open Graph- und Twitter Card-Tags manuell hinzufügen können, sind auf WordPress.org viele Plugins verfügbar, die es selbst unerfahrenen Benutzern sehr einfach machen, Tags zu WordPress-Posts und -Seiten hinzuzufügen. Einige unserer Favoriten sind:
- SEO von Yoast
- Open Graph für Facebook-, Google+- und Twitter-Karten-Tags
- Das SEO-Framework
- JM Twitter-Karten (nur für Twitter-Karten)
- Open Graph Protocol Framework (Nur für Open Graph-Tags und empfohlen für Entwickler)
Für dieses Tutorial werden wir die integrierten Optionen des Yoast SEO-Plugins verwenden, um spezielle Meta-Tags zu definieren, um unsere Beiträge Rich-Media-freundlich zu gestalten.
Notiz: Sie sollten nur ein Plugin verwenden, das über eine ähnliche Funktionalität verfügt. Wenn Sie WordPress SEO by Yoast bereits installiert haben, ist es besser, dieses Plugin zu konfigurieren, als auch das Open Graph für Facebook, Google+ und Twitter Card Tags Plugin zu installieren.
Schritt 1: Installieren Sie die neueste Version von Yoast SEO
Wir empfehlen Ihnen, die neueste Version von Yoast SEO zu installieren. Am einfachsten geht das über das WordPress-Admin-Dashboard unter Plugins > Neu hinzufügen und suchen Sie nach „Yoast SEO“.
Dann installieren und aktivieren Sie das Plugin (klicken Sie einfach auf diese Schaltfläche).
Nach der Aktivierung solltest du einen neuen „SEO“-Tab in deinem WordPress-Admin-Dashboard sehen. Es gibt unzählige großartige Funktionen in Yoast SEO (für Breadcrumbs, Weiterleitungen usw.), aber was uns heute interessiert, ist die Sozial Tab.
Schritt 2: Konfigurieren Sie Ihre sozialen Einstellungen
Um die Open Graph- und Twitter-Karten zu konfigurieren, navigieren Sie zu SEO > Soziales aus dem WordPress-Admin-Dashboard. Fügen Sie hier zuerst Ihre sozialen Profillinks hinzu, damit Suchmaschinen überprüfen können, ob sie wirklich mit Ihrer Website verbunden sind. Gehen Sie dann zu den verschiedenen sozialen Registerkarten.
Ihr erster Schritt besteht darin, Open Graph-Metadaten für Facebook-Posts zu aktivieren – klicken Sie einfach auf das Ermöglicht Möglichkeit. Angenommen, Sie haben die zugehörige Facebook-Seite Ihrer Website bereits unter dem hinzugefügt Konten Registerkarte können Sie loslegen. Sie können ein Standardbild für alle Seiten hinzufügen, die keine vorgestellten Medien enthalten. Dies liegt jedoch bei Ihnen.
Nachdem Facebook fertig ist, ist es an der Zeit, Twitter in Angriff zu nehmen. Stellen Sie nur sicher, dass die Metadaten der Twitter-Karte Ermöglicht Wählen Sie dann ein Standardkartenlayout (Zusammenfassung oder Zusammenfassung mit großem Bild). Auch hier wird dies mit dem Twitter-Handle verknüpft, das Sie auf dem hinzugefügt haben Konten Seite.
Pinterest ist etwas anders, da diese Plattform eine Meta-Tag-Verifizierung verwendet. Gehen Sie zu Ihrem Pinterest-Konto, bewegen Sie den Mauszeiger über Ihr Benutzersymbol und klicken Sie dann auf das Einstellungen Tab. Klicken Sie auf die Website beanspruchen Option und wählen Sie die HTML-Tag hinzufügen Möglichkeit.
Kopiere das generierte Meta-Tag und füge es in dein Yoast SEO-Panel ein. Speichern Sie Ihre Änderungen und gehen Sie dann zurück zu Pinterest zum Senden. Dadurch wird Pinterest angewiesen, das Tag zu überprüfen und Ihre Website zu verifizieren. Das war’s für Pinterest!
Google+
Das letzte soziale Konto, das Sie einrichten müssen, ist Google+, das nur ein Link zur Google+ Seite Ihres Unternehmens ist. Fügen Sie es ein und Sie sind fertig.
Standardwerte festlegen
Der letzte Schritt besteht darin, Ihre Standardeinstellung zu erstellen. Yoast verwendet Meta-Boxen in deinen Inhalten, um Open Graph-Daten zu definieren – also achte darauf, deine Standardeinstellungen unter zu bearbeiten SEO > Darstellung der Suche > Inhaltstypen. Verwenden Sie die integrierten Snippet-Variablen von Yoast SEO, um Ihre eigenen dynamischen Standardeinstellungen für Ihren Beitragstitel (der für og:title verwendet wird) und die Meta-Beschreibung (verwendet für og:description) zu erstellen.
Benutzerdefiniertes Bild, Titel und Beschreibung
Yoast SEO bietet auch eine Option für einzelne Beiträge, um das Bild, den Titel und die Beschreibung für Facebook und Twitter anzupassen. Scrollen Sie beim Bearbeiten eines Beitrags einfach nach unten zum Abschnitt Yoast SEO und klicken Sie auf das Teilen-Symbol (es sieht aus wie weniger als <-Symbol). Laden Sie dann ein benutzerdefiniertes Bild hoch oder bearbeiten Sie den Titel und die Beschreibung nach Bedarf.
Debuggen und Validieren
Jede große Social-Networking-Site verfügt über einen eigenen Validator oder Debugger, um zu testen und in der Vorschau anzuzeigen, wie Ihre Links angezeigt werden, wenn sie in sozialen Medien geteilt werden.
Testtool für strukturierte Daten von Google: Dieses Tool zeigt Ihnen nicht die Vorschau eines auf Google+ geteilten Beitrags, aber es zeigt an, welche Metadaten vorhanden und von Google gelesen werden können. Ihre Eigenschaften werden unter RDFA-Knoteneigenschaften angezeigt.
Facebook-Debugging: Nachdem Sie Open Graph-Tags implementiert haben, fügen Sie einfach die URL Ihrer Site ein, die die Tags enthält. Es zeigt Ihnen die Objekteigenschaften an.
Twitter-Validierungstool: Sie können diesen Link verwenden, um eine Vorschau der Twitter-Karte für Ihren Beitrag anzuzeigen, bevor er in sozialen Medien geteilt wird.
Pinterest Rich Pins Validator: Geben Sie, ähnlich wie bei den letzten beiden Validatoren, einfach die URL ein, die die Open Graph-Tags enthält, um eine Vorschau anzuzeigen und sicherzustellen, dass Ihr Inhalt so angezeigt wird, wie er sollte. Wenn Sie das gesamte Tutorial befolgt haben, werden Sie überhaupt kein Problem haben.
Abschließende Anmerkung
Durch die Verwendung dieser Open Graph-Meta-Tags können Sie die Darstellung von Titeln, Bildern, Beschreibungen und anderen Details für Ihre Inhalte in sozialen Medien optimieren. Dies kann dazu beitragen, den Verkehr von sozialen Websites zu erhöhen, da Links mit klaren Informationen dazu neigen, mehr Shares und natürliche Links zu erhalten. Außerdem neigen die Leute dazu, Links zu vertrauen, die mehr Informationen enthalten, anstatt auf nackte oder kurze URLs zu klicken (es kann auch hilfreich sein, wenn Sie auch Techniken verwenden, um das Teilen in sozialen Netzwerken zu automatisieren).
Hoffentlich hat Ihnen unser Leitfaden geholfen, die Open Graph-Meta-Tags und Twitter-Karten Ihrer Website einzurichten, aber wenn Sie Fragen haben, können Sie sie gerne stellen. Wir helfen gerne, wenn wir können!
Welche WordPress-Plugins verwenden Sie, um diese Meta-Tags zu implementieren? Haben Sie weitere Tipps oder Tricks hinzuzufügen? Fühlen Sie sich frei, Ihre Gedanken in den Kommentaren unten zu erwähnen.