WordPress: Thumbnail-URL für Open-Graph-Tags und Mikrodaten-Meta-Tags ausgeben

WordPress
Wordpress - Logo

Im Kopf einer HTML-Datei, bei WordPress meist über den Umweg der Vorlage der header.php, kann man dafür sorgen, dass die eigene Webseite noch sinnvoller aufgefunden und indiziert wird, mithilfe von Meta-Tags für Open Graph oder Mikrodaten. An dieser Stelle wollen wir eine Funktion vorstellen, die den URL eines Thumbnails zurückgibt, das man als “featured image” in seinen Blogbeiträgen verwendet hat.

Open Graph und Mikrodaten sind mehr oder minder zwei unterschiedliche Versuche und Systeme, die aber den gleichen Zweck verfolgen. Open Graph setzt nicht mehr nur Facebook, sondern auch alle Facebook-App-Entwickler ein. Mikrodaten kann man auf unterschiedliche Weise auszeichnen, sie helfen zum Beispiel der Suchmaschine Google, aber auch Yahoo und anderen.

Facebook und Google+

Wer auf seinen Webseiten beispielsweise Buttons unterbringt, damit Leser die eigenen Beiträge bei Facebook oder Google+ weitersagen, der möchte gerne, dass Google und Facebook auch das Artikelbild verwenden, das man verwendet hat, und nicht eventuell irgendeine andere Grafik. Indem man die Mikrodaten und OG-Tags im Kopf der HTML-Datei (oder anderswo) hinterlegt, kann man sicherstellen, dass genau das geschieht.

Tag-Struktur

Der Open-Graph-Tag mit den Informationen zum Artikelbild hat folgende Struktur:

<meta property="og:image" content="xxx" />

Die Mikrodaten-Auszeichnung, mit der u. a. Google etwas anfangen kann, lautet wie folgt:

<meta itemprop="image" content="xxx" />

Man erkennt auf den ersten Blick, dass sich beide Aufrufe ähneln. Die Stellen mit dem xxx gilt es nun auszufüllen, und zwar mit der URL des Artikelbildes.

Thumbnail-URL ermitteln

WordPress bietet eine fertige Funktion an, die einem ein Array (also eine Sammlung) an Elementen für das Artikelbild zurückgibt. Das Array besteht aus drei Einträgen. Der erste enthält den URL des Bildes, der zweite die Breite (width) und der dritte die Höhe (height). Beschrieben ist das auch im WordPress Codex.

Wir benötigen für unseren Fall nur den URL. Der Aufruf erfolgt über wp_get_attachment_image_src();. Innerhalb der Klammern der Funktion kann man, bzw. muss man noch Parameter angeben, von denen wir zwei verwenden wollen/müssen. Und zwar ist das die $attachment_id, also die eindeutige Nummer, die genau jenem Artikelbild aus dem entsprechenden Beitrag in der Datenbank zugeordnet ist. Dazu verwenden wir als zweiten Parameter noch eine Größenangabe $size. Eigentlich müsste man die Größe nicht mit angeben, dann würde WordPress aber den Standardwert zurückgeben, und dieser weist auf die “Thumbnail”-Größe hin. Wer mit seiner Seite bei Google News gemeldet ist, der sollte davon absehen, und stattdessen die Größe vorgeben, damit ein etwas größeres Bild zurückgegeben wird.

Parameter: ID und Größe

Wer sich schon mit dem Einsatz von Artikelbildern bei WordPress beschäftigt hat, der kennt wohl die “Größen”-Angaben, die es für die wp_thumbnails so gibt. Neben “thumb”, gibt es noch “medium”, “large” und “full”. Da ihr beim Hochladen eurer Bilder immer selbst wisst, wie groß ihr die Bilder macht, solltet ihr euch in diesem Fall für den URL einer Datei entscheiden, die nicht zu klein aber auch nicht zu groß ist, damit Google News sie eventuell akzeptiert. Wir haben uns für “large” entschieden, weil die größten Bilder bei uns meist die 1000 Pixel sowieso nicht überschreiten und “medium” dann oft zu klein wäre.

Die ID des spezifischen Bildes erhaltet ihr über eine weitere hauseigene WordPress-Funktion namens get_post_thumbnail_id();. Diese funktioniert übrigens auch prima außerhalb des “Loops”, und ihr könnt sie also prinzipiell im Template eurer Beitragsseiten verwenden.

Optimieren!

Nicht nur bei WordPress, sondern häufig auch bei vielen anderen CMS, begegnen einem selbst in den offiziellen Dokumentationen Codebeispiele, die absolut nicht optimiert sind. Normalerweise würden wir in unserem Fall dann gesagt bekommen: Speichere die ID des Artikelbilds in einer Variablen, setze dann die Variable in die Funktion als Parameter ein, speichere das Ergebnis in einer Variablen, adressiere dann das spezielle Element in dem entstandenen Array, und natürlich sollten wir das auch in einer Variablen speichern, ehe wir es aus- oder zurückgeben. Das tät wie folgt ausschauen:

<?php $image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'large');
$image_url = $image_url[0]; ?>

Was geschieht eigentlich beim Speichern einer Variable? Da die PHP-Scripte vom Server ausgeführt werden, zur Laufzeit, werden die Inhalte von Variablen in den Arbeitsspeicher des Servers geschrieben. Wir gewinnen sicherlich für dieses Beispiel keinen Hochleistungsoptimierungspreis, allerdings können Webseiten sehr komplex werden und am Ende hat man in vielen Fällen Variablen erstellt, die man eigentlich gar nicht brauchte, sondern, die eher wie eine Art Wegwerf-Handy, danach in den Müll kommen. Also kann man sich direkt entscheiden, wenn man einen Inhalt eh nur ein einziges Mal braucht, dass man ihn direkt adressiert, statt ihn zu speichern. Wer Webseiten mit mehreren Zehntausend oder noch mehr Zugriffen hat, der muss auf solche Kleinigkeiten unbedingt Wert legen, denn wenn der RAM, der ja nur endlich ist, einmal vollgeschrieben ist, wird auf der Platte weitergeschrieben, und wie “lahm” die ist, wissen viele wahrscheinlich aus eigener Erfahrung am Rechner.

Anstatt also die ID des Bildes extra zu speichern, verwenden wir den Aufruf unmittelbar als Parameter. Das Speichern des “Objekts” bzw. Arrays können wir uns (wohl) nicht ersparen, weil wir erst im Anschluss auf die Elemente zugreifen können. Doch das Ergebnis des Array-Elements muss man wiederum nicht extra in einer Variablen speichern.

<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'large');
echo $image_url[0]; ?>

Functions.php

Wir könnten diesen Code nun mehrfach an eine Stelle X in unseren Quellcode schreiben, um dort den URL des Artikelbildes in der Größe “large” auszugeben. Aber wenn man etwas “immer wieder” (und nicht nur einmal) benutzt, dann sollte man es verfügbar machen. Das geht bei WordPress recht schick über die Datei functions.php, die sich in jedem Theme-Verzeichnis befindet. Wenn sie dort noch nicht ist, könnt ihr sie auch anlegen.

Darin notieren wir dann eine Funktion wie folgt: Direkt hinter “function” steht der Name der Funktion. Ihr könnt sie im Prinzip nennen, wie ihr mögt, von Sonderzeichen mal abgesehen.

function return_img_url() {
$image_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'large');
return $image_url[0];
}

Warum steht da jetzt “return” am Ende und nicht “echo”? Das hat zwei Gründe. Zum einen beendet return eine Funktion unmittelbar danach. D. h. der Webserver wartet nicht eventuell noch darauf, dass etwas passiert. Das muss nicht, kann aber in manchen Fällen ebenfalls zu Verzögerungen bei der Auslieferung von Daten auf Webservern führen. In unserem Fall wohl eher nicht. Vgl. PHP Handbuch.
Darüber hinaus haben wir so in jedem Fall die Möglichkeit unsere Funktion innerhalb von anderen Funktionen zu verwenden, ohne uns irgendwelche Gedanken zu machen.

Ausgabe des BILD-URL

Damit nun also der URL des Artikelbilds zurückgegeben wird, müsst ihr im Quellcode nurmehr <?php echo return_img_url(); ?> schreiben. Wenn wir das nun für unsere Open-Graph- und Mikrodaten-Tags tun wollen, dann fügen wir den Funktionsaufruf an die Stelle der “xxx” ein, wie folgt:

<meta property="og:image" content="<?php echo return_img_url(); ?>" />

und

<meta itemprop="image" content="<?php echo return_img_url(); ?>" />

Diese Tags kann man auch dann in den Kopf der HTML-Dateien einfügen, wenn man selbst keine Facebook- oder Google+-Buttons einsetzt. Denn wenn der Nutzer den URL auf Facebook kopieren und weitergeben mag, kann er das ja auch ohne unser Zutun. In solchen Fällen ist es eben günstig, wenn diese Tags vorhanden sind.

Die Homepage, die Archive, usf.

Da die Homepage einer Seite in der Regel keine eigene ist, sondern nur eine dynamisch erzeugte, mit den letzten Beiträgen des Blogs, gibt es dazu kein eigenes Template und entsprechend kein Artikelbild. Doch selbst wenn es ein Template gibt, wie beispielsweise für die Archivseiten, dann hätten wir die Wahl, entweder noch einen zweiten oder dritten Header einzurichten, oder aber wir arbeiten mit den Conditional Tags von WordPress, die wir in einem anderen Beitrag zur Optimierung des Siteload bereits angesprochen haben.

Beispielsweise könnte man das Artikelbild nur auf einzelnen Blogbeiträgen im Kopf ausgeben, auf allen anderen Seiten würde man den Social-Buttons nur das Logo der Seite anbieten. Das könnte wie folgt ausschauen:

<meta property="og:image" content="<?php if ( is_single() ) { echo return_img_url(); } else { echo "http://www.gameship.net/wp-content/themes/sajonara-ci/images/logo-new.png"; } ?>" />

Auf diese Weise würde der Open-Graph-Tag nur auf den Blogbeiträgen mittels is_single ausgegeben. In allen anderen Fällen wird die Logo-Adresse zurückgegeben.

Geschrieben von:
Geschrieben am: 09.05.2012
Zuletzt aktualisiert: 09.05.2012
Zurück zu: Tipps und Tricks
Was sagst Du dazu? Kommentieren!
Heino: Rathaus-Café soll geschlossen werden
Mila Kunis: Stalker von Schauspielerin vor ihrem Fitness-Studio festgenommen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Zuletzt kommentiert