AMP

AMP – Häufige Fehler und wie man sie vermeidet

Accelerated Mobile Pages (AMP) galten 2017 als heißester Trend für mobile Websites. 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 werden. Bis Mitte 2021 war AMP zudem Voraussetzung, um im Google Top Stories-Karussell zu erscheinen. Mit dem Page-Experience-Update hat Google diese Bindung aufgehoben: Seit Juni 2021 kommen auch schnelle Nicht-AMP-Seiten in die Top Stories, und das AMP-Symbol in den Suchergebnissen ist verschwunden.

Google-Ads-Kunden (bis Juli 2018 hieß der Dienst AdWords) können AMP-Seiten als Zielseiten verwenden; Google pflegt dafür bis heute eine eigene Anleitung. 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. Vor allem Nachrichtenseiten haben lange auf AMP gesetzt; seit der Pflichtcharakter für die Top Stories entfallen ist, muss jede Seite neu abwägen, ob sich der Aufwand für eine zweite Seitenversion lohnt. Für Online-Shops beispielsweise waren AMP Seiten nie zwingend notwendig. Hinzu kommt, dass 2017 schätzungsweise über 70% der AMP Seiten mit Fehlern behaftet waren, 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 Spezifikation 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). Alternativ prüft der AMP Validator im Browser eine URL oder eingefügten Quelltext.

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. Für die Top Stories verlangt Google heute weder AMP noch ein bestimmtes Markup, empfiehlt aber Artikel-Markup (Article, NewsArticle oder BlogPosting), um den Inhalt eindeutig zu kennzeichnen — Google verwendet diese Daten 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. Das frühere Structured Data Testing Tool von Google gibt es nicht mehr. Heute prüft man strukturierte Daten mit dem Test für Rich-Suchergebnisse; die reine Syntax testet zusätzlich der Schema Markup Validator von schema.org, der auf dem alten Google-Tool aufbaut.

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.

▶ Video ansehen