So implementieren Sie AMP auf Ihrer Website und erhalten Überschallladegeschwindigkeit

Möglicherweise möchten Sie AMP implementieren, um die Seitengeschwindigkeit zu erhöhen. Hier ist der Grund

Eine schnell ladende Website ist verdammt entbehrlich. Die menschliche Aufmerksamkeitsspanne befindet sich in einer Abwärtsspirale – niemand möchte warten, besonders wenn er ein mobiles Gerät verwendet.

Wie schnell müssen wir sein? Google empfiehlt eine Seitenladezeit von weniger als zwei Sekunden.

Es gibt viele beliebte Maßnahmen in Onpage- und technischen SEO-Bereichen, die Ihnen helfen, das Ziel zu erreichen.

Eine dieser Maßnahmen – das Einrichten von Accelerated Mobile Pages (AMP) für die mobile Version einer Website – wird jedoch nur sparsam eingesetzt.

Wieso den? Kurz gesagt, der Wechsel zu AMP erfordert einiges an Zeit, Mühe und Geld, je nachdem, wie groß eine Website ist. Am Ende lohnt es sich vielleicht gar nicht.

Lohnt es sich für Sie, in AMP zu investieren? Wenn die Antwort ja lautet, hilft Ihnen dieser Beitrag Schritt für Schritt bei der effektiven Einrichtung von AMP für Ihre WordPress-Website.

Implementieren Sie AMP Schritt 1: Wählen Sie das richtige Plugin

Plugin-Optionen

WordPress bietet viele Plugins für AMP. Ich habe einige davon mit unterschiedlichem Erfolg ausprobiert. Einer von ihnen lieferte eine Zeit lang wunderbare Ergebnisse in den Google Pagespeed Insights. Aber es hat alle meine AMP-Seiten auf dem Handy kaputt gemacht!

Meine Empfehlung

Ich würde das AMP for WP – Accelerated Mobile Pages – WordPress-Plugin empfehlen. Dieses Plugin bietet viele Optionen zum Anpassen mobiler Webseiten. Der Rest des Beitrags befasst sich mit der Einrichtung von AMP für Ihre Website mit diesem Plugin.

Nachdem Sie das Plugin installiert und aktiviert haben, zeigt das WordPress-Dashboard die Option zum Öffnen der AMP-Version Ihrer Website an. Sie werden auch das neue Plugin (AMP) sehen, wie im folgenden Bild hervorgehoben.

Wie im Bild oben sehen Sie eine Reihe von Optionen, wir werden jede davon einzeln behandeln.

Lassen Sie uns in die Einstellungen springen.

AMP implementieren Schritt 2: Grundlegende Einrichtung des Plugins

Website-Typ

Wählen Sie die Option aus, die Ihr Unternehmen am besten repräsentiert. Wählen Sie „Andere“, wenn nichts anderes zutrifft. Danach erhalten Sie die Option, Ihren Website-Typ einzugeben.

Wo müssen Sie AMP implementieren?

Wählen Sie aus, wo Sie AMP implementieren möchten. Wenn Sie sich für AMP entscheiden, entscheiden Sie sich dafür, Ihre mobilen Webseiten fast vollständig in HTML zu belassen. Sie müssen die CSS/JS-Codes loslassen, die die Ladegeschwindigkeit verringern.

Der Nachteil dabei ist, dass die Benutzererfahrung (UX) beeinträchtigt wird. Beispielsweise können Sie keinen Call-to-Action (CTA)-Button mehr haben, der sich dreht, um die Aufmerksamkeit eines Besuchers zu erregen. AMP schneidet diesen Code aus und spart so Seitenladezeit. Dies kann schließlich zu einer reduzierten Engagement-Rate führen.

In der obigen Liste möchten Sie vielleicht auswählen, ob Sie AMP auf Ihren Seiten oder Beiträgen oder beidem verwenden möchten.

Gestaltung und Präsentation

Hier können Sie Ihr Logo einrichten , die empfohlene Größe beträgt 120 x 90 Pixel. Ich würde empfehlen, das Logo nicht zu verwenden, da es die Ladezeit der Seite verlängert. Wenn in diesem Bereich kein Logo aktualisiert wird, wird auf der AMP-Seite anstelle des Logos nur der Name der Website angezeigt.

Die Option „ Globales Farbschema“ hilft Ihnen bei der Auswahl einer Farbe für Ihre AMP-Seiten, die auf den CTA-Links auf der Seite und auf dem Fußzeilen-Link angezeigt wird.

Zum Beispiel habe ich hellblau als meine globale Farbe gewählt, wie im Bild unten zu sehen ist.

Analytics-Tracking

In diesem Optionsfeld können Sie die Tools aktivieren, die Sie für das Tracking verwenden. Sie können beispielsweise Google Analytics aktivieren, indem Sie die Tracking-ID hinzufügen. Auf diese Weise werden Daten von den AMP-Seiten direkt in Ihrem Google Analytics-Konto aktualisiert.

Ebenso können Sie mehrere andere Tracking-Tools hinzufügen, wie im obigen Bild aufgeführt.

Datenschutzeinstellungen

Die Cookie-Hinweisleiste ermöglicht es Ihnen, die Zustimmung von Besuchern für die Cookies einzuholen, die Sie auf der Website verwenden. In der Abbildung unten ist das Dialogfeld in Schwarz eine Cookie-Hinweisleiste.

Bildquelle – Monster Insights

Wenn Sie oder Ihre Zielgruppe aus einem GDPR-Land stammen, müssen Sie die Einstellungen für GDPR – General Data Protection Regulation (DSGVO) aktivieren.

Bitte beachten Sie, dass Sie, wenn Sie sich entscheiden müssen, nur eine der beiden Optionen wählen können, nicht beide.

Anzeige

Wählen Sie in diesem Segment aus, wo Sie Ihre Anzeigen platzieren möchten. Sie können nach Bedarf anpassen – Sie können unter anderem Anzeigen auf der gesamten Website oder in einzelnen Posts oder Headern veröffentlichen.

Sie können den Anzeigentyp, die Anzeigengröße und den Daten-Anzeigenclient und die Daten-Anzeigenfläche aus dem Adsense-Anzeigencode auswählen.

Kompatibilität mit Drittanbietern

Die letzte Entität erfasst die Liste der Plugins, für die Sie AMP-Kompatibilität benötigen.

Bei Gravity Form und Elementor für AMP müssen Sie für Erweiterungen bezahlen. Structured Data, Ads for WP und PWA for WP sind kostenlose Plugins. Die letzten drei werden später in diesem Beitrag etwas ausführlicher behandelt.

Implementieren Sie AMP Schritt 3: Weitere AMP-Einstellungen

Allgemeine Einstellungen

Die Registerkarte Allgemein deckt die Optionen ab, die wir in der Grundeinstellung behandelt haben. Darüber hinaus können Sie auswählen, ob Sie AMP auf Archiv-, Kategorie- und Tag-Seiten haben möchten.

Wenn Sie die letzte Option – AMP Takeover (Beta) – aktivieren, werden Ihre Desktop- und mobile Version identisch sein. Das bedeutet, dass Ihre Desktop-Version auch AMP-Seiten haben wird.

Ich würde empfehlen, diese Option deaktiviert zu lassen. Das Laden von Seiten ist auf dem Desktop normalerweise besser als auf dem Handy. AMP auf dem Desktop zu haben bedeutet, UX gegen eine kleine Erhöhung der Seitengeschwindigkeit einzutauschen. Kein gutes Geschäft.

Anzeige

Dieser Abschnitt hat die gleichen Optionen wie der Abschnitt Werbung in der Grundeinstellung.

SEO

Wenn Sie die Meta-Beschreibung aktivieren , wird der Text, den Sie in den Head -Bereich eingeben, von Google erfasst. Dieser unterscheidet sich von dem Text, den Sie für die Desktop-Version ausgefüllt haben. Ich würde empfehlen, die Einstellung auszuschalten und die Meta-Beschreibung in beiden Versionen konsistent zu halten.

OpenGraph-Metadaten -Tags sind Codeschnipsel, die steuern, wie URLs angezeigt werden, wenn sie in sozialen Medien geteilt werden. Dieser Abschnitt ist für die Desktop-Version sichtbar, wenn Sie Titel und Metadaten in Ihrem SEO-Plugin einrichten. Unten ist ein Beispiel für das Yoast SEO-Plugin.

Sie finden es, indem Sie zum Editor-Bereich eines beliebigen Beitrags oder einer Seite gehen und nach unten scrollen. Sobald Sie den Abschnitt für Yoast sehen, klicken Sie auf die Registerkarte „Social“, dann können Sie die Social-Media-Plattform Ihrer Wahl auswählen.

Mit dem AMP-Plugin können Sie das SEO-Plugin Ihrer Wahl im selben Optionsfeld auswählen. Im obigen Beispiel ist Yoast das gewählte Plugin. Alle Daten, die Sie in Yoast für die Desktop-Version eingeben, werden in die AMP-Version kopiert.

Sie sehen die Option zum Entfernen der Indexierung von paginierten Seiten und der Kompatibilität des URL-Inspektionstools.

Paginierte Seiten sollten indiziert werden, aber nur als kanonisch. Ich würde empfehlen, diese Einstellung auszuschalten.

Die URL-Inspektionstool-Kompatibilität fördert eine transparentere Suche für Sie. Es bietet detaillierte Berichte zu Crawl-, Index- und Serving-Informationen in Ihrem Google Search Console-Konto. Ich würde empfehlen, es eingeschaltet zu lassen.

Elementor-Unterstützung

Mit der Option AMPforWP PageBuilder können Sie einzelne Seiten für die AMP-Version erstellen, die sich von der Desktop-Version unterscheiden. Es ist nützlich, wenn Sie einen etwas anderen Text oder CTA für AMP-Seiten haben möchten.

Wenn Sie beispielsweise einen „Kontakt“-CTA für den Desktop haben, aber möchten, dass die mobilen Besucher Sie anrufen, können Sie diese Option aktivieren und eine separate Seite erstellen.

PWA

Gemäß der Beschreibung des AMP für WP-Plugins – Progressive Web Apps (PWA) verwandelt Ihre Website in eine Webanwendung und bietet Besuchern ein natives mobiles App-ähnliches Erlebnis.

Es ist eine Designverbesserung. Die Aktivierung des Moduls ist frei wählbar.

Leistung

Das Performance-Panel befasst sich eingehender mit der Seitengeschwindigkeitsoptimierung.

Es ermöglicht Ihnen, CSS/JS zu minimieren , um die Bandbreitennutzung zu reduzieren, ohne UX oder Funktionalität zu beeinträchtigen. Durch die Nutzung des Browser-Cache können Sie die Ladezeit für wiederkehrende Besucher beschleunigen. Ich würde empfehlen, beide Optionen aktiviert zu lassen.

Durch Aktivieren von „ CSS optimieren “ wird die Tree-Shaking-Funktion zum Optimieren von CSS ausgelöst. Sie können es eingeschaltet lassen, falls Sie kein anderes Plugin haben, das diese Aufgabe bereits erledigt.

Analytics, strukturierte Daten, Hinweisleiste und DSGVO

Diese Abschnitte haben die gleichen Optionen wie die in der Grundeinstellung behandelten.

Mitteilungen

Falls Sie Push-Benachrichtigungen einrichten möchten, können Sie zwischen OneSignal, iZooto und Truepush wählen .

Im obigen Beispiel habe ich OneSignal ausgewählt. Für jede Auswahl sehen Sie jedoch einen Abschnitt zur Eingabe der APP-ID, eine Option zum Aktivieren von Push-Benachrichtigungen für Seiten. Außerdem müssen Sie auswählen, wo Sie die Benachrichtigung positionieren möchten (z. B. unten auf der Seite) und welchen Text Sie anzeigen möchten.

Kontaktformulare

Auf diese Weise können Sie eines der 3 Plugins auswählen, für die AMP optimiert werden soll – Contact Form 7, Gravity Forms und Ninja Forms.

Bei allen drei müssen Sie für eine Verlängerung bezahlen. Falls sich Ihr CTA hauptsächlich auf Formulare konzentriert, ist es ratsam, in die Erweiterung zu investieren.

Kommentare

Auf diesem Bildschirm können Sie auswählen, wo die nutzergenerierten Kommentare auf Ihrer Website angezeigt werden sollen. Sie können auch die Quellen auswählen, aus denen Kommentare angezeigt werden sollen.

Wählen Sie die Einstellungen, die für Sie am besten geeignet sind.

Instant-Artikel

Instant Articles ist eine Funktion der Facebook-App für mobile Benutzer, mit der Sie Ihre Website-Artikel hosten können.

Der Vorteil der Aktivierung dieser Funktion ist eine noch schnellere Ladezeit im Vergleich dazu, denselben Artikel auf Ihrer Website zu haben. Da der Artikel innerhalb der App geladen wird, erhalten Sie eine bis zu 10-mal schnellere Ladegeschwindigkeit.

Da der Inhalt jedoch auf Facebook verbleibt, verlieren Sie möglicherweise Website-Traffic. Es ist ein Kompromiss zwischen Seitengeschwindigkeit und Website-Traffic. Ich würde empfehlen es weg zu lassen.

Wenn Sie sich dafür entscheiden, es eingeschaltet zu lassen, werden die folgenden Einstellungen angezeigt.

Nachdem Sie Ihre Facebook-Seiten-ID eingegeben haben, können Sie die Artikeleinstellungen anpassen. Eine Einstellung, die mehr Erklärung erfordert, ist – Crawler Ingestion .

Wenn der Link Ihres auf Ihrer Website gehosteten Artikels auf Facebook geteilt wird, suchen Facebook-Crawler nach dem Tag ia:markup_url . Wenn es vorhanden ist, nimmt Facebook Ihren Artikel auf und erstellt einen sofortigen Artikel auf Ihrer Facebook-Seite.

Werkzeug

Mit der Option Individuelle AMP-Seite können Sie auswählen, ob Sie die AMP-Seiten standardmäßig anzeigen möchten oder nicht. Wenn Sie Standardmäßig anzeigen auswählen, wird auf allen Ihren Seiten die AMP-Version angezeigt. Sie können AMP jedoch für einzelne Posts oder Seiten ausblenden.

Gehen Sie dazu auf eine beliebige Seite und klicken Sie auf Seite bearbeiten . Auf der Registerkarte Einstellungen rechts finden Sie die Option zum Deaktivieren.

Ebenso können Sie die AMP-Versionen für ausgewählte Kategorien und Beiträge ausblenden.

Query Monitor ist das Entwickler-Tools-Panel für WordPress. Wenn Sie ein Entwickler sind, der die Abfragen auf der Seite sehen muss, sollten Sie die Einstellung aktiviert lassen.

Erweiterte Einstellungen

Das Optionsfeld Erweiterte Einstellungen verfügt über eine Vielzahl von Einstellungen, von denen die meisten selbsterklärend sind.

Ich würde empfehlen, die Standardeinstellungen aktiviert zu lassen, es sei denn, Sie sind ein WP-Entwickler oder haben einen Experten mit dem Design Ihrer Website beauftragt.

E-Commerce

Wenn Sie einen Online-Shop besitzen, können Sie Ihre AMP-Version für WooCommerce anpassen. Wenn Sie hauptsächlich digitale Assets verkaufen, können Sie die Option Easy Digital Downloads Support aktivieren. Für beide Optionen müssen Sie eine kostenpflichtige Erweiterung aktivieren.

Übersetzungspanel

In diesem Bereich können Sie die richtigen Übersetzungen für häufig verwendete Wörter in die Sprache Ihrer Wahl auswählen.

Beispielsweise müssen Sie die für Ihre Zielgruppe geeignete Übersetzung für die Nicht-AMP-Version anzeigen eingeben.

Für mehrsprachige Übersetzungen können Sie die Methode POT-Datei verwenden von Translation aktivieren . Die POT-Datei (Portable Object Template) ist eine Vorlage für die PO-Dateien. Sie sind einfache Textdateien, die die Übersetzungen enthalten. Jede Sprache hat ihre eigene Dateierweiterung. Zum Beispiel hat Französisch po.fr.

Implementieren Sie AMP Schritt 4: Design

Themen

Genau wie für die Desktop-Version Ihrer Website können Sie ein Design für die AMP-Version auswählen.

Es stehen vier kostenlose Optionen zur Auswahl.

• Schnell
• Entwurf eins
• Entwurf zwei
• Und Design Drei

Darüber hinaus hat jede Seite und jeder Beitrag einen Bereich, in dem Sie Ihr eigenes Design erstellen können.

So können Sie es finden. Gehen Sie zur Seite oder zum Beitrag und klicken Sie in der oberen Symbolleiste auf „Seite bearbeiten“. Scrollen Sie nach unten, um den folgenden Bildschirm anzuzeigen.

Wenn Sie das Kontrollkästchen Builder verwenden aktivieren, wird die von Ihnen erstellte Vorlage angezeigt, wenn nicht, wird die von Ihnen ausgewählte kostenlose Vorlage angezeigt.

Falls Sie Ihre eigene Vorlage erstellen, haben Sie die folgenden Module zur Auswahl.

Denken Sie daran, dass AMP im Grunde eine HTML-Seite ist. Sie können nicht viel Anpassung oder ausgefallene Schaltflächen erhalten.

Bitte beachten Sie: Sie müssen ein Thema auswählen. Das Plugin benötigt es, um Symbole und Strukturen auszuwählen – auch wenn Sie Ihr eigenes Design erstellen. In diesem Schritt können Sie bei der Implementierung von AMP auf weitere Details eingehen.

Global

In diesem Optionsfeld können Sie Ihre AMP-Version anpassen.

Sie können die gewünschten Farben wie oben auswählen. Außerdem können Sie Google Fonts auswählen. Ich würde jedoch empfehlen, es auszuschalten, da Google Fonts die Ladezeit erhöhen und den Zweck von AMP zunichte machen.

Außerdem können Sie die Sidebar und Infinite Scroll eingeschaltet lassen, wenn Ihre Webseite so aussehen soll. Aus Sicht der Seitengeschwindigkeit sollten Sie es jedoch fernhalten.

Die Font Icon Library entspricht dem Thema, das Sie am Anfang des Design-Bedienfelds ausgewählt haben.

Header

Im Kopfzeilen-Optionsfeld können Sie das Layout Ihrer Kopfzeile und das Aussehen Ihres Navigationsmenüs festlegen.

Außerdem können Sie eine Schaltfläche „Jetzt anrufen“ hinzufügen. Dies ist eine nützliche Schaltfläche für mobile Benutzer.

Sie können Ihren Nicht-AMP-Link in der Kopfzeile anzeigen. Wenn Ihr Publikum jedoch nicht technisch SEO-orientiert ist, kann es sein, dass es nicht auf den Link klickt.

Sie können auch die Suchleiste aktivieren. Es ist von Vorteil, wenn Sie eine Blogging-Website haben.

Mit der erweiterten Kopfzeilenoption können Sie Ihre Kopfzeilenbereichseinstellungen genauer festlegen. Es ist eine Frage der Wahl. Denken Sie jedoch daran, den Code nicht zu ergänzen, da dies die Ladegeschwindigkeit der Seite negativ beeinflusst.

Homepage, Single, Fußzeile, Seite, Social Sharing, Datum und Misc

Diese Optionsfelder sind, genau wie der Header, vollständig eine Frage der Designwahl. Sie können alle Einstellungen wählen, die Ihnen am besten passen.

Zusammenfassen

Die obigen Schritte helfen Ihnen dabei, AMP effektiv auf Ihrer Website zu implementieren. Sobald Sie die Änderungen gespeichert haben, überprüfen Sie die AMP-Version auf Ihrem Telefon oder durch Anhängen von „/amp“ an die URL.

Die folgenden Bilder erfassen die Funktionen Ihrer AMP-Seite.

AMG SEITE VISUAL

FUSSZEILE

Hier hast du es. Befolgen Sie diese Schritte, um AMP zu implementieren und fehlerfreie, superschnelle Seiten zu haben, die für Mobiltelefonbesucher in weniger als 2 Sekunden geladen werden.