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 Vorteile
- Google AMP Nachteile
- Wie Sie Google AMP einrichten
- Den Google AMP Code validieren
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%.
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.
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.
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
- AMP ist kostenlos und Open Source.
- AMP kann die Ladezeiten Ihrer WordPress-Seite deutlich verbessern. Und denken Sie daran, dass die Geschwindigkeit ein Rankingfaktor ist.
- Bessere Platzierungen in den SERPs mit Karussellmöglichkeit für eine bessere CTR. In einer Implementierung bei einem beliebten Publisher führte Google AMP zu 600% Steigerung in den CTRs!
- Google AMP erzwingt viele empfohlene Web-Performance-Praktiken wie die Vermeidung großer CSS- und JS-Frameworks.
- Das könnte sich positiv auf Ihre Conversions auswirken.
- Im vergangenen Jahr wurden viele Verbesserungen vorgenommen und Werbeoptionen sind nun in Google AMP verfügbar. So können Zeitschriften und Neuerscheinungen ihre AdSense-Einnahmen halten oder sogar steigern.
- automatische Bildoptimierung (auch Konvertierung ins WebP-Format!)
- AMP Lite führt eine weitere Optimierung für langsame Netzwerkverbindungen ein. Google sah eine kombinierte Reduzierung der Bytes um 45%.
Google AMP Nachteile
- AMP ist derzeit kein Ranking-Faktor, aber es könnte einer in der Zukunft sein. Dies könnte sowohl als Vor- als auch als Nachteil angesehen werden.
- AMP kann schwierig zu implementieren und zu testen sein, wenn Sie kein Entwickler sind. Glücklicherweise ist die WordPress-Plattform jedoch etwas einfacher als andere.
- Einführung einer völlig neuen separaten Plattform und Funktionalität, um die Sie sich Sorgen machen müssen. Was ist mit der einfachen Optimierung unserer mobilen Standorte passiert?
- könnte Ihre Conversions beeinträchtigen oder negativ beeinflussen
- Es gibt Berichte über Google AMP, die Statistiken in Google Analytics durcheinanderbringen.
- Einige Webseiten-Betreiber haben ein schlechteres Engagement und höhere Bounce-Raten gesehen.
- Es gibt noch Skripte von Drittanbietern und Anwendungen, die möglicherweise nicht unterstützt werden.
- keine Unterstützung von einigen älteren Browsern wie Internet Explorer 11. Google hat erklärt, dass sie im Allgemeinen die 2 neuesten Versionen der wichtigsten Browser wie Chrome, Firefox, Edge, Safari und Opera unterstützen werden. Und sie unterstützen Desktop-, Telefon-, Tablet- und Web-View-Versionen der jeweiligen Browser.
- Lesen Sie Jan Dawson’s Meinung, warum Google AMP es schwieriger und nicht einfacher macht, im Web zu veröffentlichen.
- Lesen Sie Alex Kras‘ Artikel über einige der Probleme mit Google AMP, zusammen mit einer Antwort des technischen Leiters des AMP-Projekts bei Google.
- Tim Kadlec teilt seine Meinung über Google AMP und die Notwendigkeit einer besseren Alternative: Richtlinien für die Leistung von Inhalten.
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.
Hier ein weiteres Beispiel, das den Branding Verlust darstellt.
Another reason to not use Google AMP –> You lose your brand 🙂 cc @HuffingtonPost you might want to think about it 🙂 pic.twitter.com/n3LEHIOEBZ
— Syed Balkhi (@syedbalkhi) January 19, 2017
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.
So @maileohye confirmed that in a situation where there is desktop and AMP, Google will index desktop for mobile first. #StateofSearch
— Jennifer Slegg (@jenstar) November 14, 2016
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.
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.
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.
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.
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.
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).
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).
Page Builder
Unter dem Tab „Page Builder“ können Sie einstellen, ob Sie Widgets für Ihre AMP-Seite nutzen möchten.
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;}
Single
Unter “Single“ können Sie soziale Symbole aktivieren, Links deaktivieren, Autorenbiografien anzeigen und sogar Optionen für verwandte Beiträge ändern.
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-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.
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.
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.
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.
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.
Kontakt Form
Auf der Seite für das Kontaktformular kannst du einfach die Unterstützung für Contact Form 7 aktivieren.
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.
Kommentare
Unter dem Tab „Comments“ können Sie die Unterstützung für Kommentarsysteme von Drittanbietern wie Disqus und Facebook-Kommentare aktivieren.
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.
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.
Und so sieht ein AMP Blog Post von Kinsta aus.
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.
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.
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.
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.
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.
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.
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.
New Relic Monitoring mit Google AMP
Für Kunden, die das New Relic Monitoring nutzen (Lizenz erforderlich), ist es wichtig zu wissen, dass der Google AMP Validator aufgrund eines Skriptfehlers eines Drittanbieters fehlschlagen 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.
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.
Brian hat eine große Leidenschaft für WordPress, verwendet es seit über einem Jahrzehnt und entwickelt sogar einige Premium-Plugins. Brian liebt Blogging, Filme und Wandern. Verbinde dich mit Brian auf Twitter.
Schreibe einen Kommentar