Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →

Dr. Web » Webdesign » So entwickeln Sie eine AMP-Webseite

So entwickeln Sie eine AMP-Webseite

Artikel weiterempfehlen

  • Aktualisiert am 22. Februar 2023
  • Jetzt kommentieren
  • Markus Seyfferth von Markus Seyfferth
Lesedauer: 6 Minuten

Inhaltsverzeichnis

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?

cheescake So entwickeln Sie eine AMP-Webseite

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.

normal vs amp So entwickeln Sie eine AMP-Webseite

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.

screenshot 14 So entwickeln Sie eine AMP-Webseite

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. 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.

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Lust auf mehr?

  • Jörg Mrusek Jörg Mrusek
  • 8. März 2023
Doch lieber Lotto spielen und so reich werden?

Diese 8 Tipps sollte jeder Webentwickler kennen

Sie sind Webentwickler oder möchten einer werden? Hier kommen 8 Tipps wie aus dem Lehrbuch. Doch wehe, wenn der Alltag dazwischen grätscht. Lieber doch Lotto spielen?
  • Webdesign
  • Joy Shaheb Joy Shaheb
  • 4. März 2023

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 2. März 2023
KI = keine oder künstliche Intelligenz?

3 AI Webdesign Tools: des Webdesigners bester Freund oder Totengräber?

Drei KI-basiert Webdesign Tools stelle ich Ihnen heute vor. Mal sehen, wohin die Reise für den Webdesignerberuf geht.
  • Webdesign
  • Michael Dobler Michael Dobler
  • 3. Februar 2023
Webdesign für keine Dummies

So verbessern Sie mit Bildern und Grafiken das Webdesign Ihrer Website (5 Tipps)

Haben Sie schon einmal eine Webseite mit einem schlichten Design besucht und gedacht: „Kein Problem! So etwas bekomme ich auch selbst im Handumdrehen hin. Die Webdesign Bilder? Einfach nur klasse!“? Pustekuchen…
  • Webdesign
  • Dennis Gutjahr Dennis Gutjahr
  • 30. Dezember 2022

UX-Design: 11 Tipps, um Entwicklungskosten zu sparen und Umsätze zu steigern

UI/UX Design ist ein vielfältiger Fachbereich der IT, welcher eine immer größer werdende Rolle in der modernen Entwicklung einnimmt. Oft ist die Qualität des UI/UX Designs der entscheidende Faktor für den Erfolg (oder Misserfolg) eines Web-, App- oder E-Commerce-Produkts.

  • Webdesign
  • Markus Seyfferth Markus Seyfferth
  • 31. Oktober 2022

Was kostet eine Website?

Eine gut gestaltete und übersichtliche Internetpräsenz ist das digitale Aushängeschild deines Unternehmens. Ob Freelancer, Start-Up oder mittelständisches Unternehmen – an einer professionellen Onlinepräsenz führt heute kein Weg vorbei. Dabei steigt auch der Anspruch an rein privat genutzte Websites. Wir stellen in diesem Artikel die Kosten vor, die beim Erstellen einer Website zu beachten sind.
  • Webdesign

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑