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 Wochenrückblick #32: Woo 3.1, Live Chats und Snippet Tutorials

von Michael Firnkes

Die neue WooCommerce-Version verbessert hauptsächlich den Import und Export von Produkten. Und: Live Chats können - richtig eingesetzt - deinen Umsatz an ...

Weiterlesen

Wir suchen Verstärkung: WordPress PHP Entwickler/in in Dresden oder Homeoffice

von Michael Firnkes

MarketPress wächst, dank unserer WooCommerce-Suite German Market. Wir suchen dich - um diesen Erfolg weiterzuführen, und zur Entwicklung neuer Produkte. ...

Weiterlesen

WooCommerce Wochenrückblick #29: Beliebteste Zahlungsarten und sinnvolle Produktauswahl

von Michael Firnkes

Kauf auf Rechnung ist beliebter, als gedacht. Und zu viele Produkte können deine Kunden auch verwirren - wenn sie schlecht präsentiert werden. Dies und m ...

Weiterlesen

WooCommerce 3.0: Neue Galerie für Produktbilder, mehr Geschwindigkeit und Update-Hinweise

von Michael Firnkes

Das Team von WooCommerce hat die Version 3.0 seines extrem erfolgreichen Onlineshop-Systems veröffentlicht. Das Release läuft unter dem Namen "Bionic But ...

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

Abonniere unseren Newsletter

Trage hier deine E-Mail Adresse ein, damit du unseren Newsletter abonnieren kannst.