AMP – Accelerated Mobile Pages für WordPress, Magento, Joomla & Co.

/0 Kommentare/in , , , , , /von

amp logo
Nachdem Google vor einiger Zeit das AMP Projekt angekündigt hat, wurde die Software nun für die Öffentlichkeit zur Verfügung gestellt. Durch die Nutzung dieses Frameworks sollen Seiteninhalte schneller und für mobile Geräte optimiert ausgeliefert werden, um so die Nutzererfahrung auf mobilen Geräten zu verbessern und um das zu übertragene Datenvolumen gering zu halten. Belohnt wird dies von Google mit einem besseren Score im Suchindex. Glücklicherweise gibt es für einige Content Management Systeme schon Plugins, die eine AMP Funktionalität herstellen. Wir zeigen Ihnen hier, wie Sie AMP manuell oder per Plugin für Ihr CMS einrichten können.

Was sind Accelerated Mobile Pages?

Mit zunehmender Anzahl von Usern, die über ein Mobilgerät ins Internet gehen, wird es für Seitenbetreiber auch immer wichtiger, Inhalte schnell auszuliefern und darzustellen. Darüber hinaus ist es inzwischen obligatorisch, den Inhalt für Mobilgeräte auch so aufzubereiten, dass dieser auch auf kleineren Displays gut lesbar ist. Macht man dies nicht, verliert man wichtige Punkte in Googles Rankingsystem. Um die genannten Aspekte zu vereinheitlichen und für jedermann einfacher zugänglich zu machen, hat Google mit dem Open Source Projekt Accelerated Mobile Pages eine out-of-the-box Lösung für Seitenbetreiber entwickelt, die sehr einfach zu installieren ist und falls sie auf vielen Seiten Anwendung findet, auch überall einheitlich aussieht.

Wie funktionieren Accelerated Mobile Pages?

Accelerated Mobile Pages sind im Prinzip nichts anders als entschlackte Duplikate von bereits existierenden Seiten. Es wird also eine vorhandene Seite kopiert und dort ein von Google zur Verfügung gestelltes JavaScript eingebunden. Dazu ein spezieller CSS Code, der richtige Viewport und ein Canonical auf die Standard-Version der Seite und fertig ist die optimierte Version. Das JavaScript von Google extrahiert den Content der Seite und stellt diesen ohne Menüs, Sidebars, Logos etc. dar, sodass die Auslieferung und auch die Darstellung von Inhalt extrem schnell wird.

Installation

Die Installation ist zum Glück sehr einfach. Zur Veranschaulichung gehen wir hier davon aus, dass Ihre Website nur aus ein paar statischen Seiten besteht. In der Praxis würde man keine extra Seiten anlegen, sondern die nötigen Zusätze dynamisch anhand der übergebenen URL einbinden. Duplizieren Sie nun eine bestehende HTML-Seite und ergänzen Sie zunächst im HTML-Tag das Wort amp:

<html amp>

Alle folgenden Ergänzungen müssen innerhalb des HEAD-Bereichs eingetragen werden. Sie fügen also als nächstes einen Canonical Link zu der Standard-Version der Seite ein:

<link rel="canonical" href="https://systems.inside-intermedia.de/magento-sicherheits-updates-einspielen-installieren" />

Dadurch wird Ihre Amp-Seite von Google nicht als duplicate content erkannt. Der korrekte Viewport darf natürlich auch nicht fehlen:

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Durch diesen Eintrag wird die Seite für mobilgeräte optimiert ausgegeben. Es folgen nun noch einige Styles:

<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>
<noscript>
  <style amp-boilerplate>
    body{
      -webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none
    }
  </style>
</noscript>

und schließlich das eigentliche Herzstück des Systems, Googles AMP JavaScript:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Funktionstest

Haben Sie diese Elemente alle eingetragen, laden Sie die Seite im Browser unter folgender Adresse:

https://systems.inside-intermedia.de/magento-sicherheits-updates-einspielen-installieren/amp

Wenn alles funktioniert hat, sehen Sie nun eine optimierte Version der Standard-Seite. Öffnen Sie die Seite auch mit einem mobilen Gerät und schauen Sie, ob Ihr Content nun tatsächlich schneller geladen wird. Sollten Sie keine Veränderung feststellen, überprüfen Sie, ob Sie im Browser JavaScript aktiviert haben. Wenn Sie den Quelltext Ihrer Seite öffnen, sollten Sie auch alle zusätzlich eingetragenen Elemente sehen können, die oben genannt wurden. Falls nicht wiederholen Sie die vorangegangen Schritte und überprüfen Sie, was davon noch fehlt.

AMP für WordPress

Natürlich wäre es technisch möglich, Ihre WordPress-Installation auch selbst anzupassen und entsprechende Ausnahmen zu schreiben, um automatisch eine AMP-Version von einer beliebigen Seite anzeigen zu lassen, wenn ein entsprechender Parameter übergeben wird. Sie sollten Sich das Leben aber nicht unnötig schwer machen und einfach das bereitgestellte Plugin für WordPress nutzen, das diesen Vorgang automatisiert. Wir zeigen Ihnen, wie Sie das AMP Plugin für WordPress installieren.

Installation

Zunächst müssen Sie das offizielle AMP Plugin für WordPress installieren. Dies können Sie bequem über die Plugin-Verwaltung erledigen. Sie können das Plugin entweder direkt von der Pluginwebsite herunterladen oder in der Pluginverwaltung „AMP“ im Suchfeld eingeben. Das Plugin wird direkt als erster Treffer angezeigt. Sie klicken dann lediglich noch auf den Installieren Button. Falls Sie das Plugin heruntergeladen haben, müssen Sie die heruntergeladene Datei zunächst entpacken und diese dann unter Plugins Installieren hochladen. Dazu klicken Sie im Kopfbereich auf den Button Plugin hochladen, wählen dann dort die zuvor heruntergeladene Datei aus und klicken auf Installieren. Vergessen Sie nicht, das Plugin im Anschluss auch zu aktivieren.

Funktionstest

Nachdem Sie das Plugin installiert haben, sollten Sie nun noch testen, ob alles so funktioniert, wie erwartet. Da das WordPress Plugin aktuell nur Beiträge unterstützt, navigieren Sie zunächst zu einem Ihrer Blogbeiträge. Schreiben Sie anschließend in der Adresszeile im Browser hinter die URL noch ein /amp. Ihre Adresse sollte dann folgendermaßen aussehen:

https://systems.inside-intermedia.de/magento-sicherheits-updates-einspielen-installieren/amp

Wenn Sie dann diese Adresse öffnen, sollten Sie die neue Ansicht direkt sehen können. Falls nicht, können Sie versuchen den Seitencache zu leeren. Sollte dies auch nicht helfen, navigieren Sie zurück zu der normalen URL ohne /amp am Ende und öffnen Sie den Seitenquelltext. Dort sollte auf jeden Fall analog zu obigen Beispiel folgende Zeile vorhanden sein:

<link rel="amphtml" href="https://systems.inside-intermedia.de/magento-sicherheits-updates-einspielen-installieren/amp" />

Der Canonical-Tag auf der AMP-Version Ihres Beitrags sollte ebenfalls auf die normale Version zeigen:

<link rel="canonical" href="https://systems.inside-intermedia.de/magento-sicherheits-updates-einspielen-installieren" />

Wenn die HTML Tags entsprechend richtig gesetzt wurden, hat alles geklappt. Ihre Blog-Beiträge werden von nun an im AMP Format ausgeliefert.

AMP für Joomla

Für Joomla gibt es derzeit noch kein AMP Plugin von offizieller Seite. Das hat die Entwickler der Firmen Weeblr, Webkul und  J!Extensions Store dazu veranlasst, in eigenem Antrieb entsprechende Plugins für Joomla zu entwickeln und im Falle von Weeblr auch kostenlos als „community-Edition“ zur Verfügung zu stellen. Solange von offizieller Seite kein Core-Plugin nachgereicht wird, werden diese Plugins also die erste Wahl aller Seitenbetreiber sein, die solch eine Funktionalität für Ihr Joomla-Projekt gewährleisten möchten. Nachfolgend eine Übersicht aller derzeit erhältlichen AMP-Plugins für das CMS Joomla:

Installation

Da das Plugin wbAMP von Weeblr kostenlos verfügbar ist, installieren wir dieses Plugin zur Veranschaulichung. Die Plugins der anderen Anbieter dürften sich aber nicht grundlegend unterscheiden und sollten ähnlich zu installieren bzw. ähnlich zu konfigurieren sein.

Zunächst müssen Sie das wpAMP Plugin für Joomla installieren. Dies können Sie bequem über die Plugin-Verwaltung erledigen. Laden Sie das Plugin zunächst direkt von der Website des Entwicklers  herunter. Üblicherweise müssen Zip-Archive für Joomla nicht entpackt werden, es sei denn, das Archiv wurde entsprechend benannt (z.B. UNZIP_FIRST.ZIP). Navigieren Sie in Ihrem Joomla Backend nun zu Erweiterungen>Erweiterungen und laden Sie das Paket dort hoch. Dazu wählen Sie das heruntergeladene Archiv mit einem Klick auf den Button Datei auswählen. Anschließend drücken Sie auf den Button Hochladen und Installieren. Nach der erfolgreichen Installation quittiert Joomla dies mit einer entsprechenden Meldung.

Funktionstest

Nachdem Sie das Plugin installiert haben, sollten Sie nun noch testen, ob alles so funktioniert, wie erwartet. Navigieren Sie zunächst zu einem Ihrer Joomla-Beiträge. Schreiben Sie anschließend in der Adresszeile im Browser hinter die URL noch ein /amp. Ihre Adresse sollte dann folgendermaßen aussehen:

https://systems.inside-intermedia.de/magento-sicherheits-updates-einspielen-installieren/amp

Wenn Sie dann diese Adresse öffnen, sollten Sie die neue Ansicht direkt sehen können. Falls nicht, können Sie versuchen den Seitencache zu leeren. Sollte dies auch nicht helfen, navigieren Sie zurück zu der normalen URL ohne /amp am Ende und öffnen Sie den Seitenquelltext. Dort sollte auf jeden Fall analog zu obigen Beispiel folgende Zeile vorhanden sein:

<link rel="amphtml" href="https://systems.inside-intermedia.de/magento-sicherheits-updates-einspielen-installieren/amp" />

Der Canonical-Tag auf der AMP-Version Ihres Beitrags sollte ebenfalls auf die normale Version zeigen:

<link rel="canonical" href="https://systems.inside-intermedia.de/magento-sicherheits-updates-einspielen-installieren" />

Wenn die HTML Tags entsprechend richtig gesetzt wurden, hat alles geklappt. Ihre Joomla-Beiträge werden von nun an im AMP Format ausgeliefert

AMP für Magento

Neben einem experimentellen GitHub Projekt gibt es inzwischen auch für Magento zwei große Plugins, die eine entsprechende Funktionalität herstellen. Es handelt sich dabei um folgende Extensions:

Dabei sieht die Extension von Plumrocket derzeit am vielversprechendsten aus, kostet jedoch auch am meisten.

Installation

Die Installation der experimentellen GitHub Erweiterung ist sehr einfach. Laden Sie sich das Paket herunter, entpacken Sie es und kopieren Sie den Inhalt in das Stammverzeichnis Ihrer Magento-Installation. Da keine bestehenden Dateien überschrieben werden, müssen Sie auch vorher keine Backups anlegen. Das Plugin muss nicht extra aktiviert werden. Durch verschiedene Konfigurationseinstellungen sollte die Funktionalität nun direkt hergestellt worden sein.

Die zwei anderen o.g. Plugins müssen Sie zunächst käuflich erwerben und dann von der entsprechenden Herstellerwebsite herunterladen. Nach dem Entpacken des Archives kopieren Sie die Dateien ebenfalls auf Ihren Webserver und folgen außerdem der Installationsanleitung. Hier müssen eventuell einige Konfigurationsdateien angepasst werden. Beide Erweiterungen bringen eine eigene Backend-Oberfläche mit, über die man dann alle weiteren Einstellungen vornehmen kann.

Funktionstest

Navigieren Sie auf eine beliebige Produktseite in Ihrem Shop und ändern Sie danach in der Adresszeile Ihres Browsers die URL, indem Sie an das Ende der Adresse ein /amp anhängen. Wenn alles geklappt hat, sollte die Artikelseite nun in einer AMP Version angezeigt werden.

AMP für Contao

Leider gibt es zum aktuellen Zeitpunkt (Stand: Januar 2017) noch kein AMP-Plugin für Contao. Sobald dieses vorliegt, werden wir diesen Beitrag aktualisieren.

Das könnte Dich auch interessieren
Magento 2 - Alle Neuerungen im Überblick
Contao 3.3 veröffentlicht - was ist neu?
Achtung: Gefährliche Sicherheitslücke in Magento-Plugin Magmi entdeckt
Neuer Releasezyklus für Contao
Achtung: Neue Sicherheitslücken in Magento
Magento Banner Magento Tutorial: Zahlungsart nur für das Backend aktivieren
Magento 1.9 CE veröffentlicht - was ist neu?
Magento - Wo ist der Button für den Bildupload?
0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

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