Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » So entwickeln Sie eine AMP-Webseite

So entwickeln Sie eine AMP-Webseite

  • Aktualisiert am 22. Februar 2023
  • Markus Seyfferth von Markus Seyfferth
  • Webdesign
  •  

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

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.
normal vs amp.png 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.

Inhaltsverzeichnis

Agenturpartner in Köln

Edit Content

Ruslan Julbarissow

Ich habe Erfahrung in der Optimierung von Konversionsraten und der Verringerung von Absprünge durch meine Arbeit mit Projekten und Kunden aus dem E-Commerce-Bereich.

Außerdem profitiere ich davon, aus der Webdesign/Entwicklung zu kommen, das hilft natürlich bei technischen sowie auch bei ästhetischen Aspekten 😉

— Ruslan Julbarissow,
SEO-Freelancer
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

Schreibe einen Kommentar Antworten abbrechen

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

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

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen