SEO am 19. Februar 2016

AMP – Accelerated Mobile Pages in der Praxis

Mira Rodrigues

Veröffentlicht von Mira Rodrigues

Alle Beiträge von Mira Rodrigues
AMP –  Accelerated Mobile Pages in der Praxis

Was sind AMP?

Eine Accelerated Mobile Page ist die Version eines Dokuments, die speziell auf die Nutzung am Smartphone zugeschnitten ist. Weil sie beim Aufruf schon innerhalb weniger Millisekunden vollständig geladen sein soll, muss der Code auf ein Minimum reduziert werden – das CSS und das Javascript der eigentlichen Webseite wird also nicht geladen und sogar das HTML wird mittels spezieller AMP-Tags stark reduziert.

 

Quelle: Google

So könnten AMP-Seiten aussehen. Quelle: Google

Bei Webmastern mit Design-Ansprüchen werden jetzt die Alarmglocken klingeln – wie soll eine Website aussehen, bei der an allen Ecken und Enden gespart und gekürzt wird? Unter g.co/ampdemo kann man nach Eingabe der entsprechenden Suchbegriffe die Integration der Accelerated Mobile Pages in den SERPs sehen und einige AMP-Seiten, die bereits live sind, aufrufen.

Bessere Rankings für mobile Seiten?

Die derzeitige AMP-Integration in den SERPs sieht eine aufmerksamkeits- und vermutlich ebenso klickstarke Carousel-Box vor, welche aller Voraussicht nach durch ihre prominente Platzierung viel organischen Traffic aus den regulären organischen Mobile-Suchergebnissen abgreifen wird. Ob AMP-Seiten auch in den regulären organischen Suchergebnissen erscheinen werden und ob die aktuelle Integration bestehen bleibt, ist derzeit noch unklar.

amp-carousel

AMP für WordPress

Um Webmastern die Implementierung von Accelerated Mobile Pages etwas zu erleichtern, empfiehlt Google das AMP WordPress-Plugin von Automattic. Es liefert ein standardisiertes Template, das die technische Umsetzung (Canonical & Co.) automatisiert richtig macht.

Am Template kann und sollte man allerdings etwas feilen. Optimalerweise wird hier zu allererst ein Unterordner namens „amp“ im Hauptverzeichnis des aktiven Themes angelegt. Die bearbeiteten AMP-Template-Files hier ablegen – so werden die Änderungen nicht beim nächsten Plugin-Update überschrieben.

AMP-Templates estellen

amp-template

Im WordPress-Backend unter Plugins lässt sich im Unterpunkt „Editor“ AMP auswählen – hier werden die benötigten Template-Dateien angezeigt.

Achtung: Bitte nicht direkt hier bearbeiten, sondern die betroffenen Dateien via FTP in einen gesonderten Ordner im aktiven Theme legen!

Für eine einfache Bearbeitung wird in erster Linie die style-Datei benötigt. Hier können wie gewohnt CSS-Anweisungen und Klassen hinzugefügt und bearbeitet werden – die Darstellung wird so schon um einiges hübscher.

Weiterhin muss natürlich das WordPress-Logo durch das eigene ersetzt werden. Hierfür kann man wahlweise ein Site-Icon hochladen, oder die /single.php bearbeiten und hier in der $site_icon_url den Link zum gewünschten Icon hinterlegen.

Für Änderungen, die etwas Programmier-Expertise benötigen – beispielsweise die Implementierung eines Custom Headers etc. – wird in den Plugin-Informationen auf Github eine ausführliche Dokumentation bereitgestellt.

AMP und Google Pagespeed Insights

Einige negative Kommentare zum Plugin machen deutlich: Problematisch wird es, wenn man versucht, die AMP-Version einer Seite mittels Google Pagespeed Insights auf ihre Schnelligkeit zu prüfen. Der Algorithmus der Pagespeed Insights prüft die angegebene Seite auf diverse Best Practices in Bezug auf Webseitenperformance, die eigentliche Ladezeit und das Gewicht der Seite spielen jedoch keine Rolle für das Scoring – möglicherweise zeigt der Punkte-Score ein eher mittelmäßiges Ergebnis an.

Doch keine Sorge: Prüft man die tatsächliche Seitenladezeit in Tools wie Pingdom, sieht es dank der minimalen Anzahl an Requests und dem stark eingedampften Seitengewicht deutlich besser aus.

Google Analytics auf AMP-Seiten integrieren

Auf den offiziellen Google-Developer-Seiten gibt es einige Hinweise und einen Beispielcode zur Implementierung von Google-Analytics auf Accelerated Mobile Pages. Hier wird nicht mit dem Standard-Analytics-Tracking-Code gearbeitet, sondern mit eigenen Analytics-Tags.

Ein beispielhafter Tracking-Code:

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
  {
    "vars": {
      "account": "UA-26110687-2"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
</amp-analytics>

Die Universal Analytics ID muss hier mit der des eigenen Kontos ersetzt werden. Von Google wird empfohlen, für das AMP-Projekt eine eigene Property innerhalb des Analytics-Accounts angelegt.

Achtung: Kommentare innerhalb des Analytics-Codes invalidieren das JSON. Kopiert man also den Code der Google-Dokumentation, muss der „Replace with your Property-ID“-Kommentar gelöscht werden, damit das Tracking funktioniert – ansonsten erscheint die Fehlermeldung „Analytics config could not be parsed. Is it in a valid JSON format?“ in der JS-Konsole.

AMP und Ads / Monetarisierung

„Improving the mobile user experience is THE key to unlocking the industry’s next $50 billion“, sagte Google-Mitarbeiter Sridhar Ramaswamy vergangenen Monat auf der IAB Conference. Genau an dieser Aussage orientiert sich auch das Ad-Serving im AMP-Projekt. Google bietet also die Möglichkeit, Ads in verschiedenen Formaten von verschiedensten AdServern zu integrieren – gibt allerdings direkt Richtlinien mit auf den Weg, die erfüllt werden sollten. Dass Ads möglichst schnell geladen werden sollten, ist keine Überraschung. Zusätzlich wünscht sich Google allerdings, dass Werbeanzeigen in AMP „beautiful and innovative“ sind und das https-Protokoll nutzen. Sicher wird der Konzern diese Richtlinien in naher Zukunft spezifizieren und die Werbemöglichkeiten erweitern – es bleibt also spannend.

Es gibt bereits eine amp-ad Komponente die von den folgenden Ad-Netzwerken unterstützt wird: A9, Adform, AdReactor, AdSense, AdTech, Dot and Media, Doubleclick, Flite, plista, Smart AdServer, Yieldmo, Revcontent.

Fazit

Vor allem für redaktionell getriebene Seiten ist AMP momentan interessant – hier lohnt sich die Implementierung mit Sicherheit, gerade weil es sich (zumindest für WordPress-basierte Seiten) mit relativ wenig Aufwand integrieren lässt und eine hohe Aufmerksamkeit in den mobilen SERPs generieren wird.

Fraglich bleibt, ob Google eine adäquate Lösung für Online-Shops liefert, oder ob AMP auch zukünftig nur als „Facebook Instant-Articles“-Konkurrenz dienen und dementsprechend nur für News und Artikel genutzt werden soll.


Wer noch mehr über den ideellen und technischen Hintergrund von AMP erfahren möchte, dem möchten wir folgenden Vortrag von Paul Bakaus nahelegen.

 

Mira Rodrigues

Veröffentlicht von Mira Rodrigues

Alle Beiträge von Mira Rodrigues

Weiteres zum Thema SEO