Was ist amp.dev?
Da heutzutage immer mehr Zugriffe über ein mobiles Endgerät stattfinden, hat sich vor allem Google damit befasst,
einen Standard für mobile Webseite Formate zu entwickeln. Dabei steht im Vordergrund, dass Webseiten so
bereitgestellt werden, dass sie anschaulich sind und auch flüssig laden. Dies sollte natürlich auch noch
verzögerungsfrei geschehen. Um dies gewährleisten zu können, handelt es sich bei AMP Seiten um sehr schlanken HTML
Code und auch das CSS wird direkt im <head>
festgelegt. Jedoch ist durch diese Vorgaben die freie Gestaltung einer
Webseite auch eingeschränkt.
Da das JavaScript asynchron geladen wird, kann sichergestellt werden, dass zuerst der Inhalt einer Seite geladen wird und der User zuerst relevanten Inhalt sieht. Indem AMP-Seiten zwischen gespeichert werden, kann die Ladezeit enorm verbessert werden. Hierfür stellt beispielsweise Google gewisse AMP Caches zur Verfügung. Dies führt jedoch dazu, dass bei AMP-Seiten die URL auf eine Google URL abgeändert wird. Dabei ist es egal, welches die ursprüngliche URL war.
Die ersten Anforderungen
Wenn Sie Webseiten mit amp.dev bauen, müssen Sie sichergehen, dass HTTPS
als Standard genutzt wird. Ansonsten
ist nicht der volle Funktionsumfang gewährleistet. Hier zu gehört zum Beispiel Videos oder iFrames, die einen
Zugriff über HTTPS
fordern.
Als ersten schauen wir uns den ersten Teil einer amp.dev Seite einmal genauer an.
|
|
Auf den ersten Blick sieht es wie eine normale HTML-Seite aus. Jedoch bei genauerem Hinschauen sind einige Unterschiede zu erkennen. Der Dokumententyp wird standardmässig wie eine HTML-Seite definiert.
Im darauf folgenden Tag <html amp lang="en">
wird definiert, das es sich um amp.dev Inhalte handelt.
Während in einer reinen HTML-Page <head>
und <body>
optional sind, werden sie bei einer amp.dev Seite benötigt.
Des weiteren wird innerhalb des <script>
die AMP-JavaScript Library festgelegt.
Für den Fall, dass Sie eine HTML-Seite mit AMP und eine ohne verwenden, wir mit dem <link>
die entsprechende
Seite verlinkt. Dies ist zum Beispiel in dem Fall notwendig, damit Google weiss, welche Seite geladen werden soll.
Mit <meta name="viewport" content="#"">
wird eine Responsive Viewport für die Darstellung des Seiteninhalts
bestimmt.
Zum Schluss wird noch ein amp-boilerplate bestimmt, der den Inhalt so lange ausblendet, bis AMP-JS vollständig geladen ist. Nun haben Sie alle notwendigen Anforderungen für eine AMP-Seite gesehen.
Natürlich können Sie aber noch zusätzliche Elemente hinzufügen. Wie oben zu sehen wird noch ein <script>
mit
angegeben, welches Schema.org einbindet. Dies ermöglicht Ihnen Ihren Inhalt an verschiedenen Stellen anzuzeigen,
beispielsweise in dem Google Search Top Stories Carousel.
Auf der Nicht-AMP Seite müssen Sie ebenfalls einen Link einfügen, damit die beiden Seite miteinander verbunden sind.
|
|
Sollten Sie jedoch nur eine AMP-Version Ihrer Seite verwenden, müssen Sie dennoch den Link <link rel="canonical"...>
einfügen und auf Ihre Seite selbst linken.
Die Verwendung von Tags
Meist können Sie die standardmässigen HTML Tags verwenden. Es gibt jedoch auch Fälle, in denen die Tags nur ähnlich sind und ein wenig angepasst wurden. Dazu gehört beispielsweise das Image-Tag. Es gibt hierfür auch eine Liste, in der Sie sehen können, welche Tags abgeändert wurden oder sogar Tags, welche Sie nicht auf einer AMP Seite verwenden dürfen.
|
|
Das Styling
Auch beim Styling richtet sich eine AMP Seite nach dem HTML Standards und nutzt hierfür CSS.
Dabei wird das CSS Styling innerhalb des <head>
angegeben. Hierfür können Sie wie üblich mithilfe von
Klassen- oder Element Selektoren das Styling vornehmen.
Dabei darf eine AMP Seite jedoch nur ein einziges eingebettetes Style Sheet und Inline-Style haben, welches
sich direkt im <head>
befindet. Auch beim Styling müssen Sie darauf achten, welche CSS Eigenschaften zur
Verwendung erlaubt sind. Diese können Sie in dieser Liste finden.
Das Styling in ihrem <head>
könnte folgendermasse aussehen.
|
|
Während Sie normalerweise CSS nutzen, um die Elemente auf der Seite in ein gewisses Layout zu bringen, gibt es in AMP strengere Regeln, welche zu befolgen sind. Denn aus Performance Gründen benötigen alle Elemente einer AMP Seite von Anfang an eine festgelegte Grösse.
Preview und Validierung
Eine AMP-Seite können Sie ganz einfach aus ihrem Filesystem über einen Webbrowser öffnen. Hierbei ist jedoch nicht gewährleistet, dass alle Elemente funktionieren. Deshalb ist die bessere Variante, die Seite über einen lokalen Webserver zu öffnen.
Ihre neu erstelle Seite können Sie direkt innerhalb des Browser validieren lassen. Dazu rufen Sie Ihre Seite auf und
fügen hinter der URL noch #development=1
an. In der Chrome DevTools Konsole können sie nun Validierungsfehler
erkennen, wenn Sie welche haben sollten.
Nun haben Sie erfolgreich Ihre erste AMP Seite erstellt. Herzlichen Glückwunsch!