Google AMP - Wie richte ich Google AMP ein?

Im letzten Blogbeitrag haben wir uns dem Thema Google AMP gewidmet. Dabei haben wir die Funktionsweise hinter dem neuen Standard erklärt. Im heutigen Beitrag wollen wir Euch erklären, wie Ihr Google AMP für Eure Webseite einrichten könnt.

Grundsätzlich gilt, dass sich aus jeder Standard-Webseite eine AMP-Seite entwickeln lässt. Dafür sind jedoch einige Anpassungen erforderlich:

  • Dokumententyp (Doctype): Zu Beginn jedes AMP-HTML-Dokuments steht der Dokumententyp:<!doctype html>
  • Der Zeichensatz <meta charset=“utf-8"> muss verwendet werden
  • Die AMP-Seite muss einen entsprechenden html-Tag besitzen -> <html amp>
  • Jede AMP-HTML-Seite muss <head> und <body> enthalten.
  • Sofern es zur AMP-Seite eine passende Standard-URL gibt, muss diese im Canonical-Tag verlinkt sein. Ansonsten kann die AMP-Seite auch per Canonical auf sich selber zeigen.

Beispiel:
<link rel=“canonical“ href=“https://www.meineseite.de/url/zur/original-version.html“ />
Hier wird auf die Original-URL verwiesen.

<link rel=“canonical“ href=“https://www.meineseite.de/url/zur/AMP-Seite.html“ />
Hier verweist der Canonical auf die AMP-Seite selbst.

Im Umkehrschluss empfiehlt es sich natürlich dann auch, auf der Standard-Webseite auf die AMP-Version zu verweisen. Hierfür wird im <head>-Bereich folgendes rel-Attribut eingefügt:
<link rel=“amphtml“ href=“https://www.meineseite.de/url/zur/AMP-Version.html“ />

  • Für die perfekte Ausgabe der AMP-Seite auf dem jeweiligen Gerätedisplay, sollte der Quellcode der AMP-Seite einen Viewport enthalten:

Beispiel:
<meta name=“viewport“ content=“width=device-width,minimum-scale=1?>

  • Im ersten Beitrag zu Google AMP hatten wir ja schon erklärt, dass die Inhalte von AMP-Seiten in das Content-Netzwerk von Google geladen werden, damit sie anschließend schnell abgerufen werden können. Damit dies technisch passiert, muss folgende Zeile im Code enthalten sein:
    <script async src=“https://cdn.ampproject.org/v0.js“></script>
  • Außerdem muss der folgende erweiterte Tag im <head>-Bereich implementiert sein, damit Google AMP funktioniert:

<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>

Das klang bis jetzt alles ziemlich technisch - geht aber für verschiedene Content-Systeme doch relativ einfach umzusetzen.

Dienste wie z.B. WordPress stellen mittlerweile Plugins zur Verfügung, die AMP-kompatible Versionen des Contents generieren, sobald die Inhalte ins Content Management System eingespielt werden.

CMS PluginsKostenBemerkungen
   
WordPress
gratisNach der Installation können alle Seiten Deines WordPress-Blogs in AMP-Seiten umgewandelt werden.
Wix BlogkostenlosBei der Umstellung kann es vorkommen, dass Rückgänge im Traffic in Google Analytics angezeigt werden, da ein Großteil der Besucher über AMP-Seiten auf Dein Angebot zugreift.
Typo3kostenlosDer Entwickler ist dankbar für Fehlermeldungen über Github.
Joomla! 1
Joomla! 2
79 Dollar
69 Dollar für ein Jahr
 
Magento Shop Blogs 1
Magento Shop Blogs 2
149 Dollar

99 Dollar

 
Shopware49 DollarDas Angebot enthält 12 Monate Support und kostenlose Updates.

Google AMP für WordPress einrichten

Für WordPress lässt sich AMP dank diverser Plugins ganz einfach einrichten.
Für unseren Agentur-Blog haben wir dafür dieses Plugin genommen. Vorteil ist hier, dass neben Google AMP auch Facebooks Äquivalent Instant Articles  eingerichtet werden kann. Ein weiterer Pluspunkt ist die gute (wenn auch nur auf Englisch verfügbare) Dokumentation zur Einrichtung des Plugins.

Schritt für Schritt:

  • Geht in Eurem WordPress-Dashboard zu: Plugins -> Installieren
  • Sucht nach: AMP for WP - Accelerated Mobile Pages

  • Plugin installieren + aktivieren
  • anschließend klickt Ihr im linken Menübaum auf: AMP

  • Nun landet Ihr direkt im Punkt Settings, bei dem Ihr ganz oben die Links zur Dokumentation für die Einrichtung findet. Nehmt Euch die Zeit um die Anpassungen vorzunehmen.
  • Vor allem ist es an dieser Stelle ratsam, das Logo des Blogs oder Unternehmens hochzuladen. Klickt dazu auf: den Punkt General: hier könnt Ihr das Logo hochladen/auswählen. Falls Euch die Standardgröße des Logos von 190x36 Pixel nicht zusagt könnt Ihr unter Custom Logo Size eine individuelle Größe angeben.
  • Abschließend noch Save Changes drücken um die Änderungen zu übernehmen.

Und schon ist Euer WordPress-Blog Google-AMP-fähig!

Damit Ihr auch eine Übersicht zu Euren Besuchern über AMP-Seiten habt, könnt Ihr jetzt noch das Webtracking aktivieren.

  • Klickt dazu auf: AMP -> Analytics
  • aktiviert Google Analytics (oder falls ein anderes Tracking-Tool verwendet wird, das entsprechende in der Liste)
  • tragt Eure Google Analytics ID ein
  • falls gewünscht könnt Ihr jetzt noch erweiterte Tracking-Informationen (Event-Tracking) hinterlegen

Kommen wir nun zum letzten und entscheidenden Punkt, damit Eure Inhalte auch den Weg als AMP-Seite in den Google-Index finden:

  • Geht in Eurem WordPress-Backend zu einer Seite, die Ihr auch gerne als AMP-Version haben möchtet, oder erstellt eine neue Seite.
  • Unterhalb des normalen Textfelds sollte sich nun auch der Custom AMP Editor befinden.
  • Setzt das Häkchen bei "Use this Content as AMP Content".
  • Anschließend könnt Ihr mittels "Copy the Content" den Inhalt aus dem oberen Editor in den AMP Editor kopieren.
  • Dann noch speichern und fertig.

Bis Eure ersten Seiten jetzt in der AMP-Version im Google Index erscheinen, dauert es jetzt noch ein wenig.
In der Google Search Console lässt sich nachverfolgen wieviele der AMP-Seiten Google bereits indexiert hat – unter: Darstellung der Suche -> Accelerated Mobile Pages. Sobald Seiten indexiert sind, sollten auch die Zugriffszahlen in Google Analytics sichtbar werden.

Wenn Ihr die Implementierung von AMP-HTML testen möchtet, könnt Ihr zum Abschluss das kostenlose Google-AMP-Testtool nutzen: https://search.google.com/test/amp. Nach erfolgreicher Überprüfung Eurer AMP-Seite kann diese auch an Google übermittelt werden.

Beispiel für diesen Blogbeitrag ist die AMP-Version: https://www.webneo.de/blog/google-amp-teil-2/amp/
Das Testergebnis zu dieser URL sieht dann so aus:

Ihr verwendet gar kein WordPress sondern verfügt über ein Shopsystem? Als Onlinshop Agentur beraten wir euch gerne, wie ihr AMP in eurem Shopsystem umsetzt. Als professionelle SEO Agentur können wir die Einrichtung von AMP und anderen Features auch für euch übernehmen. 

Über den Autor: 

Ronny Stöck ist seit September 2017 als Senior Online Marketing Spezialist Teil des WEBneo-Teams. Dabei berät er kleine und mittlere Unternehmen in allen Belangen des Online Marketings. Neben seinen Kundenprojekten beschäftigt sich Ronny auch gerne mit den neuesten Trends und gibt seine Erkenntnisse an seine Kunden weiter.