AMP Guide – Accelerated Mobile Pages einrichten und prüfen

Wer sich mit mobiler Optimierung und dem Thema mobile Pagespeed beschäftigt, stößt dabei früher oder später auf das Thema AMP. Wir erklären was es mit den Accelerated Mobile Pages auf sich hat und wie Du AMP für schnellere Ladezeiten und eine bessere Website User Experience einsetzt.

Mehr als 90% der weltweiten Internetbevölkerung geht inzwischen über mobile Geräte online ( Statista), eine mobilfreundliche Website sollte daher fester Bestandteil jeder SEO-Strategie sein.

Dabei besonders wichtig: Die Ladegeschwindigkeit – denn mobile Internetverbindungen sind je nach Standort und Netz nach wie vor verhältnismäßig langsam und führen in Kombination mit trägen Websites zu jeder Menge Frust bei den Besuchern.

Eine mögliche Lösung bieten Accelerated Mobile Pages, kurz AMP. Sie sollen für schnelle Ladezeiten sorgen und Webinhalte besonders schnell erreichbar machen. Wie das geht, ob sich AMP tatsächlich lohnt und wie Du AMP auf Deiner Website einsetzt, erfährst Du in diesem Guide.

Was bedeutet AMP?

AMP (Accelerated Mobile Pages) ist ein quelloffenes Seiten-Format mit dem Du nutzerorientierte, speziell für mobile Geräte optimierte Versionen Deiner Webinhalte (AMP Websites, AMP Ads, AMP Mails oder AMP Web Stories) erstellen kannst. Das Format reduziert Deine Seiten auf das Wesentliche (zum Beispiel wird ein gekürzter HTML Code verwendet) und sorgt dadurch für eine höhere Ladegeschwindigkeit.

Entwickelt wurde AMP 2015 im Rahmen des Accelerated Mobile Pages Project mit dem Ziel, die Optimierung für Mobilgeräte voranzutreiben und schnellere Ladezeiten auf mobilen Geräten zu ermöglichen. Aus dem Projekt ist ein neues mobiles Ökosystem entstanden, mit dessen Hilfe Websitebetreiber unkompliziert schnell ladende Webinhalte erstellen können.

Wie funktioniert AMP?

AMP ermöglicht schnelleres Laden von Webinhalten, indem es eine verkürzten HTML Code, asynchrones JavaScript sowie dezentrales Laden mittels Content Delivery Network nutzt.

Die drei Säulen des AMP-Frameworks im Überblick:

• AMP HTML: Dabei handelt es sich um einen besonders schlanken HTML-Code, der niedrige Dateigrößen verspricht und dadurch schnell geladen werden kann. Wird eine AMP-Seite aufgerufen, erfolgt nur ein Request, was die Ladegeschwindigkeit zusätzlich steigert.

• AMP JavaScript: Accelerated Mobile Pages basieren auf asynchronem JavaScript. Damit ist ein sofortiges Rendering möglich, ohne dass Skripte das Laden blockieren.

• AMP CDN: Das Content Delivery Network (CDN) speichert AMP-Pages im Cache und beschleunigt dadurch den Ladevorgang beim Laden der Seiten. Alle erforderlichen Dokumente für den Seitenaufbau werden dabei aus nur einer Quelle geladen.

Wozu brauchen Websites AMP?

AMP ist zwar kein offizieller Rankingfaktor, aber es sorgt für deutlich bessere mobile Pagespeed – und die spielt eine wichtige Rolle für die Performance in den Suchmaschinen Rankings.

Wo früher ein Desktop-PC zum Einsatz kam, reicht heute in den meisten Fällen ein Smartphone. Die verhältnismäßig geringere Bandbreite mobiler Internetverbindungen sowie die Geräte selbst sorgen allerdings nach wie vor dafür, dass Webseiten unterwegs langsamer laden.

Um die ohnehin schon längere Wartezeit nicht unnötig in die Länge zu ziehen, ist für mobile Websites die Optimierung der Ladegeschwindigkeit besonders wichtig. Und genau hier setzt AMP an.

Die Technologie ist sicher nicht die einzige Möglichkeit, um die mobile Pagespeed und Nutzerfreundlichkeit Deiner Website zu verbessern (Schau Dir dazu unser Ebook zum Thema Mobile Website Optimierung an), aber definitiv eine, mit der Du Dich auseinandersetzen solltest.

Vorteile von AMP

• Seiten laden nahezu in Echtzeit: Der größte Vorteil von Accelerated Mobile Pages besteht in ihrer Schnelligkeit. Durch die Anwendung von AMP werden Seiten auf mobilen Geräten nahezu in Echtzeit gerendert, was sich positiv auf die User Experience beim Besuch Deiner Website auswirkt.

• Nutzerfreundliche Ads: Neben “klassischen” Websites kann AMP auch für Ads und andere Formate genutzt werden. AMP hilft also auch dabei, Werbungen für die Zielgruppe ansprechender zu gestalten, mit ihnen mehr Aufmerksamkeit zu erzielen und ihren Effekt zu stärken.

• (Ehemals) Besondere Darstellung in den SERPs: Früher wurden AMP-Seiten bei der Erstellung von Search Enhancements wie Top Stories und News bevorzugt behandelt. Außerdem wurden Accelerated Mobile Pages in den Suchergebnissen durch ein besonderes AMP Badge gekennzeichnet. Seit Googles Page Experience Update 2021 gelten diese Vorteile jedoch nicht mehr.

Nachteile von AMP

• Eingeschränkte Funktionalität: Aus Gründen der Vereinfachung und zugunsten einer kürzeren Ladezeit bieten AMP-Seiten meist nur einen eingeschränkten Funktionsumfang sowie beschränkte Möglichkeiten für Webdesigner. Je nach gewünschten Funktionalitäten und Design Ansprüchen der Website muss also zwischen Schnelligkeit und diesen Anforderungen abgewogen werden.

• Unsicherer Impact: Zwar liefern Case Studies des AMP-Projekts zahlreiche Beispiele, in denen Webseiten mit AMP deutlich geringere Absprungraten und höhere Conversion Rates erzielen konnten, allerdings ist die generelle Datenlage hierzu nicht besonders zuverlässig. Besonders im eCommerce gibt es neben den Fällen, in denen AMP sich positiv auf relevante KPIs ausgewirkt hat, auch entsprechende Negativ-Beispiele. Ob sich AMP für die eigene Website lohnt, sollte daher unbedingt von Fall zu Fall entschieden werden.

Tipp: Falls Du Dir nicht sicher bist, ob AMP das richtige für Deine Website ist, hilft Dir vielleicht unser Artikel über den Einfluss von AMP auf Traffic und Conversion Rates.

Einrichten von Accelerated Mobile Pages

AMP-Seiten lassen sich aus Standard-Webseiten entwickeln, indem ein paar Anpassungen gemacht werden:

• Dokumententyp (Doctype): Zu Beginn jedes AMP-HTML-Dokuments steht der Dokumententyp: .

• Verwende den Zeichensatz.

• Deine AMP-Seite muss einen entsprechenden html-Tag besitzen. Du kannst <html ↯> oder verwenden.

• Jede AMP-HTML-Seite muss und enthalten.

• Auf Deiner AMP-Page solltest Du einen Canonical-Tag einfügen, der auf die Seite selbst verweist, wenn sie alleine existiert. Gibt es eine Standard-URL, sollte der Tag darauf verlinken.

Canonical Tag verweist auf die Ursprungs- bzw. Original-Version einer Seite:

<link rel="canonical" href="https://www.meineseite.de/url/zur/original-version.html" />

Canonical-Tag verweist auf die AMP-Seite:

<link rel="canonical" href="https://www.meineseite.de/url/zur/AMP-Seite.html" />

• Damit die AMP-Seite perfekt an den jeweiligen Ausgabebildschirm angepasst wird, sollte sie einen Viewport enthalten.

<meta name="viewport" content="width=device-width,minimum-scale=1">

• Um die Inhalte über das AMP-CDN zu laden, muss diese Zeile im Header eingefügt werden.

<script async src="https://cdn.ampproject.org/v0.js"></script>

• Das erweiterte Tag für den -Bereich muss ebenfalls implementiert werden.

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}} </style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none ;-ms-animation:none;animation:none}</style></noscript>

• Damit Suchmaschinen wie Google beim Crawlen einer herkömmlichen Seite erkennen, dass eine entsprechende AMP Version existiert, solltest Du auf Deiner Standard-Webseite außerdem unbedingt auf AMP-Versionen verweisen. Hierfür wird das rel-Attribut verwendet. Es wird im -Bereich eingefügt und verlinkt auf die AMP-Version.

<link rel="amphtml" href="https://www.meineseite.de/url/zur/AMP-Version.html" />

AMP in der Google Suche

Damit Deine AMP-Seiten in der Google Suche gut abschneiden, solltest Du sie so relevant und benutzerfreundlich wie möglich gestalten. Laut Google gelten hier die gleichen Richtlinien wie für alle herkömmlichen Webinhalte.

Zusätzlich stellt Google spezielle Richtlinien für AMP-Seiten bereit, an die Du Dich unbedingt halten solltest:

• AMP-Seiten müssen der AMP-HTML-Spezifikationen entsprechen

• Die Inhalte müssen den Inhalten der Standard-Seite entsprechen und in der gleichen Weise für Besucher nutzbar sein

• Das AMP-URL Schema muss für Besucher nachvollziehbar sein

• Bei Verwendung von Markup müssen die Richtlinien für strukturierte Daten eingehalten werden

• Die Seiten müssen grundsätzlich mit AMP kompatibel sein und das entsprechende AMP-Markup vollständig und gültig sein.

Strukturierte Daten auf AMP-Seiten

Wie oben bereits erwähnt kannst Du Deine AMP-Seiten genau wie herkömmliche Webseiten mit Structured Data Markup ausstatten. Dadurch können Seitentypen wie News- oder Rezeptseiten auf mobilen Endgeräten in den SERPs besonders hervorgehoben werden. News werden mit entsprechendem Markup zum Beispiel im sogenannten „Nachrichten Karussell“ von Google angezeigt.

Ein News-AMP-Artikel kann zum Beispiel so ausgezeichnet werden:

{ "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Titel", "datePublished": "2017-11-11T11:11:00Z", "image":"logo.jpg" }

In diesem Zusammenhang solltest Du bei Deinen AMP-Seiten folgende Empfehlungen beachten:

Logos auf AMP-Seiten

• Es sollten nur die Bilddateiformate .jpg, .png oder .gif. verwendet werden.

• Animierte Logos werden nicht unterstützt.

• Hinterlege kein Icon, sondern Deine Wortmarke oder das vollständige Logo.

• Platziere das Logo auf einem weißen oder transparenten Hintergrund, damit es in den SERP gut angezeigt werden kann.

• Erstelle Dein Logo in exakt 60×600 Pixeln im Querformat.

Bilder auf AMP-Seiten

Um Bilder korrekt auf AMP-Seiten anzuzeigen, musst Du den HTML-Code anpassen. Konkret werden die Verweise auf Bilder im Quellcode angepasst. Du ersetzt durch .

Beispiel:

<amp-img src="tollegrafik.jpg" alt="Tolle aktuelle Grafik" height="400" width="800"></amp-img>

Mobile Optimierung mit AMP-Plugins

Das klingt alles erstmal ganz schön technisch und kompliziert. Falls Du und Dein Team bisher keine Erfahrung mit AMP haben, könnt ihr auf AMP-Plugins zurückgreifen, um Accelerated Mobile Pages ganz ohne Arbeit am Code zu nutzen. Für die gängigen Content Management Systeme gibt es meist sogar kostenlose Lösungen, hier eine kleine Auswahl:

AMP-Seiten testen und überprüfen

Wenn Du AMP-Seiten eingerichtet hast, können diese mithilfe der Google Search Console ganz einfach überprüft werden. Voraussetzung dafür ist, dass Deine Webseite in der Search Console hinterlegt ist (und natürlich, dass Du AMP nutzt).

Im Bereich „Verbesserungen“ findest Du unter „AMP“ eine Übersicht aller indexierten AMP-Seiten, deren Einteilung in die Kategorien “Valid” “Valid with Warning” und “Error” und entsprechende Details zu auftretenden Problemen.

Abbildung 1: AMP-Seiten in der Google Search Console prüfen

Wenn Du die Implementierung von AMP-HTML testen möchtest, kannst Du das kostenlose AMP-Testtool von Google nutzen. Es testet Deine AMP-Seiten auf ihre Validität und zeigt Dir Fehler im Code, damit Du diese korrigieren kannst.

Abbildung 2: Googles AMP-Test prüft die Validität von AMP-Seiten

Auch mit dem AMP-Validator des AMP-Projects kannst Du Deine AMP-Seiten kontrollieren. Der Validator kann auch zum Kontrollieren von AMP Ads und AMP E-Mails genutzt werden.

Abbildung 3: AMP Webseiten, Ads und E-Mails prüfen mit dem Validator des AMP-Projects

Häufige Fragen zu AMP

• Kann ich AMP auch für Onlineshops nutzen?

Ja, generell kann jede Website mit AMP realisiert werden, auch Onlineshops. Allerdings solltest Du immer gründlich abwägen, ob sich AMP für Deine Website eignet bzw. lohnt. Mehr Infos findest Du in unserem beitrag über die Fallstricke und Möglichkeiten von AMP im E-Commerce.

• Funktionieren AMP auch mit Ads?

Ja, auch Ads können mit AMP realisiert werden. Ziel des AMP-Projects ist es, Anzeigen schneller zu machen, Unterbrechungen zu vermeiden und somit für eine bessere Nutzererfahrung sowie verbesserte Sichtbarkeit, Klickraten und Monetarisierung von Ads zu schaffen.

• Ist eine AMP-Seite Duplicate Content?

Nein, AMP-Seiten gelten nicht als duplicate Content, sofern sie korrekt implementiert werden. Zwar entsteht durch die Erstellung einer zusätzlichen AMP-Seite ein “doppelter Inhalt”, durch das Kennzeichnen mittels Canonical Tag kann aber auf die Ursprungsversion verwiesen werden, sodass Suchmaschinen den Zusammenhang der Seiten verstehen.

Durch den Verweis regulärer HTML-Seiten auf vorhandene AMP-Seiten per rel=“amphtml“ erhält Google ein weiteres Signal, dass die Verbindung der Seiten erklärt.

• Kann man eine mobile Webseite nur mit AMP realisieren?

Ja, theoretisch kann eine Website rein mit AMP realisiert werden. Da AMP-Seiten auf allen Endgeräten funktionieren, kann es ausreichen, nur eine AMP-Version zu erstellen, die mittels Responsive Webdesign auf jedem Display korrekt angezeigt wird. Allerdings sind AMP-Seiten in ihrer Funktionalität gegenüber herkömmlichen Seiten eingeschränkt, weshalb die Entscheidung für eine reine AMP-Website gründlich überdacht werden sollte.

• Kann man auf AMP-Seiten schema.org Markup verwenden?

Ja, auf AMP-Seiten kann schema.org Markup zur Auszeichnung von strukturierten Daten verwendet werden, dies wird auf der AMP-Projektseite empfohlen. Wie bei herkömmlichen Webseiten sollten auch für AMP-Seiten nur sinnvolle, dem tatsächlichen Inhalt entsprechende Properties verwendet werden.

Fazit: Schnellere Inhalte dank AMP

Accelerated Mobile Pages sind eine sinnvolle Lösung, um mobil optimierte Websites noch schneller zu machen.

Indem die Seiten schneller geladen werden, verbessert sich die Nutzererfahrung für Website Besucher, was sich in Form von geringeren Absprungraten und höheren Conversion Rates positiv auf den digitalen Erfolg Deiner Website auswirken kann.

Wie bei jeder Website Anpassung gibt es allerdings auch bei der Implementierung von AMP einiges zu beachten. Damit AMP-Seiten in der Google Suche erscheinen, musst Du Dich an die technischen Anforderungen und Googles Richtlinien halten und je nach Website Typ ist die Verwendung von AMP unterschiedlich wirkungsvoll.

Du solltest deshalb Aufwand und Nutzen einer Einführung von AMP auf Deiner Website sorgfältig abwägen, bevor Du loslegst. Wenn Du Dich für die Nutzung von AMP entscheidest, bietet Dir dieser Guide hoffentlich eine gute Grundlage bei der Umsetzung Deines Projekts.

Weitere Ressourcen zum Thema AMP:

• Richtlinien für AMP-Webseiten von Google
• AMP Project Guide zum Erstellen von AMP Pages
• AMP Start auf Github
• Template für eine AMP-Produktseite für Online-Shops auf Github

Checkliste für Deine AMP-Implementierung