00 : 00 : 00

Webseiten für mobile Geräte mit Google AMP optimieren

Eva Majert 14th Juli 2017
911
0

Die Statistik zeigt, dass 53% der mobilen Nutzer eine Website verlassen, wenn sie länger als 3 Sekunden warten müssten. Warum sind Menschen so ungeduldig? Die Antwort liegt auf der Hand. Wegen des immer schneller werdenden Lebenstempos sind Menschen abhängig von dem Internet geworden und sie möchten keine Sekunde Zeit verlieren.

 

Google AMP für mobile Geräte

Es gibt eine ganze Menge toller Inhalte, die Webseiteninhaber seinen Kunden zeigen können, aber wegen beschränkter Zeit schaffen sie es leider nicht. Dank der Google-Initiative hat jeder Publisher eine wirklich unglaubliche Möglichkeit, die Ladegeschwindigkeit einer eigenen Website nahtlos und kostenfrei zu erhöhen.

Was ist Google AMP?

„AMP“ steht für beschleunigte Mobil-Seiten („Accelerated Mobile Pages“) – ein spezielles Google Projekt in Zusammenarbeit mit Dutzenden von weltgrößten IT-Unternehmen, Entwicklern und Webseiteninhabern. Das Hauptziel ist die deutliche Erhöhung der Ladegeschwindigkeit mobiler Websites auf Basis einer neuen Technologie.

What is Google AMP - website templates

Das Framework ist HTML-basierte Open Source, das nach dem Prinzip der starken Reduzierung der Größe von mobilen Webseiten funktioniert. Jedesmal, wenn ihr die Google Suche über euer Tablet oder Smartphone nutzt, könnt ihr ein spezielles Zeichen neben einer AMP-optimierte Website merken.

Vor kurzem hat MotoCMS seinen eigenen Weg zu AMP initiiert und seinen Online-Shop der Homepage-Vorlagen optimiert.

What is Google AMP - amp dektop

Ihr seid jederzeit herzlich willkommen ihn über euer Desktop-Computer zu besuchen. Lasst uns jetzt die AMP Version anschauen, die speziell für mobile Geräte entwickelt wurde.

Google AMP für den MotoCMS Online-Shop

Ihr könnt das Ergebnis jetzt sehen und versuchen, eure Vorlage mit eurem mobilen Gerät zu finden. Der Unterschied ist groß, oder?

What is Google AMP - motocms amp store

Die Seite wurde voll optimiert und das Layout ist viel leichter. In der nahen Zukunft haben wir vor, die AMP Version für alle Seiten der MotoCMS Website zu erstellen. Um zu erfahren, wie man eine eigene AMP Website erstellen kann, lest die Anleitung unten.

Schnell und mühelos

AMP ist wirklich etwas Unglaubliches aus der Sicht des Erstellungsprozesses. Das beste besteht darin, dass Google Webentwickler nichts Neues erfunden haben. Da sie die Erhöhung der Ladegeschwindigkeit als Konzept genommen haben, können die bestehenden Technologien auf dem neuesten Stand bleiben und sich weiterentwickeln.

What is Google AMP - mobile view

AMP HTML

Die HTML Version ermöglicht es dem Publisher, die bereits vorhandenen HTML-Seiten mit zusätzlicher Syntax zu modernisieren und dadurch einige Einschränkungen für bessere Leistung hinzuzufügen. Wenn es um den Zeitaufwand geht, ist es eine Entdeckung.


  <!doctype html>
<html amp>
<head>
     <meta charset="utf-8">
<link rel="canonical" href="https://www.motocms.com/website-templates/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="theme-color" content="#ffab25">
<title>Website Builder Templates | MotoCMS</title>
<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>
</head>
<body>MotoCMS Website Creator Rocks!</body>
</html>
  

Lasst uns die Grundlagen eines AMP HTML Dokumentes anschauen:

  • Beginnt mit <!doctype html>;
  • Top-Level-Tag wie <html ⚡> oder<html amp> ist ein Muss;
  • <head> und<body> Tags gehören auch dazu;
  • Nach dem Tag<head> ist <meta charset=”utf-8″>;
  • Fügt den Link zu eurer Website mit <link rel=”canonical” href=”$SOME_URL” /> innerhalb des Tags <head> hinzu;
  • Fügt ein Tag <meta name=”viewport” content=”width=device-width,minimum-scale=1″> in das Tag <head> ein;
  • Fügt ein Tag  <style amp-boilerplate> tag in das Tag <head> ein;
  • Fügt<script async src=”https://cdn.ampproject.org/v0.js”></script> vor dem geschlossenen Tag </head> hinzu, um AMP JS zu laden.

Es ist eine einfache Aufgabe, AMP zu erstellen, wenn ihr schon mit HTML gearbeitet habt. Einige HTML Tags für das Hinzufügen des Inhalts wie Bilder, Video, Audio sind durch AMP Alternative ersetzt.

Z.B., um ein Tag zu markieren, solltet ihr ein bekanntes <img> Tag durch eine AMP Alternative <amp-img> ersetzen.

Inline CSS

Die Verwendung von CSS ist leider eingeschränkt. Bevor ihr einige Stile verwendet, stellt sicher, dass sie AMP Seiten unterstützen. Um einen CSS Stil hinzuzufügen, platziert <style amp-custom> innerhalb des Tags <head>.


          <!doctype html>
          <head>
          ...
          <style amp-custom>
          /* any custom styles go here. */
          body {
          background-color: white;
          }
          amp-img {
          border: 5px solid black;
          }
          amp-img.grey-placeholder {
          background-color: grey;
          }
          </style>
          ...
          </head>
  

Achtet darauf, dass ihr nur ein Tag style amp-custom verwenden dürft.

AMP JS

Vergesst über JavaScript. Oder mindestens die Weise, auf die ihr es benutzt habt. Stattdessen erhaltet ihr eine asynchrone AMP JS Bibliothek, die die Ladezeit eurer Website erhöht. Eine statische Website ohne benutzerdefinierte JavaScript-Funktionen kann keine zweite AMP Version erfordern.

Google AMP Cache

Alle AMP-Seiten werden von Google indexiert und in den Google eigenen Cache standardmäßig geladen. Dadurch wird die Seite mit dem HTTP/2 Protocol viel schneller geladen. Es gibt ein gemeinsames AMP Cache URL Format dem jeder Publisher folgen muss.

AMP-Validierung

Es gibt viele Möglichkeiten eure AMP-Seiten zu validieren.

  • Suchkonsole. Wenn ihr eine Website schon habt, ist es empfohlen, sie mit einem AMP Validierung Service zu testen. Dadurch seht ihr, ob eure Seite AMP-freundlich (oder nicht) ist.
  • Interaktiver Editor. Wenn ihr im Browser arbeitet, könnt ihr einen AMP Validator nutzen und euer HTML Dokument bearbeiten, indem ihr Fehler in Echtzeit überprüft und korrigiert.
  • Entwicklerkonsole. Es ist noch eine Möglichkeit eure AMP Seite in eurem Browser zu debuggen. Fügt einfach #development=1 zur URL hinzu und öffnet die Entwicklerkonsole, um loszulegen (z.B. http://www.mywebsite.com/released.amp.html#development=1).
  • Browser-Erweiterung. Ihr könnt ein eingebautes Browser-Werkzeug für Chrome oder Opera hochladen. Es gibt 3 farbige Indikatoren, die euch helfen, Fehler zu identifizieren.
  • Gemeinsamer Validator. Um einen eigenen Validator zu bauen, solltet ihr Node.js mit einem NPM Paket-Manager installieren und das AMP HTML Validator Befehlszeilentool aktivieren, indem ihr einen Befehl eingebt.

Braucht eure Website eine AMP Version?

Da jedes Unternehmen unter bestimmten Umständen gebaut wird und einen individuellen Ansatz erfordert, hängt die Antwort auf diese Frage von vielen Faktoren ab.

  • Mobiler Traffic. Vor allem müsst ihr den Prozentsatz der mobilen Nutzer erfahren, wenn ihr vorhabt, eine AMP Version erstellen. Wenn die Statistik zeigt, dass ein großer Teil der Nutzer eure Website über mobile Geräte besucht, lohnt es sich, eine AMP Version zu erstellen!
  • Verschiedene Inhalte. Für das AMP Projekt sind nicht statische Websites mit Animationen, DropDown Fenstern oder anderen interaktiven Elementen nicht geeignet. Wenn ihr interaktive Inhalte auf eurer Website veröffentlicht, habt ihr alle Chancen das negative Feedback anzuhören. AMP ist eine perfekte Lösung für Websites mit einer großen Menge an Daten wie Online-Shops und Medienquellen, die die Benutzererfahrung für mobile Endgeräte optimiert.
  • Ranking. Die Seitengeschwindigkeit spielt eine wichtige Rolle für Google in Bezug auf das Suchmaschinen-Ranking. Im Moment dient AMP als ein „Boost“-Faktor. Aber wenn ihr eine AMP Seite und eine traditionelle mobile Seite habt, gibt Google der AMP Seite den Vorrang. Und vergesst nicht, dass ihr die AMP Version nicht für eine bestimmte Zeit erstellt. Es ist eine Lösung, deren Vorteile Dutzende von Websites weltweit schon entdeckt haben. Zwar ist AMP noch nicht obligatorisch, aber die oben genannten Faktoren zeigen, dass die Situation in naher Zukunft ganz anders aussehen kann.

Wie kann euer Online Business von AMP profitieren

  • Schnelle Ladezeit. Die Google und SOASTA Suche zeigen, dass 70% der Seiten innerhalb von 10 Sekunden geladen werden. Mit der AMP Version wird eure Website um dreimal schneller geladen. Die Ergebnisse sind faszinierend, oder?
  • Konversionsrate und Absprungrate. Mit AMP habt ihr alle Chancen die Konversionsrate eurer Website zu erhöhen und die Absprungrate zu verringern. Stellt euch einfach vor, wie schnell mobile Nutzer auf eure Website zugreifen können. Es ist die beste Lösung, eure Besucher zu überraschen und einen guten ersten Eindruck zu machen.
  • ADS WirkungWenn ihr von der Online Werbung profitiert, macht euch in diesem Fall mit dieser Studie bekannt – Hearst Corporation hat ihre CTR auf ADS in 45% erhöht. Es gibt keine Garantie, dass euer Unternehmen dasselbe Ergebnis erzielen wird, aber es ist nicht der Grund, auf AMP zu verzichten.
  • Open Source. Der beste Teil – ihr müsst nichts für die Erstellung der AMP Version für eure Website zahlen. Wie wir schon oben gesagt haben, ist dieses Framework für alle verfügbar und kann kostenlos benutzt werden.

Die Zukunft der beschleunigten mobilen Seiten

Das AMP Projekt kommt in letzter Zeit in Schwung. Seit 2 Jahren sind die Ergebnisse der Google Initiative wirklich faszinierend. Im März 2017 wurden mehr als 1.6 Milliarden AMP Seiten publiziert. Und diese Zahl steigt mit jedem Tag – immer mehr Markennamen und wachsende Unternehmen nutzen AMP und gestaltet damit das Benutzererlebnis noch komfortabler.

Schließlich, lässt sich sagen, dass AMP als perfekt optimierte Version der Webseite dient, die in der Zukunft zum Standard werden könnte.

Autor: Eva Majert
Hallo zusammen! Auf unserem MotoCMS Blog beschäftige ich mich rund um Themes Webdesign-News, SEO, Bloggen. Seid immer vorne mit dabei und verpasst niemals die neusten Trends. Folgt Eva Majert auf Twitter und bei Facebook, um nichts zu verpassen.
Bei der Registrierung kann man
oder eine E-Mail nutzen
oder eine E-Mail nutzen
Ungültige E-Mail-Adresse
Sie wechseln Ihre Vorlage
Sie möchten die Vorlage in Ihrem Konto wechseln - der Bestätigungslink
wird an Ihre E-Mail-Adresse gesendet.
Achten Sie darauf, dass alle Änderungen, die Sie an der vorherigen Vorlage vorgenommen haben, nicht gespeichert werden.
Überprüfen Sie Ihre Mailbox
Überprüfen Sie Ihre Mailbox und klicken Sie auf den Bestätigungslink, den wir Ihnen per E-Mail gesendet haben.

Sobald Sie den Vorlagenwechsel bestätigen, können Sie anfangen, die neue Vorlage Ihren Zwecken anzupassen.
Überprüfen Sie Ihre Mailbox
Die Registrierung Ihrer Vorlage ist fast erledigt.
Ihre Arbeit mit der MotoCMS Vorlage ist nur noch ein Schritt entfernt - der
Bestätigungslink wird an Ihre E-Mail-Adresse gesendet.
Enter your Email
Check yout email
Some error. Please, try again later
Я даю согласие на обработку персональных данных в соответствии с политикой конфиденциальности