Leitfaden zum Teilen für Webmaster

In diesem Dokument wird beschrieben, wie du im Web gehosteten Inhalt, den Personen auf Facebook teilen, optimieren kannst – unabhängig davon, ob von zuhause oder unterwegs, ob Web oder mobile App.

In diesem Dokument findest du Informationen zu folgenden Themen:

Open Graph-Markup
Testen deines Markups
Testen der ordnungsgemäßen Verarbeitung des Facebook User Agent
Arten von Medieninhalten

Open Graph-Markup

Die meisten Inhalte werden als URL auf Facebook geteilt. Aus diesem Grund ist es wichtig, dass du deine Webseite mit Open Graph-Tags versiehst, um die Kontrolle darüber zu haben, wie dein Inhalt auf Facebook angezeigt wird. Damit deine Website von unserem Crawler richtig geteilt werden kann, muss unser Server gzip- und deflate-Kodierungen verwenden.

Ohne diese Open Graph-Tags verwendet der Facebook-Crawler interne Heuristiken, um Titel, Beschreibung und Vorschaubild für deinen Inhalt nach bestem Wissen automatisch auszuwählen. Du kannst diese Informationen mit Open Graph-Tags festlegen, um die höchstmögliche Qualität der Beiträge auf Facebook zu gewährleisten.

Hier ist ein Beispiel für mit Open Graph-Tags zur optimalen Anzeige auf Facebook formatierten Inhalt:

Markup-Beispiel

Hier siehst du beispielsweise, wie ein Artikel, ein Nachrichtenbeitrag oder ein Blogeintrag mit og:type="article" und verschiedenen anderen Eigenschaften versehen wird:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

Die Eigenschaften beinhalten beschreibende Metadaten zu dem Artikel, die wir präsentieren möchten, wenn jemand den Artikel teilt.

Grundlegende Tags

Dies sind die grundlegendsten Meta-Tags, die du für alle Inhaltsarten verwenden solltest:

Tag	Beschreibung
`og:url`	Die kanonische URL für deine Seite. Hierbei muss es sich um die URL ohne Anhänge handeln – also ohne Sitzungsvariablen, Parameter zur Nutzeridentifizierung oder Zähler. „Gefällt mir“-Angaben und Teilvorgänge für diese URL werden unter dieser URL zusammengefasst. Beispiel: URLs mobiler Domains sollten auf die Desktop-Version der URL als kanonische URL verweisen, um „Gefällt mir“-Angaben und Teilvorgänge über die verschiedenen Versionen der Seite hinweg zusammenzufassen.
`og:title`	Der Titel deines Artikels ohne Branding (z. B. der Name der Webseite).
`og:description`	Eine kurze Beschreibung des Inhalts – für gewöhnlich zwei bis vier Sätze. Diese Information wird unter dem Titel des Facebook-Beitrags angezeigt.
`og:image`	Die URL des Bildes, das angezeigt werden soll, wenn jemand den Inhalt auf Facebook teilt. Weiter unten findest du weitere Informationen. In unserem Leitfaden mit Best Practices erfährst du darüber hinaus, wie du ein qualitativ hochwertiges Vorschaubild festlegst.
`fb:app_id`	Um die Facebook-Insights zu nutzen, musst du die App-ID zu deiner Seite hinzufügen. Über Insights kannst du Analysedaten für den von Facebook stammenden Traffic deiner Webseite einsehen. Die App-ID findest du in deinem App-Dashboard.

Es empfiehlt sich darüber hinaus, zwei zusätzliche Tags hinzuzufügen, um die Verteilung deines Inhalts zu verbessern und die Interaktion zu steigern:

Tag	Beschreibung
`og:type`	Der Medientyp deines Inhalts. Dieses Tag beeinflusst, wie dein Inhalt im Feed angezeigt wird. Wenn du keinen Typ angibst, wird der Standardtyp `website` verwendet. Bei jeder URL muss es sich um ein einzelnes Objekt handeln. Mehrere `og:type`-Werte sind also nicht möglich. Die vollständige Liste von Objekttypen findest du in der Referenz zu den Objekttypen.
`og:locale`	Die Ländereinstellung der Ressource. Dieser Wert lautet standardmäßig `en_US`. Du kannst auch `og:locale:alternate` verwenden, wenn Übersetzungen in anderen Sprachen verfügbar sind. Weitere Informationen zu den unterstützten Sprachen findest du in der Dokumentation zur Lokalisierung.

Eine vollständige Liste der standardmäßigen Objekteigenschaften findest du in unserer Referenz zu den Objekteigenschaften.

Testen deines Markup

Um zu überprüfen, wie der Facebook-Crawler dein Markup liest, gib eine URL in den Sharing Debugger ein. Dieser zeigt an, welche Meta-Tags der Crawler ausliest und welche Fehler aufgetreten sind.

Der Debugger löst darüber hinaus eine Auslesung deiner Seite aus – wenn also im HTML-Code deiner Seite Fehler enthalten sind, kannst du den Debugger zum Aktualisieren deines Inhalts nutzen. Weitere Informationen hierzu findest du unter Aktualisieren von Objekten.

Testen der ordnungsgemäßen Verarbeitung des Facebook User-Agent

Öffne deinen Browser.
Ändere den User-Agent so, dass er mit dem Facebook User-Agent übereinstimmt. Weitere Informationen zur Änderung des User-Agent findest du unter http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/:
- Menü „Entwickler“ > User-Agent > Anderer
- Setze den User-Agent auf: facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
Lade die betroffene URL.
Setze den User-Agent auf einen mobilen Browser, z. B. „Safari – iPhone“:
Menü „Entwickler“ > User-Agent > Safari iOS 10 – iPhone
Lade die betroffene URL.
Wenn es sich um ein Problem mit dem User-Agent handelt, wird die Seite in Schritt 5 richtig geladen, aber nicht in Schritt 3.

Arten von Medieninhalten

Du kannst auch zusätzliche Tags hinzufügen, wenn deine Webseite Audio-/Videoinhalte oder Standortinformationen enthält. Eine Liste aller standardmäßigen Objekteigenschaften findest du in unserer Referenz zu den Objekttypen.

Video

Du kannst og:video für alle Inhaltsarten verwenden. In diesem Abschnitt wird beschrieben, wie du zusätzliche Tags zum Optimieren der Videoanzeige auf Facebook einsetzen kannst. Facebook unterstützt sowohl MP4- als auch Flash-Videos.

Verwende für die Tags og:video:url und og:video:secure_url eine sichere URL, damit deine Videos direkt im Feed abgespielt werden können. Beachte, dass das Abspielen im Feed aufgrund verschiedener Faktoren nicht garantiert werden kann.

Meta-Tag	Beschreibung
`og:video`	Die URL für das Video. Wenn das Video direkt im Feed abgespielt werden soll, musst du, wenn möglich, eine URL mit „https://“ verwenden.
`og:video:url`	Entspricht `og:video`
`og:video:secure_url`	Die sichere URL für das Video. Gib diesen Wert auch dann an, wenn du die sichere URL in `og:video` festgelegt hast.
`og:video:type`	MIME-Typ des Videos. Entweder `application/x-shockwave-flash` oder `video/mp4`.
`og:video:width`	Breite des Videos in Pixel. Diese Eigenschaft ist für Videos erforderlich.
`og:video:height`	Höhe des Videos in Pixel. Diese Eigenschaft ist für Videos erforderlich.
`og:image`	Gib ein Bild für eine Vorschau in hoher Qualität im Feed an.

Bilder

Verwende diese Reihe von Eigenschaften für Inhalte, die mehr als ein Bild enthalten. Informationen zur optimalen Verwendung von og:image findest du in unseren Best Practices zum Teilen.

Meta-Tag	Beschreibung
`og:image`	URL für das Bild. Um ein Bild zu aktualisieren, nachdem es veröffentlicht wurde, verwende eine neue URL für das neue Bild. Bilder werden basierend auf der URL zwischengespeichert und erst aktualisiert, wenn sich die URL ändert.
`og:image:url`	Entspricht `og:image`
`og:image:secure_url`	https://-URL für das Bild.
`og:image:type`	MIME-Typ des Bildes. `image/jpeg`, `image/gif` oder `image/png`
`og:image:width`	Breite des Bildes in Pixel. Gib die Höhe und Breite deines Bildes an, um zu gewährleisten, dass das Bild ab dem ersten Teilvorgang optimal geladen wird.
`og:image:height`	Höhe des Bildes in Pixel. Gib die Höhe und Breite deines Bildes an, um zu gewährleisten, dass das Bild ab dem ersten Teilvorgang optimal geladen wird.

3D-Elemente

Weitere Informationen findest du in unseren 3D-Beiträgen in der Dokumentation zu Open Graph Sharing.