Accelerated Mobile Pages (AMP)

Seit 2015 pusht Google pusht das schnelle Framework der Accelerated Mobile Pages, kurz AMP – unter anderem durch die Bestückung des Top Stories Widget mit entsprechenden Resultaten.

Was ist AMP?

AMP steht für Accelerated Mobile Pages. Dabei handelt es sich um ein OpenSource-Framework mit Fokus auf kurzen Ladezeiten für mobile Webseiten. Charakteristisch sind reduzierte JavaScript- und CSS-Elemente sowie das Laden von Content-Elementen über ein Content Delivery Netzwerk.

Suchmaschinen listen in den Suchergebnissen am Mobilgerät die AMP-Version einer Seite, die für User dann bei Klick mit enorm reduzierter Ladezeit schnell verfügbar ist. Die AMP-Version wird auf den Servern der Suchmaschinen gecacht, so dass diese bei Anforderung schnell ausgeliefert werden kann.

AMP-Entwicklung bei Google & Co.

Im Jahr 2015 erfolgte der Start für das „Accelerated Mobile Pages Project“. Zu den Initiatoren gehörten Google, WordPress sowie der Software-Konzern Adobe. Sie wollten auf den steigenden Bedarf an kurzer Ladezeit auf Mobilgeräten reagieren. Das Ziel der Initiative war und ist es, ein System zu errichten, das allen Beteiligten Vorteile bringen sollte.

Inzwischen sind die meisten Publisher auch mit einer AMP-Seitenversion ausgestattet; auch CMS-Systeme wie WordPress bieten AMP-Lösungen an. Viele andere Website-Typen, etwa im E-Commerce, sind nicht dabei. So finden sich bei Google laut dem Conductor SERP Features Monitor in rund 80 Prozent aller mobilen, klassisch-organischen Top10-Suchergebnisse mindestens ein Ergebnis mit einem Blitz als Kennzeichen für die Accelerated Mobile Pages.

Auch in anderen Suchmaschinen werden AMP-Seiten in den mobilen Suchergebnissen angezeigt. So spielt auch Bing seit 2018, wenn vorhanden, die AMP-Version in den Suchergebnissen aus. Yandex und Baidu haben eigene Versionen eines auf mobile Ladezeit fokussierten Frameworks entwickelt – bei Yandex heißen diese Seiten Turbo Pages; bei Baidu werden sie Mobile Instant Pages genannt.

Zukunft von AMP bei Google

Google hat Ende Mai 2020 erklärt, dass für das SERP Features der „Top Stories“, zu Deutsch „Schlagzeilen“ künftig nicht mehr nur ausschließlich AMP-Inhalte angezeigt werden sollen. Stattdessen wolle Google auch Nicht-AMP-Inhalte in diesem Widget listen.

„Wir werden die Page Experience Metriken auch als Ranking-Kriterien für das Top Stories Feature in den mobilen Suchergebnissen einführen“, erklärte Google. „Damit entfällt die AMP-Bedingung für die Eignung einer Seite für die Top Stories. Google AMP wird weiter unterstützt, und wird weiterhin zu den AMP-Seiten verlinken, sofern verfügbar.“

Seither wird über die Zukunft der Accelerated Mobile Pages diskutiert. Zwar fokussiert Google das Thema Ladezeit auf Mobile nach wie vor intensiv, doch nicht zwangsläufig mehr mit einer AMP-Version. Hintergrund ist die mangelhafte Verbreitung von AMP bei allen Typen von Webseiten – mit Ausnahme der Publisher, die zum allergrößten Teil auf das AMP-Framework setzen.

Google AMP wird zwar weiterhin unterstützt, doch scheint Google aktuell das Thema Ladezeit mehr über die Ankündigung der Page Experience als neuen Ranking-Faktor ab 2021 im Web verankern zu wollen.

Bedeutung von AMP für Mobile SEO

Die Wartung und Pflege von AMP-Seiten stellt Webmaster und SEOs vor Herausforderungen. Grund dafür ist, dass beim Einsatz der Accelerated Mobile Pages letztlich zwei Seitenversionen gepflegt werden müssen – die reguläre Web-Version sowie die AMP-Version.

Neben den Einschränkungen, die das AMP-Framework in Sachen Code und Vermarktung mit sich bringt, ist zudem die Einbettung von Accelerated Mobile Pages in ein bestehendes Web-System, etwa für Shops, komplex. Deshalb raten Expert*innen vielfach, dass die Accelerated Mobile Pages zwar für Publisher sinnvoll sind; andere Business Modelle im Web jedoch eher auf eine Progressive Web App oder eine Optimierung der mobilen Ladezeit setzen sollen.

So funktioniert AMP

Wie schnell Web-Inhalte laden, hängt zum einen von der Verbindungsgeschwindigkeit und zum anderen von der Dateigröße der Webseiten ab. Beide Aspekte bedingen sich gegenseitig. So lädt eine Seite zum Beispiel auch dann langsam, wenn die Internet-Geschwindigkeit zwar hoch ist, aber große Dateimengen zu laden sind.

AMP selbst hat keinen Einfluss auf die vorhandene Kapazität einer Internet-Leitung, doch kann die Technik beste Voraussetzungen dafür schaffen, dass eine mobile Webseite auch bei einer langsamen Datenverbindung schnell lädt.

Der Schlüssel in der kurzen Ladezeit liegt bei AMP primär in der Reduktion der Dateien, die für die Seite geladen werden müssen. Ein weiterer wichtiger Faktor ist ein Proxyserver, der einen aktuellen Cache der Zielseite bereithält. Diese Inhalte werden über ein Content-Delivery-Network ausgeliefert. Das hat den Vorteil, dass die Seite unabhängig von User-Standort nahezu gleich schnell aufgebaut werden kann.

Allgemein gilt, dass alle Server AMP-Quellcode auslesen können, da der Code auf bekannten Skripten basiert.

Diese drei Elemente sind charakteristisch für AMP:

AMP HTML: Der HTML-Code einer Accelerated Mobile Page ist auf das Nötigste beschränkt. Wird die Seite aufgerufen, erfolgt nur ein http-Request.

AMP JS: Für AMP wird asynchroner JS-Code verwendet. Auf diese Weise kann sich die Seite schon aufbauen, bevor alle JS-Elemente geladen wurden.

AMP CDN: Von jeder AMP-Webseite wird ein Zwischenspeicher auf verschiedenen Servern weltweit angelegt. Über ein Content-Delivery-Netzwerk können diese Inhalte dann auf dem kürzesten Weg zu den Usern gebracht werden. Ein weiterer Vorteil des CDN besteht darin, dass die Funktionsfähigkeit der AMP kontinuierlich geprüft wird. So werden Seitenausfälle vermieden.

Welche Anpassungen müssen bei AMP am HTML-Code vorgenommen werden?

• Content in Form von audiovisuellen Medien muss mit speziellen AMP Tags markiert werden, zum Beispiel amp-img, amp-video, amp-audio oder amp-iframe.
  • Ein Bild kann zum Beispiel so in den Quellcode einer AMP eingefügt werden:
    <amp-img src=“meinbild.jpg“ alt=“das sieht man auf dem Bild“ height=“200″ width=“300″></amp-img>
• Folgende Tags müssen auf jeder AMP vorhanden sein, damit diese korrekt dargestellt werden kann:
  • Dokumententyp: <!doctype html>
  • Top Level Tag: <html>tag oder <html amp>
  • <head> und <body> Tags
  • Canonical Tag im Header: <link rel=“canonical“ href=“http://www.meinenormaleURL.de“ />
  • Codierung: <pre><meta charset=“utf-8″></pre> im Header
  • Viewport: <meta name=“viewport“ content=“width=device-width,minimum-scale=1″>
  • Angabe zum AMP-CDN: <script async src=“https://cdn.ampproject.org/v0.js“></script>
  • Hinweis zur Deckkraft: <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>