Accelerated Mobile Pages

Google hat den eigenen Standard, um Artikel von Websites auf Smartphones vorab laden und darstellen zu können, gegen Facebook gestellt. Es geht vorrangig um die flinke Darstellung ohne Ballast.

Das bedeutet aber auch, dass AMP den Großteil der eigenen Website nicht darstellt, darunter auch die meisten Dinge, die dem Webmaster Geld bringen können. Im Gegenzug bevorzugt Google mobil die Fundstellen, die sich dafür optimiert präsentieren. Als Betreiber von Websites muss man sich natürlich die Frage stellen, ob man sich auch die Art der Darstellung der Inhalte so weit aus der Hand nehmen lässt.

Links & Fotos zum Text...

Google AMP liefert im Gegenzug Inhalte solcher Artikel bevorzugt aus - sie werden vorab geladen und gerendert, sind also per Klick 'sofort' am Bildschirm statt extra geladen werden zu müssen. Die gesteigerte User-Aktivität bei der flotten Darstellung ist serverseitig durch eine zweite Implementiertung der Darstellung leicht zu bewerkstelligen - eine Art Template ohne das Rundherum um den Artikel reicht dazu schon aus.

Ausgangslage

Beim AMP-Project finden sich dazu die Vorlagen, die man nur noch mit Inhalt füllen muss. Den HTML-Quellcode kann man für eigene Adaptionen leicht erweitern. Der Head-Bereich ist dabei weitgehend bereits vorgegeben, muss aber in einigen Abschnitten passend adaptiert werden.

Links & Fotos zum Text...

Insbesondere müssen wir dafür sorgen, dass die 'canonical'-URL zur normalen Web-Version des Artikels zeigt, damit Google das Original kennt. Das schema.org-Script ist zwar optional, sollte aber auch entsprechend gefüllt werden - Google nutzt es zur Darstellung in verschiedenen mobilen Anwendungen.

Body - der eigentliche Inhalt

Nun geht es dann weiter zum Inhalt, dem Body-Bereich. Dieser beinhaltet nur den Artikel - und selbst da eine vereinfachte Form, die nicht all das erlaubt, das HTML vorgibt.

Bilder werden beispielsweise durch einen Befehl wie folgendem (statt img) integriert:

<amp-img src='foto.jpg' alt='Portrait Huber' 
  height='300' width='500'></amp-img>

Hier ist also nur wenig zum klassischen HTML anzupassen, man kann aber ein 'responsive'-Attribut hinzufügen, um die Skalierung auf die Bildschirmbreite vorzugeben. Bei iFrames, Animationen, Videos etc. wird es schon komplizierter - ein eigenes AMP-Script wird dazu geladen und dann spezieller AMP-Code integriert:

iFrames und Videos in AMP

Geht man noch weiter, so bietet AMP für spezielle Inhalte eigene Befehle. So kann man Werbung oder Videos einbinden, definiert sind jedoch vorwiegend die Google-Dienste (Adsense, Youtube, Doubleclick), aber auch für Facebook, Twitter und Instagram gibt es Ausnahmen:

Externe Inhalte

Und selbst mit diesem Aufwand wird nicht alles möglich, was man vom Browser und dem 'großen' Web her kennt. Auch für das Layout gilt das, aber zumindest Stylesheets kann man (direkt) im Head-Bereich einbinden:

<style amp-custom>
  ...Stylesheet-Angaben...
</style>

Eine Ausnahme von der Vorgabe, keine externen Stylesheets einzubinden, gilt für Schriften. Die Fonts, die am Google-Server liegen, kann man per font-face-Anweisung im Stylesheet ansprechen und nutzen.

Auch im Bereich der Erfolgsmessung und Statistik kann man sich auf Ausnahmen für Google-Dienste berufen. So kann Google Analytics mit etwas Aufwand integriert werden:

Analytics einbinden

Fertige AMP-HTML-Seiten kann man am besten in Googles Chrome-Browser testen. Man ruft sie ganz normal wie statische Seiten auf, idealerweise am Webserver. Auch ein Validator, der die Korrektheit des Codes prüft, ist in Chrome bereits integriert: Öffnet man die Konsole (ctrl+umschalt+J, 'console' wählen) und hängt man an die URL ein '#development=1' an, bekommt man die entsprechenden Ausgaben und Hinweise.

Zeigen, dass es eine AMP-Version gibt

Nun braucht es nur noch Hinweise an Google, dass es zu einer Webseite auch eine AMP-Seite gibt. In der Website baut man dazu im Head-Bereich entsprechende Link-Verweise auf die AMP-Seite ein.

<link rel='amphtml' 
  href='...URL zur Web-Version...'>

Der umgekehrte Verweis ist ja im AMP-Template als 'canonical'-URL bereits enthalten - Google kann also in beiden Richtungen zum jeweils richtigen Artikel in der passenden Darstellung finden.

Weiter in der Web-Version mit Fotos, Videos, Links und mehr...

#AMP #HTML #Google #Smartphones #Mobile Web #Mobile Pages #Artikel

Auch interessant!
URL-Prüfung in Search Console
Die neuen Webmaster Tools werden langsam ausgabaut - zu langsam, um komplett umzuschwenken, aber immerhin...

Das Web wird mobiler
Die meisten User nutzen mittlerweile nicht mehr den Computer, um ins Internet einzusteigen....

Instant Articles
Facebook hat mit den Instant Articles eine andere Variante für die schnelle Vorschau von Textartikeln ins...

Google Tag Assistant
Mit einer praktischen Erweiterung für Google Chrome kann man die Einbindung diverser Google-Tags auf eine...

Mehr Instant Articles
Social-Media-Gigant Facebook baut seinen Test für eine neue Art der Online-Berichterstattung in der DACH-...

Social News per Instant Articles
Facebook unternimmt den nächsten Versuch, Nachrichteninhalte direkt innerhalb der Plattform zu präsentier...