AMP (Accelerated Mobile Pages) ist ein Open-Source-Framework, das ein schnelles Laden der Inhalte deiner Website in Browsern und Apps auf Mobilgeräten ermöglicht.
AMP steht für neue Websites mit Plugins über das AMP-Plugin zur Verfügung. Bei WordPress.com-Websites, die Plugins enthalten und vor dem 13. Juni 2022 erstellt wurden, wurde das AMP-Plugin vorinstalliert.
In diesem Ratgeber
AMP ermöglicht die Erstellung von Websites und Anzeigen, die beinahe augenblicklich laden und Besuchern so ein reibungsloses und ansprechenderes Erlebnis auf Mobil- und Desktopgeräten ermöglichen.
Der wesentliche Vorteil von AMP ist das schnelle Laden auf Mobilgeräten. Alle Blogbeiträge deiner Website (Startseite, Archive und Seiten werden aktuell nicht unterstützt) verfügen über dynamisch generierte AMP-kompatible Versionen. Die Suchergebnisse deiner Website in Google werden auf Mobilgeräten außerdem mit dem AMP-Badge gekennzeichnet.
Auf der AMP-Website findest du detailliertere Informationen, wie dies funktioniert.
Wenn du in Google potenziellen Besuchern lieber eine Version deiner Website ohne AMP anzeigen möchtest, kannst du das AMP-Plugin über Plugins → Installierte Plugins deaktivieren.
📌
AMP ist nur für öffentliche Websites verfügbar, die Crawler nicht blockieren. Falls das AMP-Feld nicht angezeigt wird, überprüfe die Datenschutz-Einstellungen deiner Website und setze diese auf „öffentlich“.
Du kannst unter Design → Anpassen → AMP → Design das Aussehen der AMP-Version in deinen Beiträgen anpassen. Da die AMP-Spezifikation ein minimalistisches Seitendesign erfordert, gibt es Optionen zum Ändern der Header-Textfarbe, des Header-Hintergrunds, der Linkfarbe und des Hintergrundfarbschemas.
Individuelles CSS wird auf die AMP-Version von Beiträgen nicht angewendet.
Um das AMP-Plugin nach der Installation und Aktivierung zu verwenden, klickst du auf deinem Dashboard auf AMP.
In den AMP-Einstellungen siehst du drei Template-Modi:
Standard: In diesem Modus aktiviert das Plugin AMP als einzige Version deiner Website sowohl auf Desktop- als auch auf Mobilgeräten. Für die gesamte Website werden gültige AMP-Seiten erstellt (AMP hat hier Vorrang).
In diesem Modus wird keiner URL eine ?amp-Abfrage hinzugefügt.
Übergangsmodus: Sofern dies für dein Theme verfügbar ist, bestimmen die Templates und Stile des Themes, wie Inhalte in der AMP- oder Desktop-Version angezeigt werden. Dies sorgt dafür, dass deine Inhalte in der AMP- und der Desktop-Version ein ähnliches Erscheinungsbild erhalten.
In diesem Modus wird URLs für AMP-Inhalte die ?amp-Abfrage hinzugefügt.
In diesem Fall werden AMP-Seiten auf Mobilgeräten gewöhnlich nur von bestimmten Quellen, wie zum Beispiel in Google-Suchen und auf Twitter, oder durch das manuelle Hinzufügen der ?amp-Abfrage angezeigt.
Reader: AMP-Inhalte werden über einfache Templates (mit der blauen Leiste oben) bereitgestellt, die unabhängig von den Templates deines aktiven Themes sind. Beim Reader-Modus ist die Wahrscheinlichkeit geringer, dass die Funktionalität von Drittanbieter-Themes oder -Plugins beeinträchtigt wird.
In diesem Modus enden die URLS bei AMP-Beiträgen normalerweise mit /amp/, die bei Seiten dagegen mit ?amp.
Für den Zugriff auf AMP-Statistiken muss Google Analytics für deine Website eingerichtet sein. Hier erfährst du, wie du Google Analytics einrichtest.
- Klicke in deinem Google Analytics-Konto auf „Admin → Property-Einstellungen“ und rufe die Property-ID ab, die in etwa so aussieht: UA-XXXXX-Y.
- Ersetze im folgenden Skript UA-XXXXX-Y durch deine Property-ID.
{
„vars“: {
„Konto“: „UA-XXXXX-Y“
},
„triggers“: {
„trackPageview“: {
„on“: „visible“,“
„request“: „pageview“
}
}
}
3. Kopiere das Skript und navigiere auf deiner Website zu „AMP → Statistiken“. Gib in das Eingabefeld googleanalytics ein.
Füge den Code in das JSON-Konfigurationsfeld ein.
4. Klicke auf „Speichern“.
Es kann sein, dass du eine Fehlermeldung von Google bezüglich AMP auf deiner Website erhältst.
Der Begriff „Fehler“ kann ein wenig irreführend sein, da dies impliziert, dass ein Problem behoben werden muss, was häufig nicht der Fall ist. Die gefundenen „Fehler“ sind mit AMP nicht kompatible Elemente, die von der Seitenanzeige entfernt wurden (dies ist vom AMP-Plugin im Standard- und Übergangsmodus zu erwarten). Deine Theme-Dateien werden nicht bearbeitet. Dabei handelt es sich meistens (wenn nicht sogar immer) um ein Übermaß an CSS (CSS über der 50-KB-Grenze) oder JavaScript. Der Fehlerindex listet alle diese Elemente für die gesamte Website auf.
Im Allgemeinen kannst du diese Fehler ignorieren, sofern auf der Seite alles korrekt dargestellt wird und funktioniert.
Stilfehler können auftreten, wenn das für einen Teil deiner Seite erforderliche CSS entfernt wird, da es die 50-KB-Grenze überschreitet.
Optionen zum Beheben des Problems:
- Suche in den Fehlern nach CSS, das du komplett von der Website entfernen kannst (zum Beispiel von Plugins oder Jetpack-Modulen, die deaktiviert werden können).
- Wenn die Seite über viel Inline-CSS vom Block-Editor oder einem Seiten-Builder verfügt, könntest du weniger Elemente auf einer Seite platzieren (unterteile sie in untergeordnete Seiten oder paginiere die Seite).
- Behalte das CSS: Dies führt dazu, dass jede Seite mit diesem CSS keine gültige AMP-Seite ist und stattdessen in der Desktop-Version angezeigt wird.
- Deaktiviere AMP auf einzelnen Seiten, indem du die Seite bearbeitest und in den Einstellungen für Dokumentenstatus und Sichtbarkeit den Umschalter für „AMP aktivieren“ betätigst..
Beispielsweise wird das Twitter-Widget nicht angezeigt, das Facebook-Widget zeigt keine Beiträge an, die Diashow läuft nicht, das mobile Menü oder Dropdown-Menüs funktionieren nicht.
Diese Art von Problemen tritt auf, weil das JavaScript, das diese Elemente zum Laden oder für Animationen benötigen, entfernt wurde.
Da der Begriff „Fehler“ irreführend ist, bedeutet dies in der Regel Folgendes:
- Normalerweise brauchst du gar nichts zu tun.
- Wenn Stilfehler auf deiner Website auftreten oder eine auf JavaScript angewiesene Funktion nicht funktioniert, könnte es nötig sein, dies zu beheben.
Das AMP-Plugin entfernt JavaScript und HTML, das nicht mit seinen Spezifikationen kompatibel ist, von den AMP-Versionen der Seiten (bei denen am Ende einer Seiten-URL /?amp hinzugefügt ist).
Auch CSS, das die 50-KB-Grenze überschreitet (nachdem das Plugin versucht hat, es zu komprimieren), wird entfernt.
Trotz entferntem JavaScript kann die AMP-Version akzeptabel sein, solange dein Theme bzw. deine Plugins auch ohne dieses CSS oder JavaScript funktionieren.
Du musst selbst entscheiden, ob du die AMP-Version deiner Website auch ohne diese Skripte akzeptabel findest. Wenn die Entfernung der meisten Skripte nicht akzeptabel ist, hast du im Prinzip drei Möglichkeiten:
- Wechsle zu einem AMP-kompatiblen Theme/Plugin.
- Nutze ein untergeordnetes Theme oder individuelle Plugins, bei denen kein ungültiges Markup zugunsten von AMP-Komponenten ausgegeben wird.
- Aktiviere den Reader-Modus. Wie oben werden AMP-Seiten nicht genauso wie deine übrige Website aussehen, aber du hast eine vollständig kompatible Version deiner Website.
- Du kannst AMP auch auf einzelnen Seiten deaktivieren, indem du die Seite bearbeitest und in den Einstellungen für Dokumentenstatus und Sichtbarkeit den Umschalter für „AMP aktivieren“ betätigst. Dies führt dazu, das die Seite nicht AMP-kompatibel ist.
Support 