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

Im Kopf einer HTML-Datei befinden sich Meta-Daten für Open Graph und andere. Die helfen dabei, dass die eigene Webseite besser indexiert wird. Bei WordPress erreicht man die notwendigen Teile meist über den Umweg der Vorlage der Datei header.php. Man kann damit auch beeinflussen, wie Google die eigene Webseite indexiert.

An dieser Stelle wollen wir eine Funktion vorstellen, die den URL eines Vorschaubilds zurückgibt, das man als „featured image“ in seinen Blogbeiträgen verwendet.

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, Yahoo und anderen.

Facebook und Google+

Wer auf seinen Webseiten „Social Buttons“ unterbringt, damit Leser die Beiträge bei Facebook oder Google+ weitersagen, der möchte das Artikelbild dazu verwendet wissen, 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 ein Array 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 im WordPress Codex.

Wir benötigen nur den URL. Der Aufruf erfolgt über wp_get_attachment_image_src();. Innerhalb der Klammern der Funktion kann man Parameter angeben, von denen wir zwei verwenden müssen.Parameter bei Funktionen sind meist optional, manchmal aber verpflichtend. Es ist gut, den WordPress Codex zu konsultieren (siehe 1), um zu überprüfen, welche Parameter Pflicht sind. Das ist 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 eine Größenangabe $size. Man müsste die Größe nicht mit angeben. WordPress würde den Standardwert zurückgeben. 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. Zu kleine Bilder werden von Google News und Co. nicht akzeptiert. Seit 2015 nutzen die allermeisten Social Networks Grafiken, die mindestens 200 x 200 Pixel groß sein müssen. Ansonsten ignorieren sie sie.

Parameter: ID und Größe

Neben „thumb“, gibt es „medium“, „large“ und „full“ als Standard-Parameter für die Größe. Da ihr beim Hochladen eurer Bilder immer selbst wisst, wie groß sie sind, solltet ihr euch für den URL einer Datei entscheiden, die nicht zu klein aber auch nicht zu groß ist. Wir haben uns für „large“ entschieden, weil die größten Bilder bei uns meist die 1000 Pixel sowieso nicht überschreiten und „medium“ oft zu klein wäre.

Die ID des spezifischen Bildes erhaltet ihr über eine weitere hauseigene WordPress-Funktion namens get_post_thumbnail_id(); (vgl. WordPress-Codex). Diese funktioniert prima außerhalb des „Loops“, weshalb ihr sie überall im Template eurer Beitragsseiten verwenden könnt.

Optimieren!

Nicht nur bei WordPress, sondern häufig auch bei vielen anderen CMS, begegnen einem selbst in den offiziellen Dokumentationen Codebeispiele, die nicht optimiert sind.

Normalerweise würden wir in unserem Fall 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. Zu guter Letzt sollten wir das in einer Variablen speichern, ehe wir es aus- oder zurückgeben. Das würde in etwa 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];
      echo $image-url;
?>

Was geschieht eigentlich beim Speichern einer Variable? Da PHP-Scripte vom Server zur Laufzeit ausgeführt werden, werden die Inhalte von Variablen in den Arbeitsspeicher des Servers geschrieben; wir gewinnen für dieses Beispiel keinen Hochleistungsoptimierungspreis. Webseiten können jedoch sehr komplex werden. Am Ende hat man in vielen Fällen Variablen erstellt, die man gar nicht „brauchte“, sondern die eher wie eine Art Wegwerf-Handy nach Gebrauch in den Müll kommen. Also kann man, wenn man einen Inhalt nur ein einziges Mal benötigt, ihn direkt adressieren statt 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 Festplatte weitergeschrieben, die viel langsamer ist.

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. Den Wert des Array-Elements muss man 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 mehrfach 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, sollte man es verfügbar machen. Das geht bei WordPress über die Datei functions.php, die sich in jedem Theme-Verzeichnis befindet. Wenn sie dort noch nicht ist, könnt ihr sie anlegen.

Darin notieren wir eine Funktion. Direkt hinter function steht der Name der Funktion. Ihr könnt sie nennen, wie ihr mögt. Der Name darf nur keine Sonderzeichen enthalten und nicht so lauten wie Funktionen, die es schon gibt.

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

Warum steht return am Ende und nicht echo? Das hat zwei Gründe. Zum einen beendet return eine Funktion. D. h. der Webserver wartet nicht noch darauf, dass etwas passiert (vgl. PHP.net). Das muss nicht, kann aber in manchen Fällen zu Verzögerungen bei der Auslieferung von Daten auf Webservern führen.
Darüber hinaus haben wir so die Möglichkeit, unsere Funktion ohne Bedenken innerhalb von anderen Funktionen zu verwenden.

Ausgabe des BILD-URL

Damit nun der URL des Artikelbilds zurückgegeben wird, müsst ihr im Quellcode <?php echo return_img_url(); ?> schreiben. Wenn wir das nun für unsere Open-Graph- und Mikrodaten-Tags tun wollen, 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 selbst dann in den Kopf der HTML-Dateien einfügen, wenn man keine Facebook- oder Google+-Buttons einsetzt. Denn wenn der Nutzer den URL auf Facebook kopieren und weitergeben mag, kann er das ohne unser Zutun. In solchen Fällen ist es 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.

Ähnliche Nachrichten