Eine umsetzbare Anleitung zum Einrichten von AMP

Um das Hochladen von Inhalten zu beschleunigen, hat Google Accelerated Mobile Pages (AMP) eingeführt. Die Technologie könnte wie der Versuch von Google aussehen, mit Facebook Instant Articles und schnell heruntergeladenen Inhaltsoptionen zu konkurrieren, die von anderen Unternehmen entwickelt wurden. Es bietet offensichtliche Vorteile für einige Plattformen, während es in einigen Fällen nicht so hilfreich ist. Der folgende Beitrag beschreibt die Technologie selbst und den Einrichtungsprozess. Die AMP-Integration ist nicht so schwierig, obwohl sie einige Besonderheiten aufweist, an die man sich erinnern sollte.

Die kurze Geschichte von AMP

Die schnelle und umfassende Durchdringung mobiler Technologien im täglichen Leben der einfachen Menschen konnte nicht außerhalb des Fokus der größten Suchmaschine – Google – bleiben. Also veröffentlichten sie im Oktober 2015 den Beitrag über die neue Technologie, die für mobile Webentwickler verfügbar wurde.

Tatsächlich wurde diese Technologie zum letzten Schliff einer „mobilfreundlichen“ Richtlinie, die Google in den letzten Jahren unterstützt hat. Erstens führten sie den Algorithmus ein, der die für Mobilgeräte optimierten Websites höher einordnete. Später entwickelten und führten sie ein völlig neues kostenloses Tool zur Optimierung mobiler Inhalte von Zielseiten ein – AMP. Um den Unterschied zwischen AMP- und für Mobilgeräte optimierten Seiten herauszufinden, lesen Sie diesen Artikel und das Interview mit Duane Forrester .

Die Basiskomponenten der AMP-Technologie

Bevor Sie über die AMP-Integration auf der Website sprechen, müssen Sie herausfinden und verstehen, worum es bei dieser Technologie geht. Aus Entwicklersicht betrachtet besteht es aus diesen drei Komponenten:

• AMP-HTML ist dasselbe bekannte HTML5, jedoch mit Modifikationen (einige Standard-Tags werden durch speziell für AMP entwickelte Tags ersetzt);

• AMP JS ist eine neue Bibliothek, die einen Zugriff auf die neuen Tags bietet und die Optimierung der Ressourcen-Download-Geschwindigkeit durch direkte Steuerung ermöglicht.

• Google AMP Cache ist eine CDN-Proxyserver-basierte Netzwerk-Caching-AMP-Seite. Aufgrund des oben Genannten erhöht sich die Menge an Inhalten, Skripten und Bildern auf der Download-Geschwindigkeit des Clients, da sie direkt von der nächstgelegenen Quelle über HTTP 2.0 „gezogen“ werden.

Sehen Sie sich das folgende Beispiel an:

Diese Technologie hat die Art und Weise, wie Benutzer mit der Website des Herausgebers interagieren, vollständig verändert, weil

• Benutzer besuchen die Website nicht – sie sehen den Inhalt des Artikels direkt in Google, wo er aus dem Cache hochgeladen wird;

• Die Navigation durch die Artikel sieht aus wie ein Schieberegler-Karussell, was bedeutet, dass Sie AMP-Seiten nach links und rechts scrollen können, um von einer Nachricht zur nächsten zu gehen.

Die Karte des Artikels nimmt einen erheblichen Prozentsatz des Platzes auf der Suchmaschinen-Ergebnisseite ein und wird mit einem speziellen Symbol versehen, das den Benutzer darüber informiert, dass es sich um eine AMP-Seite handelt.

Wer sollte AMP ausprobieren?

Sie sollten verstehen, dass AMP für eine Reihe von Website-Kategorien kein Muss ist. Bei herkömmlichen E-Commerce-Projekten funktioniert beispielsweise das Verzeichnislayout mit AMP nicht.

Wenn ein bestimmtes E-Commerce-Projekt einen Inhaltsteil (z. B. ein Blog) mit einem Publikum von Lesern und häufig aktualisierten Artikeln hat, ist die AMP-Implementierung sehr hilfreich. Die markierten Seiten können in den Google-Newsblock gelangen und zu einem zusätzlichen Interaktionspunkt mit der Marke werden.

Inhaltsanbieter, die ihre Ressourcen durch die Platzierung von Anzeigenblöcken monetarisieren, sollten AMP implementieren, um ein Band in den Nachrichten zu erhalten, damit sie den zusätzlichen Verkehr auf eine neue, kostenlose Weise sammeln können.

Implementierung von AMP

Von dem Moment an, in dem Sie sich entscheiden, AMP auf Ihrer Website zu implementieren, müssen Sie sich an einen einfachen Algorithmus halten, mit dem Sie alle Schritte problemlos ausführen können. Aber bevor wir weitermachen, beachten Sie die folgenden wenigen spezifischen AMP-Funktionen, die tatsächlich die Art der Integration und die Auswahl der Tools zur Lösung dieses Problems bestimmen:

• Beschleunigen Sie das Herunterladen von Inhalten im Lesebereich, indem Sie asynchrone AMP-Skripts mehrmals verwenden.

• Styles in einem separaten Tag „style amp-custom“ einreichen; Denken Sie daran, dass ihre Größe auf 50 KB begrenzt ist.

• Legen Sie die Höhe und Breite der grafischen Elemente (Bilder und Animationen) innerhalb des HTML-Dokuments fest.

• Ersetzen Sie nicht unterstützte benutzerdefinierte JS-Skripts mithilfe der AMP JS-Bibliothek.

• Verwenden Sie den Link oder das CSS @font-face, um Schriftarten herunterzuladen.

Alle diese Funktionen (auch wenn sie Ihnen nichts vermitteln) wirken sich direkt auf die Geschwindigkeit und die Einfachheit der Technologieimplementierung aus.

So richten Sie AMP automatisch ein

Nun, der tatsächliche Implementierungsalgorithmus ist der folgende:

1. Überprüfen Sie, ob es eine fertige Lösung für AMP gibt oder nicht.

• Ja – verwenden und die Gültigkeit der Ausgabe kontrollieren. Beispiele für vorgefertigte Lösungen für die beliebtesten Blogging-CMS sind die folgenden:

WordPress – https://wordpress.org/plugins/amp/

Drupal – https://www.drupal.org/project/amp

Joomla – https://weeblr.com/joomla-accelerated-mobile-pages/wbamp

• Nein – Führen Sie die Integration manuell durch, wie im nächsten Abschnitt dieses Artikels erläutert. Dort werden wir über die Einschränkungen sprechen, die berücksichtigt werden sollten.

2. Prüfen Sie, ob Sie für die Erfassung von Leads ein funktionsfähiges Formular benötigen.

• Ja – Verwenden Sie die „Krücke“, um den gewünschten benutzerdefinierten js-Code über das „amp-iframe“ einzufügen. Für weitere Informationen klicken Sie hier.

• Nein – diesen Schritt überspringen.

3. Prüfen Sie, welche Methode des Seitentrackings Ihren Anforderungen entspricht.

• AMP-Pixel ermöglicht die Überwachung der Statistik der Seitenaufrufe gemäß GET-Anfrage. Es eignet sich perfekt zum Hochladen von Daten zu Drittanbietern oder benutzerdefinierten Statistikdiensten.

• AMP Analytics ermöglicht es, die Datenübertragung zu Google Analytics zu organisieren und die Benutzeraktivitäten direkt auf der Seite zu verfolgen.

Beide Methoden mit Codebeispielen werden hier beschrieben.

4. Überprüfen Sie die Gültigkeit des Codes der Seiten mit dem Tool „AMP Test“ in Ihrer Google Search Console.

So richten Sie AMP manuell ein

Die Mehrheit der vertrauenswürdigen und sehr beliebten Online-Medien verwendet keine Boxed-CMS-Lösungen. Normalerweise basieren sie auf benutzerdefinierten Engines, und daher fällt eine Integration der AMP-Technologie auf die Schultern der Entwickler. Dies ist jedoch keine schwierige Aufgabe für einen kompetenten Experten. Der grundlegende Algorithmus umfasst die folgenden Schritte:

1. Erstellen Sie Seitenvorlagen im AMP-Format: Schreiben Sie Ihre Hauptvorlage um, indem Sie spezielle amp-Tags verwenden, dynamische Elemente deaktivieren, Schriftarten festlegen und Bildstile gemäß den oben genannten Anforderungen festlegen.

2. Passen Sie Vorlagen mithilfe des automatischen Algorithmus oder manuell an (normalerweise eine „Nein-Nein“-Option für größere Websites, aber eine gute Lösung für kleinere).

3. Richten Sie Analysen ein, indem Sie ein Tracking-Pixel oder einen Google Analytics-Code integrieren.

4. Testen Sie die Gültigkeit, indem Sie den „AMP-Test“ in der Google Search Console verwenden, insbesondere in dem Moment, in dem das spezielle Tag von der Hauptseite der Website auf die AMP-Seite zeigt, während rel = „canonical“ auf die zeigt entgegengesetzten Richtung.

Fazit

AMP ist besonders nützlich für die Websites von Publishern und Content-Distributoren. Obwohl die Integration komplex aussehen mag, hat AMP einen einfachen Algorithmus und kann auf beiden Seiten automatisiert werden, die beliebte CMS-Engines und benutzerdefinierte Plattformen verwenden. Indem Sie einem oben beschriebenen einfachen Algorithmus folgen, können Sie diesen Prozess ohne allzu großen Aufwand und Risiko aufbauen.