Best Practices zum Erstellen von Web Stories

Mit unseren Best Practices kannst du Web Stories erstellen, mit denen du das Interesse deiner Leser aufrechterhältst. Wir haben die Best Practices in zwei Gruppen eingeteilt: dringend empfohlene Best Practices und zusätzlich empfohlene Best Practices. Konzentriere dich erst einmal auf die dringend empfohlenen Best Practices. Wenn dann noch Zeit ist, kannst du anschließend die weiteren Best Practices umsetzen.

Storytelling

Dringend empfohlene Best Practices für das Storytelling
Nutze möglichst viele Videos Videos wecken das Interesse der Nutzer effektiver als Text oder Bilder. Verwende so viele Videos wie möglich und nutze Bilder und Text als Ergänzung.

Weitere Best Practices für das Storytelling

Zusätzlich empfohlene Best Practices für das Storytelling
Vermittle deine Perspektive Teile mehr als nur Fakten. Sag deine Meinung. Übernimm die Hauptrolle in deiner eigenen Geschichte. Sorge dafür, dass die Nutzer sich in die Geschichte hineinversetzen können.
Schaffe einen Handlungsbogen Bau in deiner Geschichte Spannung auf. Nimm den Nutzer mit und beziehe ihn ein, indem du Kontext bereitstellst und eine Erzählstruktur aufrechterhältst. Vermittle dem Nutzer, dass es sich lohnt, bis zum Ende dabeizubleiben – und erfülle dieses Versprechen.

Design

Dringende empfohlene Best Practices für das Design
Fasse dich kurz Vermeide mehrere Seiten mit sehr viel Text. Versuche, deinen Text pro Seite auf etwa 280 Zeichen (die Länge eines Tweets) zu begrenzen.
Sorge dafür, dass dein Text nicht verdeckt wird Achte darauf, dass Text nicht durch andere Inhalte auf der Seite verdeckt wird. Vermeide fest eingebetteten Text. Dieser kann bei der Anpassung des Layouts an die jeweilige Bildschirmgröße leicht durch andere Elemente verdeckt werden.
Sorge dafür, dass dein Text innerhalb der Textgrenzen bleibt Achte darauf, dass der ganze Text deiner Web Story für den Leser sichtbar ist. Vermeide fest eingebetteten Text. So verhinderst du, dass der Text bei Anpassung des Layouts an die jeweilige Bildschirmgröße überläuft.
Verwende Animationen, aber mit Umsicht Animationen sind ein gutes Mittel, Stories mit Leben zu erfüllen. Sie sollten aber umsichtig verwendet werden, damit sie nicht vom Inhalt ablenken oder den Nutzer durch zu viel Wiederholung ermüden.

Weitere Best Practices für das Design

Zusätzlich empfohlene Best Practices für das Design
Verwende nur Web Stories-spezifische Calls-to-Action Wenn du Stories umbaust, die ursprünglich für eine soziale Plattform wie Instagram, Snapchat oder YouTube erstellt wurden, solltest du alle Calls-to-Action für Aktionen auf dieser spezifischen Plattform entfernen. Sorge dafür, dass Nutzer alle in deiner Web Story vorgeschlagenen Aktionen ausführen können.
Verwende randlose Videos und Bilder Wenn du randlose Elemente in deinen Stories verwendest, erhöht dies die Intensität deiner Inhalte für den Nutzer.
Vermeide Bilder und Videos mit niedriger Auflösung Verwende Bilder mit hoher Qualität und achte darauf, dass sie diese nicht beeinträchtigt wird, wenn du Bilder ins Hochformat umwandelst.
Platziere ein Logo auf deiner Titelseite Nutze ein Logo mit hoher Auflösung, das deine Marke repräsentiert.
Kürze Videos, wenn nötig Wir empfehlen Videos mit weniger als 15 Sekunden pro Seite oder mit maximal 60 Sekunden.
Verwende Audio Verwende Audioclips mit hoher Qualität, einer Länge von mindestens 5 Sekunden und einer ausgewogenen Lautstärke. Wenn gesprochen wird, achte darauf, dass es gut verständlich ist.
Lass bei Stories, die nur Videos enthalten, automatisch das nächste abspielen Mit dem automatischen Abspielen des nächsten Videos können Nutzer deine videobasierten Web Stories entspannter genießen.

SEO

Dringend empfohlene Best Practices für die SEO
Biete Nutzern hilfreiche und interessante Inhalte Wie bei jeder anderen Webseite kommt es vor allem darauf an, den Lesern hilfreiche und interessante Inhalte zur Verfügung zu stellen. Erstelle eine vollständige Erzählung und folge dabei den Best Practices für das Storytelling, um das Interesse der Leser aufrechtzuerhalten.
Verwende einen kurzen Titel Titel sollten nicht länger als 90 Zeichen sein. Verwende am besten einen aussagekräftigen Titel mit weniger als 70 Zeichen.
Prüfe, ob deine Story in der Google Suche gefunden werden kann Füge deiner Story nicht das Attribut „noindex“ hinzu. Es verhindert, dass Google die Seite indexiert, wodurch die Story nicht bei Google gefunden werden kann. Wir empfehlen, Web Stories auch in deine Sitemap aufzunehmen. Mit dem Bericht zur Indexabdeckung und dem Sitemaps-Bericht in der Search Console kannst du prüfen, ob Google deine Web Stories findet.
Mach deine Story eigenständig Alle Web Stories müssen kanonisch sein. Achte darauf, dass jede Web Story mit link rel="canonical" auf sich selbst verweist. Beispiel: <link rel="canonical" href="https://www.example.com/url/to/webstory.html">
Füge Metadaten an

Achte darauf, dass deine Web Stories den Metadaten-Richtlinien für AMP Stories entsprechen. Füge Markup hinzu, das du normalerweise für eine Webseite nutzen würdest, zum Beispiel Folgendes:

Weitere Best Practices für die SEO

Zusätzlich empfohlene Best Practices für die SEO
Verwende strukturierte Daten Wir empfehlen den Einsatz strukturierter Daten in deiner Web Story, damit die Google Suche die Struktur und den Inhalt deiner Web Story besser erkennt.
Verwende Alt-Text für BilderWenn deine Bilder mit Alt-Text versehen sind, wird dadurch die Sichtbarkeit deiner Story verbessert.
Integriere Stories in deine Website

Wir empfehlen, Web Stories in deine Website einzubinden. Du kannst sie zum Beispiel auf deiner Startseite oder auf relevanten Kategorieseiten verlinken. Wenn es in deiner Web Story beispielsweise um ein Reiseziel geht und du eine Seite hast, auf der alle deine Reiseartikel aufgeführt sind, kannst du die Web Stories auch auf dieser Kategorieseite verlinken. Außerdem könnte es auch sinnvoll sein, eine zusätzliche spezielle Landingpage wie www.example.com/stories zu erstellen, auf die über wichtige Seiten wie deine Startseite verlinkt wird.

Verwende AMP Story-Seitenanhänge Mit AMP Story-Seitenanhängen kannst du neben deiner Web Story noch weitere Informationen anfügen. So kannst du Nutzern zusätzliche Details, Analysen oder weiterführende Reisen für die in deiner Web Story angebotenen Inhalte zur Verfügung stellen.
Versieh deine Videos mit Untertiteln Füge deinen Videos Untertitel hinzu, damit Nutzer deine Story besser verstehen. Vermeide fest in das Video eingebettete Untertitel, damit sie andere Inhalte nicht überdecken oder am Bildschirmrand überlaufen.
Optimiere Stories, die nur Videos enthalten

Wir empfehlen, zum Erstellen deiner Web Story semantisches HTML zu verwenden. Einige Web Story-Editoren exportieren Stories aber möglicherweise so, dass jede Folie als Videodatei formatiert wird. Dadurch wird der gesamte Text fest in das Video eingebettet. In diesem Fall ist es empfehlenswert, den genauen Text, der im Video angezeigt wird, dem amp-video-Element als title-Attribut hinzuzufügen. Das solltest du aber wirklich nur dann tun, wenn du kein semantisches Markup in Web Stories verwenden kannst.

Sorge für Unterstützung von Displays im Querformat Damit Web Stories auf Computern in den Google-Suchergebnissen angezeigt werden, müssen sie Displays im Querformat unterstützen.

Technik

Dringend empfohlene technische Best Practices
Überprüfe dein Story-Markup Web Stories müssen gültige AMP-Seiten sein. Du kannst Probleme mit ungültigem AMP-Markup vermeiden, indem du deine Story mit dem AMP-Validierungstool überprüfst und mögliche Fehler behebst.
Vermeide Text auf dem Posterbild Verwende keine Bilder, die fest eingebetteten Text enthalten. Solcher Text kann den Titel deiner Story verdecken, wenn Nutzer eine Vorschau der Story in den Suchergebnissen ansehen. Können Nutzer den Titel nicht richtig lesen, sinkt die Wahrscheinlichkeit, dass sie sich weiter damit beschäftigen.
Verwende die richtige Größe und das richtige Seitenverhältnis für das Poster Achte darauf, dass das mit dem Attribut „<amp-story> poster-portrait-src“ verknüpfte Bild mindestens 640 x 853 Pixel und ein Seitenverhältnis von 3:4 hat.
Verwende das richtige Seitenverhältnis für das Logo Achte darauf, dass das mit dem Attribut „<amp-story> publisher-logo-src“ verknüpfte Logo mindestens 96 x 96 Pixel und ein Seitenverhältnis von 1:1 hat.

Weitere technische Best Practices

Zusätzlich empfohlene technische Best Practices
Verwende og:image Wir empfehlen, og:image in deine <meta>-Tags aufzunehmen, um die Sichtbarkeit deiner Story zu verbessern.

Weitere Ressourcen