Die großen Content-Gatekeeper Facebook und Google liefern sich einen intensiven Wettstreit um immer tiefergreifende Kontrolle über die Inhalte auf ihren Plattformen. Was für Facebook ihre "Instant Articles" sind, ist AMP für Google: Ein eigener Standard, den es möglichst weit zu verbreiten gilt und auf den die Konkurrenz kaum Einfluss hat. Viele Onlinemarketer sehen vor allem den Traffic-Vorsprung, den sie sich mit einer schnellen Umsetzung verschaffen können.

1. AMP
Accelerated Mobile Pages
⚡

2. 2
Justus Blümer
https://wngmn.de
• Consultant bei
Wingmen Online Marketing in
Hamburg
• (Technische) Optimierung
• Große bis sehr große Websites &
dementsprechende Crawlingaufgaben
• Webanalyse(-implementierung)

3. 3
Was ist AMP?
http://www.chicagotribune.com/
Plugin: https://www.ghostery.com/

4. 4
„For many, reading on the mobile
web is a slow, clunky and frustrating
experience -
but it doesn’t have to be that way.“
– ampproject.org
Warum?
https://www.ampproject.org/

5. 5
Wer nicht hören will, muss fühlen
https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
http://googlecode.blogspot.de/2011/03/introducing-page-speed-online-with.html
https://webmasters.googleblog.com/2012/10/make-web-faster-with-modpagespeed-now.html
Google versucht es seit langem und war nie zufrieden
• Ladezeit offizieller Rankingfaktor seit April 2010
• Page Speed Online (Vorgänger von PageSpeed Insights) März 2011
• mod_pagespeed: Stable release Oktober 2012

6. 6
Wer nicht hören will, muss fühlen
https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Optional_Tags

7. 7
Was ist AMP?
http://www.zeit.de/wirtschaft/unternehmen/2016-09/uebernahme-kaisers-tengelmann-aufteilung-edeka-rewe-krisentreffen
Desktop Mobile

8. 8
Was ist AMP?
http://www.zeit.de/wirtschaft/unternehmen/2016-09/uebernahme-kaisers-tengelmann-aufteilung-edeka-rewe-krisentreffen
Desktop Mobile ⚡ AMP

9. 9
Was ist AMP?
http://www.zeit.de/wirtschaft/unternehmen/2016-09/uebernahme-kaisers-tengelmann-aufteilung-edeka-rewe-krisentreffen
Desktop Mobile ⚡ AMP

10. 10
AMP funktioniert
http://m.focus.de/politik/ausland/merkel-vorgefuehrt-russischer-geheimdienst-nutzt-wikileaks-fuer-kampagnen_id_5977879.html
https://www.google.de/amp/s/amp.focus.de/politik/ausland/merkel-vorgefuehrt-russischer-geheimdienst-nutzt-wikileaks-fuer-
Mobile-only Version, ohne AMP
⚡ AMP

11. 11
Was habe ich davon?
https://webmasters.googleblog.com/2016/08/amp-your-content-preview-of-amped.html
https://g.co/ampdemo

12. 12
Caching durch Google
https://webmasters.googleblog.com/2016/08/amp-your-content-preview-of-amped.html
• Geschwindigkeit durch Google-Infrastruktur
• Keine Probleme bei Lastspitzen
• Google hat die volle Kontrolle
• Konkurrenz ist nur einen Swipe entfernt
https://www.google.de/amp/amp.n-tv.de/wirtschaft/VW-
Werk-Emden-haelt-erneut-die-Baender-an-
article18702121.html
vs.
http://amp.n-tv.de/wirtschaft/VW-Werk-Emden-haelt-
erneut-die-Baender-an-article18702121.html

13. 13
Verbreitung
https://www.similartech.com/technologies/amp

14. 14
Es geht schneller als man denkt
https://www.ampproject.org/who/

15. 15
Kontrolle
• Datenhoheit
• Genauere Nutzersignale
• Bouncerate (nicht nur zurück
in die Suchergebnisse)
• Verweildauern
• Scrolltiefe
• Interaktion
• Datenexklusivität: Facebook &
andere bleibt draußen
• Volle Kontrolle über den
Incentive für Webmaster
• „Open Source“

16. 16
Kontrolle
https://www.ampproject.org/docs/guides/responsive/style_pages.html

17. 17
Kontrolle
https://www.ampproject.org/docs/guides/responsive/style_pages.html
?

18. Technik
Accelerated Mobile Pages

19. 19
Erkennungsmerkmale
https://www.ampproject.org/docs/reference/spec.html#required-markup

20. 20
Erkennungsmerkmale
https://www.ampproject.org/docs/reference/spec.html#required-markup

21. 21
Referenzierung ermöglicht Erkennung & verhindert DC!
https://www.ampproject.org/docs/reference/spec.html#required-markup
<link rel="canonical" href=“standard.html" />
<link rel="amphtml" href=“amp.html“ />
⚡

22. 22
AMP-only ist auch möglich
https://www.ampproject.org/docs/reference/spec.html#required-markup
<link
rel="canonical"
href=“amp.html"
/>
⚡

23. 23
Wenn, dann richtig: mit HTTPS
https://letsencrypt.org/

24. 24
Extension all the things!
https://github.com/ampproject/amphtml/tree/master/extensions/

25. 25
Extension all the things!
https://github.com/ampproject/amphtml/tree/master/extensions/
<amp-img
src=https://example.com/cat.jpg
width="200“
height="200“
layout="responsive“
alt=“Eine niedliche Katze“
>

26. 26
Verbote?
https://www.ampproject.org/docs/guides/validate.html
• Kein eigenes JavaScript
• Keine Formulare
• Keine Maps
• Keine interaktiven Infografiken
• Keine externen Kommentarsysteme

27. 27
Verbote?
https://www.ampproject.org/docs/guides/validate.html
• Kein eigenes JavaScript
• Keine Formulare
• Keine Maps
• Keine interaktiven Infografiken
• Keine externen Kommentarsysteme

28. 28
Es gibt für (fast) alles wichtige passende Workarounds
https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md
• amp-form
• amp-iframe

29. 29
Es gibt für (fast) alles wichtige passende Workarounds
https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md
https://iframely.com/docs/amp
„Embeds as a service“
Vorher nach „amp-nativer“ Umsetzung
durchsuchen:
https://github.com/ampproject/amphtml/tree/master/extensions

30. 30
Warum ist AMP so schnell?
https://www.ampproject.org/docs/guides/validate.html
• Preconnect, prefetching & prerendering
• Alles JS wird asynchron ausgeführt
• Inline CSS spart Requests, max 50 KB
• Priorisierung von Ressourcen
• Rechenintensive Selektoren & Animationen sind nicht erlaubt
• Maximal 50 KB CSS

31. 31
Validierung: Chrome Developer Tools, #development=1 an URL anhängen
https://www.ampproject.org/docs/guides/validate.html

32. 32
CMS
• Wordpress
https://wordpress.org/plugins/amp/
• Drupal
https://www.drupal.org/project/amp

33. 33
Schematische Auszeichnung
https://developers.google.com/search/docs/data-types/articles#article_types
• Inhaltlich passende Auszeichnung von schema.org implementieren
• v. a. Article, NewsArticle, BlogPosting
• JSON-LD
• Unabhängig von AMP
„Later this year, all types of sites that create AMP pages will
have expanded exposure […] like e-commerce, entertainment, travel,
recipe sites and many more.“

34. 34
Testing automatisieren
• HTML & Struktur
• Tracking & andere Requests
http://casperjs.org/
https://mochajs.org/
http://chaijs.com/
https://github.com/nathanboktae/mocha-casperjs
https://github.com/brianmhunt/casper-chai

35. Analyse
Accelerated Mobile Pages

36. 36
Google Analytics
INFOnline / IVW
Krux
Linkpulse
Lotame
Médiamétrie
mParticle
OEWA
Webanalyse: Unterstützte Anbieter
https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md
AFS Analytics
AT Internet
Burt
Chartbeat
ColAnalytics
Clicky Web Analytics
comScore
Cxense
ParselyPiano
Quantcast Measurement
SOASTA mPulse
SimpleReach
Snowplow Analytics
Webtrekk

37. 37
Webanalyse: Google Analytics Beispiel
https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md
<amp-analytics type=“googleanalytics”>
<script type="application/json">
{
"vars": {
"account": "UA-12435678-9“
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview“
}
}
}
</script>
</amp-analytics>
• Benutzerdefinierte Dimensionen
• Ereignisse
• Klicks
• Scrolling

38. 38
Google Analytics
• Tracking in die selbe Hauptproperty,
alternativ mehrere Properties möglich
• Trennung zwischen regulärem & AMP-
Traffic nicht verlieren
• Filter zur Umwandlung der AMP-URL in
separater Datenansicht oder
• Reguläre URL als dl Parameter setzen &
Custom Dimension auf „amp“ setzen

39. 39
Trackingpixel
https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md
<amp-pixel
src="https://trackinganbieter.de/?id=123456789">
</amp-pixel>
• Eigene Datenerhebung zur Kontrolle & Aufbau von Logfiles
• Anbindung von Trackingtools, für die es keine eigene
Implementierung gibt

40. Monetarisierung
Accelerated Mobile Pages

41. 41
AdServer über <amp-ad>
https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md
A9
AccessTrade
Adblade
Adform
Ad Generation
ADITION
Adman
AdReactor
AdSense
AdsNative
AdSpirit
AdStir
AdTech
Ad Up Technology
AMoAd
AppNexus
Atomx
CA-ProFit-X
Chargeads
Colombia
Content.ad
Criteo
Dot and Media
Doubleclick
E-Planning
Ezoic
Flite
GenieeSSP
GMOSSP
I-Mobile
Improve Digital
Industrybrains
InMobi
Kargo
MADS
MANTIS
MediaImpact
Meg
MicroAd
Mixpo
Nativo
Nend
Open AdStream
(OAS) OpenX
Plista
PubMatic
Pubmine
PulsePoint
Revcontent
Rubicon Project
Sharethrough
Smart AdServer
Sortable
SOVRN
Teads
TripleLift
Webediads
Weborama
Widespace
YahooJP
Yieldbot
Yieldmo
Yieldone
Zucks

42. 42
„It is a core objective of the
Accelerated Mobile Pages project to
support subscriptions and paywalls“
– ampproject.org
Warum?
https://www.ampproject.org/
https://github.com/ampproject/amphtml/blob/master/extensions/amp-access/amp-access.md
• System muss mit <amp-access> Extension funktionieren

43. Fazit
Accelerated Mobile Pages

44. 44
Wie viele Plattformen kann man unterstützen?
http://www.zeit.de/wirtschaft/unternehmen/2016-09/uebernahme-kaisers-tengelmann-aufteilung-edeka-rewe-krisentreffen
http://www.zeit.de/zeit-magazin/2016/37/kabeltrommeltisch-diy-couchtisch-wundertuete
Desktop Mobile ⚡ AMP
Facebook
Instant Articles

45. 45
Wie viele Plattformen kann man unterstützen?
Logos: feedly, Flipboard, Google Play Kiosk, Apple News

46. 46
Fazit
• Das Prinzip AMP ist keine gute Idee
• Die meisten haben trotzdem keine Wahl
• Wer aktuell so viel (News-)Traffic wie möglich will, muss AMP anbieten
• Die Vorteile können sich jederzeit ändern
• Welche Daten braucht man, auf welche kann man verzichten?
• Jetzt schema.org einbauen
• AMP testen! Es muss nicht immer die komplette Website sein

47. Danke.
Justus Blümer – Wingmen Online Marketing
justus.bluemer@wngmn.de