AMP WordPress - Accelerated Mobile Pages mit dem PlugIn erzeugen - Guru 2.0
AMP WordPress – Accelerated Mobile Pages mit dem PlugIn erzeugen

AMP WordPress – Accelerated Mobile Pages mit dem PlugIn erzeugen

We are! - Bild: microble.eu

We are! – Bild: microble.eu

Im dritten Teil der Serie beschäftigen wir uns ein wenig mit den Fehlern der Seiten von AMP WordPress. Den eigentlich klappt das mit dem PlugIn ganz gut. Aber es gibt da ein paar Fallen, welche du dir wahrscheinlich mit älteren Posts erstellt hast. Aber fangen wir von Anfang an. Es gibt gleich einen Fehler, der die ganze Seite bei Google blockiert.

Wieso habe ich kein Seitenlogo?

Und wieso fällt es mir auf? Klar du hast das PlugIn für AMP WordPress Seiten installiert und natürlich sofort probiert ob es funktioniert. Auf deinem Blog sieht alles gut aus und auch der Test mit der Developer-Console von Chrome ist fehlerfrei (Schau bei Schnell einen AMP-Fehler finden! im Post AMP – Ein schnelleres Blog durch Accelerated Mobile Pages nach). Jetzt ein paar Tage warten und Tante Google wird meine superschnellen Seiten anzeigen. … Äh … Warten wir noch ein paar Tage … Noch immer nichts? Dann gehen wir mal auf die Fehlersuche.

AMP WordPress - Fehlendes Logo

AMP WordPress – Fehlendes Logo

Ein praktischer Anlaufpunkt für einen Test deiner AMP WordPress Seite ist das Structured Data Testing Tool von Google. Dort gibst du einfach die URL deines Posts ein und lässt dir mal schnell einen (oder auch mehrere) Fehler auswerfen. Bei mir hat es wie im Screenshot rechts ausgesehen und da habe ich schon mal Zeit zum Nachdenken gebraucht.

Wieso ein Logo? Wo stelle ich das ein und warum weiß ich nach Jahren von WordPress nichts davon? Also beim PlugIn selbst kannst du ja nichts einstellen. Das fällt also einmal weg. Und in den Einstellungen kann es auch nicht sein. Da kenne ich jeden Punkt den WordPress zur Verfügung stellt.
Ist es vielleicht vom Theme abhängig? Kann doch gar nicht sein! Das wäre bei der Dokumentation vom AMP WordPress PlugIn gestanden.

Eigentlich ist es ganz einfach, denn das PlugIn braucht ein Fav-Icon. Und das legen wir ja meistens über unser Theme oder die header.php direkt fest. Aber es gibt eine themeunabhängige Einstellung unter dem Menüpunkt Anpassen vom Bereich Design in der linken Leiste. Wenn du jetzt auf Website-Informationen klickst, kannst du als letzten Punkt ein Bild festlegen: das sogenannte WebSite-Icon. Das Bild wird auch als Logo vom PlugIn verwendet.

Wenn Du alles gespeichert hast, kannst du direkt bei den Data Testing Tools den Erfolg überprüfen.

AMP WordPress – Das Automattic PlugIn

Das funktioniert im Prinzip ganz gut. Du installierst es auf deinen Blog und schon sind alle Seiten auch als Accelerated Mobile Pages erreichbar. Einfach an den Permalink ein /amp oder &amp=1 anhänge und schon siehst du deine AMP WordPress Seite. Und das funktioniert auch wirklich gut. Aber…
Aber, was? Wenn du deine Posts nicht richtig zusammenstellst, kann auch das PlugIn nichts daraus machen. Und gerade bei älteren Posts, kann da einiges schief laufen. Gehen wir einfach die einzelnen Fehler durch.

AMP WordPress - Fehler in den WebMaster-Tools

AMP WordPress – Fehler in den WebMaster-Tools

Aber zuerst musst du ja wissen, welche Fehler vorhanden sind. Denn entweder zeigt dir die WebDeveloper Console alles richtig an oder es sind so alte Posts, dass du die Fehler gar nicht merkst. Daher lass dir von Google die Fehler in den WebMaster-Tools anzeigen. Dort siehst du sofort ob AMP-Fehler vorhanden sind. Bei einem umfangreichen Blog wie den hier (er läuft doch bald 10 Jahre) kann da schon was zusammenkommen.

Das fehlende Bild

Ja du hast richtig gelesen. Das ist eigentlich der häufigste Fehler und wurde auch nirgend so ganz offensichtlich dokumentiert oder niedergeschrieben. Jede Seite und jeder Post muss für einem gültige Accelerated Mobile Page ein Bild besitzen. Es muss kein Beitragsbild (oder auch Thumbnail) sein. Aber ein img-Element muss innerhalb der Seite vorhanden sein. Sonst siehst du gleich mal eine Fehler.

AMP WordPress - Fehlerfenster in den WebMaster-Tools

AMP WordPress – Fehlerfenster in den WebMaster-Tools

Wenn du in den WebMaster-Tools die Liste der fehlerhaften Seiten aufrufst, kannst du jede einzelne Seite anklicken. Du erhältst dann ein Fenster, welches dir eine grobe Fehlerbeschreibung gibt. Aber mit einem weiteren Klick auf den Knopf Test-Tool öffnen, kommst du wieder zum Structured Testing Tool und siehst sofort eine (exakte) Fehlerbeschreibung.

Bei einem fehlenden Bild, einfach zurückgehen zu deinem Blog und den Post im Dashboard suchen. Jetzt kannst du den Post gleichen von allen anderen Fehler die du damals gemacht hast bereinigen und auch ein Bild hinzufügen. Wenn Du alles brav korrigiert und gespeichert hast, kannst du die Seite ja nochmals durch das Testing Tool laufen lassen. Nun sollte alles passen.
Aber Google nimmt die jetzt richtige Seite nicht sofort von der Fehlerliste, da sie ja noch nicht neu indiziert wurde.

Ach ja und das steht auch nicht so direkt da: Das Bild muss mindestes 696 Pixel breit sein, sonst wirft das Test Tool eine Warnung aus.

Die falschen Attribute

AMP WordPress - Fehler in der WebDeveloper Console

AMP WordPress – Fehler in der WebDeveloper Console

Früher haben wir nicht alles mit reinem CSS gestaltet. Da waren noch die einen oder anderen HTML-Attribute dabei. Erst mit einem align="center" wurden oft Texte zentriert. Und da gibt es nach viele andere Dinge. Im Sinne eines ordentlichen Frühjahrsputzes für deinen Blog, solltest du dieses veraltete HTML so oder so rauswerfen. Daher leg los und sich die alten Posts und lösche diese Attribute. Dann sehen deine Poste in der Chrome WebDeveloper Console nicht so schlecht aus, wie in dem ScreenShot rechts.

Die fehlerhaften Tags in AMP WordPress Seiten

Auch das sind Relikte aus der alten HTML-Zeit. Da haben wir alle möglichen Tags verwendet um unsere Seiten schön und hübsch zu machen. Und jetzt müssen wir dafür leiden. Und zusätzlich auch noch mit einem Blödsinn, den das PlugIn anstellt.

Wenn Du nämlich noch alte Stile in deinen Seiten hast, wie Du es früher gemacht hast:

Dann wandelt dir das AMP PlugIn diese in einen font-Tag um.

Also auch hier wieder, alle Posts durchsuchen und nach style/span-Elementen suchen und diese rauswerfen. Dann klappt’s auch mit dem fehlerfreien Tests.

Damit hättest Du jetzt eigentlich so gut wie alles geschafft um AMP WordPress Seiten zu erstellen. Hast du noch Fehler gefunden, welche ich hier nicht behandelt habe? Oder hast Du Fragen und auch Tipps? Da schreib einen Kommentar, sei nicht schüchtern.

Es wurden 4 Kommentare zu diesem Beitrag geschrieben.

  • Joachim

    Hallo Clemens,

    vielen Dank für diesen Artikel. Leider habe ich im Structured Testing Tool noch immer einer Fehler:
    Das Attribut image.width enthält einen ungültigen Wert.

    Hast Du mir noch einen Tipp woran das liegen könnte?

    Vielen Dank
    Joachim

    • Guru 2.0 Autor

      Hallo Joachim,
      Das Bild muss mindestens 596 Pixel breit sein. Ist der Wert bei width kleiner, gibt das Tool einen Fehler aus

      • Joachim

        Vielen Dank für die schnelle Rückmeldung.

        Ich habe es mit einem weiteren Blogpost OHNE Bild getestet. Hier kommt die Fehlermeldung:
        image:
        Fehlt und ist erforderlich

        Mhhh ich werde wohl entweder Bilder mit min. 596 Pixel breite einfügen müssen 🙂

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.