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.
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.
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 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.
Beschäftige Dich mit den Vor- und Nachteilen, Aufwand und Nutzen speziell für Deine Website, sowie den technischen Voraussetzungen für AMP und entscheide basierend darauf, ob Du AMP für Deine Webinhalte nutzen möchtest. Die wichtigsten Punkte dazu schauen wir uns jetzt genauer an.
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.
AMP-Seiten lassen sich aus Standard-Webseiten entwickeln, indem ein paar Anpassungen gemacht werden:
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" />
<meta name="viewport" content="width=device-width,minimum-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<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>
<link rel="amphtml"
href="https://www.meineseite.de/url/zur/AMP-Version.html" />
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:
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:
Um Bilder korrekt auf AMP-Seiten anzuzeigen, musst Du den HTML-Code anpassen. Konkret werden die Verweise auf Bilder im Quellcode angepasst. Du ersetzt <img src> durch <amp-img src>.
Beispiel:
<amp-img src="tollegrafik.jpg" alt="Tolle aktuelle Grafik" height="400" width="800"></amp-img>
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:
| CMS Plugins | Kosten |
| AMP WordPress Plugin | kostenlos |
| AMP Typo3 Extension | kostenlos |
| AMP for Joomla | 69 Dollar |
| Magento Accelerated Mobile Pages | je nach Paket |
| Shopware AMP – Accelerated Mobile Pages | ab 24,95€/ Monat |
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
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.
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.
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.
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.
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.
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.
| Aufgabe | Erledigt? |
| Ist der Dokumententyp <!doctype html> am Anfang des HTML-Codes vorhanden? | |
| Wurde der <meta charset=“utf-8″> Zeichensatz verwendet? | |
| Ist ein <html ↯> oder <html amp> Tag vorhanden? | |
| Gibt es <head> und <body> Tags? | |
| Wurde das erweiterte Tag im <head>-Bereich genutzt? | |
| Ist ein Viewport Tag im <head> eingefügt? | |
| Ist die AMP JavaScript Library im <head> per <script> Tag eingefügt? | |
| Enthält die Seite den AMP CSS Boilerplate Code im <head>? | |
| Enthält die Seite einen Canonical Tag ( <link rel=“canonical“> )? | |
| Enthalten Nicht-AMP-Seiten rel=“amphtml“? Enhält die kanonische Seite rel=“amphtml“? | |
| Sind AMP-Inhalte für den Googlebot zugänglich (keine Blockierung über robots.txt oder noindex-Tags)? | |
| Befolgen strukturierte Daten der AMPs den Richtlinien für strukturierte Daten? |
Sind Deine Seiten für Mobile optimiert?
Veröffentlicht am 11.04.2022 von Editorial Team.
Die Mission des Ryte-Redaktionsteams: Unternehmen und Agenturen dabei zu helfen, die User Experience ihrer Websites zu verbessern. Dafür veröffentlicht das Team regelmäßig neue Leitfäden, Guides und Artikel zu Themen aus der digitalen Welt, von SEO über Barrierefreiheit bis hin zu Compliance und mehr.