Die 3 Vorteile und 8 Best Practices von AMP Stories zur Maximierung des Engagements

Die Open-Source-Initiative AMP ebnete den Weg für schnellere mobile Web-Erlebnisse. Die Einführung des AMP-Formats hat nicht nur die Geschwindigkeit mobiler Webseiten erhöht, sondern auch die Konversionsraten verbessert. AMP-Seiten trugen dazu bei, den Website-Traffic um 10 % und die Umsatz-Conversions um 20 % zu steigern:

Trotz dieser beeindruckenden Zahlen fehlte dem Format eines – ein auf Geschichten basierendes immersives Webseiten-Erlebnis. Dafür wurden eigens AMP-Stories ins Leben gerufen.

AMP-Geschichten folgen dem gleichen Format wie Snapchat-, Instagram- und Facebook-Geschichten und ermöglichen es Marken, visuell ansprechende Inhalte zu erstellen, um die Aufmerksamkeit der Benutzer mit Storytelling zu erregen.

In diesem Beitrag erfahren Sie alles, was Sie über AMP-Stories wissen sollten – Vorteile, die Komponenten, um sie zu erstellen, Beispiele und ob das Format für Werbung gilt oder nicht.

Was sind AMP-Geschichten?

AMP Stories ist ein visuelles Storytelling-Format für das offene Web. Die Geschichten ermöglichen es den Lesern, in einen abgreifbaren Inhalt im Vollbildmodus einzutauchen. Das Format ermöglicht es Publishern und Vermarktern, visuelle Inhalte zu erstellen, die schnell, offen und benutzerorientiert sind:

Das Format wurde ursprünglich mit acht Verlagen gestartet, darunter Vox Media, CNN, Mashable und die Washington Post. Nachdem das Format für diese Marken gut angezogen wurde, wurde es für alle AMP-Entwickler geöffnet.

Benutzer sehen viele Inhalte auf ihren mobilen Geräten. Dieses Format verwendet fett gedruckte Texte, Bilder, Videos und Grafiken, um die Aufmerksamkeit des mobilen Benutzers so schnell wie möglich zu erregen und es ihnen zu ermöglichen, Inhalte auf eine Weise zu konsumieren, die nicht anstrengend ist:

AMP-Stories erscheinen in Google Bilder, Discover, Search und News.

Das Hochformat wird im Google-Feed natürlich mit der Story-Karte mit einem großen Bild vermittelt, das den größten Teil des Bildschirms dominiert. Die Storys sind als "Featured Visual Story" gekennzeichnet. Wenn Sie auf die Story tippen, wird der standardmäßige Chrome Custom-Tab für eine AMP-Story geöffnet.

Über das Überlaufmenü oben rechts können Sie auf die Standard-Browsersteuerelemente zugreifen, und die Google-Funktion "Zur Sammlung hinzufügen" ist auch in der App-Leiste vorhanden.

AMP-Stories erscheinen im Google-Feed links neben dem Startbildschirm und auch in der Google-App.

Folgendes können Sie erwarten, wenn Sie auf tippen, um eine AMP-Story in den Google-Suchergebnissen zu öffnen:

Vorteile von AMP-Geschichten

Ähnlich wie bei anderen Webseiten können Marken und Publisher AMP-Story-HTML auf ihrer Website hosten und von jeder anderen Seite darauf verlinken, um die Aufrufe zu steigern. Discovery-Plattformen verwenden Techniken wie vorrenderbare Seiten, optimiertes Laden von Videos und Caching, um die Bereitstellung an die Benutzer zu optimieren.

Das Google AMP-Story-Format enthält voreingestellte, flexible Layout-Vorlagen, standardisierte UI-Steuerelemente und Komponenten zum Teilen und Hinzufügen von Folgeinhalten.

Sie sollten in Betracht ziehen, AMP-Stories zu erstellen, weil sie:

• Schnell: AMP-Stories werden schnell geladen und bieten Benutzern ein reibungsloses Erlebnis.
• Immersiv: Die Geschichten sorgen für ein immersives Erlebnis, da sie den Bildschirm des Benutzers erweitern und visuell ausfüllen. Das abgreifbare Format bietet kreative Möglichkeiten für das Geschichtenerzählen mit Designflexibilität, die das Publikum anspricht.
• Offen: AMP-Geschichten sind ein Teil des offenen Webs und können einfach auf Websites und Apps geteilt und eingebettet werden, ohne auf ein einziges Ökosystem beschränkt zu sein.

Da Stories schließlich auf der Komponentenbibliothek von AMP aufbauen, unterstützen sie Funktionen wie Analytics, mit denen Sie Benutzerdaten für Ihre AMP-Stories sammeln und analysieren können.

Erstellen einer AMP-Story

Um erfolgreich eine AMP-Geschichte zu erstellen, müssen Sie zuerst die Teile verstehen, aus denen diese Geschichte besteht.

Eine AMP-Story besteht aus einzelnen Seiten, die aus einzelnen Ebenen bestehen, die grundlegende HTML- und AMP-Elemente enthalten:

Jeder dieser Teile wird in AMP-Komponenten übersetzt, wobei die Geschichte durch 'amp-story' dargestellt wird, die Seite durch 'amp-story-page' dargestellt wird und die Ebenen durch 'amp-story-grid-layer' dargestellt werden. :

Nachdem wir nun skizziert haben, was eine AMP-Story ausmacht, schauen wir uns die Voraussetzungen an, bevor Sie fortfahren:

1. Grundkenntnisse in HTML, CSS und JavaScript.
2. Ein grundlegendes Verständnis der Kernkonzepte von AMP.
3. Ein Browser Ihrer Wahl.
4. Ein Texteditor Ihrer Wahl.

Nachdem Sie diese Dinge eingerichtet haben, folgen Sie diesem Tutorial, um Ihre erste Geschichte zu erstellen.

Best Practices und Spezifikationen

Berücksichtigen Sie beim Erstellen einer AMP-Story die folgenden Best Practices, um die Aufmerksamkeit der Nutzer zu gewinnen.

Wählen Sie eine Hintergrundfarbe

Wenn Sie eine Hintergrundfarbe auswählen, bieten Sie bei schlechten Netzwerkbedingungen eine gute Fallback-Benutzererfahrung. Die Hintergrundfarbe sollte für die dominante Farbe des Hintergrund-Assets der Seite repräsentativ sein, damit ein fließender Übergang zu den Bildern auf der Seite selbst gewährleistet ist.

Textlesbarkeit sicherstellen

Dieser Punkt bezieht sich speziell auf Textüberlagerungen. Wählen Sie eine Schriftfarbe, die sich von der Hintergrundfarbe abhebt, da dies eine bessere Benutzererfahrung bietet. Sie können auch eine Verlaufsüberlagerung zwischen dem Text und dem Bild hinzufügen, um den Kontrast zu erhöhen.

Verwenden Sie minimalen Text

Um das Engagement zu maximieren und sicherzustellen, dass jedes Wort gelesen wird, fügen Sie nicht mehr als ein oder zwei Sätze pro Seite hinzu.

Machen Sie es auch ohne Audio sinnvoll

Wenn Ihre Story Audio enthält, stellen Sie sicher, dass die Story auch ohne Ton aussagekräftig ist, da viele Benutzer AMP-Stories unterwegs ansehen und sie möglicherweise stummschalten. Sie können auch Untertitel hinzufügen, um Ihre Nachricht zu übermitteln, während der Ton ausgeschaltet ist.

Geben Sie ein Posterattribut für das Video an

Das Poster ist ein Bild, das in der Benutzeroberfläche angezeigt wird, bis Ihr Video heruntergeladen wird. Es ist normalerweise das erste Bild des Videos, obwohl jedes Bild funktionieren kann, sollten Sie ein Bild wählen, das für das Video repräsentativ ist und einen reibungslosen Übergang ermöglicht. Die empfohlenen Abmessungen für ein Posterbild sind: 720p (720b x 1280h).

Quelle für Video angeben

Wenn Sie die Quelle für ein Amp-Video angeben, verwenden Sie untergeordnete Elemente anstelle des src-Attributs. Durch die Verwendung des untergeordneten Elements können Sie den Videotyp angeben sowie weitere Videoquellen hinzufügen. Geben Sie im Child-Element den MIME-Typ über das Attribut „type“ an.

Um eine optimale Leistung zu erzielen, sollten Sie Videos mit einer Größe von nicht mehr als 4 MB bereitstellen. Ziehen Sie bei längeren Videos in Erwägung, das Video auf mehrere Seiten aufzuteilen.

Story-Videos sind immer vertikal (dh im Hochformat) mit einem erwarteten Seitenverhältnis von 16:9. Verwenden Sie die empfohlene Auflösung für den Videostreaming-Typ:

1. Verwenden Sie für MP4-Videos H.264.
2. Verwenden Sie für WEBM-Videos VP9.
3. Verwenden Sie für HLS- oder DASH-Videos H.264.

Videos optimieren

Es gibt verschiedene Tools, mit denen Sie Videos codieren und die Qualität des Videos während der Codierung anpassen können. Es wird jedoch empfohlen, die folgenden Videooptimierungen zu verwenden:

Fahren Sie nach dem Ende des Videos mit der nächsten Seite fort

Um nach der Wiedergabe eines Videos automatisch von einer Seite zur anderen zu wechseln, legen Sie den Wert des auto-advance-after-Attributs von auf die ID des Videos und nicht auf die erwartete Länge des Videos fest.

Beispiele für AMP-Stories

AMP-Stories sollen Ihrem Publikum eine Botschaft vermitteln. Erfolgreiche AMP-Stories enthalten hochwertige Assets, sind visuell ansprechend und teilen nutzerrelevante Informationen.

Washington Post

Die AMP-Geschichte der Washington Post dreht sich um die katastrophalen Schäden von Hurrikan Michael:

Verdrahtet

Die AMP-Geschichte von Wired führt die Benutzer durch das Museum of Ice Cream:

People-Magazin

Die AMP-Geschichte des People-Magazins zeigt die königliche Hochzeit:

Unabhängig vom Ton Ihrer Inhalte können Sie AMP-Stories verwenden, um Ihre Botschaft visuell wirkungsvoller zu vermitteln.

Werbung in AMP-Storys

So liefern Sie Anzeigen auf AMP-Story-Seiten:

AMP-Stories unterstützen derzeit zwei Arten von Anzeigenformaten:

1. Single Page Ad: Jede Single Page Ad hat einen vordefinierten CTA-Button und leitet Besucher idealerweise auf eine Post-Click-Landingpage.
2. Gesponserte Story-Anzeige: Bei diesem Anzeigentyp handelt es sich um eine eigenständige Multi-Story-Anzeige. Es funktioniert wie eine gesponserte Story und Publisher können über die CTA-URL-Schaltfläche einer Einzelseitenanzeige Zugriffe darauf lenken.

AMP-Stories verfügen auch über neue Buchstützenfunktionen, die eine umfassendere Komponentenunterstützung für visuelle Layouts ermöglichen. Sie können CTA-Links, Textfelder sowie Karten im Hoch- und Querformat in Anzeigen hinzufügen.

Im Folgenden sehen Sie ein Beispiel für eine Google Pixel 2-Einzelseitenanzeige in einer CNN-AMP-Story:

Um eine optimierte Post-Click-Landingpage zu gewährleisten, stellen Sie wie bei allen anderen Anzeigen sicher, dass Ihre AMP-Story und die CTA-Schaltfläche die Besucher auf eine spezielle Post-Click-Landingpage statt auf eine belebte Startseite führen.

Schaffen Sie faszinierende visuelle Erlebnisse mit AMP-Geschichten

Mit dem AMP-Stories-Format können Sie blitzschnelle, visuell ansprechende Storytelling-Erlebnisse für Ihr Publikum erstellen. Da das Format Open Source ist, können Sie ganz einfach Geschichten für Ihre Marke erstellen und da sie auf Ihrer Website vorhanden sind, können sie auch in den Suchergebnissen gefunden werden. Außerdem eignet sich ihr visuell immersives Format für mehr Publikumsbindung.

Sind Sie gespannt, was das AMP-Format für Ihre Marke tun kann? Sehen Sie den Instapage AMP Builder in Aktion und entdecken Sie, warum Instapage die robusteste Post-Click-Optimierungsplattform auf dem Markt ist.