Deine praktische Step-by-Step-Anleitung zur Einrichtung und zum Monitoring von AMP Pages.
Mit Accelerated Mobile Pages (AMP) wurde schon 2015 von Google und anderen Initiatoren wie Adobe und WordPress ein neuer Standard für sofort ladende, mobile Webseiten geschaffen. Dabei kam der Bedeutung der „Mobile Friendliness“ in den letzten Jahren eine immer stärkere Bedeutung zu. Vor allem AMPs spielen dabei eine wichtige Rolle. Daher zeigen wir Dir in dieser Step-by-Step-Anleitung, wie Du im Handumdrehen Deine AMP Pages einrichtest und überwachst.
Wie Google in seiner neuesten Mitteilung im Webmaster Central Blog berichtet, ist es ab dem 01. Februar 2018 zudem erforderlich, dass der Inhalt der AMP-Seite mit dem Inhalt der ursprünglichen kanonischen Seite übereinstimmt. Darin heißt es unter anderem:
„AMP wurde eingeführt, um die Leistung im Internet drastisch zu verbessern und um eine schnelle und konsistente Nutzung von Inhalten zu gewährleisten. Aus diesem Grund werden wir bei Seiten, die in der Google-Suche als AMP-Seiten erscheinen sollen, eine starke Ähnlichkeit zwischen AMP und kanonischen Seiten durchsetzen.[…] Enthält eine AMP-Seite nicht dieselben grundlegenden Inhalte wie die entsprechende Nicht-AMP-Seite, werden wir unsere Nutzer an die Nicht-AMP-Seite weiterleiten. Dies hat keinen Einfluss auf das Suchranking. Die Seiten werden jedoch nicht für Suchfunktionen in Betracht gezogen, die AMP erfordern, z. B. für das Schlagzeilenkarussel mit AMP.“
Die mobile Internetnutzung ist mittlerweile in vielen Bereichen zum Standard geworden. Wo früher noch ein Desktop-PC benötigt wurde, reicht heute ein Smartphone mit mobiler Netzverbindung aus. Allerdings sorgt die geringere Bandbreite mobiler Internetverbindungen sowie die Hardware von Smartphones und Tablets dafür, dass Webseiten unterwegs häufig langsamer geladen werden.
Die Ladegeschwindigkeit ist gerade im mobilen Netz ein entscheidender Faktor dafür, dass ein Nutzer die aufgerufenen Inhalte überhaupt konsumiert. Lädt die Seite zu lang, springt er ab.
Schnelle mobile Internetseiten sind aber in der Regel nur mit zahlreichen technischen Anstrengungen zu erzielen. Große Firmen wie WordPress, Adobe und allen voran Google haben deshalb 2015 das Accelerated Mobile Pages Project ins Leben gerufen. Damit wurde ein neues mobiles Ökosystem geschaffen, mit dessen Hilfe Publisher auf standardisierte Techniken zurückgreifen und schnell ladende Webseiten erstellen können.
Die Technik selbst basiert auf drei Komponenten:
Der größte Vorteil von AMP besteht darin, dass die darauf basierenden Webseiten aktuell am schnellsten laden. Somit ist die User Experience mit AMP-Seiten erwartungsgemäß sehr positiv. In den Case Studies des AMP-Projekts gibt es zahlreiche Beispiele dafür, wie Webseiten mit AMP deutlich geringere Absprungraten und Webshops höhere Conversions erzielen konnten. Ein weiterer Vorteil von AMP-Seiten besteht darin, dass sie relativ einfach gepflegt werden können, insbesondere dann, wenn entsprechende Plugins zum Einsatz kommen.
Durch die Reduktion auf das Wesentliche verfügen AMP-Seiten allerdings meist nicht über die volle Funktionalität von herkömmlichen Webseiten. Dieser Nachteil gilt vor allem für den E-Commerce-Bereich. Doch tatsächlich gibt es noch zu wenig Erfahrungswerte, um hier genaue Daten zu liefern.
Die hohe Geschwindigkeit wird über das AMP Content Delivery Network erzielt. Zu diesem Zweck werden die Inhalte der AMP-Seiten dezentral an verschiedenen Serverstandorten gespeichert. Wer bei der Datenverwaltung auf einen lokalen Standort pocht, wird deshalb AMP-Seiten als Nachteil sehen. Damit verbunden ist die noch höhere Abhängigkeit von Google, was die Technik angeht.
AMP-Seiten lassen sich aus Standard-Webseiten entwickeln. Dafür müssen jedoch einige Anpassungen erfolgen:
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.
<meta name=“viewport“ content=“width=device-width,minimum-scale=1″>
<script async src=“https://cdn.ampproject.org/v0.js“></script>
Das erweiterte Tag für den <head>-Bereich muss ebenfalls implementiert werden:
<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>
Du kannst Deine AMP-Seiten ebenfalls mit Markups ausstatten. So ist es zum Beispiel möglich, dass News- oder Rezeptseiten auf mobilen Endgeräten perfekt in den SERPs dargestellt werden. News werden zum Beispiel mit entsprechendem Markup im sogenannten „Karussell“ von Google angezeigt.
Ein News-AMP-Artikel kann zum Beispiel so ausgezeichnet werden:
{
„@context“: „http://schema.org“,
„@type“: „NewsArticle“,
„headline“: „Titel“,
„datePublished“: „2017-11-11T11:11:00Z“,
„image“:“logo.jpg“
}
Um Bilder korrekt auf AMP-Seiten anzuzeigen, musst Du wiederum den HTML-Code anpassen. Konkret werden die Verweise auf Bilder im Quellcode angepasst. Du ersetzt <img src> durch <amp-img src>.
Ein Beispiel:
<amp-img src=“tollegrafik.jpg“ alt=“Tolle aktuelle Grafik“ height=“400″ width=“800″></amp-img>
AMP-Seiten sind grundsätzlich sehr schlicht. Möchtest Du die Farbe des Hintergrunds ändern, kannst Du folgende Elemente anpassen.
<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Beachte, dass AMP-Seiten um Zeit zu sparen, nur auf ein Stylesheet zugreifen.
Alle Details zur Gestaltung von Styles über CSS findest Du hier.
Du solltest auf Deiner Standard-Webseite unbedingt auf Deine AMP-Version verweisen. Hierfür wird das rel-Attribut verwendet. Es wird im <head>-Bereich eingefügt und linkt auf die AMP-Version:
<link rel=“amphtml“
href=“https://www.meineseite.de/url/zur/AMP-Version.html“ />
Grundsätzlich gelten für AMP-Seiten die gleichen Richtlinien wie für alle Google-freundlichen Webseiten. Damit Deine Seite in der Google-Suche erscheint, muss sie grundsätzlich allen wichtigen AMP-Spezifikationen entsprechen, ihre Inhalte müssen identisch mit den Inhalten der Standard-Seite sein und das URL-Schema sollte für Nutzer nachvollziehbar sein.
Darüber hinaus gibt Google an, dass die Seite grundsätzlich mit AMP kompatibel sein muss. Die Kompatibilität gilt darüber hinaus auch für eingefügte strukturierte Daten.
| CMS Plugins | Kosten | Bemerkungen |
| WordPress | gratis | Nach der Installation können alle Seiten Deines WordPress-Blogs in AMP-Seiten umgewandelt werden. |
| Wix Blog | kostenlos | Bei 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. |
| Typo3 | kostenlos | Der 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 |
|
| Shopware | 49 Dollar | Das Angebot enthält 12 Monate Support und kostenlose Updates. |
Wenn Du AMP-Seiten eingerichtet hast, können diese mit Hilfe der Google Search Console ganz einfach überprüft werden. Voraussetzung dafür ist, dass Deine Webseite in der Search Console hinterlegt ist.
Logge Dich dann wie gewohnt ein und klicke im Bereich „Darstellung der Suche“ auf „Accelerated Mobile Pages“. Danach wird die die Zahl der indexierten AMP-Seiten angezeigt. Außerdem erhältst Du alle wichtigen Fehlermeldungen.
Abbildung 1: AMP-Seiten in der Google Search Console
Bedenke beim Auswerten der Daten, dass nicht immer sofort alle Änderungen und Anpassungen in der Search Console angezeigt werden. Darauf hat John Mülller von Google bereits Anfang 2016 in einem Posting auf Google+ hingewiesen.
Wenn Du die Implementierung von AMP-HTML testen möchtest, steht das kostenlose Google-AMP-Testtool zur Verfügung: https://search.google.com/test/amp
Abbildung 2: Testergebnis des Google AMP-Testingtools
Eine dritte Möglichkeit besteht auch darin, AMP-Seiten mit der Entwickler-Console von Google Chrome zu überprüfen.
Dafür rufst Du zunächst Deine AMP-Seite im Browser auf.
Schließlich lassen sich AMP-Seiten noch mit dem AMP-Validator des AMP-Projects kontrollieren. Dort wird der komplette AMP-HTML-Code eingegeben. Der Validator kann auch zum Kontrollieren von AMP Ads genutzt werden.
Abbildung 3: AMP Validator des AMP-Projects
Auch mit Ryte lassen sich AMP Pages mit wenigen Klicks testen und prüfen. Einzelne Elemente lassen sich über die “Custom Fields” monitoren.
Abbildung 4: AMP mit Ryte mit Custom Fields kontrollieren
Möglich ist zum Beispiel, dass Du mit Ryte testest, ob Deine Standard-Webseite auf Deine AMP-Seite mit rel=“amphtml“ verweist.
So gehst Du vor:
Beachte bitte, dass eventuell ein neuer Crawl nötig ist, damit Ryte alle Deine AMP-Verweise tracken kann.
Schon ein Jahr nach Vorstellung des AMP-Projekts wurde auf die Möglichkeit verwiesen, dass die schnell ladenden Webseiten auch für den E-Commerce genutzt werden können. Im Blog des AMP-Projekts gibt es auch Beispiele für Produkt- und Kategorieseiten.
Die Verkaufsplattform Ebay hat schon im Juli 2016 AMP-Seiten eingeführt. Ein Beispiel für die AMP-Version findet sich hier.
Über die Fallstricke und Möglichkeiten von AMP im E-Commerce informiert dieser Beitrag. Anschauliche Case Studies werden auf der Projektseite von AMP präsentiert.
AMP wurden zu einem großen Teil extra dafür geschaffen, damit Publisher auf eine standardisierte Weise schnell ladende Webseiten erstellen können. Dabei wurde auch bedacht, dass die entsprechenden Werbemittel eingeblendet werden können. Seit Sommer 2016 ist es auch möglich spezielle AMP-Ads zu erstellen, die ebenfalls sehr schnell laden und die Performance der Seite nicht behindern. Für die Erstellung der Ads gibt es jedoch einige Voraussetzungen. Auch beim Ausspielen gelten besondere Regeln wie „Content first“. Demnach werden immer erst die Inhalte geladen, erst danach die Werbung. (Quellen: ampproject.org, medium.com)
Theoretisch ist Duplicate Content möglich, doch praktisch wird es bei korrekter Implementierung nicht dazu kommen. Google empfiehlt, bei der Einrichtung von AMP einen Canonical Tag von der AMP-Version auf die Standard-Version zu setzen. Gibt es lediglich eine AMP-Version, verweist der Canonical auf sich selbst. (Quelle: https://www.ampproject.org/docs/guides/discovery)
Zudem verweist eine reguläre HTML-Seite per rel=“amphtml“ auf eine vorhandene AMP-Seite. Dadurch wird Google ebenfalls ein Signal gegeben, dass noch eine andere Version verfügbar ist. Durch den Canonical-Tag auf der AMP-Seite wird zusätzlich sichergestellt, dass Suchmaschinen auf das Original verwiesen werden.
Theoretisch funktionieren AMP-Seiten auf allen möglichen Endgeräten. Somit kann es ausreichen, nur eine AMP-Version zu erstellen. Sie wird im Responsive Webdesign auf jedem Display angezeigt. Allerdings sind manche E-Commerce-Funktionen für AMP noch nicht ganz ausgereift. Das betrifft vor allem Skripte, die gerade bei AMP auf ein Minimum reduziert werden. Ansonsten ist es natürlich problemlos möglich eine mobile Version nur als AMP zu realisieren.
Ja, auf der Projektseite von AMP wird empfohlen, schema.org zur Auszeichnung von strukturierten Daten zu verwenden. Allerdings wird darauf hingewiesen, nur Properties zu verwenden, die Sinn ergeben. (Quelle: ampproject.org)
Die Accelerated Mobile Pages sind eine sinnvolle Lösung, um mobile Websites noch schneller zu machen. Mit Hilfe von Plugins lässt sich die Technik sehr schnell umsetzen. Der Nutzen für Deine Zielgruppe kann sehr hoch sein, weil die Seiten auch bei einer schlechten mobilen Internetverbindung sehr schnell laden.
Das AMP-Projekt befindet sich trotz seiner Vorstellung 2015 immer noch in einer relativ frühen Phase. Doch gerade im dritten Quartal 2017 steigert Google mit seinen Roadshows und umfassenden Informationen zu AMP-Seiten eine neue Initiative, welche die Verbreitung deutlich beschleunigen wird. Deshalb ist es sinnvoll, wenn Du Dich ebenfalls mit AMP auseinandersetzt.
| Aufgabe | Erledigt? |
| Ist der Dokumententyp <!doctype html> am Anfang des HTML-Codes vorhanden? | |
| Habe ich den <meta charset=“utf-8″> Zeichensatz verwendet? | |
| Existiert ein <html ↯> oder <html amp> AMP-Tag? | |
| Gibt es einen <head> und <body>? | |
| Verweist die AMP per Canonical auf die Original-Seite? | |
| Ist ein Viewport eingefügt? | |
| Ist das Script zum CDN für AMP eingefügt? | |
| Wurde das erweiterte Tag im <head>-Bereich genutzt? |
Monitore Deine AMP Pages gezielt mit Ryte FREE!
Los geht’s!Veröffentlicht am 29.11.2017 von Eva Wagner.
Who writes here
Eva ist seit Beginn 2015 Superhero im Online-Marketing Team von Ryte. Als Verantwortliche für Redaktion & Presse organisiert sie mit viel Kreativität und ihrem Gespür für aktuelle Themen das Ryte Magazine und das Ryte Wiki. Außerdem managed sie die Präsenz von Ryte auf großen Messen wie der dmexco in Köln.
Jetzt Gastautor werden »
Entdecke Ryte und optimiere Deine Website nachhaltig!
Jetzt loslegen