Was ist AMP?
AMP (früher bekannt als Accelerated Mobile Pages) ist ein Open-Source-HTML-Framework, das dabei hilft, schnell ladende, für Mobilgeräte optimierte Webseiten zu erstellen.
Eine AMP-Seite ist also im Grunde eine abgespeckte Version einer normalen Webseite.
Und das kann so aussehen:
Google hat das Open-Source-Projekt ins Leben gerufen, um gegen Facebook Instant Articles und Apple News anzutreten.
Beides ermöglichte es den Verlagen, Inhalte zu erstellen, die schnell geladen und einfach zu konsumieren waren.
Google hat 2016 erstmals AMP-Seiten in den mobilen Suchergebnissen angezeigt. Und sie waren auf einen "Top Stories"-Bereich am Anfang der SERPs beschränkt.
Wie hier:
Es wurde ursprünglich für Zeitungsverlage entwickelt. Inzwischen sind aber alle Arten von Webseiten einbezogen worden.
Wie funktioniert AMP?
Der AMP-Rahmen besteht aus drei grundlegenden Komponenten:
- AMP HTML
- AMP-JavaScript
- AMP-Cache
AMP HTML
AMP-HTML ist HTML mit bestimmten Einschränkungen, um sicherzustellen, dass die Seiten schnell geladen werden. Sie entfernt oder verändert einige Elemente und Attribute, die Webseiten verlangsamen können.
Eine einfache HTML-Datei kann wie folgt aussehen:
Grundsätzlich müssen AMP-HTML-Dokumente:
- Beginne mit
<!doctype html>(um Informationen an den Browser zu senden, welche Art von Dokument zu erwarten ist) - Füge ein Top-Level
<html ⚡>oder<html amp>Tag ein (um anzuzeigen, dass es sich um eine AMP-HTML-Seite handelt) - Füge die Tags
<head>und<body>ein (um den Inhalt des Dokuments zu definieren, d.h. Überschriften, Absätze, Bilder, Hyperlinks, Tabellen usw.) - Füge einen
<Link rel="canonical" href="URL">ein (um die reguläre HTML-Version der Seite anzugeben oder um auf sich selbst zu verlinken, wenn keine reguläre Seite existiert) - Füge ein
<meta charset="utf-8">Tag ein (um die Zeichenkodierung anzugeben) - Füge ein
<meta name="viewport" content="width=device-width">Tag ein (um dem Browser Anweisungen zu geben, wie er die Abmessungen der Seite kontrollieren kann) - Einfügen eines
<Skript async src="https://cdn.ampproject.org/v0.js"><Skript>Tags (um Erweiterungen zur Basisbibliothek hinzuzufügen) - Füge den AMP-Boilerplate-Code
(head > style[amp-boilerplate]undnoscript > style[amp-boilerplate]) in den head-Tag ein
Weitere Details zu speziellen Tags, Attributen und Vorlagen findest du in der offiziellen AMP-HTML-Dokumentation.
AMP-JavaScript
JavaScript ist heikel, denn zu viel JS kann Webseiten langsam und unempfindlich machen.
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 Erfahrung des Lesers.
AMP-Cache
Der AMP-Cache ist ein proxy-basiertes Content Delivery Network (CDN), das AMP-Seiten abruft und bereitstellt, bevor sie von Nutzern angefordert werden.
Und das wirkt sich positiv auf die Geschwindigkeit der Website aus.
Warum?
Denn so kann deine Website mehrere Teile gleichzeitig von verschiedenen Servern laden. Außerdem können die Besucher deine Website von dem Server laden, der ihnen am nächsten ist.
Das bedeutet, dass deine Website für mehr Leute superschnell lädt.
Und es gibt derzeit zwei wichtige AMP-Cache-Anbieter:
Diese Plattformen zwischenspeichern deine Seiten, wenn du das AMP-Format verwendest.
Cache-Anbieter können deine AMP-Seite zum Beispiel über das <html ⚡> oder <html amp> Tag entdecken und ihren Inhalt zwischenspeichern.
Oder ein Publisher kann die Seite manuell zum AMP-Cache hinzufügen (gilt nur für den Google AMP-Cache).
Andere Plattformen können über ihre URL auf zwischengespeicherte AMP-Seiten zugreifen.
Wenn du z.B. /amp am Ende einer Nachricht auf The Guardian eingibst, siehst du die AMP-Version.
Wie hier:
Pro-Tipp: Wenn du nicht sicher bist, ob deine Website AMP-Seiten hat, kannst du das Site Audit Tool von Semrush nutzen.
Beginne, indem du deinen Domainnamen hinzufügst und auf "Prüfung starten" klickst.
Dann gehst du in deinem Dashboard auf den Reiter "Statistiken" und siehst eine Zeile mit der Aufschrift "AMP Links".
Wie hier:
Was sind die Vorteile und Grenzen von AMP-Seiten?
AMP kann zwar die Leistung deiner Seite und das Nutzererlebnis verbessern, hat aber auch einige Nachteile.
Werfen wir einen Blick auf die Vor- und Nachteile von AMP-Seiten:
AMP Vorteile
- Die Seite wird fast sofort geladen
- Seiten sind einfach zu erstellen
- Verbessert das Nutzererlebnis auf dem Handy
- Erlaubt individuelle Designs
- Mehrere Plattformen, darunter Google und Bing, unterstützen es
AMP-Einschränkungen
- Google zeigt das AMP-Symbol nicht mehr an, um AMP-Inhalte anzuzeigen
- Designelemente sind sehr eingeschränkt
- AMP-Seiten erlauben nur einen Werbe-Tag pro Seite
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 eigene Funktion).
Erstelle deine HTML AMP Seite
Basic 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 sehen kannst, ist der Inhalt des Textes einfach, aber es gibt zusätzlichen Code im Kopf.
Tipp: nutze den AMP-Snippet-"Spielplatz", um mit dem Code herumzuprobieren und zu üben.
Bilder hinzufügen
Wenn du ein Bild einfügen möchtest, musst du den regulären HTML-Tag durch das AMP-Äquivalent ersetzen.
In diesem Fall wird das <amp-img> Tag anstelle von <img> verwendet.
Um es auszuprobieren, kopiere den folgenden Code und füge ihn in den Body deiner Seite <>ein.
<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 Stil.
Das Styling muss über CSS-Eigenschaften erfolgen. AMP schreibt jedoch vor, dass alle CSS in einem benutzerdefinierten Tag, dem <style amp-custom> im <head> des Dokuments enthalten sein müssen.
Versuche zum Beispiel, den folgenden Stil zu deiner Seite hinzuzufügen:
<style amp-custom>
h1 {
margin: 1rem;
}
body {
background-color: green;
}
</style>JavaScript
AMP ermöglicht 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. Du kannst schnell Seiten erstellen, ohne JavaScript zu programmieren oder externe Bibliotheken zu verwenden.
Ausführlichere Informationen findest du im AMP-Leitfaden zur Verwendung von benutzerdefiniertem JavaScript und im AMP JS-Tutorial.
Überprüfen und Validieren
Eine gültige AMP-Seite bedeutet, dass sie strengen Richtlinien folgt, die sicherstellen, dass sie für das Caching geeignet ist und ein tolles Nutzererlebnis bietet.
Bevor du deine AMP-Seite validierst, solltest du diese Best Practices befolgen:
- Wenn du für Google optimierst, befolge deren Richtlinien für AMP-Seiten
- Verlinke deine AMP-Seiten mit ihren Kanonicals (Nicht-AMP-Version oder die AMP-Seite selbst)
- Verwende dasselbe strukturierte Datenmarkup auf den AMP- und kanonischen Seiten
- Überprüfe, ob die Strukturdaten funktionieren, indem du den Rich Results Test verwendest
- Überprüfe, ob deine robots.txt-Datei deine AMP-Seite nicht blockiert
- Befolge internationale SEO hreflang Richtlinien
Und wenn du zur Überprüfung bereit bist, kannst du mit dem AMP Test Tool sicherstellen, dass deine Seite alle Anforderungen erfüllt.
Eine ausführlichere Anleitung findest du im offiziellen AMP-Tutorial zur Validierung von AMP-Seiten.
Und wenn du neu in der Webentwicklung bist, nutze die AMP-Kurse oder das AMP-Foundations Codelab von Google.
Erstelle deine AMP-Seite mit einem CMS
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 für WP aussieht.
Nachdem du das Plugin in WordPress aktiviert hast, kannst du mit der Erstellung deiner Accelerated Mobile Pages beginnen.
Beginne damit, eine neue Seite oder einen neuen Beitrag hinzuzufügen.
Klicke dann auf "AMP Page Builder starten".
Du kannst vorgefertigte Layouts verwenden oder mit Drag-and-Drop-Elementen deine eigenen erstellen.
Klicke dann auf das Zahnradsymbol, um die Elemente deiner Seite zu bearbeiten.
Und speichere jedes Modul, während du es machst.
Sobald du die Seite veröffentlicht hast, siehst du die AMP-Version der Seite, indem du "amp" an das Ende der URL deiner Seite anhängst.
Überprüfe und verbessere deine AMP-Seiten
Eine der besten Möglichkeiten, deine AMP-Seiten zu überwachen und zu verbessern, ist ein regelmäßiges Audit deiner Website. So behältst du den Überblick über alle HTML-, Template-, Style- und Layout-Probleme.
Beginne damit, deine Website durch unser Site Audit Tool laufen zu lassen.
Tipp: Erstelle ein kostenloses Semrush-Konto und crawle bis zu 100 URLs einer beliebigen Domain, Subdomain oder eines Unterordners.
Wenn du deine Seite gecrawlt hast, gehe zum Reiter "Statistiken". Du siehst die Ausgaben in der Zeile "AMP Links".
Das Tool prüft auf über 40 der häufigsten Fehler im Zusammenhang mit AMP-Seiten. Und er sagt dir, wie du sie reparieren kannst.
Löse alle Probleme so schnell wie möglich. Sie können sich darauf auswirken, wie Suchmaschinen deine Inhalte den Suchenden anbieten.