Das Web entwickelt sich ständig weiter und für viele Geschäftsinhaber bedeutet dies die Notwendigkeit, über alle Änderungen bei Google informiert zu sein. Wenn Sie sich nicht anpassen, bedeutet das, dass Sie immer einen Schritt hinter allen anderen sind. Google AMP, die mobile Initiative zur Beschleunigung des Webs, nähert sich nun ihrem einjährigen Jubiläum. Da es jetzt viel stabiler ist als vor 6 Monaten, dachten wir, es wäre ein guter Zeitpunkt, mit Ihnen einige Schritte zu teilen, wie Sie mit Google AMP in WordPress beginnen, sowie einige der Vor- und Nachteile dieser neuen Plattform darzustellen.

Was ist Google AMP?

Google AMP (Accelerated Mobile Pages Project) wurde ursprünglich bereits im Oktober 2015 eingeführt. Das Projekt basiert auf AMP HTML, einem neuen offenen Framework, das vollständig aus bestehenden Web-Technologien besteht und es Webseiten ermöglicht, leichte Webseiten zu erstellen. Um es einfach auszudrücken, bietet es eine Möglichkeit, eine abgespeckte Version Ihrer aktuellen Webseite bereitzustellen.

„Vom ersten Tag an lag ein Schwerpunkt für AMP auf der Geschwindigkeit. Es ist wohl eines der frustrierendsten Dinge über das mobile Web – bestätigt durch eine aktuelle Google-Studie, die zeigt, dass 53% der Menschen eine Webseite verlassen, die in drei Sekunden oder weniger nicht geladen wird. Das ist das Schlimmste aller Dinge für Benutzer, Unternehmen, Verlage, Websites und das mobile Web als Ganzem. – David Besbris, AMP-Projektleiter bei Google“

Laut dem aktuellen State of the Online Retail Performance Report von Akamai zählt jede Zehntelsekunde. Selbst ein leichter Anstieg der Seitenladezeit auf 2,8 Sekunden führte zu einem Rückgang der Conversion Rate um 2,4%.

Korrelation zwischen der Seitengeschwindigkeit und der Conversion Rate auf Mobilgeräten

Korrelation zwischen der Seitengeschwindigkeit und der Conversion Rate auf Mobilgeräten

Viele große Unternehmen haben Google AMP im vergangenen Jahr eingeführt, dazu gehören WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo etc. Laut Google verzeichnete Slate einen Anstieg der monatlichen Unique Visitors um 44% und einen Anstieg der Visits um 73% pro monatlichem Unique Besucher.

Wenn eine Seite über AMP in Google ausgespielt wird, wird das AMP-Symbol daneben angezeigt, wie unten in der New York Times Demo zu sehen ist. Beachten Sie, dass Sie sich auf einem mobilen Gerät befinden müssen, um dies zu testen. Sie können auch den Geräteemulator in Chrome-Devtools verwenden. Die strukturierte Datenauszeichnung ermöglicht es Google, Ihre Inhalte in den Suchergebnissen stärker zu präsentieren. So können beispielsweise AMP-Artikel, die die entsprechenden Markup-Eigenschaften aufweisen, den begehrten Karussellplatz in den SERPs erhalten, wie unten gezeigt.

Google AMP Karussell

Google AMP Karussell

Und hier ist ein Beispiel dafür, wie eine AMP-Seite auf der Webseite der New York Times aussieht. Wie Sie sehen können, ist die Seite sehr einfach und simpel gehalten, was das Ziel von AMP ist. Dadurch wird sichergestellt, dass die Seite schnell geladen wird und eine bessere Benutzerfreundlichkeit bietet.

Google AMP Beispiel

Google AMP Beispiel

Wie bei jeder neuen Plattform sollten Sie die Vor- und Nachteile abwägen und entscheiden, ob es der richtige Schritt für Ihr Unternehmen und/oder Ihre Webseite ist.

Google AMP Vorteile

Google AMP Nachteile

Seit Februar 2017 zeigt Google AMP die URLs der direkten Publisher an. Bisher wurde nur die Version von Google angezeigt, die aus dem Cache bedient wird. Dies führte zu Bedenken aus der Sicht des Brandings. Glücklicherweise hat Google das auch erkannt und eine Änderung vorgenommen. Nun wird im URL-Feld eines Browsers weiterhin eine Google-URL angezeigt. Der AMP-Header-Bereich zeigt jedoch ein Link oder Kettensymbol an, das als „Anker“-Button bezeichnet wird. Wenn Sie darauf klicken, wird die direkte URL des Herausgebers angezeigt, so dass sie einfach kopiert und eingefügt werden kann. Dies ist immer noch keine perfekte Lösung, aber es ist besser als nichts.

Google MP Herausgeber URL

Bildquellemg: Google Developer Blog

Hier ein weiteres Beispiel, das den Branding Verlust darstellt.

Es ist auch wichtig zu beachten, dass, wenn die einzige existierende Seite für die mobile Version eine AMP-Version ist, Google weiterhin die Desktop-Version für die Indizierung verwendet, selbst wenn Google seinen Index auf den mobilen first Index umgestellt hat.

Wie Sie Google AMP in WordPress einrichten

Glücklicherweise ist es jetzt viel einfacher, Google AMP in WordPress zu implementieren, als es noch vor 6 Monaten war. Bei den WordPress-Plugins und der Plattform als Ganzem wurden große Fortschritte erzielt. Denken Sie jedoch daran, dass Ihr Code mit Google validiert werden muss, um die AMP-Version Ihrer Webseite in SERPs anzuzeigen. Ein Plugin verwandelt Ihren Beitrag in eine AMP-Version, aber es liegt an Google zu entscheiden ob Sie Ihre AMP Version anzeigen.

Grundsätzlich funktioniert es so, dass Ihrem WordPress-Post eine andere URL zugewiesen wird. Dies alles wird vom WordPress-Plugin automatisch übernommen. Typischerweise wird /amp oder /?amp an deinen aktuellen Beitrag angehängt. Hier ist ein Beispiel:

Original Blog Post URL: https://domain.com/blog-post
AMP Blog Post URL: https://domain.com/blog-post/amp/

Google AMP WordPress Plugin

Es gibt derzeit 2 beliebte WordPress-Plugins im Repository, die Ihnen bei der Einrichtung mit Google AMP helfen können. Das erste ist das kostenlose offizielle AMP-Plugin, das tatsächlich vom Team von Automattic entwickelt wird.

Officiell Google AMP-Plugin bei Automattic

Officiell Google AMP-Plugin bei Automattic

Zum Zeitpunkt, an dem dieser Artikel geschrieben wurde, hat es über 200.000 aktive Installationen mit einer Bewertung von 3,5 von 5 Sternen gegeben. Sie können es aus dem WordPress-Repository herunterladen oder indem Sie es in Ihrem WordPress-Dashboard unter „Add New“ Plugins suchen. Sie können das Aussehen etwas unter dem Editor „Appearance AMP“ (wie unten gezeigt) anpassen. Allerdings sind Ihre Möglichkeiten mit dem Plugin ziemlich eingeschränkt und es setzt voraus, dass Sie wissen, wie man zusätzliche Filter für Funktionen wie AdSense oder Analytics implementiert.

WordPress AMP Designs

WordPress AMP Designs

Es ist auch wichtig zu beachten, dass es nur Beiträge und keine Seiten unterstützt. Obwohl Google angekündigt hat, dass sie daran arbeiten, dieses Feature hinzuzufügen. Unten ist ein Beispiel dafür, wie unser WordPress-Post nach der Installation des Plugins aussieht.

WordPress AMP Vorschau

WordPress AMP Vorschau

Wenn Sie eine einfache Möglichkeit suchen, zusätzliche Funktionen hinzuzufügen, dann kommt hier das kostenlose AMP für WP-Plugin ins Spiel. Dies ist im Grunde genommen eine weiterentwickelte Version des offiziellen AMP-Plugins und bietet Ihnen zusätzliche Funktionen und Unterstützung. Entwickelt wurde es von Ahmed Kaludi und Mohammed Kaludi, die auch einen erfolgreichen WordPress Themenshop betreiben.

AMP for WP WordPress Plugin

AMP for WP WordPress Plugin

Zum jetzigen Zeitpunkt verfügt es über mehr als 70.000 aktive Installationen mit einer Bewertung von 4,6 von 5 Sternen. Sie können es aus dem WordPress-Repository herunterladen oder indem Sie es in Ihrem WordPress-Dashboard unter „Add New“ Plugins suchen. Dieses Plugin ermöglicht es Ihnen, viel mehr an Ihren Google AMP-Setup anzupassen. Außerdem unterstützt es Seiten. Im Folgenden werden wir auf die Anpassungen und Funktionen eingehen, die innerhalb der AMP-Plugin-Einstellungen in Ihrem Dashboard verfügbar sind.

Wir verwenden dieses Plugin derzeit hier bei Kinsta! Sie können sehen, dass AMP auf diesem Beitrag läuft, wenn Sie zu https://kinsta.com/blog/google-amp/amp/. gehen (Update: Ab Anfang September betreiben wir AMP nicht mehr auf unserer Seite. Schauen Sie sich unsere Fallstudie an, warum wir Google AMP deaktiviert haben). Desweiteren können Sie unten ein Beispiel in SERPs eines Kinsta-Blog-Posts sehen. Hier können Sie auch das AMP Logo sehen.

Beispiel eines Kinsta Artikels in den SERPs

Beispiel eines Kinsta Artikels in den SERPs

Allgemeines

Unter „General“ können Sie ein Logo hinzufügen, die Größe anpassen und auch wählen, ob Sie AMP auf Seiten aktivieren möchten oder nicht. Abhängig von Ihrer Webseite und Ihrem Traffic möchten Sie möglicherweise nur AMP in Ihrem Blog aktivieren (Post-Typen).

Accelerated mobile pages in den allgemeinen Einstellungen

Accelerated mobile pages in den allgemeinen Einstellungen

Homepage

Unter Homepage können Sie den Homepage-Support aktivieren oder deaktivieren, die Größe der Homepage-Thumbnails überschreiben und wählen, was passieren soll, wenn Benutzer auf das Logo klicken (zur AMP-Version oder zur Nicht-AMP-Version gehen).

AMP Homepage

AMP Homepage

Page Builder

Unter dem Tab „Page Builder“ können Sie einstellen, ob Sie Widgets für Ihre AMP-Seite nutzen möchten.

AMP Page Builder

AMP Page Builder

Design

Unter Design können Sie den Post Builder starten oder aus einer vorgefertigten Vorlage auswählen. Sie können HTTPS für die Suche aktivieren und auch die Schaltfläche Jetzt anrufen hinzufügen. Es gibt außerdem eine Option für benutzerdefiniertes CSS. Auf unserer Webseite fügen wir zum Beispiel den folgenden Code hinzu, um die Farbe der Kopfzeile anzupassen:

.amp-wp-header {background-color:#5CC0C0;}
AMP Design

AMP Design

Single

Unter “Single“ können Sie soziale Symbole aktivieren, Links deaktivieren, Autorenbiografien anzeigen und sogar Optionen für verwandte Beiträge ändern.

AMP Single Post

AMP Single Post

Werbung

Unter dem Tab „Advertisement“ können Sie AdSense aktivieren und die Platzierungen auswählen. Dieses Plugin ist eine der einfachsten Möglichkeiten, AdSense mit Google AMP hinzuzufügen. Für diejenigen unter Ihnen, die sich auf Werbung verlassen, um Ihre Websites zu betreiben, kann dies eine sehr nützliche Funktion sein (Lesempfehlungen: Wie man Google AdSense zu WordPress hinzufügt).

AMP Werbung

AMP Werbung

AMP-Menü

Unter Menü können Sie wählen, ob Sie /amp/ am Ende der Menü-URLs hinzufügen möchten oder nicht. Vielleicht möchten Sie, dass Ihre Besucher auf Ihrer AMP-fähigen Webseite bleiben, wenn ja, dann sollten Sie dies aktivieren.

AMP Menü

AMP Menü

Social

Unter dem Menü „Social“ können Sie hinzufügen, welche sozialen Netzwerke Sie auf dem Handy zum Teilen anzeigen möchten. Für Facebook müssen Sie eine kostenlose App-ID registrieren.

AMP Social

AMP Social

SEO

The SEO screen is probably one of the most important, as this pertains to how Google will see and rank your AMP content. We recommend enabling the „Meta Description“ option. If you are using the Yoast SEO plugin, then we also recommend enabling the „Meta Tags from Yoast“ and „Yoast Description in ld+jason“ options.

Der SEO-Tab ist wahrscheinlich einer der wichtigsten, da dies davon abhängt, wie Google Ihre AMP-Inhalte sieht und bewertet. Wir empfehlen, die Option „Meta Description“ zu aktivieren. Wenn Sie das Yoast SEO Plugin verwenden, dann empfehlen wir auch die Optionen „Meta Tags von Yoast“ und „Yoast Description in ld+jason“ zu aktivieren.

AMP SEO Optionen

AMP SEO Optionen

Analytics

Der Analytics Tab ermöglicht es Ihnen, Ihre Tracking-Skripte für Google Analytics und den Google Tag Manager hinzuzufügen. Dies ist notwendig, um sicherzustellen, dass Ihre Daten auf dem neuesten Stand sind.

AMP Analytics

AMP Analytics

Es unterstützt auch Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika und Chartbeat Analytics.

Strukturierte Daten

In dem Tab für strukturierte Daten können Sie das standardmäßige Logo für strukturierte Daten und das Post-Image anpassen.

AMP Strukturierte Daten

AMP Strukturierte Daten

Kontakt Form

Das Kontakt Form Tab lässt Sie ganz einfach ein Kontaktformular in Ihre AMP-Seite integrieren.

AMP Kontakt Form

AMP Kontakt Form

Benachrichtigungen

Unter dem Tab „Notifications“ können Sie aktivieren, dass eine Cookie-Warnung angezeigt wird. Dies kann für diejenigen in Ländern mit restriktiveren Datenschutzgesetzen nützlich sein.

AMP Benachrichtigungen

AMP Benachrichtigungen

Kommentare

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an

Unter dem Tab „Comments“ können Sie die Unterstützung für Kommentarsysteme von Drittanbietern wie Disqus und Facebook-Kommentare aktivieren.

AMP Kommentare

AMP Kommentare

Erweiterte Einstellungen

Unter den erweiterten Einstellungen können Sie die mobile Umleitung aktivieren. Denken Sie daran, dass standardmäßig nur AMP für mobile Benutzer aktiviert wird, die über SERPs darauf klicken. Wenn ein mobiler Benutzer direkt auf Ihre Webseite zugreift, erhält er die AMP-aktivierte Seite nur, wenn Sie die Umleitung aktivieren. Sie können auf diesem Bildschirm auch benutzerdefiniertes HTML eingeben und die Aktion für den Fußzeilen-Link ändern.

AMP Erweiterte Einstellungen

AMP Erweiterte Einstellungen

Erweiterungen

Die Entwickler haben auch Premium-Erweiterungen, die Sie erwerben können, um das AMP-Plugin noch weiter zu verbessern. Einige beliebte, an die Sie vielleicht denken sollten, sind E-Mail-Optionen, CTA-Buttons und die Unterstützung für benutzerdefinierte Posttypen.

AMP Erweiterungen

AMP Erweiterungen

Und so sieht ein AMP Blog Post von Kinsta aus.

AMP für WP Beispiel

AMP für WP Beispiel

Die gleichen Entwickler von AMP für WP haben kürzlich auch ein neues Plugin, AMP WooCommerce, veröffentlicht, mit dem Sie AMP in Ihrem E-Commerce-Shop aktivieren können.

AMP WooCommerce Pluign

AMP WooCommerce Pluign

Validierung Ihres Google AMP-Codes

After you get Google AMP setup on your WordPress site you will want to make sure that your code validates. If it doesn’t Google won’t show the AMP version in SERPs. You can run your WordPress site through Google AMP Validator tool. It will show you at the bottom if you pass or fail.

Nachdem Sie Google AMP auf Ihrer WordPress-Seite eingerichtet haben, müssen Sie sicherstellen, dass Ihr Code validiert wird. Wenn es nicht funktioniert, zeigt Google die AMP-Version nicht in SERPs an. Sie können Ihre WordPress-Seite über das Google AMP Validator-Tool ausführen. Es zeigt Ihnen unten an, ob Sie „bestanden“ haben oder nicht.

Google AMP Validator

Google AMP Validator

Sie können auch die kostenlose Chrome AMP-Erweiterung herunterladen, die jede Seite validiert. Wenn es rot angezeigt wird, können Sie es anklicken und schnell die Fehler oder Warnungen auf der Seite sehen.

Google AMP Fehler

Google AMP Fehler

Wenn die Validierung nicht bestanden wird, sehen Sie möglicherweise einen Fehler wie diesen: „Keine gültige AMP-Seite.“ In diesem Beispiel unten lag es an der Verwendung alter und nicht mehr unterstützter HTML-Tags.  Sie können eine vollständige Liste der von AMP unterstützten HTML-Tags sehen. Ungültige AMP-Seiten haben in den Google-Suchergebnissen keine AMP-spezifischen Funktionen.

Keine valide AMP Seite

Keine valide AMP Seite

Sie können Ihre Webseite auch in der Google Search Console unter dem Abschnitt „Search Appearance“ auf AMP-Probleme überprüfen. Es ist wichtig zu beachten, dass viele Benutzer große Verzögerungen bei der AMP-Berichterstattung in der Google Search Console gemeldet haben. Dies liegt höchstwahrscheinlich daran, dass es sich um eine noch relativ neue Plattform handelt und das Crawlen nicht so häufig vorkommt.

Accelerated mobile pages Bericht in der Google Search Console

Accelerated mobile pages Bericht in der Google Search Console

Wenn Sie Fehler haben, wird Google Sie per E-Mail darüber informieren, dass Sie die erforderlichen strukturierten Daten zu Ihren AMP-Seiten hinzufügen müssen.

AMP Fehler in der GSC

AMP Fehler in der GSC

Google AMP SEO

Ein weiterer Aspekt ist SEO, weil Sie jetzt zwei Kopien der gleichen Seite oder dem Beitrag haben. Sie müssen sich keine Sorgen um doppelte Inhalte machen, da beide Plugins oben kanonische Tags mit AMP verwenden. Kanonische Tags sagen Google, dass der ursprüngliche Inhalt Ihre Desktop-Version ist. Google erkennt automatisch AMP-Seiten auf Ihrer Webseite, da Ihre Originalseite mit einem Header-Tag versehen ist, der Googlebot zu Ihrer AMP-Seite führt.

Beispiel der original Seite:

<link rel="amphtml" href="https://domain.com/amp/">

Beispiel der AMP Seite.

<link rel="canonical" href="https://domain.com/">

Das oben erwähnte AMP for WP Plugin funktioniert auch gut mit dem Yoast SEO Plugin, um Ihre Meta- und OG-Tags für SEO und soziale Zwecke hinzuzufügen. Siehe Beispiel unten.

Google AMP Meta Tags

Google AMP Meta Tags

New Relic Monitoring mit Google AMP

Es ist auch wichtig, für Kunden, die New Relic Monitoring verwenden, das wir auch hier bei Kinsta verwenden, zu beachten, dass der Google AMP-Validator aufgrund eines Skriptfehlers von Drittanbietern ausfallen kann:

The tag 'script' is disallowed except in specific forms.

Dies liegt daran, dass HTML-Seiten, die für Google AMP formatiert sind, kein JavaScript von Drittanbietern enthalten dürfen. Das oben erwähnte AMP for WP Plugin unterstützt New Relic vollständig. Wenn Sie jedoch den New Relic Browser auf AMP-Seiten deaktivieren müssen, befolgen Sie die Anweisungen unter Deaktivieren der Browserüberwachung für bestimmte Seiten. Es gibt auch ein kostenloses WordPress-Plugin, Disabled NewRelic For AMP, das Sie installieren können.

AMP für externe Links mit Cloudflare aktivieren

Cloudflare hat eine neue Funktion, die kürzlich eingeführt wurde, mit der Sie accelerated mobile Links für externe Links aktivieren können, bei denen AMP läuft. Einer der Vorteile für Ihre Webseite ist, dass AMP-Inhalte in einem Viewer direkt auf der Webseite geladen werden, die mit dem Inhalt verlinkt ist. Das bedeutet, dass der Leser, nachdem er den Inhalt gelesen hat, den Viewer schließt und ihn wieder auf Ihre Webseite zurückbringt. In gewisser Weise könnte es also die Zeit auf Ihrer Webseite insgesamt erhöhen. Sie können dies im Cloudflare Performance Dashboard aktivieren.

Cloudflare Accelerated mobile Links

Cloudflare Accelerated mobile Links

Zusammenfassung

Wie Sie sehen können, gibt es einige einfache Möglichkeiten, Google AMP auf Ihrer WordPress-Seite zum Laufen zu bringen. Sollten Sie sofort auf Google AMP umsteigen? Es hängt wirklich davon ab, welche Art von WordPress-Site Sie betreiben. Wenn Sie eine Zeitschrift oder Nachrichtenseite sind, könnte es sinnvoll sein, dies sofort umzusetzen und AdSense-Positionen zu testen. Wenn Sie ein SaaS-Unternehmen sind, könnte es am Ende dazu führen, dass Ihre Konvertierungen runter gehen, wenn Sie nicht vorsichtig sind. Google AMP ist definitiv eine große Veränderung, besonders wenn man bereits viel mobilen Traffic hat. Wir empfehlen Ihnen, mit dem Testen zu beginnen, da dies der einzige Weg ist, um festzustellen, ob Ihr Unternehmen positive oder negative Ergebnisse erzielen wird.

Haben Sie weitere Tipps zur Verwendung von Google AMP mit WordPress? Wenn ja, würden wir uns freuen, sie unten in den Kommentaren zu erfahren! Achten Sie auch auf die offizielle AMP-Roadmap.


Wenn Dir dieser Artikel gefallen hat, dann wirst du Kinsta’s WordPress Hosting-Plattform lieben. Beschleunige deine Webseite und erhalte 24/7 Support von unserem erfahrenen WordPress-Team. Unsere Google Cloud basierte Infrastruktur konzentriert sich auf die Bereiche Auto-Scaling, Performance und Sicherheit. Lass uns dir den Kinsta-Unterschied zeigen! Schau Dir hier unsere Pakete an