Ende 2015 hatte Google das Projekt AMP gestartet. AMP steht für Accelerated Mobile Pages und der Zweck des Frameworks ist es, mobile Webseiten zu verschlanken und raketenschnell zu laden. Vor allem bei mobilen Newsseiten und Blogs ist dies äußerst interessant. Denn gerade bei Newsseiten wollen Benutzer die Inhalte sofort auf ihrem Smartphone sehen und jede Millisekunde mehr Ladezeit sorgt eher für Unmut.
Seit Februar 2016 begann dann Google die Suchergebnisse in der Rubrik „Schlagzeilen“ hervorzuheben, die mit dem AMP Framework erstellt wurden. Seitdem wächst die Anzahl der Webseiten, die AMP unterstützen sehr schnell. Google beziffert aktuell 600 Mio. Dokumente, die mit AMP erstellt wurden. Es ist kein Nischenprodukt oder eine Randtechnologie, sondern ich bin überzeugt, dass AMP in den kommenden Monaten enorm an Bedeutung für Online Publisher gewinnt. Vor Allem für Verlage, Blogs, Journalisten, Online Zeitungen oder Corporate Publisher wird das Format essentiell werden.
Wie funktioniert AMP?
AMP ist eine Art Untersprache von HTML. Bekannte HTML Tags werden mit einem AMP Präfix gekennzeichnet. Das HTML Dokument enthält zudem ein zusätzliches AMP CSS und ein AMP Script.
Google cacht die Seiten bereits bevor sie aufgerufen wurden. Taucht also ein News Artikel in den Google News auf, wird die AMP Seite von Google gecacht. Klickt der User auf den Artikel, lädt diese blitzschnell.
Das HTML Markup erfordert folgende Bestandteile:
- start with the doctype <!doctype html>.
- contain a top-level <html ⚡> tag (<html amp> is accepted as well).
- contain <head> and <body> tags (They are optional in HTML).
- contain a <link rel=“canonical“ href=“$SOME_URL“ /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
- contain a <meta charset=“utf-8″> tag as the first child of their head tag.
- contain a <meta name=“viewport“ content=“width=device-width,minimum-scale=1″> tag inside their head tag. It’s also recommend to include initial-scale=1 (1).
- contain a <script async src=“https://cdn.ampproject.org/v0.js“></script> tag inside their head tag.
- contain the AMP boilerplate code (‚head > style[amp-boilerplate]‘ and ’noscript > style[amp-boilerplate]‘) in their head tag.
(1) width=device-width,minimum-scale=1 is required to ensure GPU rasterization is enabled.
Eine sehr gute Referenz, wir AMP HTML Seiten aufgebaut werden ist hier zu finden.
Wie nutze ich AMP für meine WordPress Webseite
Es gibt bereits erste Ansätze und Plugins um WordPress Webseiten mit AMP HTML zu versehen. Schreiben Sie uns oder rufen Sie uns an, wir unterstützen Sie WordPress Webseiten zu optimieren und schneller zu machen. Google setzt immer mehr auf mobile Webseiten und schon heute ist eine Optimierung der Ladezeit der Webseite extrem wichtig.
Interessante Quellen: