Bild-CAPTCHA
Geben Sie die Zeichen ein, die im Bild gezeigt werden.
Schreiben Sie uns hier!

Sie sind hier

Accelerated Mobile Pages (AMP) in Drupal verwenden

Accelerated Mobile Pages (AMP) ist ein Open-Source-Format für die Darstellung von Website-Inhalten auf mobilen Geräten. AMP ist hauptsächlich für News und Blog-Artikel ausgelegt, es lassen sich aber auch alle anderen Arten von Web-Inhalten oder ganze Websites in AMP bauen. AMP soll dafür sorgen, dass Inhalte auf mobilen Geräten sehr schnell geladen werden und somit das Lesen auf diesen deutlich angenehmer wird. Das AMP-Projekt wurde von Google initiiert und wird von mehreren großen Verlagen unterstützt.

Seit Februar 2016 können die AMP-Versionen von News über die Google Suche auf mobilen Endgeräten gefunden werden. Viele bekannte Verlage und Nachrichtenagenturen aus aller Welt bieten bereits AMP-Versionen ihrer Inhalte an. Insgesamt verwenden zurzeit (Stand Januar 2017) etwa 29.000 Webseiten weltweit AMP (Quelle: trends.builtwith.com). Die AMP-Versionen von Artikeln werden in den Suchergebnissen mit einem „Blitz Symbol“ und der Beschriftung „AMP“ markiert. Zudem werden die ersten Artikel mit der Überschrift „Schlagzeilen“ in einem Karussell besonders prominent ganz oben in den Ergebnissen angezeigt.

 

Plugins, die normale Seiten in AMP konvertieren, gibt es für die Content-Management-Systeme Drupal, WordPress und Joomla.

Vorteile für Website-Betreiber

Da im „Google-Such-Ranking“ die Geschwindigkeit einer Website ein wichtiger Faktor ist, hat man hier mit der Verwendung von AMP einen klaren Vorteil. Da AMP-Seiten in Google über einen iFrame eingebunden sind, werden die Seitenaufrufe damit der eigentlichen Website angerechnet. Somit kommt bereits die bloße Anzeige einer Website als AMP-Suchergebnis der Website-Statistik zu Gute, auch ohne dass der Suchende auf das Suchergebnis klickt und die Website aktiv besucht.  

Die geringe Ladezeit von AMP-Inhalten verbessert die Nutzer-Erfahrung und senkt damit die Gefahr, dass ein User auf Grund schlechter Performance die Seite vorzeitig verlässt. Statistiken zeigen, dass etwa 40% aller Nutzer eine Website wieder verlassen, wenn diese nicht innerhalb von drei Sekunden geladen ist. Ersten Statistiken über den Einsatz von AMP zur Folge unterstreichen den positiven Effekt geringerer Absprungraten.

Laut einer Statistik der Washington Post (die 55% ihrer Seitenzugriffe von mobilen Geräten bezieht) sind auf der Website die durchschnittlichen Ladezeiten auf mobilen Geräten um 88% zurückgegangen, seitdem dort AMP verwendet wird. Gleichzeitig ist die Anzahl der User, die binnen 7 Tagen zur Website wiederkehren von 51% auf 63% gestiegen (Quelle: ampproject.org).

Was macht AMP so schnell?

AMP nutzt eine eigene Variante von HTML mit eingeschränktem Funktionsumfang und einer leicht veränderten Architektur. Da hierbei nur die wichtigsten Funktionen verwendet werden, ist diese deutlich schneller. Außerdem werden AMP-Inhalte auf Google-Servern zwischengespeichert, was den Aufruf dieser nochmal schneller macht.

Die JavaScript-Bibliothek stellt die speziellen HTML-Tags zur Verfügung, die für AMP benötigt werden. Sie beinhaltet außerdem weitere Funktionen, die AMP zu seiner beachtlichen Geschwindigkeit verhelfen. So werden beispielsweise externe Ressourcen bereits standardmäßig nicht synchron mit dem eigentlichen Inhalt geladen, wodurch die relevanten Teile einer Website schneller angezeigt werden können. 

AMP in Drupal

Für Drupal 7 und Drupal 8 steht das Modul „Accelerated Mobile Pages (AMP)“ von den Entwicklern Lullabot zur Verfügung. Mit diesem lassen sich für alle Inhalte AMP-Versionen erstellen. Das Modul wandelt HTML in AMP-HTML um.

Es bringt ein Theme, die AMP-Bibliothek (diese muss über Composer installiert werden und erfordert mindestens PHP 5.5) und einen AMP-ViewMode mit. Fügt man „?amp“ als Parameter an die URL eines Inhaltes hinzu, so wird die AMP-Version dieses Inhaltes ausgegeben. Die AMP-PHP-Bibliothek wandelt dabei HTML-Tags, wie beispielsweise <img>, in ihre AMP-HTML Gegenstücke um (in diesem Fall <amp-img>). Außerdem passt sie die HTML-Strukur den Anforderungen von AMP an und setzt alle benötigten Meta-Tags.

Nach dem Herunterladen des Moduls und des Themes sollte über Composer die AMP-PHP-Bibliothek installiert werden. Danach kann das Modul und das Theme installiert werden. Letzteres muss hierbei nicht als Standard-Theme konfiguriert werden. Bei Bedarf kann für beliebige weitere Anpassungen ein Sub-Theme angelegt werden. Im Block-Layout des eingesetzten AMP-Themes können alle benötigten Blöcke platziert werden. Nach dem Einschalten des AMP-ViewModes stehen AMP-Formatierer für diverse Feldtypen zur Verfügung, beispielsweise für Bilder, iFrames oder Texte. Zusätzlich gibt es die Möglichkeit, sich auf allen Seiten eine Validierung des umgewandelten HTMLs anzeigen zu lassen. 

Für die Darstellung von News im „Schlagzeilen-Karussell“ sind die Vorgaben von Google Structured Data zu beachten.

Für Werbung steht ein spezielles AMP-HTML-Element zur Verfügung, das drei verschiedene Darstellungen erlaubt. AMP unterstützt diverse unterschiedliche Werbenetzwerke (Liste auf offizieller Seite von AMP: ampproject.org).

Eigene Erfahrungen und bekannte Einschränkungen

Einige Nutzer berichten, dass ihre AMP-Inhalte gar nicht oder nur teilweise indexiert werden. Des Weiteren berichten Nutzer, dass sie Aufrufe auf ihren AMP-Inhalten sehen, aber diese Inhalte in der Google Suche nicht finden. Da AMP eine vergleichsweise junge Technik ist, sind solche Kinderkrankheiten allerdings nicht ungewöhnlich.

Zudem werden noch nicht alle Drupal-Feldtypen vollends unterstützt. So beispielsweise auch nicht das recht weit verbreitete "Paragraphs"- Modul, welches auch wir aufgrund seiner bereitgestellten Flexibilität bei der Inhaltszusammenstellung durchaus für gut befinden. 

In Test-Systemen, die auf traditionellerer Inhaltserstellung aufbauen, haben wir hingegen bereits gute Erfahrungen sammeln können. Die Installation und Konfiguration des Moduls und Themes verliefen nach bekanntem Schema. Für die Installation der AMP-PHP-Library wird allerdings Composer (bzw. das Composer-Modul) benötigt. 

Dennoch kann nicht ausgeschlossen werden, dass die reibungslose Umwandlung der Inhalte in den AMP-Standard auch mit diversen anderen Modulen noch nicht sauber zusammenspielt. MIt der fortschreitenden Verbreitung von AMP wird sich dessen Kompatibilät in Zukunft jedoch stark verbessern und die derzeit auftretenden Fehler weiter minimieren.