Accelerated Mobile Pages
Als plötzlich AMP in den Google Webmaster Tools auftauchte, wollte ich natürlich wissen was das ist. Deshalb habe ich das gleich angeklickt und eine trockene Spezifikation gefunden.
Nicht lustig, also zurück zum Dashboard.
Allerdings tauchte AMP schon kurz darauf wieder in einem Heft auf. Vielleicht ist da wirklich was dran ?
Dann kam ein Artikel in der ct (3/2016) der den Kontext erklärte und einfacheres Markup zeigte. Das hat mich bewogen, AMP auch mal zu probieren.
Wozu AMP?
AMP sollen das mobile Web beschleunigen. Die Webseiten werden immer grösser und damit langsamer, was die Kunden davon abhält, mobile Seiten zu lesen. Zudem bieten immer mehr Firmen Apps an die ihre Daten anzeigen, so dass die Leser eine andere App starten müssen um die Seiten der Konkurrenz anzuzeigen.
Es ist klar, dass das Google nicht gefallen kann...
Was bedeutet AMP für Webentwickler?
In einem Wort: Einschränkung. JavaScript auf der Seite ist verboten, Formulare, Canvas, Flash und Java ebenfalls, und sogar die externen Stylesheets.
Bilder sind gerade noch erlaubt, aber es braucht ein spezielles HTML-Element dafür.
Auf der anderen Seite ist es Pflicht, bestimmte Elemente ins head-Element zu schreiben und ein vorgegebenes JavaScript-File von Google zu laden.
Vorschriften von AMP
Dieser Abschnitt geht davon aus, dass die HTML-Seite bereits in vernünftigem HTML5 geschrieben ist. Wenn das nicht der Fall ist, braucht es zuerst ein Rewrite in HTML5.
Das html-Element
Braucht das Attribut amp und sieht demzufolge so aus:
<html lang="de" amp>
charset
Auf meiner Seite hat der Validator gemeckert weil ich UTF-8 als Charset angegeben habe. Er will es klein geschrieben...
<meta charset="utf-8">
Style-Angabe
Die Kurzfassung aus dem ct-Artikel wurde vom Validator akzeptiert. Auf den Google-Seiten ist eine deutlich umfangreichere Version angegeben.
<style>body {opacity: 0}</style>
<noscript>
<style>body {opacity: 1}</style>
</noscript>
Das Google-Script
<script async src="https://cdn.ampproject.org/v0.js"></script>
Das eigene CSS
Muss ins head-Element. Auch Inline-Styles sind nicht erlaubt. Dafür muss unbedingt ein amp-custom Attribut angegeben werden.
<style amp-custom> . . . </style>
Es sieht allerdings ganz so aus als ob das Google-Script zumindest die Formatierung des Body-Elements ändert.
Canonical link
Nicht vorgeschrieben, aber sinnvoll wenn es noch eine Originalversion der Seite gibt:
<link rel="canonical" href="original.html">
Validierung
Die Validierung der AMP-Seiten übernimmt das Script. Wenn man #development=1 ans URL hängt, werden Meldungen in der JavaScript-Konsole des Browsers ausgegeben.
Wie finden die Suchmaschinen die AMP-Seiten?
Durch einen Link dieser Art auf der Originalseite:
<link rel="amphtml" href="original-amp.html">
Und dann kam Google, und wollte mehr :-(
Als die Seite endlich umgestellt und die Links eingerichtet waren, wartete ich gespannt auf Google. Yahoo entdeckte die Seite zuerst und hat sie gelesen, etwas apäter kam der Googlebot und las die Seite ebenfalls.
Nochmals zwei Tage später wurde die Seite dann auch in den Webmaster Tools angezeigt. Aber leider mit folgender Bemerkung: "0 indexierte AMP-Seiten, 1 AMP-Seiten mit Fehlern".
Das Problem war, dass ich keine schema.org Metadaten angegeben hatte (und der Validator das auch nicht prüft).
Die verlangte Angabe sieht so aus:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://www.heimetli.ch/original.html"
},
"headline": "Das einzig wahre Original",
"image": {
"@type": "ImageObject",
"url": "https://www.heimetli.ch/amp/grusel.png",
"height": 160,
"width": 696
},
"datePublished": "2016-02-15T02:00:00+01:00",
"dateModified": "2016-02-15T09:20:00+01:00",
"author": {
"@type": "Person",
"name": "Peter Tellenbach"
},
"publisher": {
"@type": "Organization",
"name": "Heimetli Software AG",
"logo": {
"@type": "ImageObject",
"url": "https://www.heimetli.ch/amp/logo.png",
"width": 108,
"height": 60
}
},
"description": "Unsere erste AMP-Seite"
}
</script>
Und jetzt?
Warte ich wieder auf Google, bis er die nächste Seite indexiert. Abrufen als Google und in den Index schicken hat nichts gebracht.
Was bringt's?
Bisher nur Aufwand. Ob und wie sich die AMP-Seiten auswirken werden, muss sich noch herausstellen.
Links
Am Tag als dieser Post publiziert wurde, war AMP auch ein Thema bei Smashing Magazine: Everything about Google Mobile Pages.
Update 20.2.2016
Obwohl ich sofort reagiert habe, als ich die Google-Meldung sah, wurden noch zwei weitere Seiten von Google als fehlerhaft gemeldet.
Drei andere Seiten hat Google jetzt endlich indexiert. Allerdings konnte ich nicht herausfinden, welche das sind.
Nach einer Meldung von Heise Online soll Google jetzt die AMP-Seiten in den Suchresultaten besser platzieren.
AMP und Progressive Web Apps
Paul Bakaus beschreibt in einem Artikel wie AMP und Progressive Web Apps kombiniert werden können.