Schnell ein zufälliges Bild zu den Metadaten der AMP-Seite hinzufügen - Guru 2.0
Schnell ein zufälliges Bild zu den Metadaten der AMP-Seite hinzufügen

Schnell ein zufälliges Bild zu den Metadaten der AMP-Seite hinzufügen

Das Fahrrad des Riesen in La Viellette, Paris; Bild: microble.eu

Das Fahrrad des Riesen in La Viellette, Paris; Bild: microble.eu

Jetzt müssen wir schnell unsere alten Posts anpassen. Es ist wichtig, dass in den Metadaten ein Bild enthalten ist und das fügen wir den AMP-Seiten jetzt hinzu.

Warum brauchen wir Metadaten?

Eine der Besonderheit von Accelerated Mobile Pages ist die Geschwindigkeit und eine andere ist die optimale Darstellung für die Suchanfragen der BenutzerInnen. Damit Suchmaschinen, Software und Computer Daten perfekt verarbeiten können benötigen sie sehr strukturierte Informationen. Dies sind bei den AMPs die Metadaten. Hier werden alle Grundinformationen zu dem Poste gespeichert. Das AMP-Plugin von Automattic erstellt normalerweise die Metadaten aus dem vorhanden Post fehlerfrei. Dazu erstellt es den Typ “BlogPosting“, welcher nicht nur einen author oder ein heading-Element braucht, sondern auch ein image-Element.

Dies ist an sich kein Problem, wenn du eine Beitragsbild angelegt hast. Oft reicht es auch das Bild als erstes einzubinden, wie ich es bei meinen Posts mache. Aber dann musst du ja alle alten Posts bearbeiten. Und noch dazu muss das Bild mindestens 696 Pixel breit sein, damit es beim Structured Testing Tool keine Fehler erzeugt. Und wie lösen wir das Problem jetzt?

Die Metadaten mit einem zufälligen Bild ergänzen

Diese Methode ist eine kleine Notlösung, denn eigentlich sollte das Bild perfekt zum Post passen, aber damit können wir alle alten Posts fehlerfrei anbieten. Wie immer solltest du vorher ein Child-Theme anlegen, damit alles updatesicher bleibt. Dann kannst du folgende Zeilen am Ende der functions.php einfügen.

In der Zeile #4 und #5 ist der erste kleine Trick verbaut. In der Liste (dem Array) sind lauter Zahlen eingetragen, dies sind die IDs aus den Mediathek, welche die Bilder repräsentieren, welche verwendet werden sollen. Achte darauf, dass die Bilder breit genug sind und du nicht IDs von zu kleinen Bildern verwendest.

In der Zeile #3 prüfen wir ob in den Metadaten kein Bild eingetragen ist, denn sonst würden wir ein bestehendes überschreiben. Und das ist wirklich nicht sinnvoll. In der Zeile #6 errechnen wir dann eine Zufallszahl um ein beliebiges Bild zu verwenden. Danach lesen wir das Attachment in eine Variable ein und ordnen sind dem JSON-Element zu (Zeile #8 bis 11).

In der letzten Zeile ordnen wir die Funktion noch dem Hook des AMP-Plugins zu und fertig ist die Hexerei. Jetzt sollte der Google-Crawler brav erkennen, dass du bei jedem Post ein passendes Bild hast. Dadurch validieren die Posts fehlerfrei und werden auch im Index von Google aufgenommen.

Ich hoffe jetzt ist alles klar wie es funktioniert. Falls du aber noch Fragen oder Tipps hast, dann schreib mir ruhig einen Kommentar.

Ach ja und vergiss nicht die Fußzeile für deine AMP-Post zu ergänzen. Wie das geht habe vor kurzem beschrieben. Und wie du CSS-Stile in deine AMP-Seiten bringst wirst du bald hier im Blog erfahren.

Es wurden 9 Kommentare zu diesem Beitrag geschrieben.

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.