Wie Sie eine AMP-Seite für eine schnellere mobile Website erstellen

Was ist AMP und warum ist es wichtig

AMP (Accelerated Mobile Pages) ist ein Open-Source-Framework, das Google 2015 mit dem Ziel entwickelt hat, das Laden von Webseiten auf Mobilgeräten dramatisch zu beschleunigen. In einer Welt, in der über 60 % des Internetverkehrs von Mobiltelefonen kommt, beeinflusst die Ladegeschwindigkeit der Website direkt das Nutzererlebnis, die Absprungrate und die Position in den Suchergebnissen. Studien zeigen, dass 53 % der mobilen Nutzer eine Website verlassen, die länger als 3 Sekunden zum Laden braucht. AMP löst dieses Problem, indem es HTML, CSS und JavaScript so einschränkt, dass ein außerordentlich schnelles Rendern der Seite garantiert wird.

AMP-Seiten laden typischerweise in weniger als einer Sekunde, was 4–5 Mal schneller ist als eine durchschnittliche mobile Seite. Google beschleunigt AMP-Inhalte zusätzlich, indem es sie über das AMP-Cache-System auf seinen Servern zwischenspeichert, sodass die Seite vom nächstgelegenen Google-Standort an den Nutzer geliefert wird. Dies führt zu nahezu sofortigem Laden, wenn der Nutzer auf ein AMP-Ergebnis in der Google-Suche klickt.

Wie AMP funktioniert

Drei AMP-Komponenten

AMP besteht aus drei Schlüsselkomponenten, die zusammen schnelles Laden gewährleisten. Die erste ist AMP HTML – eine erweiterte HTML-Version mit angepassten Tags, die standardmäßige HTML-Elemente durch optimierte Versionen für Bilder, Videos und Karussell-Komponenten ersetzen. Die zweite Komponente ist die AMP-JS-Bibliothek, die Ressourcen verwaltet, externe Ressourcen asynchron lädt und sicherstellt, dass nichts das Rendern der Seite blockiert. Die dritte ist der AMP-Cache – ein proxy-basiertes CDN, das AMP-Seiten automatisch abruft, validiert und für schnelle Auslieferung zwischenspeichert.

Einschränkungen von AMP

Um außergewöhnliche Geschwindigkeit zu erreichen, erlegt AMP strikte Einschränkungen auf. Die Verwendung von eigenem JavaScript ist nicht erlaubt – Sie können nur AMP-Komponenten und ein eingeschränktes amp-script-Element verwenden. CSS muss inline sein und auf 75 KB begrenzt. Alle externen Ressourcen (Bilder, Werbung, Videos) müssen ihre Größe im Voraus deklarieren, damit der Browser das Layout berechnen kann, bevor die Ressourcen geladen werden. Formulare und interaktive Elemente verwenden spezielle AMP-Komponenten. Diese Einschränkungen mögen streng erscheinen, aber genau sie garantieren ein konsistent schnelles Erlebnis.

Struktur einer AMP-Seite

Grundlegendes AMP-HTML-Template

Jede AMP-Seite beginnt mit einer spezifischen Struktur. Der Doctype ist Standard-HTML5, aber das html-Tag muss das Attribut amp oder ein Blitz-Emoji enthalten. Im head-Bereich sind das charset-Meta-Tag, das viewport-Meta-Tag, ein kanonischer Link zur Nicht-AMP-Version der Seite, das AMP-Boilerplate-CSS, das standardisierte Stile zur Verhinderung von Flash of Unstyled Content darstellt, und eine Referenz auf die AMP-JavaScript-Bibliothek obligatorisch. Der Seitenkörper verwendet AMP-spezifische Tags anstelle von Standard-HTML-Elementen für Medieninhalte.

AMP-Komponenten

AMP bietet ein reiches Ökosystem von Komponenten für verschiedene Anforderungen. Für Bilder verwenden Sie amp-img mit obligatorischen width- und height-Attributen. Für Videoinhalte gibt es amp-video und amp-youtube. Interaktive Elemente umfassen amp-carousel für Slider, amp-accordion für ausklappbare Bereiche, amp-lightbox für modale Anzeigen und amp-form für Formulare. Für Analytik verwenden Sie amp-analytics, das Google Analytics, Facebook Pixel und andere Plattformen unterstützt. Jede Komponente wird asynchron geladen und blockiert nicht das Rendern.

AMP-Implementierung auf einer WordPress-Website

Offizielles AMP-Plugin

Der einfachste Weg, AMP auf einer WordPress-Website hinzuzufügen, ist die Verwendung des offiziellen AMP-Plugins. Dieses Plugin bietet drei Betriebsmodi: Der Standard Mode wandelt die gesamte Website in AMP um, der Transitional Mode erstellt AMP-Versionen aller Seiten zusätzlich zu den Originalen, und der Reader Mode erstellt AMP-Versionen nur für Beiträge. Für die meisten Websites empfehlen wir den Transitional Mode, da er eine schrittweise Migration ermöglicht. Nach der Installation generiert das Plugin automatisch AMP-Versionen Ihrer Seiten und fügt die erforderlichen Meta-Tags zur Verknüpfung mit den Originalseiten hinzu.

AMP for WP-Plugin

AMP for WP ist ein alternatives Plugin mit mehr Optionen zur Designanpassung. Es bietet über 10 integrierte Themes für AMP-Seiten, WooCommerce-Unterstützung, Integration mit beliebten SEO-Plugins wie Yoast und Rank Math sowie erweiterte Werbeoptionen. Die kostenlose Version deckt die Grundbedürfnisse ab, während die Pro-Version benutzerdefinierte AMP-Templates, Contact-Form-7-Unterstützung und erweiterte Analytik hinzufügt. Wenn Ihnen die visuelle Identität von AMP-Seiten wichtig ist, bietet dieses Plugin mehr Flexibilität im Vergleich zum offiziellen Plugin.

Manuelle Konfiguration

Für volle Kontrolle über die AMP-Implementierung können Sie benutzerdefinierte AMP-Templates in Ihrem WordPress-Theme erstellen. Erstellen Sie spezielle Template-Dateien, die gültiges AMP-HTML generieren. Verwenden Sie WordPress-Hooks zum Hinzufügen kanonischer Links zwischen AMP- und Nicht-AMP-Versionen. Dieser Ansatz erfordert mehr technisches Wissen, ermöglicht aber die volle Kontrolle über das Aussehen und Verhalten von AMP-Seiten. Wir empfehlen ihn nur fortgeschrittenen Entwicklern mit spezifischen Anforderungen, die Plugins nicht erfüllen können.

Testen und Validierung von AMP-Seiten

AMP Validator

Google bietet mehrere Tools zur Validierung von AMP-Seiten an. Der AMP Validator unter validator.ampproject.org ist ein Online-Tool, in das Sie eine URL oder HTML-Code eingeben und detaillierte Fehlerinformationen erhalten. Chrome DevTools verfügt über integrierte AMP-Validierung – fügen Sie #development=1 am Ende einer AMP-URL hinzu und öffnen Sie die Konsole, um Fehler anzuzeigen. Das AMP Test Tool in der Google Search Console zeigt, wie Google Ihre AMP-Seiten sieht, und identifiziert Probleme, die die Indexierung verhindern können. Validieren Sie jede AMP-Seite unbedingt vor der Veröffentlichung, denn ungültige AMP-Seiten werden weder zwischengespeichert noch mit dem AMP-Symbol in der Suche angezeigt.

Häufige Fehler

Die häufigsten Fehler bei der AMP-Implementierung umfassen die Verwendung nicht erlaubter HTML-Tags anstelle von AMP-Äquivalenten, CSS, das das 75-KB-Limit überschreitet, Inline-Stile mit der important-Deklaration, die in AMP nicht erlaubt ist, nicht erlaubtes JavaScript im Seitenkörper, Bilder ohne deklarierte Abmessungen und Formulare ohne AMP-Action-Endpoint. Der Validator weist klar auf jeden Fehler mit Beschreibung und Codezeile hin, was die Korrektur erleichtert.

AMP und SEO

Einfluss auf das Ranking

AMP an sich ist kein direkter Ranking-Faktor in der Google-Suche. AMP verbessert SEO jedoch indirekt, weil es die Ladezeit drastisch reduziert, was ein Ranking-Faktor ist, die Core-Web-Vitals-Metrik verbessert, die Absprungrate reduziert, weil Nutzer nicht aufs Laden warten, und das Nutzerengagement erhöht, was positive Signale an Google sendet. AMP-Seiten wurden früher in einem speziellen Karussell oben in der mobilen Suche angezeigt, aber seit 2021 können auch Nicht-AMP-Seiten in diesem Bereich angezeigt werden. Dennoch haben AMP-Seiten weiterhin einen Geschwindigkeitsvorteil bei der Auslieferung dank des AMP-Caches.

Kanonische Links

Die ordnungsgemäße Platzierung kanonischer Links ist entscheidend für AMP-SEO. Jede AMP-Seite muss einen link rel canonical haben, der auf die ursprüngliche Nicht-AMP-Version der Seite zeigt. Die Originalseite muss einen link rel amphtml haben, der auf die AMP-Version zeigt. Wenn Sie den Standard Mode verwenden, bei dem die gesamte Website AMP ist, zeigt der kanonische Link auf sich selbst. Dies stellt sicher, dass Google beide Seitenversionen ohne Probleme mit doppeltem Inhalt korrekt indexiert und verlinkt.

Alternative zu AMP

AMP ist nicht die einzige Methode, um schnelle mobile Seiten zu erreichen. Moderne Weboptimierung mit Fokus auf Core Web Vitals kann ähnliche Ergebnisse ohne AMP-Einschränkungen erzielen. Lazy Loading von Bildern und Videos, effizientes CSS- und JS-Management, die Verwendung eines CDN, Serveroptimierung und moderne Bilder in WebP- und AVIF-Formaten können die Website dramatisch beschleunigen. Next.js, Gatsby und ähnliche Frameworks generieren außerordentlich schnelle Seiten ohne AMP. Ziehen Sie AMP in Betracht, wenn Ihre Priorität die Google-News-Sichtbarkeit ist oder wenn Sie eine Website mit überwiegend statischem Inhalt haben. Für komplexe Webanwendungen mit viel Interaktivität ist die Standardoptimierung die bessere Wahl.

Fazit

AMP kann ein mächtiges Werkzeug zur Beschleunigung einer mobilen Website sein, insbesondere für Websites mit überwiegend textuellem Inhalt wie Blogs, News-Portalen und Informationsseiten. Die Implementierung über ein WordPress-Plugin ist relativ einfach und kann eine erhebliche Verbesserung des mobilen Erlebnisses bringen. AMP ist jedoch keine universelle Lösung – Einschränkungen in JavaScript und Design können für komplexe Websites problematisch sein. Bei BeoHosting sind unsere Server sowohl für AMP als auch für Standardseiten optimiert, mit schnellem SSD-Speicher und LiteSpeed-Webserver, der unabhängig vom gewählten Ansatz hervorragende Leistung bietet.