So entwickeln Sie eine AMP-Webseite

Facebook
XING
Twitter
Google AMP - mobile Endgeräte
Google AMP: Accelerated Mobile Pages, ein neuer Standard für mobile Webseiten. Im Jahr 2016 kam der Standard AMP auf den Markt für Webseitenoptimierung im Bereich der mobilen Endgeräte. Hinter dieser neuen Technologie steckt der Internetriese Google, der AMP, was für Accelerated Mobile Pages steht, angeschoben und definiert hat.

Was sind Google AMP Websites?

Accelerated Mobile Pages bedeutet zu deutsch „beschleunigte Mobilseiten“ und ist genau das: Deutlich schnellere Webseiten für mobile Endgeräte. Das Open-Source Project wurde 2015 von Google angekündigt und 2016 veröffentlicht.

Dabei ist das Projekt die richtige Antwort auf den Fakt, dass die mobilen Internetnutzer immer mehr werden. Weit mehr als die Hälfte aller Suchanfragen kommen über mobile Endgeräte. Und diese Entwicklung wird in den nächsten Jahren noch weiter voranschreiten.

Zu Erkennen sind AMP Seiten an dem kleinen Blitz Symbol (rot markiert) hinter der URL. Vielleicht sind ihnen solche Suchergebnisse schon einmal aufgefallen?

Wenn man ein solches Suchergebnis anklickt sind diese nahezu direkt geladen. Wie das funktioniert, dazu später mehr.

Das folgende Bild ist ein Vergleich der „normalen“ Version im Gegensatz zur AMP Version. In diesem Beispiel ist kaum ein Unterschied zu erkennen, da die AMP Version fast identisch zur „normalen“ Version ist. Theoretisch kann diese Version aber komplett anders aussehen.

Trotz der Ähnlichkeit lädt die AMP Seite viel schneller, aber woran liegt das?

Ziel des neuen Standards ist es, Webseiteninhalte auf mobilen Geräten zu beschleunigen bzw. die Ladezeiten von Webinhalten im mobilen Einsatz zu verkürzen. Für Benutzer von mobilen Telefonen, Smartphones und Tablets ergeben sich durch AMP gleich mehrere Vorteile.

Wie funktioniert AMP?

Für AMP Seiten muss der Webseitenbetreiber eine spezielle Version der Website erstellen (alle Infos finden Sie in diesem Artikel). Diese Version besteht aus einem schlanken HTML Code, etwas CSS (nicht mehr als 50 KB) und asynchronem JavaScript Code. Asynchron deshalb, damit alle Inhalte ohne Verzögerung geladen werden können und keine JavaScript Code das Laden verlangsamen kann.

Neben diesen drei Komponenten ist der Cache ein sehr großer Pluspunkt in Sachen Ladezeit. Sobald Google die AMP Version einer Website erkennt, wird diese im Content Delivery Network (CDN) von Google oder Bing gespeichert. Klick ein Benutzer jetzt ein AMP Ergebnis an, muss Google die Daten nur noch aus dem eigenen Cache laden – das passiert binnen weniger Sekunden oder im besten Fall sogar Millisekunden – und an den Benutzer ausgeliefert werden.

AMP Cache Grafik
Quelle: Amp.dev

Mittlerweile ist es auch Möglich Werbung auf Accelerated Mobile Pages zu schalten, dabei wird die Werbung aber nicht wie gewöhnlich direkt in die Website eingebunden, sondern über ein iFrame, um das Rendering nicht zu blockieren. Google Adsense hat dafür unter anderem spezielle Anzeigen, die automatisch auf AMP Seiten eingesetzt werden können.

1. Ladezeit vs. Funktionen

Der größte Pluspunkt ist die sehr kurze Ladezeit, welche die Absprungrate der Besucher verringert. Keiner mag lästige Ladezeiten. Dafür entfallen bestimmte Funktionen, wie Kommentarfelder auf einer AMP Seite komplett – es wird aber auch weniger Datenvolumen des Besuchers verbraucht.

2. Hervorhebung der Suchergebnisse

Durch den auffälligen Blitz in den Suchergebnissen ist der Besucher vielleicht eher geneigt, auf ihre Seite zu kommen. Allerdings hat Google Karusselle (s. Bild) mit den „wichtigsten“ Seiten eingeführt. Wenn man ein solches Ergebnis anklickt, kann man über einen einfachen Swipe zum nächsten Ergebnis gelangen. Dabei kann es passieren, dass man direkt bei der Konkurrenz landet, und das will man im Normalfall nicht.

Google AMP Karussell

3. Design (CSS)

Das Design von AMP Seiten ist durch die Einsparung von CSS eher minimalistisch gehalten, man hat also nicht eine so starke Freiheit, kann aber auf der anderen Seite auch befreiend sein, alte CSS Lasten los zu werden.

Aber Achtung: ihre „normale“ Version der Website bleibt trotzdem bestehen, die AMP Version existiert nur zusätzlich!

AMP für schnelle Ladezeiten

Ladegeschwindigkeiten von Webseiten sind wichtige Kriterien für jeden Webseitenbetreiber, SEO-Experten und Webseiten-Optimierer aber natürlich auch für Webseitenbesucher. Dauert der Ladevorgang einer Webseite zu lange, wird oft weg oder weitergeklickt, was sich meistens negativ auf das Ranking der Webseite auswirkt. In der Regel freuen sich Webseitenbesucher über sehr schnell ladende Internet-Inhalte. Wird AMP für mobile Endgeräte eingesetzt, dauern Ladevorgänge von Webseiten nicht länger als eine Sekunde. Der neue Standard von Google beschränkt sich auf spezielle HTML-Befehle und eigene, AMP-spezifische HTML-Elemente. Diese können Webinhalte auf Smartphones, Tablets und zahlreichen anderen mobilen Geräten rasend schnell darstellen.

Der Einsatz von AMP: Gut überlegen und beraten lassen

Wer derzeit über den Einsatz von AMP nachdenkt, sollte je nach Situation einen Webseitenentwickler konsultieren. Webseiten lassen sich nämlich auch ohne AMP für die Darstellung auf mobilen Endgeräten optimieren. Außerdem wird ohne die Umstellung auf AMP eine gewisse Unabhängigkeit vom Internetprimus Google gewahrt. AMP bringt Vorteile, solange die Webseite nicht responsive designt wurde und von unangenehmen Popups bevölkert wird. Ist die Webpage jedoch komplex aufgebaut und besitzt zahlreiche Funktionen sowie ein sehr individuelles Design, kann möglicherweise auf AMP verzichtet werden. Gleiches gilt auch für Seiten, die sich bereits schnell aufbauen bzw. schnell geladen werden. Performanceprobleme beim Laden von Webseiten können übrigens auch durch den Wechsel auf schnelle Webhosting-Plattformen behoben werden.


Google AMP in WordPress implementieren

WordPress bietet eine Vielzahl an AMP Plugins an. Darunter gibt es ein offizielles Plugin von Mitwirkenden am AMP Projekt, welches gleichzeitig am meisten heruntergeladen wurde: Offizielles AMP Plugin.

Alternativ gibt es noch das Plugin AMP for WP, welches von anderen Entwicklern bereitgestellt wird.

Ich habe beide Plugins getestet und habe – für mich persönlich – festgestellt, dass Zweiteres (AMP for WP) die bessere Wahl ist. Beide sind gute Plugins, keine Frage. Allerdings haben mir beim offiziellen Plugin ein paar Einstellungsmöglichkeiten gefehlt. Im ersten Moment überrumpelt AMP for WP zwar etwas mit der großen Anzahl an Funktionen, welche aber später wirklich sehr hilfreich sein können.

Installation und in Betriebnahme von AMP for WP

Zum Installieren können Sie das Plugin über den Menüpunkt Plugins -> Installieren suchen, installieren und aktivieren. Fertig! Schon jetzt sollten ihre einzelnen Seiten und Beiträge über den zusätzlichen Parameter /amp verfügbar sein.

Als nächstes sollten Sie den Menüpunkt Settings durcharbeiten und ein für Sie passendes Design auswählen.
Aufgepasst: Es gibt vier kostenlose Themes, weitere sind kostenpflichtig. Das ist aber kein Problem, da Sie durch eigenes CSS die Themes weiter anpassen kann.

Danach sollten Sie alle Unterpunkte von Settings durchgehen. Hier können Sie Analysedienste, wie Matomo und Google Analytics einstellen, Platzierungen von Werbebannern einstellen, SEO Einstellungen vornehmen, und vieles, vieles mehr! Wirklich sehr umfangreich und für nahezu jedes Feature gibt es eine Option.

Hier gibt es auch keine Must-Have Settings. Jede Website ist anders und man muss entscheiden, welche Features sinnvoll sind und welche nicht. Eine exakte Beschreibung zu allen Funktionen, finden Sie in der Dokumentation der Entwickler.

Werden meine AMP Seiten jetzt schon von Google erfasst?

Ja, das Plugin rendert Deiner „normalen“ Website einen Tag in den Header, der so aussieht:

<link rel="amphtml" href="https://example.com/amp/">

Dadurch weiß Google beim Crawlen Deiner Seite, dass eine AMP Version existiert und kann diese in den Suchergebnissen anzeigen. Um diesen Vorgang zu beschleunigen und auftauchende Fehler zu überprüfen, können Sie ihre Seite kostenlos in der Google Search Console einreichen.

Wenn ein Artikel oder eine Seite als AMP Version zur Verfügung steht und man nach längerer Zeit Änderungen vornimmt, liegt die alte Version noch bei Google. In diesem Beitrag ist erklärt, wie man den Google AMP Cache manuell leert. Nach einer gewissen Zeit aktualisiert Google aber von alleine ihre Seiten.

Falls Sie nach mehreren Monaten Nutzung AMP wieder deaktivieren möchten, können Sie dieser Anleitung folgen. Damit werden nach und nach alle AMP Seiten Deiner Website abgeschaltet und aus dem Google Cache entfernt.

Fazit

Accelerated Mobile Pages ist in meinen Augen die richtige Antwort auf immer mehr mobile Internetbenutzer und ist eine Win-Win-Situation für alle Beteiligten. Wobei sich über die Umsetzung streiten lässt und man individuell entscheiden muss, ob sich eine Einbindung von AMP lohnt und sinnvoll ist.

Wie auch bei den meisten Funktionen im Web ist man ja nicht an AMP gebunden, sondern kann, muss aber diese Funktion nicht nutzen. Durch die mittlerweile recht einfache Einrichtung, kann man das System auch testen und wenn es nicht gefällt, mit ein paar gezielten Handgriffen wieder deaktivieren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Inhaltsverzeichnis

Zum Dr. Web Newsletter anmelden

Kein Spam, nur Benachrichtigungen über neue Produkte und Updates.

Social Media

Meistgelesen

Weitere Kategorien

On Key

Related Posts

Ein junger blonder Mann, der die Füße hochlegt und über sein Geschäft sinniert.

Banking: Brauchen Freelancer ein separates Geschäftskonto?

Gesetzlich vorgeschrieben ist die Trennung von Privat- und Geschäftskonto nicht. Wer als Freelancer auf eigene Rechnung arbeitet, muss also kein zusätzliches Girokonto einrichten. Sinnvoll ist die saubere Trennung von privaten und betrieblichen Zahlungsvorgängen trotzdem. Wir zeigen, worauf es ankommt

Ein schwarzer Tisch mit keyboard, maus, kophoerer, kaffee schwarz.

Die 13 besten HTML Editoren für Webentwickler (Update)

Wer Webseiten entwickeln möchte, braucht einen HTML-Editor. Sicherlich kannst du auch mit Hilfe des Windows-Notepad eine Webseite erstellen – schön und komfortabel geht indes anders. Besonders wichtig bei einem HTML-Editor sind eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung.