AMP – Häufige Fehler und wie man sie vermeidet

Accelerated Mobile Pages (AMP) sind auf dem besten Weg, der heißeste Trend des nächsten Jahres zu werden. AMPs wurden im Februar 2016 von Google eingeführt, um Publishern dabei zu helfen, ihre mobile Browsing-Erfahrung zu verbessern. Mithilfe der AMP-Optimierung können Seiten mit umfangreichen Inhalten wie Videos, Animationen, Grafiken und Anzeigen schneller geladen und in einem Google Top Stories-Karussell platziert werden.

Heute treibt Google AMP-Wachstum international voran; In Kürze werden alle AdWords-Kunden auf der ganzen Welt AMP-Seiten als Zielseiten verwenden können. Beschleunigte mobile Seiten können auch in Googles Position null (Featured Snippet) eingestuft werden. Es gibt viele Debatten und auch Skepsis rund um das AMP-Thema. Insbesondere Seiten, die im Newsgeschäft aktiv sind, sollten AMP Seiten nutzen. Für Online-Shops beispeilsweise  sind AMP Seiten noch nicht zwingend notwendig. Hinzu kimmt, dass schätzungsweise über 70% der AMP Seiten mit Fehlern behaftet sind, die die Vorteile von AMP in den Schatten stellen können. Deswegen möchten wir Fehler ansprechen und Möglichkeiten bieten, um diese in Zukunft zu vermeiden. Wer noch keine AMP Seite erstellt hat, dem empfehlen wir einen Blick auf die offizielle Anleitung für AMP Seiten.

Invalides AMP HTML

Der wohl häufigste Fehler ist ein nicht erlaubtes HTML Tag. Die AMP Regeln verlangen eine strikte Einhaltung der Tag Regeln, d.h. es dürfen nur solche HTML Tags verwendet werden, die von AMP als “passend” angesehen werden. Für eine Liste aller erlaubten HTML Tags ist die offizielle AMP HTML Liste die wohl beste Wahl. Der Vorteil bei AMP ist, dass man ganz einfach überprüfen kann, ob erlaubtes HTML verwendet wurde. Dazu wird an eine AMP Domain einfach der Zusatz “#development=1” angehängt (z.B. “www.meinewebseite.de#development=1”). Das Ergebnis wird dann in der JavaScript Console angezeigt (dazu einfach bei Chrome die Tastenkombination “Strg + Umschalt + i” drücken).

Auch wird in diesem Zusammenhang oft vergessen, das Styling der AMP anzupassen. Bspw. müssen Höhe und Breite bei Attributen wie Fotos und Videos immer angegeben werden, damit die Seite einfacher gescrollt werden kann.

Fehlende oder inkorrekte Metadaten

Durch das Hinzufügen von Metadaten (in Form von strukturierten Daten) zu AMP-Dateien können Websites von Drittanbietern AMP-Seiten besser anzeigen. Beispielsweise unterstützt das “Google Top Storys Carousel” mit AMP derzeit die Metadatenkategorien Artikel und Video und verwendet diese zum Rendern einer Vorschau:

Dieser Faktor ist zwar an sich kein Fehler, verdient aber dennoch dieselbe Aufmerksamkeit, da eine Position im Google Karussell eine sehr gute Möglichkeit ist, um den eigenen Traffic zu erhöhen. Und je früher man damit anfängt, desto höher sind die Chancen auf eine solche Position. Mit diesem Tool können strukturierte Daten auf einer URL getestet werden.

AMP Seiten sind nicht erreichbar

Selbst eine perfekt umgesetzte AMP Alternative macht keinen Sinn, wenn sie für niemanden erreichbar ist. Beim Launch vergessen viele dabei, die Seite für den Google Crawler freizuschalten. Was man dabei also nicht machen sollte, ist:

• Crawler durch die robots.txt ausschließen

User-agent: *

Disallow: /amp/          <- nicht verwenden!

• Das “noindex” Meta Tag im AMP HTML Code einfügen

<meta name=”robots” content=”noindex” />     <- nicht verwenden!

• Das “noindex” als X-Robots-Tag im HTTP Header nutzen

$ curl -I http://www.example.com/amp.html

HTTP/1.1 200 OK

Date: Tue, 25 May 2010 21:42:43 GMT

(…)

X-Robots-Tag: noindex     <- nicht verwenden!

(…)

Wer seine AMP auf solche Fehler testen möchte, der kann unter validator.ampproject.org seinen HTML Code einfügen und mithilfe des offiziellen Tools einen Blick auf Verbesserungspotentiale werfen.

In Zukunft wird sich alles auf mobilen Geräten abspielen. Wer also für den eigenen Shop oder auch für die Sichtbarkeit des Unternehmens sorgen möchte, der sollte schnell auf AMP setzen, damit man schnell vom Trend profitieren kann.

Zum Schluss möchten wir euch noch dieses Video empfehlen, das zwar auf Englisch, aber dennoch hilfreich für die ersten Schritte in Richtung AMP ist.