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 korrekt angezeigt werden. Hier kann die Verwendung von Open Graph-Tags Abhilfe schaffen.
Mit Open Graph können Sie das Erscheinungsbild von Titel, Bild, Beschreibung und mehr Ihrer Inhalte steuern, wenn diese über soziale Kanäle geteilt werden. Möglicherweise sind Sie bereits mit gängigen Meta-Tags wie dem Titel-Tag und den Beschreibungs-Tags vertraut. Viele Blogger wissen jedoch nicht, dass es andere spezifische Meta-Tags für Social-Media-Websites wie Google+ gibt. Facebook, Twitter Und Pinterest. Der Grund, warum diese Social-Media-Sites mit der Verwendung von Metadaten begonnen haben, besteht darin, Inhalte zusammen mit zugehörigen Bildern, Beschreibungen und Links ordnungsgemäß anzuzeigen. Durch die Definition dieser Meta-Tags können Sie sicherstellen, dass Ihre Inhalte in sozialen Medien einfacher geteilt und auf einen Blick verstanden werden können.
Jede Social-Media-Site hat unterschiedliche Vorlieben. Pinterest und Google+ bevorzugen Schema-Tags, unterstützen aber auch Open Graph-Protokoll-Tags, die von bevorzugt werden FacebookGoogle+ und Pinterest.
Open Graph-Tags liegen zwischen
Abschnitt der Website. Die am häufigsten verwendeten Tags sind:
- og: Titel
- og: Beschreibung
- og: URL
- og: Site-Name
- og: Bild
- og: Typ
Das macht wahrscheinlich nicht viel Sinn, daher finden Sie hier einige Diagramme zum Teilen in sozialen Netzwerken, in denen die Open Graph-Tags deutlich gekennzeichnet sind.
Pinterest Beispiel für einen Rich Pin
Beispiel für Google +1-Aktionen
Facebook Beispiel für ein offenes Diagramm
Twitter Kartenbeispiel
Außerdem Twitter Sie haben Ihre eigenen benutzerdefinierten Tags namens definiert Twitter Karten. Mithilfe dieser Tags können Ihre Links jedes Mal, wenn sie getwittert werden, mehr Informationen präsentieren. Ähnlich wie Open Graph-Tags, die Twitter Auch die Kartenetiketten gehören dazu
Abschnitt einer Webseite. Meist genutzt Twitter Die Tags sind:
- Twitter: Karte
- Twitter: Website
- Twitter: Ersteller
Während Sie Open Graph und hinzufügen können Twitter Karten-Tags Manuell gibt es auf WordPress.org viele Plugins, die es selbst unerfahrenen Benutzern leicht machen, Tags zu WordPress-Beiträgen und -Seiten hinzuzufügen. Zu unseren Favoriten gehören:
- SEO von Yoast
- Diagramm öffnen für FacebookGoogle+ und Twitter Kartenetiketten
- Das SEO-Framework
- J.M. Twitter Karten (nur für Twitter Karten)
- Open Graph-Protokoll-Framework (nur für Open Graph-Tags und für Entwickler empfohlen)
Für dieses Tutorial verwenden wir die integrierten Optionen des Yoast SEO-Plugins, 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 von Yoast bereits installiert haben, ist es besser, dieses Plugin zu konfigurieren, als auch Open Graph zu installieren FacebookGoogle+ und Twitter Karten-Tags-Addon.
Schritt 1 – Installieren Sie die neueste Version von Yoast SEO
Wir empfehlen Ihnen, die neueste Version von Yoast SEO zu installieren. Der einfachste Weg, dies zu tun, ist über das WordPress-Admin-Panel unter Plugins > Neu hinzufügen und nach „Yoast SEO“ zu suchen.
Dann installieren und aktivieren Sie das Plugin (klicken Sie einfach auf diese Schaltfläche).
Nach der Aktivierung sollte in Ihrem WordPress-Administrationsbereich eine neue Registerkarte „SEO“ angezeigt werden. Es gibt jede Menge coole Funktionen in Yoast SEO (für Breadcrumbs, Weiterleitungen usw.), aber was uns heute interessiert, ist die Registerkarte „Soziale Netzwerke“.
Schritt 2: Konfigurieren Sie Ihre sozialen Einstellungen
So konfigurieren Sie Open Graph und Twitter Karten navigieren im WordPress-Admin-Panel zu SEO > Soziales. Fügen Sie hier zunächst die Links zu Ihren sozialen Profilen hinzu, damit Suchmaschinen überprüfen können, ob sie tatsächlich mit Ihrer Website verbunden sind. Fahren Sie dann mit den verschiedenen sozialen Registerkarten fort.
Der erste Schritt besteht darin, Open Graph-Metadaten für zu aktivieren Facebook Beiträge – Klicken Sie einfach auf die Option „Aktiviert“. Vorausgesetzt, Sie haben den zugehörigen Inhalt Ihrer Website bereits hinzugefügt Facebook Auf der Registerkarte „Konten“ sind Sie bereit. Sie können bei Bedarf ein Standardbild für jede Seite hinzufügen, die keine vorgestellten Medien enthält, aber das bleibt Ihnen überlassen.
Mit Facebook fertig, es ist Zeit, es anzusprechen Twitter. Stellen Sie einfach sicher Twitter Wenn die Kartenmetadaten aktiviert sind, wählen Sie dann ein Standardkartenlayout aus (Zusammenfassung oder Zusammenfassung mit großem Bild). Auch dies wird mit dem verbunden sein Twitter Handle, das Sie auf der Seite „Konten“ hinzugefügt haben.
Pinterest ist etwas anders, da diese Plattform eine Meta-Tag-Verifizierung verwendet. gehen Sie zu Ihrem Pinterest Um ein Konto einzurichten, bewegen Sie den Mauszeiger über das Benutzersymbol und klicken Sie dann auf die Registerkarte „Einstellungen“. Klicken Sie auf die Option „Website beanspruchen“ und wählen Sie die Option „HTML-Tag hinzufügen“.
Kopieren Sie das generierte Meta-Tag und fügen Sie es in Ihr Yoast SEO-Dashboard ein. Speichern Sie Ihre Änderungen und kehren Sie dann zu zurück Pinterest liefern. Das sagt Pinterest um das Label zu überprüfen und Ihre Website zu verifizieren. Das ist alles Pinterest!
Google+
Das letzte soziale Konto, das Sie einrichten müssen, ist Google+. Dabei handelt es sich lediglich um einen Link zur Google+-Seite Ihres Unternehmens. Fügen Sie es ein und das war’s.
Legen Sie Standardwerte fest
Der letzte Schritt besteht darin, Ihre Standarddatei zu erstellen. Yoast verwendet Meta-Boxen in seinen Inhalten, um Open Graph-Daten zu definieren. Stellen Sie daher sicher, dass Sie deren Standardeinstellungen unter SEO > Suchdarstellung > Inhaltstypen bearbeiten. Verwenden Sie die integrierten Snippet-Variablen von Yoast SEO, um Ihre eigenen dynamischen Standardeinstellungen für den Titel Ihres Beitrags (verwendet für og:title) 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 verwendete Bild, den Titel und die Beschreibung anzupassen Facebook Und Twitter. Wenn Sie einen Beitrag bearbeiten, scrollen Sie einfach nach unten zum Abschnitt „Yoast SEO“ und klicken Sie auf das Teilen-Symbol (es sieht kleiner aus als das Symbol).
Debugging und Validierung
Jede große Social-Media-Site verfügt über einen eigenen Validator oder Debugger, mit dem Sie testen und in der Vorschau sehen können, wie Ihre Links aussehen, wenn sie in sozialen Medien geteilt werden.
Testtool für strukturierte Daten von Google: Dieses Tool zeigt Ihnen nicht die Vorschau des auf Google+ geteilten Beitrags, sondern zeigt an, welche Metadaten vorhanden und für Google lesbar sind. Seine Eigenschaften werden in den Eigenschaften des RDFA-Knotens angezeigt.
Facebook Debuggen: Fügen Sie nach der Implementierung von Open Graph-Tags einfach die URL Ihrer Website ein, die die Tags enthält. Es zeigt Ihnen die Eigenschaften des Objekts.
Twitter Validierungstool: Über diesen Link können Sie eine Vorschau anzeigen Twitter Karte zum Posten, bevor sie in den sozialen Medien geteilt wird.
Pinterest Rich-Pin-Validator: Ähnlich wie bei den letzten beiden Validatoren geben Sie einfach die URL mit den Open Graph-Tags ein, um eine Vorschau anzuzeigen und sicherzustellen, dass Ihr Inhalt so angezeigt wird, wie er sollte. Wenn Sie das gesamte Tutorial befolgt haben, werden Sie keine Probleme haben.
Schlussbemerkung
Durch die Verwendung dieser Open Graph-Meta-Tags können Sie die Darstellung von Titeln, Bildern, Beschreibungen und anderen Details Ihrer Inhalte in sozialen Medien optimieren. Dies kann dazu beitragen, den Verkehr auf sozialen Websites zu erhöhen, da Links mit klaren Informationen tendenziell mehr Shares und natürliche Links erhalten. Darüber hinaus neigen Menschen dazu, Links zu vertrauen, die mehr Informationen enthalten, anstatt auf kurze oder nackte URLs zu klicken (es kann auch hilfreich sein, wenn Sie Techniken zur Automatisierung des Teilens in sozialen Netzwerken verwenden).
Wir hoffen, dass unser Leitfaden Ihnen beim Einrichten der Open Graph-Meta-Tags Ihrer Website geholfen hat Twitter Karten, aber wenn Sie Fragen haben, können Sie diese 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, die Sie hinzufügen können? Fühlen Sie sich frei, Ihre Gedanken in den Kommentaren unten zu erwähnen.
