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
Dringend 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 fü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 Calls-to-Action, die für Web Stories spezifisch sind
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 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 zu präsentieren. Erzähle von vorn bis hinten eine Geschichte 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, und folglich kann die Story nicht bei Google gefunden werden. 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 hinzu
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:
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 Bilder
Wenn 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 und Analysen bieten oder ihnen vorschlagen, welche anderen Inhalte sie ausgehend von den in deiner Web Story präsentierten Inhalten noch für sich entdecken könnten.
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
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.
Verwende keinen Text im 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.
Web Stories in der Google Suche aktivieren: Entwicklerleitfaden zum Erstellen von Web Stories, die den technischen Richtlinien für die Anzeige in der Google Suche entsprechen
AMP Stories-Website: Dokumentation für Entwickler, in der die Möglichkeiten des Web Stories-Formats erörtert werden
Barrierefreiheit im Web: Tipps, wie du dafür sorgen kannst, dass deine Web Story für alle Nutzer zugänglich und barrierefrei ist
