So verwenden Sie das offizielle Google AMP WordPress-Plugin

Es ist üblich, dass die Website-Geschwindigkeit auf einem mobilen Gerät langsamer ist als in einem Browser, und je inhaltsreicher die Seite ist, desto länger kann das Laden dauern. Selbst wenn Sie einige Dinge versucht haben, um Ihre Website zu beschleunigen, können Google AMP und das WordPress AMP-Plugin Ihnen den gewünschten Schub geben.

Wenn das Laden einer Website zu lange dauert, kann dies die Absprungrate erhöhen. Auf der anderen Seite, wenn eine Webseite fast augenblicklich erscheint, verbessert sich die Benutzererfahrung (UX) und Ihr Datenverkehr kann zunehmen. So funktioniert Google AMP und wie Sie es auf Ihrer Website verwenden.

Ein Überblick über Google AMP

Google AMP ist ein Open-Source-Projekt, das im Oktober 2015 gestartet wurde. AMP steht für „Accelerated Mobile Pages“, aber Google AMP ist nicht mehr auf Mobilgeräte beschränkt; heute funktioniert es auch über Desktop-Seiten hinweg. (Für diesen Artikel spreche ich jedoch hauptsächlich von mobilen Seiten, da AMP dort am nützlichsten ist.) Der Zweck von Google AMP besteht darin, Webinhalte schneller zu laden. Das WordPress AMP-Plugin ist eine einfache Möglichkeit, Ihre Seiten in AMP-Versionen zu konvertieren.

Die Funktionsweise ist, dass AMP Webseiten dank begrenztem CSS, HTML und JavaScript beschleunigt. Im Grunde ist es eine Möglichkeit, extraleichte Webseiten zu erstellen, was die Ladezeit verkürzt. Der Google AMP Cache hostet den Inhalt, und die zwischengespeicherte Version ist das, was Google an die Benutzer sendet, damit sie die Webseite sofort sehen können. Große Technologieunternehmen wie Google, LinkedIn, Reddit und Twitter unterstützen Google AMP, und AMPs sind in allen Apps, Browsern und Webviewern sichtbar.

Vor- und Nachteile von Google AMP

Obwohl die meisten Websites von Google AMP profitieren, gibt es auch einige Nachteile. Hier sind die Vor- und Nachteile von Google AMP, die Ihnen bei der Entscheidung helfen, ob das WordPress AMP-Plugin das Richtige für Sie ist.

Vorteile

• Wenn Sie viel Traffic durch mobile Suchen erhalten, kann AMP die UX verbessern und Ihnen helfen, ein höheres Ranking zu erzielen.
• Mobile Benutzer, die eine langsame Internetverbindung haben, können mit Ihrer Website interagieren.
• Google speichert alle Websites, die das AMP-Framework verwenden, im Cache, was dazu beitragen kann, das Google-Ranking zu verbessern.
• Schnellere Ladezeiten führen zu einem besseren Engagement, was oft zu mehr Umsatz führt.

Nachteile

• Da AMP nur eingeschränkt CSS, HTML und JavaScript verwendet, müssen Website-Designer abgespeckte Seiten erstellen. Bestimmte Funktionen und Widgets, wie Animationen, „Gefällt mir“-Boxen für soziale Medien und intelligente Opt-in-Formulare, müssen entfernt werden, um das Aufblähen zu reduzieren.
• Google AMP unterstützt Google Analytics, aber abgesehen davon unterstützt es die meisten anderen Analyseplattformen nicht.
• Es gibt auch nicht viele Werbeoptionen, die Google AMP unterstützt. Mit zusätzlichen Plugins können Sie jedoch Anzeigenoptionen hinzufügen – dazu später mehr.
• Dies ist ein kleiner Nachteil, aber wenn Ihre mobilen Seiten bereits leicht und optimiert sind, werden sie durch die Verwendung von AMP möglicherweise nicht merklich schneller, sodass die Einrichtung eine Zeitverschwendung sein kann.

Das WordPress AMP-Plugin

Das Google AMP-Plugin für WordPress erstellt automatisch AMP-Versionen all deiner Beiträge. Dann wissen Suchmaschinen und AMP-unterstützte Apps und Dienste dank „amphtml“ im Quellcode, wo sie nach der AMP-Version der Seite suchen müssen. Das Plugin funktioniert nahtlos mit WordPress, egal ob Sie den klassischen Builder oder Gutenberg verwenden.

Das Plugin schafft kein separates mobiles Thema, und es ist direkt nicht mobile Geräte zu einer AMP - Version Ihrer Website. Wenn ein mobiler Besucher Ihre Inhalte jedoch auf einer Plattform wie Google, Pinterest oder Twitter findet, wird ihm die AMP-Version angezeigt.

Wenn es nicht möglich ist, eine AMP-Version einer Seite zu rendern, stellt das Plugin sicher, dass die Nicht-AMP-Version geladen wird. Das bedeutet, dass so viel wie möglich von der Website AMP-optimiert ist und die Teile der Website, die dies nicht sein können, weiterhin so angezeigt und ausgeführt werden, wie Sie es benötigen.

Funktionen des WordPress AMP Plugins

• Kompatibilität und Validierung: Wenn die automatische Konvertierung in AMP nicht möglich ist, erhalten Sie detaillierte Validierungsfehler, damit Sie ungültiges Markup finden können. Sie können das Markup entfernen oder beibehalten.
• Core-Theme-Unterstützung: AMP ist mit allen Core-WordPress-Themes kompatibel. (Es ist auch mit vielen Nicht-Kernthemen kompatibel.)
• CSS Tree Shaking: Entfernen Sie nicht verwendetes CSS automatisch, um die Gesamtzahl innerhalb des AMP-Limits von 50 KB zu erreichen.
• AMP-Stories: AMP verfügt über einen Stories-Builder, mit dem Sie Vollbildanzeigen und Erlebnisse für Besucher erstellen können.

Quelle: AMP

So richten Sie das WordPress AMP-Plugin ein und verwenden es

1. Installieren und aktivieren Sie das Plugin. Holen Sie sich das Plugin hier.

2. Gehen Sie zu Darstellung und wählen Sie AMP. Sie sehen, wie Ihre Website auf einem Mobilgerät aussieht, und Sie können auch die AMP-Desktopversion anzeigen. Wenn die Startseite AMP nicht verwenden kann, erhalten Sie diese Benachrichtigung:

Wenn eine Webseite in AMP konvertiert wird, handelt es sich im Grunde um eine abgespeckte Version des Originals. Unten kannst du die Originalversion meines Blogbeitrags mit der AMP-Version vergleichen – das Logo (mein Name in der stilisierten Schrift), die Farben und die Schriftarten sind unterschiedlich.

3. Klicken Sie auf „Design“, um die Kopfzeilentextfarbe, den Kopfzeilenhintergrund und die Linkfarbe sowie das Farbschema (hell oder dunkel) zu aktualisieren. Sie können sich auch dafür entscheiden, einen Link anzuzeigen, damit Besucher den Lesemodus verlassen können.

4. Sie können die URL eines beliebigen Beitrags auf Ihrer Website aufrufen und /amp/ am Ende hinzufügen, um die AMP-Version des Beitrags anzuzeigen. Wenn Sie beim Versuch, die AMP-Version anzuzeigen, einen 404-Fehler erhalten, gehen Sie zu Einstellungen und dann zu Permalinks und klicken Sie unten links auf "Änderungen speichern". Sie müssen keine Änderungen vornehmen, aber wenn Sie auf die Schaltfläche Speichern klicken, wird Ihre Permalink-Struktur aktualisiert, sodass diese AMP-Seiten für Sie angezeigt werden.

Wählen Sie einen Website-Modus

Das WordPress AMP-Plugin hat drei Website-Modi zur Auswahl, die Sie erreichen können, indem Sie in der linken Seitenleiste zu AMP gehen und dann auf Allgemein klicken:

1. Standard: AMP ist das Framework für Ihre Website. Sie benötigen keine separaten Nicht-AMP- und AMP-Versionen.
2. Übergangsweise Jede Seite hat eine kanonische URL und eine AMP-URL.
3. Leser: Jede Seite hat eine kanonische URL und eine AMP-URL. Im Reader-Modus wird AMP nur für einzelne Beiträge, Seiten und andere Beitragstypen verwendet; die anderen beiden Website-Modi werden auf der gesamten Website verwendet.

Standardmäßig wird der Lesemodus ausgewählt. Wenn Sie zu einer der beiden anderen Optionen wechseln, können Sie über das Erscheinungsbild nicht mehr auf diesen Abschnitt "Design" zugreifen.

Der von Ihnen gewählte Website-Modus wirkt sich auf die zusätzlichen Optionen aus, die Ihnen zur Verfügung stehen. Wenn Sie „Standard“ oder „Übergang“ auswählen, stehen Ihnen die Optionen im Screenshot unten zur Verfügung. Wenn Sie Reader auswählen, können Sie nur aus den drei Inhaltstypen auswählen.

Passen Sie Ihre AMPs mit zusätzlichen Plugins an

Da das WordPress AMP-Plugin nicht viele Anpassungsoptionen bietet, kannst du andere Plugins verwenden, um deine Seiten weiter zu personalisieren. Beispielsweise unterstützt AMP WP soziale Symbole und verfügt über ein anpassbares Farbschema (neben einer Reihe anderer Funktionen), und Ads for WP bietet erweiterte Anzeigenunterstützung für AMP.

Wenn Sie derzeit Yoast SEO verwenden, können Sie außerdem das Glue for Yoast SEO- und AMP-Plugin verwenden, damit Ihre AMP-Seiten die richtigen Yoast SEO-Metadaten haben. Nachdem Sie das Plugin installiert und aktiviert haben, stellen Sie die Yoast SEO-Optionen wie gewohnt ein. Das Plugin wird seine Magie im Hintergrund entfalten.

Nachdem Sie zusätzliche AMP-bezogene Plug-ins eingerichtet haben, überprüfen Sie Ihre AMP-Seiten erneut. Dadurch wird auf neue Validierungsfehler geprüft, die zuvor nicht vorhanden waren.

Abschließende Gedanken

Das Einrichten beschleunigter mobiler Seiten ist nur eine von vielen Techniken, mit denen Sie Ihre Webseiten schneller laden können. Dank des WordPress-Plugins müssen Sie die Funktionsweise von AMP nicht verstehen, um zu wissen, dass es für Ihre Website von Vorteil ist. Und mit einem so einfachen Einrichtungsprozess, der alles für Sie erledigt wird, können Sie es an einem Nachmittag installieren und Ihr gesamtes Archiv innerhalb von Tagen konvertieren.

Noch etwas: Wenn Sie die Google Search Console verwenden, machen Sie sich keine Sorgen, wenn Sie nicht sofort Ergebnisse für Ihre AMP-Seiten sehen. Google kann sich bei der Indexierung Ihrer AMPs und der Anzeige der Daten Zeit lassen.

Möchten Sie noch mehr Traktion aus Ihrer mobilen Website herausholen? Sehen Sie sich unsere Anleitung zum Optimieren Ihrer Sidebar auf Mobilgeräten mit dem Divi Theme Builder an.

Ausgewähltes Bild über Fouaddesigns / shutterstock.com