AMP: Vorteile und Herausforderungen des HTML-Derivats

AMP: Vorteile und Herausforderungen des HTML-Derivats

AMP steht für Accelerated Mobile Pages. Unter der Federführung von Google wird hier ein Derivat von HTML entwickelt, welches das Ziel hat, die Benutzung mobiler Webseiten zu verbessern. Sie sollen schneller laden und einfacher zu pflegen sein. Wir stellen Ihnen vor, was AMP genau ist, worauf Sie achten müssen und wie es sich einsetzen lässt.

AMP ist nicht nur reduziertes HTML

Oft hört und liest man, dass AMP HTML nur ein Ausschnitt von HTML ist. Allerdings beinhaltet AMP HTML auch weitere, eigene Elemente, sodass man es als Derivat von HTML betrachten sollte. Um die Ladezeit möglichst stabil zu verbessern, verbietet AMP HTML die Nutzung von Third-Party-Elementen (Javascript und CSS) oder erlaubt diese nur unter bestimmten Voraussetzungen. So stellt das AMP-Projekt für verschiedene Funktionen Javascript bereit, das eingebunden werden muss, wenn auf diese Funktionen zugegriffen werden soll.

Wesentliche Einschränkungen gegenüber vollwertigem HTML

  • Einige gängige Elemente sind nicht zugelassen oder müssen durch AMP HTML Elemente ersetzt werden. Bilder werden zum Beispiel mit amp-img eingebunden.
  • Freies Javascript darf nicht verwendet werden. Lediglich vom AMP-Projekt freigegebene Skripte können verwendet werden.
  • Inline CSS oder externe CSS-Dateien werden nicht unterstützt.
  • Werbemittel können nur von freigegebenen Vermarktern eingebunden werden. Die Formate dazu bestimmt das AMP-Projekt.
  • Die AMP-Seiten werden von Google bzw. anderen Plattformen gecached und von dort an den Nutzer geschickt.

 

Nutzung von Accelerated Mobile Pages

Meist wird für die Nutzung von AMP HTML eine zusätzliche Version der Webseite erstellt. Häufig dienen dazu Plugins oder Templates für bekannte CMS. Es gibt keine Regel, wie eine AMP URL aufgebaut sein muss. Sie wird lediglich aus der regulären HTML-Seite referenziert.

Beispiel:

<link rel=“amphtml“ href=“https://www.textprovider.de/amp/“ />

Suchmaschinen wie Google oder andere Dienste und Apps finden die zugehörige AMP URL und rufen diese auf die eigenen Server ab, um sie so noch schneller ausliefern zu können. Die so referenzierte Seite muss dann validen AMP HTML Code erzeugen.

<!doctype html>
<html ⚡>
<head>
<meta charset=“utf-8″>
<script async src=“https://cdn.ampproject.org/v0.js„></script>

Die so ausgezeichneten Inhalte können bei der Ausgabe entsprechend optimiert dargestellt werden. Bilder werden automatisch für die genutzte Displaygröße geladen und je nachdem, welche Features das benutze Gerät unterstützt, wird dem User der Content dargestellt. Der größte Vorteil von AMP-Webseiten ist, dass sie den Inhalt für den Nutzer sehr schnell darstellen können. Der Faktor Zeit ist gerade im mobilen Kontext sehr wichtig.

Auch wenn der hier vorgestellte Weg der Regelfall ist, so zeigt das Accelerated Mobile Pages Project, dass es eigtl. nicht notwendig ist, neben der AMP-Version noch eine gewöhnliche HTML-Version einer Seite zu erstellen. AMP-Seiten werden auch von einem klassischen Desktopbrowser dargestellt. Wer also mit den Einschränkungen leben kann, sollte die komplette Webseite direkt in AMP HTML erstellen und spart sich so gegebenenfalls doppelte Pflege. Je nach Setup müssen Inhalt und Darstellung der mobilen und der Desktopvariante nämlich explizit angelegt und gepflegt werden. Der Nachteil liegt natürlich darin, dass man komplett auf das AMP-Projekt setzt und im schlimmsten Fall seine komplette Webseite umbauen muss.

AMP-Beispiele

Um das Thema Accelerated Mobile Pages und die Einschränkungen besser zu erklären, schauen wir uns beispielhaft eine typische Aufgabe an. Das Einbinden von Bildern und Videos ist ein klassischer Fall für eine Webseite. Das Prinzip von AMP ist es, die Informationen über die eingebetteten Elemente zu kennen, bevor sie geladen werden. Somit kann die komplette Seite gerendert werden, auch wenn das Bild oder Video erst geladen wird, wenn es im Browser des Nutzers zu sehen ist. Die Ladezeit kann dank Lazyload drastisch verbessert werden. Daher verwendet AMP ein extra Element mit speziellen Anforderungen, um Bilder einzubinden.

Das Javascript von AMP übernimmt die entsprechenden Aufgaben und sorgt für die korrekte Darstellung und Berechnung für den Nutzer. Es ermöglicht darüber hinaus aber auch besondere Layout-Funktionen: Damit der User das Bild auch sehen kann, wenn Javascript deaktiviert ist (einige Nutzer tun dies aus Sicherheitsempfinden), muss das Bild mit dem klassischen IMG Element eingebunden werden. Hier das Beispiel der AMP-Projektseite:

<amp-img src=“images/sunset.jpg“
width=“264″
height=“195″>
   <noscript>
       <img src=“images/sunset.jpg“ width=“264″ height=“195″ />
   </noscript>
</amp-img>

Dadurch ist AMP in der Lage, das Layout der Seite zu berechnen, ohne die externen Inhalte bereits zu laden. Somit kann der Bereich, den der User direkt sieht, unmittelbar angezeigt werden.

Viele weitere Beispiele sind auf den offiziellen Seiten https://www.ampproject.org/  und https://ampbyexample.com/  zu sehen.

 

AMP in der Google-Suche

Da die Suchmaschine führend in der Entwicklung ist, wird auch oft von Google AMP gesprochen. Daher ist es auch kein Wunder, dass Google die mobilen Webseiten auf Basis von AMP in den Suchergebnissen (Search Result Pages = SERPs) zu bevorzugen scheint. Google behauptet somit, das mobile Web weiter stärken zu wollen und den Webmastern dabei zu helfen. Daher bietet Google in der Search Console auch entsprechende Informationen über valide AMP Seiten und Fehlerquellen (siehe Google ).

Zusammen mit strukturierten Daten ist es möglich, bei Google dank AMP-Webseiten besondere Darstellungen in den SERPs zu bekommen. So werden zum Beispiel News oder Rezepte mobil gesondert dargestellt und der Content wird leichter für den Kunden auffindbar. Solche Daten sind besonders für das mobile Marketing hochinteressant, steigen doch die Nutzerzahlen mobil immer weiter. Für diese Daten gibt es je nach CMS und Thema bereits entsprechende Plugins, die die Informationen für Google korrekt bereitstellen.

Der Vorteil von Googles AMP für den Kunden aus der mobilen Google Suche ist glasklar: Durch die besondere Darstellung in den Suchergebnissen ist die Klickwahrscheinlichkeit höher und dank des Cachings auf Googles Servern wird der Content noch schneller erreichbar.

Weitere Integrationen von AMP

Neben der Nutzung von Google haben auch weitere Plattformen wie Twitter oder Facebook sowie verschiedene Apps die Unterstützung von Accelerated Mobile Pages angekündigt oder bereits umgesetzt. Hier werden die Daten teilweise selbst gecached oder ebenfalls vom Google Server geladen.

 

Große Baustellen bei AMP

Auch wenn dieser Beitrag bis jetzt wie eine Werbeveranstaltung für AMP klingt, so hat AMP noch ein paar größere Baustellen, um die es sich kümmern muss. Die aktuelle AMP-Version ist noch stark auf contentlastige Projekte optimiert. Bisher sind die Möglichkeiten für die E-Commerce-Integrationen eher schwach. Auch was die Integration verschiedener Online-Marketing-Tools angeht, gibt es noch deutlich Aufholbedarf. Durch die sehr strikte Regelung, welche externen Inhalte geladen werden dürfen, stehen einige Funktionen der Third-Party-Dienste nicht zur Verfügung. Auch ist es Google noch nicht sauber gelungen, Google Analytics Tracking zu implementieren. Während man im Newsbereich praktisch nicht drumherum kommt, Google AMP zu nutzen, sind die Stolpersteine im E-Commerce noch recht hoch. Aber das AMP Project hat hier schon angekündigt, die Bedürfnisse zu erkennen und umzusetzen. Also scheinbar alles eine Frage der Zeit.

 

Brauche ich AMP wirklich?

Die liebste Antwort wäre: „Niemand braucht AMP wirklich!“, denn schließlich steht es jedem frei, extrem schnelle mobile Seiten zu entwickeln. Dazu bedarf es keine zusätzlichen Javascripts oder gar ein Caching auf fremden Servern. Allerdings zeigt die Realität, dass es doch nicht für jeden so einfach ist, gute und schnelle Seiten zu entwickeln. Die etwas kompliziertere Antwort lautet deshalb:

Wer aktuell im News-, Rezepte- oder Event-Bereich unterwegs ist, sollte AMP realisieren, um bei mobilen Suchanfragen nicht abgeschlagen zu sein. 

Ansonsten sollte sich jeder zumindest mit dem Thema beschäftigen und für sich entscheiden, was der sinnigste Weg ist. Wer noch gar keine mobile Webseite hat, der kann diese direkt als AMP planen und gegebenenfalls mit der Progressive-Web-App-Technologie noch weiter entwickeln.



Schreibe einen Kommentar

Cookie Preference

Bitte wählen Sie Ihre Cookie Option. Mehr Informationen finden Sie hier.

Option auswählen um fortzufahren

Ihre Auswahl wurde gespeichert

Infos

Infos

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Aktuell verwenden wir Google Analytics, Facebook Pixel und AdWords Remarketing. Ein Opt-Out ist in unserer Datenschutzerklärung möglich.

  • Alle Cookies akzeptieren:
    Alle Cookies, u. a. Tracking und Analytics Cookies.
  • Nur First-Party-Cookies akzeptieren:
    Nur Cookies von dieser Webseite.

Einstellungen anpassen: Datenschutzerklärung Impressum

Zurück