Verblüffend leicht Bilder in alte AMP-Seiten einfügen - Guru 2.0
Verblüffend leicht Bilder in alte AMP-Seiten einfügen

Verblüffend leicht Bilder in alte AMP-Seiten einfügen

Herbstwind im Jardin du Luxembourg, Paris, Bild: microble.eu

Herbstwind im Jardin du Luxembourg, Paris, Bild: microble.eu

Die Serie der AMP-Artikel geht weiter. In einem der letzten Posts habe ich gezeigt, wie Du schnell und effektiv ein Bild für einen alten Post einfügen kannst. Nun gibt es aber alte Posts, welche bereits Bilder enthalten. Diese sind aber oft zu klein, den AMP-Seiten als BlogPosting validieren erst fehlerfrei wenn sie ein Bild enthalten, welches mindestens 696 Pixel breit ist. Aber auch das Problem der zu kleinen Bilder des AMP-PlugIns von Automattic lässt sich lösen.

AMP-Seiten mit Bildern ergänzen

Bevor du zu programmieren anfängst ein kleiner Tipp: Arbeite immer so, dass du jederzeit Updates einspielen kannst. Dazu ist es notwendig, dass du dir vorher ein Child-Theme anlegst. In diesem Child-Theme kannst du die Datei functions.php am Ende mit dem folgenden Quellcode ergänzen.

Denn Code kennst du vielleicht schon, wenn du die Artikelserie zu AMP verfolgt hast. Denn alle AMP-Seiten haben nicht nur einen eingeschränkten Satz an CSS-Stilen, JavaScript und HTML-Elementen, sondern auch einen definierten Datensatz mit Meta-Elementen. Diese Metainformationen sind in unserem Fall als JSON-Variable ausgeführt. In unserem Fall werden wir hauptsächlich die von schema.org angebotene Struktur zum Typ BlogPosting verwenden.

In den Zeilen 3 bis 5 haben wir ein Array (eine Liste) mit Zahlen. Dies sind die IDs der Bilder in der Mediathek deines Blogs. Achte darauf, dass du Bilder auswählst, die breiter als 696 Pixel sind. Aus dieser Liste wählen wir zufällig ein Bild aus. Dafür brauchen wir die Zeile 6, welche eine Zufallszahl erzeugt. In der Zeile 7 laden wir dann das Bild mit der WordPress-Funktion wp_get_attachment_image_src() in eine Variable.

In der Zeile 8 prüfen wir ob bereits ein Bild in den Metadaten vorhanden ist. Fehlt es, fahren wir mit den Zeilen 9 – 12 fort. Damit ergänzen wir die Metadaten der AMP-Seiten mit dem fehlenden Daten, um das zufällige Bild hinzuzufügen.

Ein bestehendes Bild von AMP-Seiten anpassen

Ab Zeile 14 wird es nun aufwendiger. In der Zeile definieren wir die Mindestbreite für ein Bild. In der folgenden Zeile den maximalen Vergrößerungsfaktor. Hier habe ich den Wert 3.5 festgelegt. Nun speichern wir in Zeile 16 den Pfad des Bildes in eine Variable. Mit der PHP-Funktion getimagesize() schauen wir nach wie Groß das Bild ist. Und damit können wir uns den Vergrößerungsfaktor in der Zeile 18 berechnen. Ist dieser kleiner als unser Definition in der Variablen $minScale, dann ergänzen wir die Metadaten in den Zeilen 20 bis 22. Ist das Bild aber zu klein, dann verwenden wir das Zufallsbild und ändern die Metadaten in den Zeilen 24 bis 26 entsprechend ab. Nun müssen wir nur mehr die Metadaten für die AMP-Seiten in der Zeile 29 zurückgeben.
Als letztes aktivieren wir den Hook für die Metadaten in der Zeile 31 mit der WordPress-Funktion add_filter().

Damit sollten deine AMP-Seiten in den Structured Testing Tools von Google sauber validieren und auch im Suchindex erscheinen. Falls Du noch Fragen oder Tipps hast, dann schreib einen Kommentar. Wir werden dann schon eine Lösung finden.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.