Ein Leitfaden für AMP und PWAs

AMP und PWAs werden im kommenden Jahr sicherlich zwei der meistdiskutierten Content-Marketing-Themen sein. In diesem Leitfaden geben wir Ihnen die wichtigsten Informationen zu beiden, einschließlich prägnanter Definitionen von AMP und PWAs, und wie Sie sie zur Bereitstellung von Inhalten verwenden können. Wir werden auch die unterschiedlichen Möglichkeiten besprechen, wie AMP und PWAs verwendet werden können, um Marketingziele zu erreichen, insbesondere im Hinblick auf SEO.

Was ist das AMP-Projekt (Accelerated Mobile Pages Project)?

AMP steht für Accelerated Mobile Pages – und im Grunde bietet es Ihnen genau das.

AMP-Seiten liefern im Wesentlichen den gleichen Inhalt wie eine bestehende Webseite, z. B. ein Online-Artikel. Der Inhalt wird mobilen Benutzern in einem vereinfachten Format bereitgestellt, das auf einer einzigartigen Sprache namens AMP HTML basiert, die einfache Elemente von HTML und CSS kombiniert und die Verwendung von JavaScript einschränkt. Das bedeutet, dass AMP-Seiten viel schneller geladen werden als die ursprünglichen Webseiten, auf denen sie normalerweise basieren.

Nutzer der mobilen Suche konnten erstmals im Februar 2016 auf AMP-Inhalte zugreifen, als Google damit begann, AMP-Versionen von Webseiten in den Suchergebnissen bereitzustellen. Zum Zeitpunkt des Verfassens dieses Artikels werden AMP-Inhalte auf den mobilen Suchergebnisseiten sowohl im Karussell- als auch im Featured-Story-Format bereitgestellt, sodass der Benutzer in jedem Fall durch relevante Inhalte aus mehreren Quellen wischen kann. Der Inhalt ist in den Google-Suchergebnissen mit einem AMP-Symbol gekennzeichnet, das als weißer Blitz in einem blauen Kreis dargestellt ist.

Der einfachste Weg, AMP-Inhalte zu erstellen, die für die Bereitstellung in Google AMP-Suchfunktionen geeignet sind, besteht darin, den HTML-Code bestehender Inhalte in AMP-HTML zu bearbeiten, die Seite dann zu validieren und sie für die Auffindbarkeit vorzubereiten. Amp.dev bietet Entwicklern ein einfaches Tutorial, wie man eine HTML-Seite in eine AMP-HTML-Seite umwandelt.

AMP-Seiten beziehen sich fast immer kanonisch auf andere Seiten. Das bedeutet, dass ihre URL ein „kanonisches“ rel-Tag hat, das Suchmaschinen mitteilt, dass die Seite mit einer Seite auf Ihrer Website identisch ist. Aus SEO-Sicht hat die Nicht-AMP-Version der Seite Vorrang.

Es gibt eine wichtige Ausnahme von dieser Regel in Form von reinen AMP-Websites, die jetzt von einigen Online-Publishern erstellt werden.

John Mueller, ein Google Webmaster Trends Analyst, hat Webmastern geraten, dass reine AMP-Websites eine gute Sache sein können:

„Ich sehe kein Problem darin, eine reine AMP-Site zu verwenden – es ist ein großartiges Framework, um relativ einfach schnelle Sites zu erstellen. Da es sich im Wesentlichen um HTML handelt, funktioniert es genauso wie jede andere HTML-Seite. Es ist großartig zu sehen, wie mehr reine AMP-Websites auftauchen, es kann die Dinge so viel einfacher machen (für Crawling, Indizierung und SEO im Allgemeinen), wenn Sie nur eine einzige URL für jeden Inhalt haben!“

Wenn Sie eine eigene reine AMP-Website testen möchten, empfehlen wir, sie auf WordPress einzurichten und das Plugin AMP for WP – Accelerated Mobile Pages zu verwenden.

AMP ist ein fortlaufendes Open-Source-Projekt mit Anwendungen in E-Mail und Anzeigen sowie Webinhalten. Vollständige und aktuelle Informationen zum Projekt finden Sie unter Amp.dev.

Was sind PWAs und warum sollte ich damit beginnen, sie zu verwenden?

Eine progressive Web-App (PWA) ist eine Web-App, die eine Webseite um Funktionen und Elemente der Benutzererfahrung (UX) erweitert, die traditionell hauptsächlich in nativen Apps zu finden sind. Mit anderen Worten, sie sorgen dafür, dass sich Webinhalte wie App-Inhalte verhalten.

Die PWA-Benutzererfahrung umfasst die folgenden Schritte:

1. Der Benutzer öffnet die PWA-Seite über sein mobiles Gerät. Es verhält sich wie eine normale Webseite;
2. Der Benutzer erhält eine Aufforderung, die Seite zum Startbildschirm seines Geräts hinzuzufügen;
3. Der Benutzer akzeptiert die Eingabeaufforderung. Die Seite erscheint dann und fungiert als App auf ihrem Startbildschirm.
4. Die laufende UX der Website/PWA weist Elemente auf, die typisch für die native App UX sind.

Die Umwandlung von Webinhalten in eine PWA ist eine Aufgabe für Ihren Webentwickler, die Kompetenzen in HTML und JavaScript erfordert.

Google hat umfangreiche Kriterien dafür, was eine „Basis“-PWA oder eine „vorbildliche“ PWA ausmacht.

Baseline-PWAs:

• Werden über HTTPS bereitgestellt
• Reagieren auf Tablets und Mobilgeräten
• URLs enthalten, die alle offline geladen werden
• Bereitstellen von Metadaten für „Zum Startbildschirm hinzufügen“
• Laden Sie schnell, sogar auf 3G
• Browserübergreifend arbeiten (einschließlich in Chrome, Edge, Firefox und Safari)
• Stellen Sie einen schnellen Übergang zwischen den Seiten bereit
• Haben Sie eine dedizierte URL für jede Seite

Die Erfüllung dieser Kriterien ist entscheidend für die Rentabilität und potenzielle Reichweite einer PWA (oder potenziellen PWA) in Google Chrome.

Die Kriterien für beispielhafte PWAs sind ausführlicher. Vollständige Informationen finden Sie in der Checkliste für progressive Web-Apps von Google.

PWAs bieten eine Reihe von Vorteilen. Nach dem ersten Laden laden sie Inhalte normalerweise schneller als die meisten herkömmlichen Webseiten. Dies trägt dazu bei, die Aufmerksamkeit des Benutzers aufrechtzuerhalten, wenn er durch mehrere Inhaltselemente navigiert, da es das Zeitfenster einschränkt, in dem er aufgrund des langsamen Ladens von Inhalten möglicherweise wegnavigiert. Wenn Sie Benutzer ermutigen möchten, eine Reihe von Inhaltselementen nacheinander zu konsumieren, wäre es eine kluge Wette, diese Inhalte über eine PWA bereitzustellen.

Ein weiterer entscheidender Vorteil ist, dass PWAs Marken eine dauerhafte Präsenz auf dem Startbildschirm des mobilen Geräts des Benutzers verleihen können. Diese Gelegenheit kommt zum richtigen Zeitpunkt, da viele Herausgeber Schwierigkeiten haben, in einem überfüllten Markt für native Apps zu konkurrieren, in dem die App-Aufbewahrung nach 90 Tagen nur 4 % beträgt und die Benutzer 77 % der gesamten App-Nutzungszeit mit ihren Top-3-Apps verbringen (Quelle: App-Download- und Nutzungsstatistiken (2019) – Business of Apps).

PWAs sind ein potenzieller Spielveränderer für Publisher, die auf Jetsetter oder ländliche Leser abzielen, da sie Inhalte laden können, während der Benutzer offline ist.

Ein potenzieller Nachteil von PWAs ist, dass sie in den Google-Suchergebnissen manchmal eine unvorhersehbare Leistung erbringen.

Laut Ignite Visibility sollten Websites, die darauf abzielen, Inhalte von PWAs für SEO-Zwecke indexieren zu lassen, „entweder eine HTML-Basis haben und die progressive Web-App darüber laden, [oder] ein Tool wie prerender.io und/oder pushstate verwenden“.

Die von der Community betriebene Website PWA Stats führt eine Live-Liste mit Statistiken zu den Ergebnissen, die Marken durch den Wechsel zu einer PWA erzielt haben, von den verkürzten Ladezeiten von Tinder bis zu höheren Einnahmen für Best Western.

Was ist der Unterschied zwischen AMP und PWA?

Es gibt ein weit verbreitetes Missverständnis, dass AMP und PWA konkurrierende Technologien sind, die denselben Zweck erfüllen.

Es stimmt zwar, dass eine Schlüsselrolle beider Technologien darin besteht, Inhalte für den Benutzer schneller zu laden, aber AMP und PWA haben aus Sicht des Vermarkters unterschiedliche Stärken, Schwächen und taktische Verwendungen.

AMP-Seiten bieten unschlagbar schnelle Ladezeiten beim ersten Klick. Dadurch eignen sie sich ideal, um neue Leser zu gewinnen, da die Wahrscheinlichkeit, dass Benutzer aufgrund langsamer Ladevorgänge abspringen, verringert wird. Sie haben auch eine hervorragende Auffindbarkeit in den Google-Suchergebnissen. AMP unterstützt jedoch keine erweiterten Plattformfunktionen wie dynamische Inhalte und Push-Benachrichtigungen.

PWA-Seiten werden beim ersten Laden relativ langsam geladen, aber ab dem zweiten Laden sehr schnell, was zu besseren Ladezeiten und einer geringeren Absprungrate in der laufenden Beziehung zwischen dem Leser und Ihren Inhalten führen kann. Darüber hinaus können PWAs erweiterte Plattformfunktionen wie dynamische Inhalte, Offline-Browsing und Push-Benachrichtigungen unterstützen, wodurch Vermarkter mehr Möglichkeiten erhalten, Benutzerreisen zu beeinflussen und Konversionen zu steigern.

Online-Publisher können die Vorteile von AMP und PWAs kombinieren, indem sie die beiden Technologien gemeinsam nutzen. Instapage beschreibt einen solchen Ansatz in seinem Artikel über PWAs vs. AMP:

„[Stellen Sie sich] Ihre AMP-Seite als den Haken an Ihrer Website vor. Es fängt den Benutzer mit einer sofortigen Last ein und rollt ihn dann in Ihre progressive Webanwendung. Dadurch können Sie die schnell ladenden AMP-Seiten mit einer [..] dynamischen PWA kombinieren.“

Eine weitere Option besteht darin, PWA-Funktionen innerhalb einer AMP-Seite zu aktivieren.

Alternativ können Sie sich auch dafür entscheiden, eine PWA mit AMP zu entwickeln. Diese Methode basiert darauf, eine PWA in AMP-HTML zu schreiben und eine Komponente namens amp-install-serviceworker zu verwenden, um erweiterte PWA-Funktionen zu aktivieren.

Welche Option ist besser für SEO und Suchrankings: AMP oder PWAs?

Aus unserer Sicht ist die Antwort ein bisschen von beidem, da AMP und PWAs beide auf unterschiedliche Weise bei der Suchmaschinenoptimierung helfen.

PWAs machen Website-Inhalte ansprechender und können daher den Inhaltsverbrauch der Benutzer erhöhen. In der Zwischenzeit verringert AMP die Absprungrate, indem es die Ladegeschwindigkeit mobiler Seiten stark erhöht.

In beiden Fällen gibt es eine Verbesserung des Feedbacks an Google zu wichtigen Webseiten-Ranking-Faktoren, die eine Rolle bei der Bestimmung des Suchrankings und der allgemeinen Suchsichtbarkeit für die Seite und ihre Domain spielen.

Der beste Ansatz aus SEO-Sicht könnte also darin bestehen, AMP und eine PWA in Kombination zu verwenden, wie im vorherigen Abschnitt dieses Artikels besprochen.

Was habe ich so alles über Kontroversen rund um AMP gehört?

Obwohl AMP zweifellos ein leistungsstarkes Tool ist, um Webinhalte zu verteilen und schneller zu laden, sollten Sie bedenken, dass es erhebliche Kontroversen um das Projekt gibt.

Einige Kommentatoren betrachten AMP als eine Möglichkeit für Google, die Websites von Online-Publishern zu negieren und ihre Inhalte an sich zu reißen, wodurch Benutzer in eine Erfahrung eingeschlossen werden, die für Google optimiert ist und auf Google basiert.

Wie der Autor von The Register, Scott Gilbertson, es ausdrückt:

„Es geht nicht wirklich um Geschwindigkeit. Wie bei allem, was Standards für seine eigene modifizierte Version davon meidet, geht es um Lock-in. Tonnen von Seiten im Google AMP-Markup bedeuten Tonnen von Seiten, die speziell für Google optimiert und hauptsächlich von Google indexiert und hauptsächlich Google-Nutzern angezeigt werden. Es ist der Versuch von Google, der Plattform von Facebook gleichzukommen. Und ja, Facebook ist viel schlimmer als AMP, aber das macht Google AMP nicht zu einer guten Idee. Zumindest versucht Facebook nicht so zu tun, als wäre es offen.“

Darüber hinaus werden AMP-Seiten ohne die eigene URL des Herausgebers und Elemente des eigenen Brandings angezeigt, wodurch der Inhalt effektiv vom Herausgeber getrennt wird.

Das vielleicht stärkste Argument für die Verwendung von AMP ist für Publisher. Viele der weltweit führenden Produzenten von Medieninhalten verwenden es, von Mainstream-Nachrichtenanbietern wie The Guardian und Daily Mail bis hin zu Special-Interest-Verlagen wie Wired und Social Media Today. Dies wirft die Frage auf: Wenn die führenden Verlage in Ihrem Bereich AMP verwenden, kann es sich Ihre Publikation leisten, dies nicht zu tun?

Weitere Einblicke in die Kontroverse um AMP erhalten Sie in unserer Podcast-Episode „Digitales Marketing“ zum Erstellen schneller Websites, die ein Interview mit dem Mitbegründer von Raven Tools, Jon Henshaw, enthält.

Sind Progressive Web Applications (PWAs) die Zukunft der Apps?

Im Dezember 2019 berichtete TechCrunch über die erstaunliche Erkenntnis, dass die besten 1 % der App-Store-Publisher 80 % der neuen Downloads vorantreiben.

Dies zeichnet ein düsteres Bild für digitale Publisher, die auf die Vorteile zugreifen möchten, die Apps mit sich bringen können, darunter eine nachhaltige Markenpräsenz auf den Mobilgeräten der Benutzer, erhöhtes Benutzerengagement, Eigentum an der Plattform, vollständiger analytischer Zugriff und vielleicht am wichtigsten, optimale Mobilgeräte UX.

Vor dem Hintergrund schwindender nativer App-Downloads scheinen PWAs allen außer den größten Online-Publishern bei weitem die beste Möglichkeit zu bieten, auf diese Vorteile zuzugreifen. Sie umgehen die Zurückhaltung von Webbenutzern, eine App von einem App-Marktplatz zu installieren, und stellen sie stattdessen auf eine App innerhalb einer normalen Webseitenerfahrung um.

Native Apps wachsen immer noch in Bezug auf globale Downloads und Nutzungszeiten und in diesem Sinne bleiben sie wohl die Zukunft der Apps. Dies geht mit dem Vorbehalt einher, dass das Wachstum von einer mächtigen Minderheit führender Verlage vorangetrieben wird.

Dennoch scheint es, dass PWAs eine große Rolle in der Zukunft des mobilen Inhaltskonsums spielen könnten – ein Bereich, in dem die UX-Vorteile von PWAs die Akzeptanz der Technologie bei Lesern und Herausgebern gleichermaßen fördern könnten.

Fazit: Wie sollten Marketer auf AMP und PWAs reagieren?

Das nachgewiesene Potenzial von AMP und PWAs, Aspekte der Inhaltsleistung und UX zu verbessern, legt nahe, dass diese Technologien ein wichtiger Weg für Online-Publisher sind, um sie zu untersuchen.

AMP ist in begrenztem Umfang einfacher zu testen: Sie können einfach ein paar Inhaltsseiten in AMP-HTML umwandeln und die Ergebnisse beobachten (innerhalb der Grenzen der relativ begrenzten Analysen, die Google für AMP-Publisher bereitstellt). Eine PWA verpflichtet den Herausgeber implizit dazu, seinen Lesern kontinuierlich ein Erlebnis im App-Stil zu bieten, und sollte daher nicht auf die leichte Schulter genommen werden.

Auf der anderen Seite scheinen PWAs im Vergleich zu AMP relativ unverwässerte Vorteile zu bieten. Wiederkehrende Leser erhalten schnellere Ladezeiten sowie die erweiterten Funktionen im App-Stil, die AMP fehlen. Entscheidend ist, dass der Herausgeber eine größere Kontrolle und das Eigentum an den Inhalten behält.

Unser Rat an Online-Publisher, die AMP und PWAs in Betracht ziehen, ist, AMP zunächst mit einigen Inhaltsseiten zu testen und die Möglichkeit, eine PWA in großem Umfang einzuführen, gründlich zu prüfen. Unabhängig davon, ob sie einzeln oder in Kombination verwendet werden, scheinen die beiden Technologien in den kommenden Jahren eine Rolle bei der Nutzung von Webinhalten durch mobile Benutzer zu spielen.

Holen Sie sich jetzt Ihre kostenlose Mitgliedschaft - absolut keine Kreditkarte erforderlich

• Das digitale Marketing-Toolkit
• Exklusive Live-Video-Lernsitzungen
• Vollständige Bibliothek des Digital Marketing Podcast
• Die Benchmarking-Tools für digitale Fähigkeiten
• Kostenlose Online-Schulungen

KOSTENLOSE MITGLIEDSCHAFT