- Was ist AMP
- Welche Vorteile und Nachteile hat die AMP-Technologie
- Wie man AMP-Seiten auf einer Website implementiert
- Wie man AMP-Seiten überprüft
- Ist es notwendig, die AMP-Technologie zu verwenden
Die Position einer Website in den Suchergebnissen und das Ranking eines Domainnamens werden stark durch die Benutzererfahrung beeinflusst, die durch die Optimierung der Ladegeschwindigkeit von Seiten verbessert werden kann. Weltweit implementieren Unternehmen ständig neue Technologien, um sicherzustellen, dass Webressourcen so schnell wie möglich geladen werden, insbesondere auf mobilen Geräten. Eine der effektivsten Technologien ist AMP, die hilft, Seiten mit sofortiger Ladezeit auf Smartphones und Tablets zu erstellen. Trotz vieler Vorteile hat Accelerated Mobile Pages jedoch eine Reihe von Einschränkungen, die Ihrem Internetprojekt schaden können.
Was ist AMP
AMP (Accelerated Mobile Pages) — ist eine Technologie zur Beschleunigung des Ladens von HTML-Seiten auf Smartphones und Tablets, die von Google im Jahr 2015 entwickelt wurde. Im Februar 2016 wurde ein Test mit Benutzern durchgeführt, als solche Seiten in den Ergebnissen der mobilen Suche zu erscheinen begannen. Die Eigentümer von Google begannen sofort, die beschleunigten mobilen Seiten aktiv zu fördern, indem sie sie beispielsweise mit einem speziellen Symbol «Blitz» kennzeichneten und ihnen einen kleinen Vorteil bei der Rangordnung gaben.
AMP-Seiten unterscheiden sich von Standardseiten durch das Fehlen und/oder die Ersetzung klassischer HTML-Tags. Zum Beispiel wird anstelle des Tags «Bild» IMG das AMP-IMG verwendet. Standard-JavaScript ist ebenfalls verboten, aber es gibt die AMP JS-Bibliothek, die eine begrenzte Anzahl von Funktionen hat, aber ein optimiertes Rendering gewährleistet. Auch das Google AMP Cache-System trägt zur Beschleunigung bei: Das Caching von Seiten erfolgt direkt in der Suchmaschine. Infolgedessen werden Seiten in 0,3-0,5 Sekunden geladen, selbst bei Benutzern mit langsamen Internetverbindungen.
Lesen Sie auch: Die Absprungrate auf der Website — wie man sie analysiert und reduziert
Welche Vorteile und Nachteile hat die AMP-Technologie
Im Jahr 2024 machte der mobile Datenverkehr mehr als 62% aus, während in vielen Ländern immer noch maximal 3G-Zugang verfügbar ist. Das Hauptvorteil der AMP-Seiten ergibt sich daher aus der sofortigen Ladezeit. Die Bewertung durch PageSpeed Insights liegt häufig zwischen 95 und 98, und der Inhalt wird tatsächlich in wenigen Sekunden geladen. Das bedeutet, dass die Technologie alle Benutzer auf ein Niveau hebt, indem sie sofortigen Zugang zu nützlichem und interessantem Inhalt ermöglicht, unabhängig von der Geschwindigkeit der Internetverbindung.
Zu den weiteren wichtigen Vorteilen der AMP-Seiten gehören:
- Verbesserte Benutzererfahrung. Benutzer haben hauptsächlich Zugang zu Text, was bedeutet, dass sie nicht durch Formulare, Pop-ups und interaktive Werbebanner abgelenkt werden.
- Geringere Absprungrate. Die schnelle Ladezeit der Seiten und das Fehlen schwerer interaktiver Elemente erhöhen die Wahrscheinlichkeit, dass Besucher mehr Zeit auf Ihrer Website verbringen.
- Vereinfachte SEO-Optimierung. Die Algorithmen der Suchmaschinen bevorzugen schnelle Websites. Mit dieser Technologie werden die Seiten des Internetprojekts sofort geladen, was die Chancen erhöht, in den oberen Positionen der Ergebnisse zu erscheinen.
- Möglichkeit der automatischen Implementierung. Das Erstellen und Bearbeiten von AMP ist nicht einfach, jedoch erleichtern kostenlose CMS-Plugins den Prozess.
Die Technologie ermöglicht es, vereinfachte Versionen von Webseiten zu erstellen, wodurch die Funktionalität der Website eingeschränkt wird. Daraus ergeben sich folgende Nachteile der AMP-Seiten:
- spezialisiertes JS — reduziert die Anzahl der umsetzbaren Funktionen;
- maximale CSS-Größe 75 KB — zwingt dazu, Stile zu minimieren, was das Design oft kompliziert;
- eingeschränkte Monetarisierung — interaktive Banner funktionieren oft nicht korrekt oder werden nicht angezeigt, wodurch die Eigentümer von Internetprojekten im Vergleich zu traditionellen mobilen Seiten 20-30% Werbung verlieren;
- weniger markenbezogener Datenverkehr — der Benutzer teilt nicht Ihre Domain, sondern die zwischengespeicherte Version der Google-Seite;
- Risiko der doppelten Inhalte — es ist notwendig, auf korrekt konfigurierte rel=“canonical” zu achten, da sonst Suchmaschinen die AMP-Version anstelle der Hauptseite indizieren;
- Abhängigkeit von Google — das Caching der Seiten erfolgt auf den Servern des Unternehmens, was bedeutet, dass es eine größere Kontrolle über Ihre Inhalte hat.
In den Jahren 2017-2018 waren Website-Eigentümer bereit, zusätzliche Zeit für die Erstellung und Verwaltung von AMP-Seiten mit eingeschränkter Funktionalität aufzuwenden, da sie bessere Positionen in den Suchergebnissen erhielten und ihre Webressource hervorheben konnten. Jetzt betrachtet Google das Vorhandensein dieser Technologie nicht mehr als einen entscheidenden Ranking-Faktor, das charakteristische Symbol wird nicht mehr angezeigt, daher sollte der Nutzen ausschließlich unter Berücksichtigung der Besonderheiten Ihres Internetprojekts bewertet werden.
Online-Shops und Portale mit hoher Interaktivität verwenden normalerweise klassische Methoden zur Optimierung der mobilen Version, da AMP ihre Funktionalität erheblich einschränkt. Content-Websites (Magazine, Blogs, Nachrichten-Webressourcen) mit einer großen Anzahl von Artikeln nutzen jedoch aktiv die Technologie zur Verbesserung der Zugänglichkeit auf mobilen Geräten.
Lesen Sie auch: SEO auf Minimalniveau – was der Website-Eigentümer selbst tun kann, um die Website ohne die Hilfe von Spezialisten zu fördern
Wie man AMP-Seiten auf einer Website implementiert
Bei der Implementierung der AMP-Technologie müssen eine normale und eine vereinfachte Version der Seite erstellt werden. Damit Suchmaschinen die Verbindung zwischen ihnen richtig verstehen, muss in jedem Abschnitt «head» unbedingt ein spezielles Tag vorhanden sein. Im Code der normalen Seite fügen wir hinzu:
<link rel="amphtml" href="https://example.com/article-amp.html">
Im Code der AMP-Version fügen wir hinzu:
<link rel="canonical" href="https://example.com/article.html">
Im Folgenden werden wir diesen Punkt sowohl bei der manuellen Erstellung als auch bei der Verwendung von Plugins betrachten. Überprüfen Sie jedoch immer das Vorhandensein der oben genannten Tags, denn ohne sie können Suchmaschinen die AMP-Seite als Duplikat des Inhalts betrachten.
Methode 1 — AMP manuell erstellen
Das manuelle Erstellen jeder Accelerated Mobile Page ist sinnvoll, wenn Sie eine kleine Website haben oder vollständige Kontrolle über bestimmte Seiten benötigen, z. B. Nachrichten oder Blogartikel. In diesem Fall nehmen wir eine fertige Vorlage und füllen sie mit dem vorhandenen Inhalt, indem wir klassische HTML-, CSS- und JS-Tags durch die entsprechenden AMP-Tags ersetzen.
Eine detaillierte Schritt-für-Schritt-Anleitung finden Sie auf der Website amp.dev, und wir werden die wichtigsten Punkte für ein besseres Verständnis der Implementierung von AMP auf einer Website betrachten.
Wir beginnen mit der grundlegenden Markup der vereinfachten Version der Seite:
<!doctype html>
<html amp lang="uk">
<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{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{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>
Beachten Sie das Tag <html amp lang="uk">. Es enthält <html amp>, das den Suchmaschinen mitteilt, dass dies eine AMP-Seite ist. Wenn die Website nicht auf Ukrainisch ist, sollte uk durch die entsprechende Abkürzung ersetzt werden, z. B. en für die englische Version. Und vergessen Sie nicht, das Tag <link rel="canonical" href="$SOME_URL"> zu bearbeiten: href sollte auf die Hauptversion der Seite verweisen.
Als nächstes fügen wir ein Bild mit dem Tag <amp-img> hinzu, zum Beispiel:
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400"></amp-img>
Ein Vorteil der AMP-Technologie ist die vereinfachte Verwendung von responsiven Bildern. Sie müssen nur layout="responsive" im Tag <amp-img> hinzufügen. Lassen Sie uns dies mit unserem vorherigen Bild tun:
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
Eine vollständige Liste der speziellen Tags finden Sie auf dieser Seite der Website amp.dev.
Als nächstes gehen wir zur Gestaltung des Dokuments über. Bei der Verwendung der Technologie dürfen keine externen CSS-Dateien hinzugefügt werden, daher werden die Stile innerhalb von <style amp-custom> definiert:
<style amp-custom>
h1 {
margin: 1rem;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: blue;
}
</style>
Wenn gewünscht, können Sie benutzerdefiniertes JavaScript über die spezielle Komponente <amp-script> hinzufügen. So können Sie Ihr eigenes JS schreiben und ausführen, während Sie die Anforderungen der Technologie einhalten. Sie können auch manuell allgemeine Widgets und einzigartige Webelemente, Aktionen und Ereignisse hinzufügen — der Code für jede Funktion ist auf der Website amp.dev verfügbar.
Wenn Sie eine vereinfachte Version der Seite erstellen, vergessen Sie nicht, das Tag für AMP auf der Standard-HTML-Seite hinzuzufügen:
<link rel="amphtml" href="https://example.com/article-amp.html">
Jetzt bleibt nur noch, die fertige vereinfachte Seite über den Google AMP Validator zu überprüfen (später werden wir dieses Tool genauer betrachten).
Methode 2 — AMP mit Plugins erstellen
Das manuelle Erstellen einer vereinfachten mobilen Version jeder Seite ist riskant, kompliziert und nimmt viel Zeit in Anspruch, insbesondere bei großen Internetprojekten. Für Website-Eigentümer, die Content-Management-Systeme verwenden, ist es viel einfacher, diese Technologie zu nutzen, da es kostenlose AMP-Plugins für CMS gibt:
- WordPress. Die offizielle Erweiterung AMP for WP kann automatisch vereinfachte mobile Versionen der Seiten und Beiträge der Website generieren.
- Joomla. wbAMP erstellt automatisch AMP-Versionen Ihrer Seiten, unterstützt Google Analytics und Designanpassungen. JAMP ermöglicht das Erstellen von AMP-Versionen für Artikel und Blogs.
- Drupal. Das AMP-Modul hilft, Standardseiten in vereinfachte umzuwandeln.
- Magento. Plumrocket AMP erstellt vereinfachte Versionen von Produkten, Kategorien und anderen Seiten. Die gleiche Aufgabe erfüllt die Magefan AMP-Erweiterung.
Betrachten wir, wie man AMP-Seiten auf einer WordPress-Website erstellt. Gehen Sie zum Dashboard, klicken Sie auf den Abschnitt «Plugins» und dann auf «Neues hinzufügen». Geben Sie den Namen in die Suche ein, laden Sie das benötigte Plugin hoch und aktivieren Sie es.
Nach der Aktivierung erscheint sofort ein Fenster zur Auswahl der Konfigurationsmethode. Wir benötigen eine grundlegende Lösung für Anfänger.
Jetzt können wir jeden Punkt separat anpassen. Sie können den Typ der Seiten für AMP auswählen, Analytik, Monetarisierung usw. einstellen. Achten Sie besonders auf den Punkt Where do you need AMP?: Sie können den gesamten Blog oder die Produktseiten auf die angegebene Technologie umstellen, es ist jedoch besser, jede Seite selbst einzustellen.
Dazu gehen wir in den Abschnitt «Beiträge» oder «Seiten», je nach Art des Inhalts, mit dem Sie arbeiten möchten. Zum Beispiel fügen wir einen neuen Beitrag im Blog hinzu.
Klicken Sie auf Start the AMP Page Builder.
Es öffnet sich sofort ein Builder mit einem benutzerfreundlichen System zur Erstellung von AMP-Seiten. Sie müssen nur die gewünschte Anzahl von Spalten ziehen und dann ein Modul, z. B. Text, hineinziehen.
Um das Modul zu bearbeiten, klicken Sie auf das Zahnradsymbol neben dem Modul.
Sie können sogar vorgefertigte Vorlagen verwenden, indem Sie auf Pre-built AMP Layouts klicken.
In der kostenlosen Version gibt es ein einfaches Layout, in der kostenpflichtigen Version — 9, dafür müssen Sie jährlich 89 $ zahlen. Uns reicht die kostenlose Version, zumal sie bearbeitet werden kann.
Sie können jede Spalte und jedes Modul aus der installierten Vorlage löschen, ändern oder hinzufügen. Vergessen Sie nur nicht, die Hauptversion über den klassischen Editor einzustellen und die Seite zu veröffentlichen.
Die Ergebnisse der Überprüfung der Standardseite durch PageSpeed Insights.
Die Ergebnisse der Überprüfung der AMP-Seite durch PageSpeed Insights.
Wie man AMP-Seiten überprüft
Der einfachste Weg, um sicherzustellen, dass eine AMP-Seite korrekt funktioniert, ist die Verwendung des entsprechenden Dienstes von Google. Fügen Sie den Link ein, klicken Sie auf «Seite überprüfen» und erhalten Sie sofort einen Bericht.
Wir haben die AMP-Seite überprüft, die wir mit dem offiziellen WordPress-Plugin erstellt haben.
Unsere vereinfachte Version kann ohne Fehler in den Google-Suchergebnissen angezeigt werden.
Wir haben eine Standardseite von einer anderen Website genommen und ebenfalls in diesem Dienst überprüft.
Lesen Sie auch: Wie man SEO seiner Website mit Yoast SEO verbessert
Ist es notwendig, die AMP-Technologie zu verwenden
Es ist nicht notwendig, da es verschiedene Methoden zur Optimierung mobiler Seiten gibt, die eine gute Ladegeschwindigkeit ermöglichen, ohne die Funktionalität stark einzuschränken. Zum Beispiel die Wahl eines Hostings mit ausreichenden Ressourcen, Caching, das Entfernen überflüssigen Codes, Optimierung von Bildern, Lazy Loading («Lazy Loading»).
Bis 2021 implementierten Millionen von Internetprojektbesitzern AMP, da dies ermöglichte, Seiten in den Ergebnissen mit einem charakteristischen Symbol hervorzuheben und in die Google News-Karussell zu gelangen. Zum Zeitpunkt des Schreibens dieses Artikels wird das «Blitz» nicht mehr in den Suchergebnissen angezeigt, es gibt keinen Prioritätsvorteil, und jedes Internetprojekt kann in das Nachrichtenkarussell gelangen. Der Vorteil der Technologie liegt in der Erhöhung der Geschwindigkeit der Webressource, jedoch kann dies auch ohne so strenge Einschränkungen der Funktionalität erreicht werden.
Hat Ihnen der Artikel gefallen? Erzählen Sie Ihren Freunden davon: 
