AMP – Accelerated Mobile Pages
Nachdem Facebook mit dem Instant Articles Projekt versucht Inhalte besonders auf mobilen Geräten immer schneller und barrierefreier anzubieten, springt Google mit dem AMP-Projekt auch auf diesen Zug auf. „AMP“ steht dabei für „Accelerated Mobile Pages“ – also „beschleunigte mobile Seiten“ – und wurde am 07. Oktober 2015 offiziell vorgestellt. Ab Ende Februar 2016 sollen die schnelleren Mobilversionen in den Suchergebnissen aufgeliefert werden.
Wie funktioniert AMP?
Das AMP-Projekt ermöglicht es Webinhalte auf Smartphones schneller darzustellen. Primär soll AMP für statische News-Artikel eingesetzt werden, um diese in kürzester Zeit zu laden. Durch den schlanken AMP-Quellcode werden die Ladezeiten dieser Artikel verkürzt und dadurch die User Experience auf Mobilgeräten deutlich verbessert.
AMP-HTML funktioniert durch das Hinzufügen der AMP JS Library und einem sogenannten Boiplerplate, um die HTML-Spezifikationen der Webseite zu erfüllen.
Beispielcode:
<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html" > <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
Quelle: https://github.com/ampproject/amphtml
In diesem Code-Snippet wird es ermöglicht durch die Integration der AMP JS Library externe Ressourcen zu laden und neue AMP-HTML Komponenten zu verwenden. Zusätzlich kann der AMP Validator den Code überprüfen. Mittels rel=“canonical“ Link wird sichergestellt, dass es nicht zu Duplicate Content zwischen der ursprünglichen Web-Version und der AMP-Version kommt.
AMP-HTML Komponenten:
Die AMP-HTML Komponenten sind erweiterte Elemente, die herkömmliche HTML5-Elemente ersetzen. Diese dienen dazu externe Ressourcen, wie Bilder oder Videos, die nicht direkt erlaubt sind, beispielsweise durch amp-img oder amp-video zu ersetzen. Zudem können mittels amp-ad, amp-twitter oder amp-youtube Inhalte von Drittanbietern eingebettet werden. Auch das schnellere Laden von animierten, dynamischen Bildern oder anderen Medien ist mit amp-anim in kürzerer Zeit möglich.
Für WordPress-Nutzer gibt es ein kostenfreies AMP-Plugin. Dieses Plugin erstellt für alle Artikel (keine Seiten oder Archive) automatisch AMP-Versionen, die über die Artikel-URLs und einem angehängten /amp/ erreichbar sind.
Beispiel für einen AMP-Artikel
Die Artikel auf TheGuardian.com sind bereits als AMP-Version verfügbar (Original | AMP). Neben dem ohnehin responsiven Aufbau der Website können damit alle Artikel auf Smartphones und anderen Mobilgeräten noch schneller („instant“) geladen werden.
Werbung durch AMP-Ads
Aktuell arbeitet Google eng mit namhaften Ad-Publishern zusammen, um die Werbemöglichkeiten auf AMP-Seiten zu testen. Das Ziel ist es, schnellere Anzeigen, barrierefreie Anzeigen und die Größe-veränderte Anzeigen ausliefern zu können. Es wird neben den klassischen Ads auch kein Problem sein Sponsored-Content bereitzustellen. Derzeit unterstützt Google Outbrain, AOL, Taboola, OpenX, DoubleClick, AdSense, Pubmatic und einigen andere Unternehmen bei der Bereitstellung von Ads auf AMP-Versionen.
Google Analytics auf AMP-Seiten
Das Messen von Analytics-Daten ist auch auf AMP-Seiten möglich. Google stellte dazu vor wenigen Tagen die AMP-Analytics Komponenten vor:
- AMP-Versionen muss User darauf hinweisen, dass Analytics Daten der User erfasst werden. Zusätzlich muss es für jeden User die Möglichkeit geben die Zustimmung zum Tracking ihrer Daten mittels Analytics opt-out zu verhindern. Hierfür genügt ein Link auf die Google Datenschutz Seite, da diese wiederum auf die Analytics Opt-Out Seite verweist.
- Die Google Analytics Codes müssen innerhalb der amp-analytics Elemente inkludiert werden. Google empfiehlt dazu die Verwendung einer eigenen Analytics Property für alle AMP-Seiten.
amp-analytics Code:
<head> … <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> </head> <body> <amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script </amp-analytics> … </body>
Aktuell erfasst amp-analytics bereits viele Standard-User-Daten. Diese werden zukünftig stetig erweitert, um das Nutzerverhalten auch auf den neuen AMP-Versionen besser erfassen und messen zu können. Mehr über die Intergtaion von Google Analytics auf AMP-Seiten findest du im Developer Guide.
AMP in der Google Search Console
In der Google Search Console wurde bereits Ende Januar eine neue Funktion veröffentlicht, die Fehler bei der Verwendung von AMP-Versionen aufzeigt. Google schickte zudem etliche Benachrichtigungen an Webmaster aus, um darauf hinzuweisen AMP zu verwenden.
Das zeigt, wie wichtig Google das AMP-Projekt ist. Die Page Speed von Webseiten ist schon lange eines der wichtigsten Themen in Bezug auf positive User Experience – besonders auf Mobilgeräten. Laut einer Studie von thinkwithgoogle.com sollten schon 29% aller Internetnutzer eine Webseite oder App auf dem Smartphone direkt wieder verlassen, wenn diese drei Sekunden oder länger lädt. Dem Problem mit langen Ladezeiten auf Smartphones soll mittels AMP Abhilfe geschaffen werden.
Ein Tutorial zur Erstellung der ersten eigenen AMP-Seite findet man unter ampproject.org!