AMP erstellen: Der beste Weg zu mobil-optimierten Webseiten?

1. Was sind AMPs überhaupt?
2. Sind AMPs und Responsive Design dasselbe?
3. Wie funktionieren AMPs?
4. Vorteile von AMPs
5. Nachteile von AMPs
6. Wie du eine AMP erstellst
7. Beispiel-Code für eine AMP
8. Fazit

Als Websitebetreiber*in kennst du dieses Problem vielleicht: Eine langsame Ladezeit auf mobilen Geräten kann dazu führen, dass Besucher abspringen und die Konversionsrate sinkt. Hier kommen AMPs ins Spiel. Die Technologie verspricht schnellere Ladezeiten und bessere Sichtbarkeit in den Suchergebnissen von Google. Doch wie funktioniert eine AMP und wie kann man sie in die eigene Website integrieren? In diesem Artikel erfährst du alles, was du wissen musst, um das volle Potenzial von AMPs auszuschöpfen.

Was sind AMPs überhaupt?

Accelerated Mobile Pages (AMPs) sind Derivate von HTML, die von Google entwickelt wurden, um eine schnellere und benutzerfreundlichere mobile Web-Erfahrung zu ermöglichen. Oder anders ausgedrückt: AMPs sind eine abgespeckte Version deiner Webseiten, die darauf ausgelegt sind, auf mobilen Geräten schnell und reibungslos zu funktionieren. Technisch basieren sie auf einer Mischung aus HTML, JavaScript und einer optimierten Version des CSS. Der Zweck solcher Seiten ist simpel: AMPs reduzieren die Ladezeit, indem sie unnötigen Code und andere Ressourcen entfernen. 

Für dich sind AMPs vor allem deshalb wichtig, da immer mehr Nutzer*innen durch das Internet von mobilen Geräten aus surfen. Eine langsame Ladezeit oder eine schlechte Benutzererfahrung auf mobilen Geräten kann allerdings dazu führen, dass deine User*innen deine Seite verlassen und zur Konkurrenz wechseln. Eine AMP, die für einen schnelleren Seitenaufbau sorgt, zahlt folglich im Idealfall auf das Engagement deiner Kund*innen und positives Nutzererlebnis ein. 

Sind AMPs und Responsive Design dasselbe?

Kurze Antwort: Nein, AMPs und die responsive Gestaltung einer Website sind zwei unterschiedliche Dinge. Responsives Design bezieht sich auf eine Technik, bei der eine Website so gestaltet wird, dass sie auf verschiedenen Geräten und Bildschirmgrößen gut aussieht und funktioniert. Die Website passt sich dynamisch an die Größe des Bildschirms an und skaliert den Inhalt entsprechend. Die Inhalte und technischen Möglichkeiten sind aber identisch mit denen deiner regulären Website. 

AMP hingegen bezeichnet die spezielle Version deiner Website, die technisch auf einem anderen Grundgerüst fußt. Dazu wird eine andere Form von HTML-Code genutzt. Was das im Einzelnen bedeutet, erfährst du im nächsten Abschnitt. Obwohl beide Technologien also darauf abzielen, die Benutzerfreundlichkeit auf mobilen Geräten zu verbessern, handelt es sich bei ihnen um unterschiedliche Konzepte und Techniken.

Wie funktionieren AMPs?

In technischer Hinsicht basieren AMPs auf einer reduzierten Version von HTML (AMP-HTML) und CSS, die speziell für mobile Endgeräte optimiert sind. Was das genau bedeutet, und welche Möglichkeiten und Einschränkungen damit einhergehen, schauen wir uns im Folgenden an: 

• AMP-HTML: AMP-HTML ist eine reduzierte Version von HTML. Diese Form der Auszeichnungssprache enthält spezielle AMP-Tags, die die Struktur und das Design der Seite definieren. AMP-HTML ist auf das Wesentliche reduziert und enthält keine unnötigen Elemente, die die Ladezeit verlangsamen könnten. Dadurch werden die Seiten schnell und effizient auf mobilen Endgeräten geladen. Allerdings hast du durch den reduzierten Funktionsumfang auch weniger Möglichkeiten bei der Gestaltung deiner Website. 

• CSS: Auch die Verwendung von CSS ist bei AMPs eingeschränkt. So kann nur eine einzige, zentrale CSS-Formatvorlage genutzt werden. Auch Inline-CSS kann auf deinen AMPs Anwendung finden. Die Verwendung von externen CSS-Formatvorlagen ist indes nicht möglich. 

Accelerated Mobile Pages funktionieren in technischer Hinsicht also, indem sie eine vereinfachte Version der HTML-Codebasis verwenden, die normalerweise auf deiner Webseite verwendet wird. Diese reduzierte Version wird auf einer speziellen AMP-Cache-Serverinfrastruktur gehostet, die von Google bereitgestellt wird. Wenn ein Benutzer eine AMP-Seite besucht, wird die Seite direkt von der Serverinfrastruktur aus Google geladen, anstatt vom ursprünglichen Server der Webseite. Dies reduziert die Ladezeit erheblich, da die Seite bereits auf dem Cache-Server gespeichert ist. 

Vorteile von AMPs

Sowohl für dich als Website-Betreiber*in als auch für deine Nutzer*innen bieten AMPs eine Reihe von Vorteilen:

Vorteile von AMPs für deine Nutzer*innen:

• Reduzierte Ladezeiten: AMPs sind speziell für eine kurze Ladezeit auf mobilen Endgeräten optimiert. Dadurch können deine User*innen Inhalte schneller und ohne lange Wartezeiten aufrufen.

• Bessere Nutzererfahrung: Durch die schnelle Ladezeit und das optimierte Design bieten AMPs eine bessere Nutzererfahrung auf mobilen Endgeräten. Nutzer*innen können deine Inhalte einfacher und schneller konsumieren, was zu einer höheren Zufriedenheit führt.

• Weniger Datenverbrauch: Durch die Reduzierung von unnötigen Elementen und eine effiziente Datenkompression wird der Datenverbrauch bei der Nutzung von AMPs reduziert. Das ist besonders für Leser*innen mit begrenztem Datenvolumen von Vorteil.

Vorteile von AMPs für Websitebetreiber*innen:

• Schnellere Ladezeiten: Kurze Ladezeiten sind inzwischen ein wichtiger Rankingfaktor bei Google. Das bedeutet, dass du dank AMPs auch die Chance hast, besserer Positionen mit deiner Seite zu erzielen.  

• Mehr Traffic: Ein besseres Ranking bedeutet in der Regel auch mehr Klicks durch deine Nutzer*innen. Und mehr Traffic ist schließlich nie verkehrt, oder? 

• Weitere positive Effekte für dein Ranking: Eine Zeit lang wurden AMPs von Google bevorzugt behandelt, sodass man mit ihnen schnell und einfach gute Rankings erzielen konnte. Diese Zeiten sind seit einem Core Update 2021 jedoch vorbei. Doch das heißt nicht, dass sich AMPs nicht positiv auf die Positionierung deiner Seiten in der SERPs auswirken können. Sobald nämlich Google die positiven Nutzersignale, die durch die schnellen Ladezeiten entstehen, registriert, kann sich das immer noch positiv auf dein Google Ranking auswirken. 

Nachteile von AMPs

Wie so oft im Leben gilt: Wo viel Licht ist, gibt es leider auch Schatten. Obwohl AMPs viele Vorteile für Nutzer und Websitebetreiber bieten, haben sie nämlich auch einige Nachteile, die von dir berücksichtigt werden sollten:

1. Einschränkungen bei der Gestaltung: AMPs setzen strikte Regeln für die Gestaltung von Seiten und die Verwendung von CSS- und JavaScript-Elementen. Diese Einschränkungen können dazu führen, dass AMP-Seiten weniger kreativ und weniger funktional sind als deine herkömmlichen Webseiten.

2. Einschränkungen bei der Benutzerinteraktion: AMP-Seiten sind aufgrund der Einschränkungen weniger interaktiv als deine herkömmlichen Webseiten. Das kann sich auf die Benutzererfahrung auswirken und dazu führen, dass Besucher der Seite weniger interagieren oder sich weniger engagieren. Im schlechtesten Fall erhöht sich sogar deine Bounce Rate oder es verringert sich die Verweildauer.

Wie du eine AMP erstellst

Wenn du eine AMP erstellen möchtest, gibt es einige Voraussetzungen, die du beachten solltest. Die folgende Schritt-für-Schritt-Anleitung zeigt dir, wie es geht:

Schritt 1: Voraussetzungen für die Erstellung von AMPs

Bevor du mit der Erstellung von AMPs beginnst, solltest du sicherstellen, dass du die folgenden Voraussetzungen erfüllst:

• Du benötigst eine bestehende Website, für die du AMPs erstellen möchtest.

• Du solltest zumindest grundlegende Kenntnisse in HTML und CSS haben.

• Du benötigst einen AMP-Validator, um sicherzustellen, dass deine AMPs den AMP-Spezifikationen entsprechen. Tun sie das nicht, werden sie nämlich später nicht in den AMP Cache von Google aufgenommen. 

Schritt 2: Erstellung deiner AMPs

Um AMPs zu erstellen, kannst du entweder eine vorhandene Seite deiner Website in eine AMP-Seite umwandeln oder eine neue AMP-Seite erstellen. Wenn du eine vorhandene Seite in eine AMP-Seite umwandeln möchtest, solltest du die folgenden Schritte beachten:

• Kopiere den Inhalt der vorhandenen Seite in eine neue HTML-Datei

• Verwende die passenden AMP-HTML-Tags, um die Struktur der Seite zu definieren.

• Füge AMP-Components hinzu, um zusätzliche Funktionalitäten zu implementieren.

Wenn du eine neue AMP-Seite erstellen möchtest, solltest du das AMP-Boilerplate als Ausgangspunkt verwenden. Das AMP-Boilerplate enthält alle notwendigen Dateien und Einstellungen, um diese Art Seiten zu erstellen. 

Schritt 3: AMP-Validierung

Nachdem du deine AMP-Seite erstellt hast, solltest du diese unbedingt auf ihre Konformität mit den AMP-Spezifikationen überprüfen. Hierfür kannst du den AMP-Validator von Google verwenden. Gib einfach die URL deiner AMP-Seite ein und starte den Test. Der Validator prüft deine AMP-Seite auf Fehler und gibt dir gegebenenfalls Hinweise, wie du diese beheben kannst.

Schritt 4: Veröffentlichung von AMPs

Nachdem deine Seite erfolgreich validiert wurde, kannst du sie veröffentlichen. Du solltest dann sicherstellen, dass deine AMP-Seite von deiner Website aus erreichbar ist und dass sie mit dem AMP-Label versehen ist. Dieses Label wird in den Suchergebnissen angezeigt und signalisiert deinen Nutzer*innen, dass es sich um eine AMP-Seite handelt.

Beispiel-Code für eine AMP

Der folgende Screenshot zeigt dir, wie der HTML-Code für eine einfache AMP-Seite aussehen kann:

Dieser Code enthält einige wichtige Merkmale, die für eine AMP-Seite erforderlich sind, einschließlich:

• Das ⚡-Symbol in der html-Tag-Definition, das anzeigt, dass es sich um eine AMP-Seite handelt.

• Die Verwendung des viewport-Meta-Tags, um die Anzeige auf mobilen Geräten zu optimieren.

• Der Link zur AMP-JavaScript-Bibliothek, die für die Funktionalität der AMP-Elemente erforderlich ist.

• Der amp-img-Tag, um ein Bild auf der Seite anzuzeigen.

Fazit

Ob AMPs für deine Zwecke geeignet sind, hängt vor allem davon ab, was du dir von ihnen erhoffst. Fakt ist jedoch: Eine Vorzugsbehandlung beim Ranking erhalten diese Art von Websites von Google seit 2021 nicht mehr. Die sonstigen Vorteile – kurze Ladezeiten und dadurch gegebenenfalls bessere Bewertung durch Google – stehen aber nach wie vor. Die Nachteile aber ebenso: Ein reduzierter Funktionsumfang und Einschränkungen bei den Gestaltungsmöglichkeiten können sich negativ auf die Nutzererfahrung auswirken. Insofern solltest du sorgsam abwägen, ob eine kürzere Ladezeit das Risiko einer erhöhten Bounce Rate und kürzerer Verweildauer wert ist.