D.r Web seit 1997 print.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
D.r Web seit 1997 print.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » Allgemein » So entwickeln Sie eine AMP-Webseite

So entwickeln Sie eine AMP-Webseite

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.

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 6 Minuten
  • von Dr. Web Redaktion
  • 25. Oktober 2019

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

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, Markus Seyfferth und Jörg Mrusek.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

PRIMA LINE

Berlin

TYPO3 & Shopware Agentur – 3m5.

Dresden

Warscher – Digital Experts

Horgen

WebOptimizer

Villach

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Das richtige Licht fürs Webdesign 

Fast jeder (Hobby-)Webdesigner kennt diese Situation: Man hat sich in die Gestaltung oder Konzeption eines Projekts vertieft oder möchte ein bestimmtes Webprojekt oder Teilvorhaben an einem Tag noch fertigstellen. Doch plötzlich ist es später Nachmittag oder Abend – Zeit, das Licht einzuschalten!

 →   

So entwickeln Sie eine AMP-Webseite

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.

 →   

Mit diesen drei kostenlosen Maßnahmen verbesserst du deinen Online-Auftritt sofort

Deine Website reichweitenstärker, schöner, besser zu machen, kostet immer Geld? Nein, nicht immer. Tatsächlich gibt es enorm schlagkräftige Wege, das völlig ohne Geldeinsatz zu bewerkstelligen.

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.