Was ist AMP? Ein Leitfaden zu AMP-Seiten und SEO für Anfänger

Wir haben diesen Artikel aus dem Englischen ins Deutsche übertragen. Klicke hier, um den Originalartikel zu lesen. Wenn dir am Inhalt Probleme auffallen, schicke uns gerne eine Nachricht an report-osteam@semrush.com.

Was ist AMP?

AMP (früher bekannt als Accelerated Mobile Pages) ist ein Open-Source-HTML-Framework für die Erstellung schnell ladender, für Mobilgeräte optimierter Webseiten.

Eine AMP-Seite ist also im Grunde eine abgespeckte Version einer normalen Webseite.

Und das kann so aussehen:

Infografik normale mobile Seite vs. AMP-Seite

Das Open-Source-Projekt wurde von Google als Gegenangebot zu Facebook Instant Articles und Apple News ins Leben gerufen.

Beide ermöglichten es Inhalteanbietern, schnell ladende und leicht konsumierbare Seiten bereitzustellen.

2016 hat Google erstmals AMP-Seiten in den mobilen Suchergebnissen angezeigt. Seinerzeit waren sie auf einen "Schlagzeilen"-Bereich am Anfang der Suchergebnisseiten beschränkt.

Wie hier:

Ursprünglich wurde die Technologie für Nachrichtenmedien entwickelt. Inzwischen sind aber alle Arten von Webseiten einbezogen worden.

Wie funktioniert AMP?

Das AMP-Framework besteht aus drei grundlegenden Komponenten:

AMP-HTML
AMP-JavaScript
AMP-Cache

AMP-HTML

AMP-HTML ist HTML mit bestimmten Einschränkungen, die schnelle Ladezeiten sicherstellen sollen. Es verzichtet auf oder verändert einige Elemente und Attribute, die Webseiten verlangsamen können.

Eine einfache HTML-Datei kann wie folgt aussehen:

Ein einfaches Beispiel für eine HTML-Datei

Grundsätzlich müssen AMP-HTML-Dokumente folgende Bedingungen erfüllen:

Sie beginnen mit <!doctype html>, um den Browser zu informieren, welche Art von Dokument zu erwarten ist
Sie enthalten auf oberster Ebene ein <html ⚡>- oder <html amp>-Tag, um anzuzeigen, dass es sich um eine AMP-HTML-Seite handelt
Sie enthalten die Tags <head> und <body>, um den Inhalt des Dokuments zu definieren (d.h. Überschriften, Absätze, Bilder, Hyperlinks, Tabellen usw.)
Sie enthalten das Tag <link rel="canonical" href="URL">, um auf die reguläre HTML-Version der Seite oder auf sich selbst zu verweisen, wenn keine reguläre Seite vorhanden ist
Sie enthalten das Tag <meta charset="utf-8">, das die Zeichenkodierung angibt
Sie enthalten das Tag <meta name="viewport" content="width=device-width">, das dem Browser Anweisungen gibt, wie er die Abmessungen der Seite kontrollieren kann
Sie enthalten das Tag <script async src="https://cdn.ampproject.org/v0.js"><script>, das Erweiterungen zur Basisbibliothek hinzufügt
Sie enthalten den AMP-Boilerplate-Code (head > style[amp-boilerplate] und noscript > style[amp-boilerplate]) im head-Tag

Weitere Informationen zu speziellen Tags, Attributen und Vorlagen findest du in der offiziellen Dokumentation zu AMP-HTML.

AMP-JavaScript

JavaScript ist heikel, denn zu viel JS kann Webseiten verlangsamen und die Bedienbarkeit beeinträchtigen.

Die JavaScript-Bibliothek von AMP enthält jedoch Frameworks und Komponenten, mit denen du schnell Seiten erstellen kannst, ohne JS zu schreiben oder Bibliotheken von Drittanbietern zu importieren.

All das ist entscheidend für die Leserfreundlichkeit.

AMP-Cache

Der AMP-Cache ist ein proxy-basiertes Content Delivery Network (CDN), das AMP-Seiten abruft und aufbaut, bevor sie von Nutzern angefordert werden.

Und das bedeutet eine erhebliche Beschleunigung der Seitenladezeit.

Warum?

Weil deine Website auf diese Weise mehrere Teile gleichzeitig von verschiedenen Servern laden kann. Außerdem können Besucher deine Website von dem Server abrufen, der ihnen am nächsten ist.

Das bedeutet, dass deine Website für mehr Nutzer superschnell verfügbar ist.

Derzeit sind vor allem zwei AMP-Cache-Anbieter von Bedeutung:

Diese Plattformen legen deine Seiten in einem Zwischenspeicher ab, wenn du das AMP-Format verwendest.

Cache-Anbieter können deine AMP-Seite zum Beispiel über das <html ⚡>- oder das <html amp>-Tag entdecken und ihren Inhalt zwischenspeichern.

Oder ein Plattformbetreiber kann die Seite manuell zum AMP-Cache hinzufügen (gilt nur für den Google AMP-Cache).

Andere Plattformen können die URLs zwischengespeicherter AMP-Seiten verwenden, um auf sie zuzugreifen.

Wenn du z.B. am Ende der URL eines Nachrichtenbeitrags auf The Guardian /amp eingibst, erhältst du die AMP-Version.

Wie hier:

Pro-Tipp: Wenn du nicht sicher bist, ob deine Website AMP-Seiten bereitstellt, kannst du das Site Audit von Semrush nutzen.

Gib zunächst deinen Domainnamen ein und klicke auf "Audit starten".

Öffne dann auf deinem Dashboard den Reiter "Statistiken" und du siehst eine Zeile mit der Beschriftung "AMP-Links"

Wie hier:

Was sind die Vorteile und Einschränkungen von AMP-Seiten?

Während AMP die Leistung und Nutzerfreundlichkeit deiner Seite verbessern kann, hat es auch einige Nachteile.

Werfen wir einen Blick auf die Vor- und Nachteile von AMP-Seiten:

Vorteile von AMP-Seiten

Seiten werden fast sofort geladen
Seiten sind einfach zu erstellen
Verbessertes Nutzererlebnis auf mobilen Endgeräten
Individuelle Designs sind möglich
Unterstützung durch mehrere Plattformen, darunter Google und Bing

Einschränkungen von AMP-Seiten

Google zeigt das AMP-Symbol nicht mehr an, um AMP-Inhalte kenntlich zu machen
Die Nutzung von Designelementen ist sehr eingeschränkt
AMP-Seiten erlauben nur einen Werbe-Tag pro Seite

Infografik Vorteile und Beschränkungen von AMP-Seiten

Wie du AMP auf deiner Website einrichtest

Du kannst AMP-Seiten erstellen, indem du dem HTML-Markup folgst oder ein CMS verwendest (über ein Plugin oder eine selbst eingerichtete Funktion).

Deine HTML-AMP-Seite erstellen

Grundlegender Code

Hier ist das Markup einer einfachen AMP-Seite für den Anfang:

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hallo, AMPs</title>
<link rel="canonical" 
href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" 
content="width=device-width,minimum-scale=1,initial-scale=1">
<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{vom{visibility:hidden}zum{visibility:visible}}@-moz-keyframes 
-amp-start{vom{visibility:hidden}zum{visibility:visible}}@-ms-keyframes 
-amp-start{von{visibility:hidden}bis{visibility:visible}}@-o-keyframes 
-amp-start{von{visibility:hidden}bis{visibility:visible}}@keyframes 
-amp-start{von{visibility:hidden}bis{visibility:visible}}</style><noscript><style 
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-
animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">Hallo AMPHTML Welt!</h1>
</body>
</html>

Wie du siehst, ist der Inhalt im Body simpel, aber im Seitenkopf taucht zusätzlicher Code auf.

Tipp: Nutze den AMP-Snippet-"Spielplatz", um mit dem Code zu experimentieren und zu üben.

Bilder hinzufügen

Wenn du ein Bild einfügen möchtest, musst du das reguläre HTML-Tag durch das AMP-Äquivalent ersetzen.

In diesem Fall wird das Tag <amp-img> anstelle von <img> verwendet.

Kopiere den folgenden Code und füge ihn in den <body> deiner Seite ein, um es auszuprobieren.

<amp-img src="https://source.unsplash.com/random/600x400" width="600" 
height="400"></amp-img>

Stil hinzufügen

Der nächste Schritt ist das Hinzufügen von Stilen.

Das Styling muss über CSS-Eigenschaften erfolgen. AMP schreibt jedoch vor, dass sämtliches CSS in einem benutzerdefinierten Tag, dem <style amp-custom> im <head> des Dokuments enthalten sein muss.

Versuche zum Beispiel, den folgenden Stil zu deiner Seite hinzuzufügen:

<style amp-custom>
h1 {
margin: 1rem;
}
 body {
background-color: green;
}
</style>

JavaScript

AMP erlaubt benutzerdefiniertes JavaScript über die Komponente <amp-script>.

Damit kannst du dein eigenes JS so schreiben und ausführen, dass die Leistungsgarantien von AMP erhalten bleiben. Und schnell Seiten erstellen, ohne JavaScript zu programmieren oder externe Bibliotheken zu verwenden.

Ausführlichere Informationen dazu findest du im AMP-Leitfaden zur Verwendung von benutzerdefiniertem JavaScript und im AMP-JS-Tutorial.

Überprüfen und Validieren

Eine gültige AMP-Seite folgt strengen Richtlinien, die sicherstellen, dass sie für das Caching geeignet ist und ein hervorragendes Nutzererlebnis bietet.

Stelle sicher, dass du diese Best Practices befolgst, bevor du deine AMP-Seite validierst:

Wenn du für Google optimierst, befolge die Google-spezifischen Richtlinien für AMP-Seiten
Verlinke deine AMP-Seiten mit ihren Canonicals (die jeweilige Nicht-AMP-Version oder die AMP-Seite selbst)
Verwende das gleiche Markup für strukturierte Daten auf den AMP- und den Canonical-Seiten
Überprüfe mit dem Rich Results Test, ob die strukturierten Daten funktionieren
Stelle sicher, dass deine robots.txt-Datei deine AMP-Seite nicht blockiert
Befolge die hreflang-Richtlinien für internationale SEO

Wenn du zur Überprüfung bereit bist, kannst du mit dem AMP Test Tool sicherstellen, dass deine Seite alle Anforderungen erfüllt.

Eine ausführliche Anleitung findest du im offiziellen AMP-Tutorial zur Validierung von AMP-Seiten.

Wenn du neu in der Webentwicklung bist, nutze die AMP-Kurse oder das AMP Foundations Codelab von Google.

Deine AMP-Seite mit einem CMS erstellen

Wenn du deine Inhalte über ein CMS verwaltest, kannst du Drupal, Joomla oder WordPress verwenden.

Sehen wir uns zum Beispiel an, wie das mit AMP for WP aussieht.

Nachdem du das Plugin in WordPress aktiviert hast, kannst du mit der Erstellung deiner Accelerated Mobile Pages beginnen.

Erstelle zunächst eine neue Seite oder einen neuen Beitrag.

Klicke dann auf "AMP Page Builder starten".

Schaltfläche "AMP Page Builder starten" hervorgehoben

Du kannst vorgefertigte Layouts verwenden oder mit Drag-and-Drop-Elementen deine eigenen erstellen.

Drag-and-Drop-Elemente im AMP Page Builder

Klicke dann auf das Zahnradsymbol, um die Elemente deiner Seite zu bearbeiten.

Speichere dabei jedes Modul ab.

Sobald du die Seite veröffentlicht hast, kannst du ihre AMP-Version aufrufen, indem du am Ende der URL "amp" hinzufügst.

Deine AMP-Seiten überwachen und verbessern

Eine der besten Möglichkeiten, deine AMP-Seiten zu überwachen und zu verbessern, besteht darin, regelmäßige Audits deiner Website durchzuführen. So behältst du den Überblick über alle Probleme mit HTML, Templates, Styles und Layout.

Prüfe deine Website für den Anfang mit unserem Site Audit.

Tipp: Erstelle ein kostenloses Semrush-Konto und crawle bis zu 100 URLs einer beliebigen Domain, Subdomain oder eines Unterordners.