Wie soziale Netzwerke das Beitragsbild leichter finden

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:

WooCommerce Projekte vorgestellt: Die Beer Ambassadors - Bierspezialitäten im Abo

von Michael Firnkes

Die Beer Ambassadors haben einen ganz besonderen Onlineshop auf die Beine gestellt - mit WooCommerce und German Market. Wir haben die beiden Gründer Thoma ...

Weiterlesen
dsgvo plugins woocommerce

Die Übersicht: 5 DSGVO Plugins für WordPress und WooCommerce

von Michael Firnkes

Auch nach dem Inkrafttreten der EU-Datenschutzverordnung suchen viele Portal- und Shopbetreiber nach einer Lösung, um die gesetzlichen Anforderungen zu er ...

Weiterlesen

International erfolgreich - so kannst du deinen Shop übersetzen lassen

von Tony Hoyer

Wer seine Produkte auch außerhalb Deutschlands verkaufen möchte, kommt um eine Übersetzung seines Shops nicht herum. Ich zeige dir verschieden Möglichk ...

Weiterlesen
wordcamp woocommerce

Unser Rückblick zum WordCamp Retreat in Soltau - Das neue Standardformat?

von Patrick Posner

Gerade noch war ich mit vielen tollen Menschen aus der Community im Gespräch - und schon schreibe ich meinen Recap zum WordCamp Soltau Retreat. Über eine ...

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 mit * 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="">