Übernehmen Sie die Kontrolle über Ihre Social Snippets

Soziale Signale werden in der SEO-Welt immer wichtiger. Facebook-Aktien, Tweets und Google + 1 haben ein derart hohes Volumen erreicht, dass sie ein großes Maß an Content-Qualität darstellen können. Deshalb haben Suchmaschinen begonnen, diese Signale zu berücksichtigen, wenn sie Webseiten einordnen.

Soziale Signale sind nach wie vor nicht so wichtig wie andere Rankingfaktoren wie Linkprofil und Inhalt einer Website, sie werden jedoch zweifellos ein wesentlicher Rankingfaktor in der Zukunft sein.

Um die Sichtbarkeit unserer Inhalte zu maximieren, müssen wir kontrollieren, wie sie als soziales Snippet aussehen. Ein gutes soziales Snippet hat das Potenzial, viele zusätzliche Besucher auf unsere Websites zu locken. Mal sehen, wie wir eines davon erstellen können.


Soziale Schnipsel?

Ein soziales Snippet ist ein Vorschau einer Seite Dies wird verwendet, wenn Sie diese Seite in sozialen Medien teilen. Anstelle eines einfachen Links erhalten Benutzer zusätzliche Informationen zum Inhalt des Links.

Wenn wir beispielsweise den Artikel über die Paginierung von Webdesigntuts + auf Facebook veröffentlichen möchten, sehen wir den folgenden Social Snippet:

Ein soziales Snippet auf Google+ sieht ungefähr gleich aus:

Anstelle eines Basislinks sehen Benutzer also viel mehr Informationen über die Seite. Wir sehen ein Vorschaubild, den Titel und sogar eine kurze Beschreibung. Dies erleichtert uns die Entscheidung, ob der Link einen Klick wert ist oder nicht.

Diese sozialen Schnipsel sind automatisch generiert. Die Person, die die Webseite freigibt, hat keinen Einfluss auf das verwendete Bild, den Titel und die Beschreibung. Diese können nur vom Webmaster selbst geändert werden (wie wir dies später im Artikel erfahren werden).


Warum Social Snippets wichtig sind

Das Social Snippet einer Seite wird von vielen Webmastern vergessen, was zu Darstellungsproblemen in den sozialen Medien führen kann. Wenn das Social Snippet-Markup nicht vorhanden ist, wird ein Social Snippet häufig falsch angezeigt.

Das Ziel sozialer Schnipsel ist das Menschen zum Klicken überreden auf sie. Je mehr Personen darauf klicken, desto mehr Besucher werden der zugrunde liegenden Seite angezeigt. Deshalb sollten Sie sie als kostenlose Werbung behandeln. Eine gleichwertige Anzeige sollte ein auffälliges Foto, einen klickwürdigen Titel und eine interessante Beschreibung enthalten. Ein soziales Snippet sollte die gleichen Elemente haben.

Wenn eines dieser Elemente nicht ordnungsgemäß funktioniert, z. B. das falsche Miniaturbild angezeigt wird, kann dies letztendlich Besucher und Kunden kosten.

Dies ist ein Beispiel für eine Seite welche hat nicht implementierte soziale Schnipsel. Ich teilte eine Seite von "De Bakboetiek", einem Laden, der sich auf Backgeräte spezialisiert hat. Sie haben auch einen Webshop, in dem sie Produkte wie diesen Kuchenform verkaufen, aber wie Sie sehen können, ist dieser soziale Ausschnitt nicht besonders nützlich.

Anstelle einer Miniaturansicht der Kuchenform und einer kurzen Beschreibung können wir nur das Logo und den falschen Titel sehen. Es gibt nicht einmal eine Beschreibung! Wie soll dieses Social Snippet Besucher von Facebook auf ihre Website bringen??


Das Open Graph-Protokoll

Social Snippets basieren auf dem Open Graph Protocol. Es wird verwendet, um aus einer Webseite ein reichhaltiges Objekt im Social Graph zu machen. Dank Social Media wie Facebook, Google+ und Twitter können wichtige Elemente einer Seite identifiziert werden.

Das OG-Protokoll basiert auf RDFa (erinnern Sie sich an RDFa aus unserem Artikel zu strukturierten Daten?). Wir können es mit zusätzlichen implementieren Tags in der einer Seite.

Weitere Informationen zum Open Graph Protocol finden Sie auf ogp.me.


Erstellen eines Social Snippet

Nun ist es an der Zeit, die Kontrolle über unser eigenes soziales Snippet zu übernehmen. Es gibt verschiedene Elemente, die angepasst werden können: Miniaturansicht, Titel, Beschreibung, URL und Inhaltstyp.

Hinweis: Das folgende Markup wird von Facebook und Google+ verwendet. Twitter verwendet verschiedene Meta-Tags, die wir später besprechen werden.

Miniaturansicht

Dies ist vielleicht das wichtigste Element eines sozialen Snippets. Dies ist der Teil, den die meisten Benutzer zuerst sehen werden. Stellen Sie daher sicher, dass Sie ein klares Bild dafür verwenden.

Ich empfehle die Verwendung eines quadratischen Bildes mit mindestens 200 x 200 Pixeln. Wenn das Bild zu klein ist, wird es möglicherweise nicht angezeigt oder es wird stattdessen ein anderes Bild der Seite verwendet (in einigen Fällen das Bild einer Anzeige…)..

Wir können den Ort der Miniaturansicht mit dieser Markierung angeben:

Titel

Dies ist der Titel Ihres Social Snippets. Es ist das zweitwichtigste Element neben der Miniaturansicht. Ihr Titel sollte den Benutzer dazu bringen, darauf zu klicken. Sie fungiert auch als Ankertext für den Link zur Seite.

Der Code für den Titel sieht so aus:

Beschreibung

Schreiben Sie eine kurze Zusammenfassung der Seite, die als Beschreibung verwendet werden kann. Ich benutze meinen Meta-Beschreibungstext häufig für ein soziales Snippet, aber Sie können wählen, was Sie möchten. Stellen Sie nur sicher, dass die Neugier des Lesers geweckt wird und er oder sie auf den Link klicken muss.

Inhaltstyp

Wenn Sie den Inhalt auf der Seite angeben möchten, können Sie das verwenden og: typ Etikett. Wenn dieses Tag ausgelassen wird, wird die Seite als "Website" kategorisiert. Andere Inhaltstypen, die verwendet werden können, sind Musik, Video, Artikel, Buch und Profil. Weitere Informationen finden Sie auf der Seite mit den eingebauten Objekten auf Facebook.

URL

Dies ist die URL, an die der Benutzer gesendet wird, wenn er auf den Titel klickt. Fügen Sie die kanonische URL diesem Tag hinzu:

Wenn du möchtest verfolgen Sie den Verkehr aus sozialen Medien, Sie können Tracking-Parameter hinzufügen, mit denen Informationen in Google Analytics angezeigt werden können. Verwenden Sie dazu den Google URL Builder.

Sie müssen nur drei Parameter hinzufügen: Quelle, Medium und Kampagne.

  • Quelle: Facebook
  • Medium: sozial
  • Kampagne: ein eindeutiger Name / eine eindeutige ID

Die endgültige URL sieht etwa so aus: http://www.website.com/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name


Twitter-Karten

Twitter verwendet eine andere Markierung, um Twitter-Karten zu erstellen. Mit Twitter-Karten können Sie Medien an Tweets anhängen, die mit Ihrem Inhalt verknüpft sind.

Es können drei Medientypen verwendet werden:

  • Zusammenfassung: ähnlich einem Social Snippet bei Facebook und Google+
  • Foto: eine Fotokarte
  • Spieler: eine Media Player-Karte

Lassen Sie uns jede Twitter-Karte einzeln besprechen:

Zusammenfassung

Die Zusammenfassungskarte ist eine Twitter-Karte, die den Social-Snippets ähnelt, die wir auf Facebook und Google+ sehen. Es kann für verschiedene Inhaltstypen (Blogbeiträge, Artikel, Produkte usw.) verwendet werden. Eine Zusammenfassungskarte kann folgendermaßen aussehen:

     

Zunächst müssen wir den Typ der Twitter-Karte über die Twitter: Karte Tag (in diesem Fall eine Zusammenfassung). Die URL sollte die kanonische URL der Seite sein. Das Twitter: Titel Das Tag sollte nicht länger als 70 Zeichen sein. Die Beschreibung dagegen ist auf 200 Zeichen begrenzt. Das Bild wird als Miniaturansicht verwendet und sollte quadratisch sein. Bilder, die kleiner als 60 x 60 Pixel sind, werden nicht angezeigt. Endlich, das Schöpfer Tag kann verwendet werden, um dem Autor Kredit zu geben.

Foto

Es gibt mehrere Elemente einer Fotokarte, die auch in der Zusammenfassungskarte verwendet werden. Der Hauptunterschied zwischen den beiden ist das Styling des Tweets. Die Fotokarte setzt das Bild vorne und in der Mitte in den Tweet.

Twitter verwendet das Twitter: Bild URL für das Foto Wenn dieses Bild kleiner als 280 x 150 Pixel ist, wird es nicht angezeigt. Sie können Breite und Höhe des Bildes angeben, damit Twitter das Seitenverhältnis des Bildes bei der Größenänderung beibehalten kann.

Eine Fotokarte könnte so aussehen:

      

Das Twitter: Karte und Twitter: Bild Tag sind erforderlich, der Rest ist optional.

Spieler

Die Player-Karte wird für Audio und Video verwendet. Die Mediendatei wird über einen iframe in den Tweet eingebettet. Der Nachteil einer Spielerkarte ist das muss von Twitter genehmigt werden!

Wenn Sie eine Player-Karte zur Genehmigung verwenden möchten, fügen Sie Ihrer Seite den folgenden Code hinzu:

       

Das Twitter: Karte Das Tag wird zur Identifizierung der Spielerkarte verwendet. URL, Titel, Bild und Beschreibung ähneln anderen Spielerkarten. Das Twitter: Spieler Das Tag enthält eine HTTPS-Verknüpfung zum iframe-Player. Sie können die Breite und Höhe des Iframes über festlegen Twitter: Spieler: Breite und Twitter: Spieler: Höhe Stichworte.

Einige andere Anforderungen an Spielerkarten:

  • Verwenden Sie eine HTTPS-URL (das Video muss auch über HTTPS bereitgestellt werden)
  • Stopp- oder Pausenkontrollen sind obligatorisch
  • Es ist keine automatische Wiedergabe erlaubt
  • Für den Inhalt muss keine Anmeldung erforderlich sein

Twitter-Karten und das offene Diagramm

Twitter sucht zuerst Twitter: Karte Tags auf Ihrer Website, aber wenn es keine finden kann, wird es auf das Open Graph-Markup zurückgesetzt. Das bedeutet, dass Sie keine doppelten Tags erstellen müssen. Sie können Ihre vorhandenen Open Graph-Tags einfach mit Twitter-Karten-Tags ergänzen.

Twitter sieht die folgenden Tags als ähnlich (Twitter-Markup auf der linken Seite, OG auf der rechten Seite).

  • twitter: ul = og: url
  • twitter: description = og: Beschreibung
  • twitter: title = og: title
  • twitter: image = og: image
  • twitter: image: width = og: image: width
  • twitter: image: height = og.image.height

Fazit

Suchmaschinen verwenden immer mehr Zeit für soziale Signale, da sie ein hervorragender Indikator für qualitativ hochwertige Inhalte sind. Um die Chance zu verbessern, dass jemand auf ein soziales Snippet klickt, müssen wir die Kontrolle über den Inhalt übernehmen. Wir können dies über das Open Graph-Protokoll für Facebook und Google+ tun. Für Twitter müssen wir diese Open Graph-Tags mit Twitter-spezifischem Code ergänzen.


Nützliche Ressourcen

Um Ihnen bei der Implementierung sozialer Snippets zu helfen, habe ich verschiedene Tools zusammengestellt, die nützlich sein könnten:

  • Google+ Snippet Creator: Verwenden Sie dieses Tool, um einen HTML-Code für ein soziales Snippet zu generieren. Fügen Sie einfach den Code in den Kopfbereich Ihrer Seite ein und fertig.
  • Facebook Debugger: Überprüfen Sie die geöffneten Diagramminformationen, die von Ihrer Seite gelöscht wurden.
  • Rich Snippet Testing Tool: kann verwendet werden, um die Informationen Ihres sozialen Snippets zu überprüfen.