Wie soziale Netzwerke das Beitragsbild leichter finden

postimage

Wir haben einen Artikel geschrieben, ein schönes Beitragsbild ausgesucht, und jetzt teilen wir unseren Text in den sozialen Netzwerken Facebook, Google Plus oder Twitter. Und die verwenden alle das falsche Bild: Das Logo oder einfach das erste Bild im Quelltext.

Hier können wir relativ einfach nachhelfen und den Diensten sagen, welches Bild unseren Beitrag bitteschön repräsentieren soll. Der Schlüssel dazu heißt Open Graph Protocol (OGP). Das ist ein Schema für Metadaten, das sich Facebook einst ausgedacht hat. Inzwischen haben viele andere Dienste dieses Schema übernommen, damit wir nicht für jeden eine Extrawurst braten müssen.

Diese Metadaten werden entweder bestimmten Elementen im Inhalt beigegeben oder als Nachfahren des Elementes head eingesetzt. Uns interessiert hier nur der zweite Fall, denn das genügt.

Was wir am Ende haben wollen, sieht ungefähr so aus:

Natürlich wollen wir das automatisieren und in ein Miniplugin stecken, damit wir uns künftig nicht mehr darum kümmern müssen.

Das ist recht einfach. In jedem funktionierenden Theme gibt es im Element head einen Abschnitt, der etwa so aussieht:

Hier wird die Funktion wp_head() aufgerufen, die eine Aktion gleichen Namens startet:

Und diese Aktion benutzen wir, um unser zusätzliches HTML auszugeben:

Jetzt brauchen wir noch die Funktion marketpress_ogp_image(), damit tatsächlich etwas passiert. In dieser Funktion prüfen wir der Reihe nach …

  1. ob wir gerade eine Einzelseite ausgeben, also eine Seite, einen Beitrag oder einen anderen Posttypen,
  2. ob wir ein Beitragsbild angegeben haben,
  3. ob dieses Bild noch existiert und
  4. ob wir eine brauchbare URL dafür von WordPress bekommen.

Wenn das alles geklappt hat, geben wir das HTML aus.

In PHP formuliert sieht das so aus:

Den Quellcode als komplettes Plugin habe ich in unserem Repository Mini Plugins abgelegt. Ihr könnt das Plugin aber auch als separates ZIP-Archiv herunterladen: Featured image for Open Graph.

Beitrag teilen

Author Avatar

Ich bin Entwickler und Autor für MarketPress. In meiner Freizeit moderiere ich mehrere WordPress-Communities.

Auch interessant:

woonews19

WooCommerce Wochenrückblick #19: Google Analytics, kostenlose Themes und neue Kennzeichnungspflicht

von Michael Firnkes

Die Shop-Analyse ist wichtig, muss aber rechtlich abgesichert werden. Für WooCommerce gibt es neue Theme-Inspirationen und ein neues German Market. Dies u ...

Weiterlesen
slack-blog

Neues Plugin: Slack Connector - Verbinde WordPress, WooCommerce und Slack

von Michael Firnkes

Anfangs wollten wir lediglich unsere eigenen Slack-Prozesse optimieren. Mit automatisierten Benachrichtigungen aus dem MarketPress-Shop, dem Blog und unser ...

Weiterlesen
woo26

WooCommerce 2.6: Deutlich mehr Versandoptionen, bessere Bestellübersicht

von Michael Firnkes

WooCommerce 2.6 "Zipping Zebra" steht kurz vor der Veröffentlichung, das Release ist für kommenden Dienstag geplant. Wir zeigen dir, was sich für dich ...

Weiterlesen
wp-geburtstag

13 Jahre WordPress - 13 Mal ein WooCommerce- oder Blog-Theme gewinnen

von Michael Firnkes

WordPress wird 13. Und wiederholt seine Erfolgsgeschichte: Mit WooCommerce. Feiere mit und gewinne eines unserer Top-Themes. WordPress hat einen rasante ...

Weiterlesen

Kommentare

7 Kommentare

  1. #1

    Hallo Thomas,

    das macht schon Sinn. Werde das Plugin gleich einmal probieren. Wir haben recht viel mit Fotomaterial zu tun. Schauen wir mal.

    Danke für die Mühe und danke fürs Teilen …

    Pepe Martin

  2. #2

    Vielleicht noch zusätzlich auf is_feed abfragen. Das Meta-Tag benötigt man im Feed nicht wirklich 😉

    Danke für das Plugin.

  3. #4

    Hallo Thomas, das ist eine sehr gute Idee und nett, dass Du uns das Plugin auch noch kostenlos zur Verfügung stellst. Das Problem hab ich eigentlich ständig, wenn ich ein Produkt oder einen Beitrag bei Facebook bewerben möchte, dass das Featurebild nicht übernommen wird.
    Hab das Plugin auch gleich installiert und mir dann mit meinem iPhone auf meiner Domain eine Seite, auf eine Shopkategorie mit Kategorienbild, etwas Text und den Produkten angezeigt wird, ausgesucht und via iOS an FB gepostet. In der Vorschau auf meinem iPhone war das richtige Bild ausgewählt, doch bei FB in der Zeitleiste war unter meinem Text und neben dem Link bzw. Ausschnitt von meiner Webseite doch nur das erste Bild, nämlich unser Logo angezeigt. Wie bekomme ich das hin, dass auf allen Seiten als auch Anzeigen nach Stichwort, Kategorie usw. richtig angezeigt wird?

    • #6

      Facebook verlangt teilweise größere Bilder. Wenn das Vorschaubild zu klein ist, klappt das nicht immer. Ich werde das Plugin mal nachbessern und nach größeren Varianten suchen lassen, ehe es die kleine ausgibt. Kann aber noch nicht sagen, wann ich dazu komme – jetzt steht erstmal der Weihnachtskalender an. 🙂

  4. #5

    Hmm, jetzt hab ich den Link mal bei FB direkt eingegeben und siehe da, es funktioniert. Toll.

  5. #7

    Das Logo, das FB beim Versuch via iOS zu posten genommen hat, ist deutlich kleiner als das Featurebild – das war glaub ich um die 1030px breit. Wie gesagt, den gleichen Link direkt in eine Statusmeldung bei FB eingetragen, nimmt FB das Featurebild – Dein Plugin funktioniert also in dem Fall wunderbar. Danke.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">