Google Accelerated Mobile Pages – AMP

Was sind Accelerated Mobile Pages (AMP) und wie funktioniert das Framework? Diese Fragen wollen wir im heutigen Gastartikel klären. Außerdem erfahrt ihr, wie man eine Seite auf AMP umstellen kann und welche Vor- und Nachteile sich durch AMP für den Nutzer ergeben.
Was ist Google AMP?
AMP steht für Accelerated Mobile Pages und ist ein von Google eingeführtes Framework um sehr schnell ladende mobile Webseiten erstellen können. Es ist Teil der Digital News Initiative (DNI). Hierbei hat sich Google im Jahr 2015 dazu verpflichtet, innerhalb von drei Jahren 150 Millionen Dollar für den digitalen Journalismus bereitzustellen. Das AMP Project kann als Teil von Googles Strategie gesehen werden, die Usability im mobilen Internet zu verbessern. Seit 2015 werden mehr und mehr Suchanfragen über mobile Geräte ausgeführt. Google liefert für mobile Geräte optimierte Seiten bevorzugt bei diesen Anfragen aus.
Warum wurde AMP entwickelt?
Die Ladezeit einer Website ist ein wichtiger Ranking-Faktor. Lädt eine Seite zu lange, verlassen die Nutzer eine Website schneller. Die Folgen sind eine kurze Verweildauer und eine hohe Absprungrate. Diese Faktoren gewinnen auch bei mobilen Geräten zunehmend an Bedeutung. Das AMP-Projekt geht diese Faktoren an und soll sehr kurze Ladezeiten auf mobilen Geräten ermöglichen. Daher ist die Technologie vor allem für Seiten mit viel Text wie z. B. Nachrichten-Publisher, Blogger oder auch Videoplattformen konzipiert worden. AMP-Seiten in den Suchergebnissen werden mit einem Blitz-Symbol gekennzeichnet.
AMP ist ein Open-Source-Projekt und damit frei zugänglich. Es soll Webmastern ermöglichen, die Ladezeiten ihrer mobilen Seiten zu verbessern. Dadurch wird letztendlich auch die User Experience verbessert. AMP ist eine einfache Methode, um eine mobile Website schneller laden zu lassen und dabei ohne größere technische Anpassungen auszukommen.
Wie funktioniert AMP?
Prinzipiell lädt Google bei AMP Seiten schon vor dem Anklicken im Hintergrund. Es werden allerdings nur Inhalte geladen, die der Nutzer nach dem Klick auch sofort zu Gesicht bekommt und die daher schnell zur Verfügung stehen müssen. Die restlichen Inhalte wie Bilder, Videos oder Werbebanner werden nur als Platzhalter geladen. AMP-Artikel liegen dabei nicht auf den Servern des Publishers, sondern bereits auf den Servern von Google und werden dort in den Cache geladen. Drei grundlegende Bestandteile machen AMP aus:
- AMP HTML ist eine spezielle Art des HTML Codes, der auf einige wichtige Tags und Befehle reduziert ist. Wenn man allerdings gut mit der normalen HTML-Sprache vertraut ist, stellt die Anpassung einer Seite auf AMP HTML kein großes Problem dar. Das HTML wird dabei auch von Googles Servern komprimiert. Ein simpler Code für eine Website mit AMP HTML könnte z. B. wie folgt aussehen:
- AMP JavaScript ist ein spezielles JavaScript Framework für mobile Websites. Es verwaltet größtenteils die Ressourcen und sorgt dafür, dass eine AMP Website asynchron geladen wird. Es wird in sogenannten Extensions eingesetzt. In diesen Extensions werden Elemente wie Lightboxen, Instagram oder Einbindungen von Facebook sowie Twitter ausgeführt. Zudem werden AMP-iframes in solchen Extensions ausgeführt, hier kann Java Script von Drittanbietern implementiert werden.
- Der AMP Cache ist das proxy basierte Content Delivery Network. Seiten, die auf AMP HTML basieren und alle Vorgaben erfüllen, werden hier auf Servern von Google bereits gecached. Dies führt zu verkürzten Ladezeiten. Dabei wird lediglich der Cache auf den Servern gespeichert. Die Artikel und Inhalte bleiben stets im Besitz der Publisher.
Eine Seite auf AMP umstellen
Um eine mit normalem HTML-Code erstellte Website auf AMP umzustellen bzw. anzupassen, muss zu Anfang eine zweite Version der jeweiligen Site erstellt werden. Diese zweite Version ist eine gesonderte AMP-Version der Site. Sie ist unter einer separaten URL erreichbar, die mit /amp endet, beispielsweise beispiel.de/beispielartikel/amp. In Content-Management-Systemen wie z. B. WordPress können die Seiten mittels Plugin auf AMP umgestellt werden. Damit das JavaScript von Drittanbietern nur eingeschränkt bzw. gar nicht genutzt werden kann, ist es nicht möglich, interaktive Seitenelemente wie Formulare oder Kommentare in eine AMP-Seite einzubinden. Der Grund hierfür ist, dass diese Elemente die Ladezeit der Website verlängern.
Es ist zudem sehr wahrscheinlich, dass das Template einer Website umgeschrieben werden muss, um die Vorgaben für AMP zu erfüllen. So muss beispielsweise das ganze CSS in line, also im Code selbst, hinterlegt werden und darf nicht größer als 50 KB sein. Außerdem müssen eigene oder spezielle Schriftarten aufgrund ihres hohen Aufwands beim Laden der Seite über eine spezielle Erweiterung eingebunden und geladen werden.
Falls Google Analytics oder andere Dienste zur Messung des Nutzerverhaltens eingebunden sind, werden diese über eine spezielle Schnittstelle integriert. So soll die Seite beim Laden nicht ausgebremst werden. Die dafür nötige API kann relativ einfach in die Tools eingebunden werden. Abschließend wird im <link rel> Tag im Header der Hauptseite ein Hinweis auf die AMP Seite hinterlegt. Im Umkehrschluss zeigt ein Canonical Tag auf die Hauptseite, um eventuelle Probleme mit Duplicate Content zu vermeiden.
Monetarisierung einer AMP-Seite
AMP ist vor allem für Websites mit viel Text und Artikeln ausgerichtet. Viele dieser Websites finanzieren sich über Werbeplacements und Anzeigen – es muss daher dafür gesorgt werden, dass die Publisher ihre Seite auch weiterhin monetarisieren können. AMP unterstützt, gemäß Google, viele gängige Werbeformate, Netzwerke und Technologien. Zudem können eigene Werbenetzwerke weiterhin genutzt werden, solange diese nicht zu verlängerten Ladezeiten führen und so die User Experience des Lesers beeinträchtigen.
Folgen für die Nutzer: Vor- und Nachteile
Vorteile von AMP
Für die User ergeben sich durch AMP einige wichtige Vorteile. Websites, die für AMP optimiert sind, laden schneller und verbrauchen weniger Datenvolumen. Zudem wirken sich kürzere und schnellere Ladezeiten positiv auf die User Experience und User Signals wie Absprungrate und Verweildauer aus.
Für Publisher sind kürzere Ladezeiten auch von Vorteil. Lädt eine Website zu lange, verlassen die User die Site umgehend wieder. Die Absprungrate steigt oder die Nutzer verweilen nur sehr kurz auf der Seite. Die Nutzung von AMP kann für geringe Absprungraten, eine längere Verweildauer und insgesamt verbesserte User Signals sorgen.
Ein Vorteil für beide Seiten ist die Tatsache, dass für AMP optimierte Seiten über den organischen Suchergebnissen angezeigt werden. Nutzer finden Artikel und Informationen zu den gesuchten Themen schneller. Publisher können so eine höhere Bekanntheit und mehr Klicks erreichen.
Die Nutzung von AMP ist zwar kein direkter Ranking-Faktor, dennoch bringt die Technik diesbezüglich einige Vorteile mit sich. Durch den <link rel> Tag zur AMP Seite und den Canonical Tag auf der AMP Site besteht ein Zusammenhang bei der Indexierung der Seiten. Eine durch AMP mobil optimierte Seite beeinflusst die User-Signale positiv, diese fließen wiederum ins Ranking ein. Außerdem ist die Platzierung über den organischen Suchergebnissen ein echter Blickfang und kann zur Traffic-Steigerung führen.
Nachteile von AMP
Nachteile gibt es vor allem bei bestimmten Content-Typen, da AMP vor allem für textlastige Seiten und sehr kurze Ladezeiten konzipiert ist. Bilder oder Präsentationen, die für bessere Lesbarkeit gezoomt werden müssen, können nicht eingebunden werden. Zudem können Videos nicht direkt implementiert werden, sondern beispielsweise nur, wenn sie über YouTube gehostet werden. Animierte Features, die User zur Interaktionen bewegen sollen, können aufgrund der eingeschränkten Möglichkeiten mit JavaScript ebenfalls nicht genutzt werden.
Ein bis Anfang des Jahres bestehender Nachteil wurde bereits beseitigt. So wurde beim Aufrufen einer AMP Site die gesonderte AMP URL im Adressfeld des Browsers angezeigt. Dies führte teilweise zur Verwirrung beim Teilen dieser Seiten. Google hat sich dieser Problematik angenommen und zeigt nun in einem separaten Feld die originale URL Website an, von der der Artikel stammt. Die Ursache für dieses Problem ist die Tatsache, dass die ausgegebene AMP-Version der Website auf Googles Servern gecached wird.
Fazit
Googles AMP-Technologie ist vor allem für Websites und Publisher mit textlastigen Websites geeignet. Der stark reduzierte HTML-Code und die überschaubaren Möglichkeiten, mit Java Script zu arbeiten, begrenzen die Möglichkeiten interaktive Elemente zu nutzen. Ist auf einer Seite viel visueller Content vorhanden, kann eine gute und vollständige mobile Optimierung eine lohnenswerte Alternative zur Verwendung von AMP darstellen. So kann sichergestellt werden, dass die User auch in gewünschter Art und Weise mit dem Content interagieren. Ein großer Vorteil bei der Verwendung der Technologie ist die Platzierung über den organischen Suchergebnissen. Der Einfluss verkürzter Ladezeiten auf die User Signals als Rankingfaktor ist ebenfalls ein wichtiger Faktor.
Über den Autor
Florian Kolbe arbeitet bei der Agentur Online Solutions Group und taucht nach seinem BWL-Studium nun als Trainee im Online Marketing tief in die Welten des SEO und SEA ein. Die Arbeit in einer Agentur wie der Online Solutions Group liefert stets neue Herausforderungen, die es zu meistern gilt. Spannende Themen und Kunden gehören zum Alltag und für ausreichend Abwechslung ist gesorgt. Online Marketing wird nie langweilig.
Super Artikel – zum Glück sind AMP bisher fast nur für News-Seiten interessant. Ich sehe schon jetzt die ungläubigen Gesichter der Programmierer, die es dann umsetzten müssen ?
Wie immer ein wirklich toller Artikel – vielen Dank dafür. LG, Josef
Danke für die gelungene Zusammenfassung, Florian! Ergänzung zu den Nachteilen:
AMP kann bei Seiten, die bereits über Indexierungsprobleme klagen, zu weiteren Indexierungsproblemen führen, da für AMP ein zusätzliches URL-Muster benötigt wird, das entsprechend indexiert werden muss. Die Info stammt ursprünglich von John Müller.
LG
Peter