Installieren von AMP in WordPress

Was Sie erstellen werden

Was ist AMP??

Im vergangenen Oktober hatte Google AMP als Open-Source-Initiative angekündigt, um schnelleres Surfen im Internet zu ermöglichen. Wie von TechCrunch beschrieben, sehen viele AMP als einen Versuch von Google, besser mit den Instant-Artikeln und mobilen Anwendungen von Facebook zu konkurrieren, die zunehmend schneller und effizienter surfen. Ich neige dazu, zuzustimmen.

Mit AMP optimierte Seiten werden in einem mobilen Browsing-Karussell oben in den Ergebnissen der Google-Suche angezeigt, wobei herkömmliche HTML-Artikel nach unten verschoben werden. Und sie werden fast sofort geladen.

Ehrlich gesagt, bin ich gegenüber Bloggern und kleinen Publishern skeptisch gegenüber AMP. Wir schreiben oft großartige Inhalte, die es schwer haben, an die Spitze der Google-Suchergebnisse zu gelangen. Nun müssen wir eine weitere Technologie mit unseren begrenzten Ressourcen implementieren, in der Hoffnung, dass unsere Inhalte an der Spitze erscheinen. Interessanterweise werden in den AMP-Suchergebnissen zwar keine großen Blog-Publisher angezeigt, aber auch keine anderen WordPress-Blogger: 

Ich vermute auch, dass die UX, wenn andere Suchergebnisse unterhalb des Karussells vergraben werden, für Google gut funktionieren wird.

Als ich bei Microsoft arbeitete, half ich 1995 bei der Einführung von MSN News als Teil des MSN Online Network, das mit Windows 95, der Antwort von Microsoft auf AOL, gestartet wurde. MSN News benötigte einen benutzerdefinierten Anwendungs-Viewer, der auf einer Version der Media Viewer-Plattform von Microsoft ausgeführt wurde, dem Framework, das die früheren CD-Inhalte ermöglicht hatte. Aber innerhalb eines Jahres mussten wir uns auf das Web und unsere Fusion mit NBC vorbereiten - aus MSNBC.com wurde später. Wir mussten unser Publishing-Framework anpassen, um gleichzeitig Media View und HTML zu generieren. Dies führte zu einer Reihe neuer Komplexitäten. 

AMP erinnert mich an all diese Bemühungen. Es handelt sich hierbei um eine völlig andere, stark eingeschränkte Version von HTML, für die umfangreiche Änderungen an Ihrer Website und der von Ihnen verwendeten Werbung erforderlich sind.

Das kostenlose WordPress AMP Plugin

Die gute Nachricht ist, dass WordPress ein kostenloses AMP-Plugin eingeführt hat, mit dessen Hilfe Sie AMP ohne viel zusätzliche Entwicklung implementieren können. Es gibt jedoch viele Einschränkungen. Das Design Ihrer Site ist stark eingeschränkt und es gibt Konflikte mit anderen WordPress-Plugins, gängigen Optimierungstechniken und mehr. AMP wird jetzt auch zu einer zusätzlichen Belastung für WordPress-Theme-Entwickler.

AMP steckt noch in den Kinderschuhen und ich bin enttäuscht, dass Google ein völlig neues Framework entwickelt hat, anstatt mit Verlegern an der Optimierung von HTML5 zu arbeiten, um schneller zu konfigurieren, wie Seiten geladen werden sollen, was zuerst geladen werden sollte und wie Text schnell angeordnet werden sollte. Dies wäre ein aufgeklärterer Ansatz gewesen. Aber die Google-Teams sind Genies.

Trotz meiner Bedenken gehe ich in diesem Tutorial durch die Installation des AMP-Plugins für WordPress und des Yoast SEO Glue für AMP-Plugins. Dadurch haben Sie ein bisschen mehr Kontrolle über das endgültige Erscheinungsbild Ihrer Website.

Wie sieht AMP auf WordPress aus??

Hier ist ein Beispiel einer AMP-Seite im Vergleich zur ursprünglichen HTML-Seite. Sie können sie dynamisch durchsuchen, hier nach dem Original und hier nach der AMP-Version. Mit AMP ist das Laden der Seite sicherlich viel schneller.

Bild der Original HTML5-Seite unter JeffReifman.com:

Das folgende Link-Tag wird zu jeder Seite in der hinzugefügt Block, der Suchmaschinen mitteilt, dass eine AMP-Version der Seite verfügbar ist.

 

Es gibt aber auch einen kanonischen Link, der die Quellenseiten-URL zum Linken definiert:

Bild der AMP-Seite unter JeffReifman.com:

Menüs und Navigation sind weg, und das Branding ist weitgehend weg (obwohl es einige Optionen gibt), aber die Seite wird schnell geladen.

Lassen Sie mich durch die Aktivierung von AMP mit WordPress gehen.

Das AMP WordPress Plugin

Sie können das AMP WordPress Plugin aus dem WordPress Plugin-Verzeichnis lernen und herunterladen. Sie können es auch direkt über Ihr WordPress-Dashboard suchen und installieren.

Geh einfach zu Plugins> Neu hinzufügen und suche nach AMP. Dann klick Jetzt installieren:

Klicken Sie nach der Installation auf aktivieren Sie:

Nach der Aktivierung besuchen Sie einfach einen beliebigen Beitrag in Ihrem WordPress-Blog mit der /Ampere/ Erweiterung. Zum Beispiel ist der Beitrag "Amazon Marketplace Fraud Made Easy" einer meiner beliebtesten Google-Suchergebnisse. Wenn Sie die AMP-Version unter http://jeffreifman.com/2013/03/25/amazon-makes-fraud-easy-in-marketplace/amp/ besuchen, sehen Sie so aus:

Der Kleber für Yoast SEO & AMP Plugin

Das generische AMP-Plugin von WordPress bietet nur wenige Anpassungen. Die Yoast SEO-Leute haben ein Add-On für ihr beliebtes Plugin erstellt, das Ihre AMP-Unterstützung weiter verbessert.

Sie können das Glue for Yoast SEO- und AMP-Plugin überprüfen oder es über das WordPress-Dashboard installieren, wie zuvor für das AMP-Plugin. Nach der Aktivierung sollte es so aussehen:

Hinweis: Seien Sie sicher, dass Sie die haben Yoast WordPress SEO Plugin zuerst installiert.

Sie können Ihre AMP-Einstellungen durch Klicken auf die Yoast SEO-Seitenleiste ändern AMPERE am unteren Rand des Menüs:

Sie sehen die verschiedenen Möglichkeiten, mit denen das Glue-Plugin Ihre AMP-Implementierung verbessern kann.

Erstens können Sie mit Yoast die AMP-Funktionalität auf Seiten und andere WordPress-Seitentypen erweitern. AMP ändert standardmäßig nur zeitkritische Posts - hauptsächlich für Nachrichtenartikel:

Hinweis: Wenn unter den Registerkarten leere Seiten angezeigt werden, vergewissern Sie sich, dass Sie das ursprüngliche Yoast SEO-Plugin aktualisiert haben und das Problem behoben wurde.

Zweitens bietet Yoast einige hilfreiche Möglichkeiten zur Anpassung des Brandings, des Designs und des Farbschemas:

Und schließlich bieten sie eine Möglichkeit, benutzerdefinierten Analytics-Code zu platzieren. Das ist nicht ganz so einfach wie es scheint. Beachten Sie den Code, den ich unten einfügen musste, damit er funktioniert:

Ich habe die AMP-Version für die Implementierung von Google Analytics hier gefunden. Passen Sie einfach Ihren Kontocode für Ihre Website an:

   

Ich bin mir sicher, dass Yoast im Laufe der Zeit sein Glue-Plugin aktualisieren wird, während sich die AMP-Plugin-Funktionalität entwickelt.

Insgesamt ist es ziemlich einfach, damit anzufangen. Aber es ist nicht.

Debugging von AMP-Fehlern

Ein paar Tage nach der Installation von AMP erhielt ich eine freundliche E-Mail von der Google Search Console, in der 10 fehlerhafte Seiten angezeigt wurden. Aber eigentlich war jeder AMP-Beitrag auf meiner Website defekt.

Ich habe mich bei Google Search Console angemeldet, um die fehlerhaften Seiten zu durchsuchen, und habe Folgendes festgestellt:

Ich habe auf eine der Seiten geklickt:

Dann habe ich geklickt Seite öffnen und sah die Fehler genauer an. Im Wesentlichen können Sie dies manuell durch Hinzufügen tun / Amp # Entwicklung = 1 an die URL, wie: http://jeffreifman.com/2014/02/24/wie-zu-besicherte-Ihr-Mac-von-potential-theft/amp/#development=1. Öffnen Sie dann die JavaScript-Konsole in Ihrem Browser:

Es stellt sich heraus, dass alle meine AMP-fähigen Website-Seiten auf JeffReifman.com aufgrund des Fehlers beschädigt wurden: Das Tag 'script' ist außer in bestimmten Formen nicht zulässig. Bei PublishingwithWordPress.com sind jedoch keine Fehler aufgetreten:

In einer der nächsten Serien von Envato Tuts + beschreibe ich, wie ich JeffReifman.com so anpassen konnte, dass ein Google PageSpeed ​​von 100 erreicht wird. Dazu mussten benutzerdefinierte Features von W3 Total Cache verwendet werden, um einige minimierte JavaScript-Funktionen am unteren Rand der Seite zu platzieren . AMP lässt dies nicht zu und das WordPress AMP-Plugin kann es nicht herausfiltern.

Ich muss weitere Nachforschungen anstellen, um festzustellen, ob W3 Total Cache für bestimmte Pfade, wie z /Ampere/ (unwahrscheinlich) oder wenn ich eine andere Lösung finden muss. Platzieren Sie diese Skripts wieder in bricht meine Google Page Speed. Interessanterweise habe ich kürzlich auch festgestellt, dass die Verwendung von Google DFP-Werbung auf meiner Website auch Google Page Speed ​​beeinträchtigt. Google ist ein anspruchsvoller Such-Master und macht es nicht einfach, alle seine Technologien zusammen zu nutzen.

Ich frage mich, was wichtiger ist: Google Page Speed-Rankings, AMP-Support oder meine Entwicklungs- und Debugging-Zeit.

Abschließend

Ehrlich gesagt bin ich mir nicht sicher, ob die AMP-Seiten Ihres Blogs an der Spitze der Suche erscheinen werden, und ich bin mir nicht sicher, dass Sie ohne zusätzliche Anpassungen viel Einnahmen erzielen werden. Google scheint AMP für die großen Medienverlage so anzupassen, dass es die besten Ressourcen für Marken, Ästhetik und Umsatz bietet. 

Im Wesentlichen ist AMP der Weg eines fragwürdig wertvollen optimierten Webs für die Open-Source-Community, während die Instant-Artikel von Facebook für die auserwählte Elite des "großen" ummauerten Gartens sind. Ich hätte viel lieber gesehen, wie Google ein priorisiertes Lademodell mit begleitenden Skripts in HTML5 eingebaut hat.

AMP macht es für kleine Verlage nur noch schwieriger, relevant zu bleiben. Ich bin froh, dass WordPress die Anstrengungen fortsetzt, um zu helfen, und ich bin sicher, dass auch Designdesigner dies tun werden, aber es bleiben viele Mängel bestehen. Ich denke, Google hat das Ziel verfehlt, wirklich allen zu helfen, außer den größten Webherausgebern hier.

ähnliche Links

  • Die AMP-Projektdokumentation - FAQ
  • Das AMP WordPress Plugin
  • Der Kleber für Yoast SEO AMP Plugin
  • Vorstellung des Projekts "Accelerated Mobile Pages" für ein schnelleres, offenes mobiles Web (Google Blog)
  • Google kündigt beschleunigtes Mobile Pages-Projekt an, um Ihnen Artikel zum schnellen Laden (TechCrunch) zu bringen
  • Facebook startet "Instant Articles" (TechCrunch) von Hosting-Publishern