AMP für WordPress installieren – Schritt für Schritt Anleitung [2020]

So erhöhst du die Ladezeit deiner Website dramatisch

Share on facebook
Share on linkedin
Share on twitter

Du suchst nach einer Lösung die mobile Ladezeit deiner Website zu verbessern? Dann ist AMP für WordPress vielleicht die richtige Lösung für dich!

In der heutigen mobil-zentrierten Welt ist es wichtig, dass Websites schnell geladen werden, um den Benutzer zufrieden zu stellen. Aber nicht nur das, langsame Ladezeiten wirken sich negativ auf die Conversion Rate, Bounce Rate und letztendlich den Gesamtumsatz deines Unternehmens aus. Und genau hier kann das AMP WordPress Plugin Abhilfe schaffen.

Es ist mittlerweile eine Selbstverständlichkeit, dass mobile Seiten genauso schnell geladen werden wie ihre Desktop-Pendants. Tatsächlich kam Amazon, einer der größten Online-Händler, zu dem Schluss, dass selbst eine Verzögerung von einer Sekunde bei der Ladegeschwindigkeit der Seiten einen Rückgang der jährlichen Einnahmen um 1,6 Milliarden Dollar verursacht.

Beschleunigte mobile Seiten (Accelerated Mobile Pages, sogenannte AMPs) werden schnell zum Standard dafür, wie eine schnell ladende Seite aufgebaut sein sollte. Mit einem Pre-Rendering sind AMPs in der Lage, 15-80 Prozent schneller zu laden als normale Handy-Seiten, ohne die Funktionalität zu beeinträchtigen. Während die Einfachheit der AMP-Implementierung von deinem CMS (Content Management System) abhängt, kann WordPress eine gute Testumgebung sein, um zu sehen, wie deine AMP-Seite aussehen könnte.

In der folgenden Anleitung lernst erfährst du alles, um AMP für WordPress zu aktivieren.

Hinweis: Teile dieser Anleitung gehen davon aus, dass du das Yoast SEO-Plugin als Teil deines WordPress-Setups aktiviert hast. Wenn das nicht der Fall ist, kannst du die Teile, die sich auf dieses Plugin beziehen, einfach überspringen – du kannst die AMP-Funktionalität auch ohne dieses Plugin aktivieren – allerdings empfehlen wir diese Kombination sehr.

Schritt 1: Installiere und aktiviere dein(e) AMP-Plugin(s)

Das AMP-Plugin von Automattic wird benötigt, um mit der AMP-Implementierung zu beginnen. Dies ist das Basis-Plugin, das du benötigst, um AMP zum laufen zu bringen.

AMP für WordPress erzeugt automatisch AMP-kompatible Versionen aller deiner Beiträge, die du ansehen kannst, indem du /amp/ an das Ende der URLs deiner Beiträge anhängst.

Hinweis: Beachte, dass nur deine Beiträge – nicht deine Seiten – mit diesem Basis-Plugin AMP-kompatibel sind. Um eure Seiten ebenfalls AMP-kompatibel zu machen, müsst ihr ein zusätzliches Plugin installieren (siehe unten).

Sobald du das AMP-Plugin installiert hast, kannst du weitere Plugins aufschichten, um mehr Funktionalität zu erhalten. Es gibt mehrere kostenlose Optionen, aus denen du wählen kannst. Die von uns genutzten Optionen sind die folgenden:

  • AMP für WP – Accelerated Mobile Pages – Zu den bemerkenswerten Eigenschaften dieses Plugins gehören die Google AdSense-Integration, die Unterstützung von rel=canonical tags, ein AMP Drag-and-Drop-Seitenersteller und die Möglichkeit, AMP-Inhalte zu erstellen, die sich von den Inhalten auf normalen Handy-Seiten unterscheiden.
AMP für WordPress Plugin

Glue for Yoast SEO & AMP – Einer der Vorteile dieses Plugins ist, dass es euch erlaubt, Seiten, Beiträge und Medien AMP-kompatibel zu machen. Das Glue for Yoast-Plugin stellt außerdem nahtlos sicher, dass das Standard-AMP-Plugin die korrekten Metadaten einzieht. Ähnlich wie das AMP für WP-Plugin ermöglicht es die individuelle Gestaltung von AMP-Seiten. Du kannst sogar ein eigenes Symbol auswählen und ändern, wie das Logo deiner Webseite auf der AMP-Seite aussieht. (Hinweis: Du musst das Yoast SEO-Plugin installiert und aktiviert haben, damit das Plugin funktioniert)

Glue for Yoast SEO & AMP WordPress Plugin

Schritt 2: Google Analytics einrichten

Um deine Seiten für das korrekte Google Analytics-Tracking einzurichten, musst du zuerst deine Tracking-ID finden. Logge dich dafür bei Google Analytics ein und klicke dann auf das Zahnradsymbol unten links, um das Admin-Panel aufzurufen. Wenn du den entsprechenden Account und die Property aus den entsprechenden Dropdown-Menüs ausgewählt hast, klicke in der Spalte Property auf die Stelle, an der „Tracking-Info“ steht. Von dort aus klickst du auf „Tracking Code“, um deine Tracking-ID zu sehen – die ID sollte mit „UA“ beginnen.

Kopiere deine Tracking-ID und logge dich dann in die WordPress Installation ein. Gehe in der linken Navigationsleiste zu AMP > Analytics und füge deine Tracking-ID dort ein, wo „Google Analytics“ steht. Klicke anschließend auf Änderungen speichern.

AMP für WordPress Google Analytics Einrichtung

Schritt 3: Plugin Einstellungen konfigurieren

In Schritt 3 werden wir einige grundlegende Konfigurationen für das SEO-Plugin Glue for Yoast besprechen, das in Schritt 1 erwähnt wurde. Du kannst diesen Schritt überspringen, wenn du dich dafür entschieden hast, dieses Plugin nicht zu installieren.

Mit den hier empfohlenen Konfigurationen kannst du die optische Darstellung deiner beschleunigten Handy-Seiten anpassen und die AMP-Unterstützung für verschiedene Inhaltstypen aktivieren. Um zu beginnen, navigiere zu Yoast SEO > AMP > Post-Types. Hier kannst du auswählen, welche Beitragstypen AMP-kompatibel sein sollen.

AMP für WordPress Yoast SEO Einstellungen

Unter der zweiten Registerkarte „Design“ kannst du das Aussehen deiner AMP-aktivierten Seiten anpassen. Hier kannst du individuelles CSS-Styling verwenden, den Inhalt und die Linkfarben anpassen, ein benutzerdefiniertes AMP-Symbol hochladen oder ein Standardbild für Seiten festlegen.

Schritt 4: Validiere dein AMP-Setup

Jetzt, wo wir unsere AMP-URLs erstellt haben, ist es wichtig, sicherzustellen, dass diese auch richtig funktionieren. Oft kämpfen viele Nutzer mit Validierungsfehlern. Wenn sie nicht richtig konfiguriert sind, wird Google sie nicht in den Suchergebnissen anzeigen. Das schützt dich zwar davor, eine halbwegs funktionsfähige AMP-Seite anzuzeigen, kann aber für viele Webmaster auch ein Problem darstellen.

Glücklicherweise gibt es verschiedene Lösungen, um deine AMP-URLs zu testen. Wähle ein paar Schlüsselseiten aus und teste die AMP-Versionen mit einer der beiden folgenden Methoden. Wie in Schritt 1 erwähnt, kannst du /amp/ an das Ende einer Standard-URL anhängen, um sie anzeigen zu lassen.

Möglichkeit 1: AMP-Test

Gehe zu Google Such Konsole.
Gib deine URL hier ein und klicke auf „Test ausführen“, dann notiere das Ergebnis (gültig / ungültig).

AMP Validierungstest

Option 2: Entwicklerkonsole

Diese Option ist speziell für diejenigen, die den Google Chrome-Browser benutzen. Wenn du einen anderen Browser verwendest (Firefox, Safari, Microsoft Edge oder andere), gilt diese Option nicht für dich.

  1. Öffne die AMP-Seite in deinem Browser
  2. Hänge #development=1 an die URL an
  3. Öffne die Chrome Dev Tools-Konsole (im Chrome-Menü, wähle Mehr Tools > Entwicklungswerkzeuge und klicke dann auf die Registerkarte „Konsole“) und suche nach Validierungsfehlern.
  4. Wenn alles ordnungsgemäß funktioniert, sollte die Validierung erfolgreich sein.

Option 3: AMP-Validator

  1. Gehe zum AMP Validator
  2. Füge die AMP-URL in das „URL“-Feld ein und klicke auf „Validieren“.
  3. Dieses Tool markiert alle Fehler und markiert sie im HTML.

Hinweis: Du kannst auch die AMP Validator Chrome-Erweiterung verwenden, um die gleichen Ergebnisse auf der AMP-URL selbst zu sehen.

Schritt 5: Trage deine wichtigsten AMP-URLs zur Indexierung ein

Wenn du den AMP-Test über die Google-Suchkonsole verwendest, kannst du auf die Schaltfläche „Bei Google einreichen“ klicken, sobald du den Test durchgeführt und die Seite validiert hast. Wenn du in deinem Google-Suchkonsolen-Konto eingeloggt bist, kannst du auch nach „Bei Google einreichen“ suchen und die URL direkt in den Google-Suchergebnissen einreichen:

Während das Einreichen deiner AMP-Seite bei Google keine Voraussetzung ist, indiziert Google deine AMP-Seite nur dann, wenn sie intern mit der XML-Sitemap verlinkt oder darin aufgeführt ist.

Schritt 6: In der Google-Suchkonsole anzeigen, um Fehler zu beheben

Die Google-Suchkonsole bietet eine Möglichkeit, alle deine AMP-Seiten an einem übersichtlichen Ort zu verwalten.

  1. Melde dich bei der Google-Suchkonsole an.
  2. Klicke unter dem ‚Suchergebnis‚ auf beschleunigte mobile Seiten oder in Englisch „Accelerated Mobile Pages„.

Hier kannst du sehen, wie viele deiner Accelerated Mobile Pages indexiert werden und welche, wenn überhaupt, kritische Probleme haben. Wenn du Seiten mit Problemen identifizierst, kannst du sie mit den Tools aus dem vorherigen Schritt beheben.

Schritt 7: Teste die Ladegeschwindigkeit

Wenn du die Obigen Schritte abgeschlossen hast, ist es jetzt an der Zeit, den Nutzen deiner Bemühungen einzuholen. Lass deine AMP- und Standard-Handy-Seiten durch ein Tool wie WebPageTest laufen und vergleiche die Ergebnisse.

In dem Maße, in dem Google seine Bemühungen verstärkt, den Mobile-First-Index und die Seitengeschwindigkeit zentimeterweise zu einem Mobile-Ranking-Faktor zu machen, wird es immer wichtiger die Kraft von AMP zu nutzen, bevor dein mobile Datenverkehr negativ beeinflusst wird. Wenn du die obigen Schritte befolgst, solltest du in der Lage sein, schnell und einfach AMP-Seiten für deine WordPress-Website zu aktivieren.

Wenn Du nach einer Alternative suchst, oder weitere Ansätze zur Optimierung der Ladegeschwindigkeit deiner WordPress Website suchst, dann schau dir gerne unsere ausführliche Anleitung dazu an.

Vielen Dank für deine Aufmerksamkeit!

Share on facebook
Share on linkedin
Share on twitter

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

×

Inhaltsverzeichnis

Office Hamburg
Gertigstraße 12-14,
22303 Hamburg