in Mobile SEO, SEO

Wie und warum wir bei blick.ch AMP (Accelerated Mobile Pages) entwickelt haben

Wie und warum wir bei blick.ch AMP (Accelerated Mobile Pages) entwickelt haben
4.86 (97.14%) 7 votes

UPDATE:

Nach nun circa 4 Monaten, seit dem Accelerated Mobile Pages in der Schweiz ausgerollt sind, sehen wir bereits heute, bei einer unserer Brands, wohin die Reise gehen wird.

Das nachfolgende Chart zeigt deutlich, wie der Traffic auf unsere AMP Artikel (Rot), mittelfristig den Traffic auf unserer mobilen Seite (Gelb) ersetzen wird.

Chart das den Share zwischen Amp Traffic und mobile traffic zeigt

Prozentuale Anteile des Traffics:  AMP (Rot), Mobile Seite (Gelb) und Desktop Seite (Lila) Quelle: Google Analytics

Nach langem Warten hat Google heute endlich angefangen Accelerated Mobile Pages (AMP) in der Schweiz auszurollen. Dies vorerst für die normalen Suchresultate (blaue Links), das AMP Karussell wird erst zu einem späteren Zeitpunkt folgen.

Wir bei blick.ch haben relativ schnell, nach Bekanntgabe des AMP Projekts von Google (im Dezember 2015), im April 2016 unsere AMP Version entwickelt und fertiggestellt.
Unserem kompetenten Projekt-Manager, Notarmon Buchli, sowie unserer Agentur eThinking habe ich zu verdanken dass ich als Projektverantwortlicher nun über einen erfolgreichen Case schreiben darf.

Im folgenden Post möchte ich, im speziellen Anwendungsbeispiel für blick.ch, auf die Entwicklung unserer AMP Seiten eingehen.

Hierbei beschränke ich mich auf die Mittel und Informationen, welche zur Zeit der Entwicklung von Google zur Verfügung standen.

In Zukunft wird noch viel mehr Flexibilität auf AMP möglich sein. Was wann geplant ist kann auf der AMP Roadmap entnommen werden.

Lesezeit ca. 3:45 Min

Was ist AMP?

AMP steht als Abkürzung für „Accelerated Mobile Pages“ und ist ein HTML basiertes Webseitenkonstrukt, welches statische Inhalte sehr schnell rendert und lädt. Es besteht aus drei wesentlichen Elementen:

  1. AMP HTML
  2. AMP JS
  3. Google AMP Cache

AMP HTML stellt somit ein HTML Konstrukt mit vordefinierten (erlaubten) Elementen. Eine ausführliche Referenz über zulässige Elemente findet sich hier.

AMP stellt mit der AMP JS Library Java Script Best Practices zur Verfügung, die in der Praxis gezeigt haben dass sie ein schnelles Laden von Webseiten unterstützen. Lazy Loading ist hier nur ein Beispiel. Abgesehen davon lässt AMP kein gängiges Java Script zu.

Der Google AMP Cache ist ein von Google angebotenes Content Delivery Network (CDN) um alle AMP Inhalte (Dokumente, JS Files und Bilder) von einer Quelle unter HTTP 2.o auszuliefern. So garantiert AMP eine effiziente und schnelle Auslieferung der Inhalte. Der Cache verbessert ausserdem automatisch die Seitenladezeit.

Vorteile von AMP

Massgeblich herauszustellen ist die extrem schnelle Ladezeit, da AMP auf lahmende Elemente verzichtet, bzw. sie auf das Nötigste beschränkt. Ausserdem cached Google die Seiten vor.

Zum Vergleich:

Dieser Artikel lädt auf der mobilen Seite in ca. 2.35 Sekunden

Seitenladezeit mit Chrome Entwicklertools beim blick.ch

Seitenladezeit gemessen mit den Entwicklertools im Google Chrome Browser beträgt bei der mobilen Seite 2.35 Sekunden

Sein äquivalenter AMP Artikel benötigt hierzu bloss 168 ms.

Seitenladezeit gemessen in Google Chrome bei blick.ch Amp

Seitenladezeit gemessen mit den Entwicklertools im Google Chrome Browser beträgt 168 ms

Ein weiterer Vorteil ist, dass die AMP Seiten von Google prominent in den Suchresultaten dargestellt werden:

Darstellung von AMP Seiten in den Google Suchresultaten

Zum einen zeigt Google AMP in einem sogenannten „AMP Karussell“, welches das Schlagzeilen Karussell ersetzt/ergänzt. Dies sowohl für Brand Searches (Blick als Keyword) als auch für generische Keywords („Brangelina“ als Keyword).

AMP Suchresultat für Keyword "Brangelina" in google.ch

AMP Suchresultat für Keyword „Brangelina“ in google.ch

Zum anderen werden AMP Seiten in den normalen Resultaten (blaue Links) besonders mit einem „AMP Label“ gekennzeichnet.

Google AMP Ergebnis in den normalen Suchresultaten für das Keyword Infantino

AMP Ergebnisse in den normalen Suchresultaten

Der Vorteil für uns (für jeden Publisher) besteht darin immer eine prominente(re) Platzierung, mit besonderer Hervorhebung (AMP Label), zu bekommen.

 

AMP bei Blick.ch

Ein wesentlicher Unterschied zu den AMP Versionen anderer News-Seiten ist, dass wir beim Blick entschieden haben den User immer in der AMP Welt zu halten und AMP nicht als Durchgangszimmer zu nutzen, um auf die mobile Seite weiterzuleiten. So tut es beispielsweise  T-Online oder Die Welt (teilweise).

AMP Seite auf blick.ch

AMP Seite auf blick.ch

Bei der Entwicklung haben wir uns selber einige „Must-Have-Rules“ gesetzt.

  • Social Sharing Möglichkeiten
  • Bilder Galerien
  • Video Player
  • Werbung
  • Links (in Text)
  • Links (zu Videos)
  • Links (zu weiteren AMP Artikeln)
  • Tracking

Bevor man die einzelnen Elemente bei AMP einbindet, muss darauf geachtet werden, dass das jeweils passende Script im <head> Bereich eingebaut ist. Beim Blick sieht dies wie bei diesem Beispiel-Artikel wie folgt aus:

Scripteinbindung im Header von Blick.ch für AMP

Für jedes HTML Element welches man auf AMP einbinden möchte muss vorab das passende Script in den Header eingebaut werden

Nachfolgend kann man dann auf Seitenebene die jeweiligen Elemente einbauen.

Social Sharing Möglichkeiten

Sharing Buttons wurden beim Blick über das Element amp-social-share  jeweils in einen Container eingebunden.

social-share-amp element auf blick.ch

Social Sharing Buttons Leiste auf AMP Seite von Blick.ch….

Social Sharing Buttons auf AMP Blick.ch

Social Sharing Buttons in containern angegeben im Quellcode eines AMP Artikels auf Blick.ch

Bildergalerien

Bildergalerien haben wir mithilfe des Elements amp-carousel eingebunden.

Image Galerie auf AMP Seite

Image Galerie auf AMP Seite von blick.ch…

amp-carousel element für Bildergalerien auf AMP Seite von Blick.ch

amp-carousel element für Bildergalerien auf AMP Seite von Blick.ch

Video Player

Wir sind gerade dabei unseren Video Player von Xtendx auf Brightcove zu wechseln. Leider ist dieser Wechsel noch nicht fertiggestellt und somit unsere Videos noch nicht auf AMP verfügbar.

Brightcove kommt mit einer Eigenlösung für AMP und kann/wird von uns mithilfe des <amp-brightcove> Elements eingebunden.

Werbung

Auf AMP funktioniert ausschliesslich Bildwerbung (JPF, PNG, GIF). Herausforderung ist, dass AMP fixe Grössen für Container vorgibt und somit Ads auch nur in diesem Format für AMP ausgespielt werden können.

Die Werbung haben wir über das <amp-ad> Element eingebunden. Diese kann auch mithilfe fast aller gängigen AdServer ausgespielt werden, jedoch nur über HTTPS, was zumindest in der Schweiz immer noch ein Problem bei vielen Anbietern darstellt.

Werbeeinbindung auf Google Amp auf Blick.ch

AD-Einbindung über auf der AMP Seite von Blick.ch

Links (zu anderen AMP Artikeln)

Da wir uns dazu entschieden haben den User immer in der AMP Welt zu halten, haben wir interne Links sowohl aus dem Text heraus, als auch aus Link-Boxen eingebunden. Dies bedeutete für uns aber auch, dass wir alle Link-Ziele ebenfalls in AMP zur Verfügung stellen, sprich klickt der User auf einen der Links wird er auf einen weiteren AMP-Artikel weitergeleitet.

In-Text Links

intext links auf amp.blick.ch

In-Text Links über normalen ahref führt zu weiteren Amp Artikel von Blick.ch

Linkbox „Mehr zum Thema“

Links zu weiteren AMP Artikeln unterhalb des Textes

Links zu weiteren AMP Artikeln unterhalb des Textes

Mehr zum Thema Box auf amp version von blick.ch

Mehr zum Thema Box und Links eingebunden über Container

Ausserdem ein Modul zu unseren Videoartikeln. Diese ebenfalls in jeweils eigenen Containern über das <amp-img> Element.

Links zu videos auf der amp seite blick.ch

Links zu passenden Videos unterhalb des Textes

amp-img element auf amp blick.ch

Einbindung von Linkbox zu Videos im Container mit Element

Web Analytics und Tracking

Beim Blick haben wir neben Net-Metrix auch Chartbeat und Google Analytics als Nutzerverhalten bzw Webanalyse Tools im Einsatz. Ach hier unterstützen mittlerweile fast alle gängigen Tool-Anbieter Accelerated Mobile Pages. Das Tracking wird durch das <amp-analytics> Element ermöglicht. Tracking Details und wie diese zum eigenen Server gesendet werden ist spezifiziert in JSON

Google Analytics

Ironischerweise war es von Seiten Google Analytics, noch im Februar kein Pixel vorhanden. Mittlerweile haben sie aber auch hier ein Script zur Verfügung gestellt.

google analytics implementation auf amp.blick.ch

Google Analytics Implementation auf amp.blick.ch

Net-Metrix

amp ad script implementation auf blick für netmetrix

Amp-ad Script für Net-Metrix

Eine ausführliche Dokumentation wird  von Net-Metrix auf deren Seite als PDF angeboten.

Chartbeat

 

Chartbeat implementation auf amp.blick.ch

Chartbeat implementation auf amp.blick.ch

Eine ausführliche Dokumentation über alle Analytics und Tracking Tools und deren Einbindung auf AMP findet ihr hier.

Was bei der Entwicklung der Blick AMP-Seiten noch zu berücksichtigen war

AMP läuft auf HTTPS

AMP wird über ein sicheres HTTPS Protokoll ausgeliefert (lies hier wie von HTTP auf HTTPS umstellen am Beispiel von Ricardo.ch). So müssen sämtliche Verweise und Quellen im HTML ebenfalls via https eingebunden werden, intern wie extern.

Blick.ch auf Google AmP in HTTPS

Alle internen Linkziele sowohl zu nötigen Ressourcen (CDN, CSS Files, Adserver) als auch zu weiterführenden URLs wurden als HTTPS URLs aufgeführt

Wie veröffentlichen wir unsere Inhalte auf AMP?

Im Wesentlichen haben wir AMP in unser CMS integriert. Von hier aus kann theoretisch jeder Inhalt (über ein Häkchen) für eine neue (AMP) View bereitgestellt werden. Dabei wandelt das System den Artikel in AMP HTML um.

AMP im CMS von Blick.ch

Wir ermöglichen das Publizieren eines Artikels in einer AMP Version über eine Checkbox im CMS

Was veröffentlichen wir auf AMP?

Derzeit veröffentlichen wir per default neben den News Themen auch Sport und News aus Entertainment. Wir haben aber wie bereits erwähnt die Möglichkeit jeden Artikel auf AMP zu publizieren.

Wie signalisieren wir Google dass es eine AMP Version des Artikels gibt?

Über das rel=„amphtml“ Metatag. Dieses funktioniert ähnlich wie ein rel=alternate Tag und signalisiert Google dass es eine alternative AMP Version gibt.

amphtml linkelement auf blick.ch zu amp.blick.ch

rel=amphtml Linkelement zeigt von der Desktopversion auf die equivalente Amp Version

Wie verhindern wir dass Google unsere AMP Version als Duplicate Content einstuft?

Über da rel=„canonical“ tag von Amp-Url auf die Desktop Version zurück zeigen.

Canonical Link von Blick.ch Amp Seite zur Desktopseite

Das Canonical Link Element muss von der AMP Version auf die equivalente Desktopversion verweisen

Welche Tools haben uns geholfen?

AmpBench Validator – Validator für AMP Seiten
Amp Validator – Plug-In für Google Chrome

Google Search Console – Tab „Accelerated Mobile Pages“ zeigt Fehler auf den indexierten Seiten an

 

Schlussgedanken

Es wird jetzt spannend werden, inwiefern ein Traffic-Shift von mobiler Webseite auf AMP stattfindet. Ob es am Ende tatsächlich Traffic on Top gibt, sprich AMP als zusätzlicher Traffic Channel gesehen werden kann, muss sich noch herausstellen.

Durch die starke Limitierung gehe ich ebenfalls davon aus dass Bounce Rates und Time on Site relativ hoch bzw. klein ausfallen.  Zumindest durch die Tatsache dass wir den User versuchen in der AMP View zu halten haben wir einen Ansatz auf diese Daten zu optimieren.

Auch interessant wird die Sicht auf die Veränderung der Click Through Rates. Hier verspreche ich mir durch die prominentere Darstellung, sowie dem Amp Label in den normalen Suchresultaten ebenfalls eine Steigerung.

Zumindest müssen wir uns über Seitenladezeiten keine Gedanken mehr machen.