Web Stories

Best Practices für die Erstellung von Web Stories

Um Ihre Leser bei der Stange zu halten, befolgen Sie unsere Best Practices für die Erstellung von
Web Stories. Wir empfehlen, sich zuerst auf die kritischen Aufgaben zu konzentrieren. Wenn Sie mehr Zeit haben, sollten Sie auch die empfohlenen Best Practices umsetzen.

Storytelling

Kritische Best Practices für Storytelling
Video zuerstVideos sind ansprechender als Text oder Bilder. Verwenden Sie so viel Video wie möglich und ergänzen Sie es mit Bildern und Text.

Weitere Best Practices für Storytelling

Empfohlene Best Practices für Storytelling
Bringen Sie Ihre Perspektive einGehen Sie über Fakten hinaus. Teilen Sie Ihre Meinung. Seien Sie der Protagonist Ihrer eigenen Geschichte. Sorgen Sie für Identifikationspotenzial.
Etablieren Sie einen SpannungsbogenErzeugen Sie von Seite zu Seite Spannung in Ihrer Geschichte. Nehmen Sie den Nutzer mit auf die Reise, indem Sie Kontext und Erzählstruktur bieten. Belohnen Sie den Nutzer dafür, dass er bis zum Ende dabei bleibt.

Design

Kritische Best Practices für Design
Reduzieren Sie die ZeichenanzahlVermeiden Sie mehrere Seiten mit Textwüsten. Erwägen Sie, den Text auf etwa 280 Zeichen pro Seite zu begrenzen (die Länge eines Tweets).
Text nicht verdeckenStellen Sie sicher, dass der Text nicht durch andere Inhalte auf der Seite verdeckt wird. Vermeiden Sie eingebrannten Text; so verhindern Sie, dass Text bei der Anpassung an verschiedene Bildschirmgrößen abgeschnitten wird.
Text innerhalb der Grenzen haltenStellen Sie sicher, dass der gesamte Text in Ihrer Web Story für den Leser sichtbar ist. Vermeiden Sie eingebrannten Text; so verhindern Sie, dass Text bei der Anpassung an verschiedene Bildschirmgrößen über den Rand hinausläuft.
Animationen bewusst einsetzenErwecken Sie Ihre Geschichten mit Animationen zum Leben. Vermeiden Sie ablenkende oder repetitive Animationen, die ermüdend wirken können.

Weitere Best Practices für Design

Empfohlene Best Practices für Design
Verwenden Sie Web Stories-spezifische Call-to-ActionsWenn Sie Geschichten neu erstellen, die ursprünglich für soziale Plattformen wie Instagram, Snapchat oder YouTube konzipiert wurden, entfernen Sie unbedingt alle plattformspezifischen Handlungsaufforderungen. Stellen Sie sicher, dass Nutzer alle in Ihrer Web Story vorgeschlagenen Aktionen auch ausführen können.
Verwenden Sie randlose Videos und BilderIntegrieren Sie randlose Assets in Ihre Geschichten, um ein immersiveres Erlebnis für die Leser zu schaffen.
Vermeiden Sie Bilder und Videos mit niedriger Auflösung oder VerzerrungenVerwenden Sie hochwertige Bilder und achten Sie beim Zuschneiden auf das Hochformat auf die Qualität.
Fügen Sie ein Logo auf der Titelseite hinzuIntegrieren Sie ein hochauflösendes Logo, das Ihre Marke repräsentiert.
Verkürzen Sie die VideolängeWir empfehlen Videos mit einer Länge von weniger als 15 Sekunden pro Seite, maximal jedoch 60 Sekunden.
Integrieren Sie AudioVerwenden Sie hochwertige Audioclips mit einer Länge von mindestens 5 Sekunden bei ausgewogener Lautstärke und stellen Sie sicher, dass Sprache gut verständlich ist.
Erwägen Sie automatisches Weiterblättern für reine Video-StoriesEin automatisch weiterlaufendes Erlebnis für videobasierte Web Stories kann für einen entspannten Konsum gut funktionieren.

SEO

Kritische SEO Best Practices
Bieten Sie hochwertige InhalteWie bei jeder Webseite ist die Bereitstellung hochwertiger Inhalte, die für Ihre Leser nützlich und interessant sind, das Wichtigste, was Sie tun können. Integrieren Sie eine vollständige Erzählung und befolgen Sie die Best Practices für Storytelling, um Ihre Leser zu binden.
Halten Sie den Titel kurzHalten Sie Titel unter 90 Zeichen. Wir empfehlen einen beschreibenden Titel mit weniger als 70 Zeichen.
Stellen Sie sicher, dass Google Ihre Story finden kannVerwenden Sie kein noindex-Attribut in Ihrer Story; dieses Attribut blockiert Google bei der Indexierung der Seite und verhindert, dass sie bei Google erscheint. Fügen Sie Ihre Web Stories zusätzlich zu Ihrer Sitemap hinzu. Sie können mit dem Bericht zur Indexabdeckung und dem Sitemaps-Bericht in der Search Console prüfen, ob Google Ihre Web Stories finden kann.
Machen Sie die Story selbst-kanonischAlle Web Stories müssen kanonisch sein. Stellen Sie sicher, dass jede Web Story ein link rel="canonical" auf sich selbst enthält. Zum Beispiel: <link rel="canonical" href="https://www.example.com/url/to/webstory.html">
Metadaten anhängen

Stellen Sie sicher, dass Ihre Web Stories den
AMP Story
Metadaten-Richtlinien
entsprechen. Fügen Sie Markup hinzu, das Sie normalerweise auf einer Webseite verwenden würden, wie zum Beispiel:

Weitere SEO Best Practices

Empfohlene SEO Best Practices
Strukturierte Daten einbindenWir empfehlen, strukturierte Daten in Ihre Web Story einzubinden, damit die Google-Suche die Struktur und den Inhalt Ihrer Web Story besser verstehen kann.
Alt-Texte für Bilder verwendenWir empfehlen, Alt-Texte für Ihre Bilder zu verwenden, um die Auffindbarkeit Ihrer Story zu verbessern.
Stories in Ihre Website integrieren

Wir empfehlen, Web Stories in Ihre Website zu integrieren, beispielsweise durch Verlinkung von Ihrer Startseite oder entsprechenden Kategorieseiten aus. Wenn Ihre Web Story beispielsweise ein Reiseziel behandelt und Sie eine Seite mit all Ihren Reiseartikeln haben, verlinken Sie die Web Stories auch auf dieser Kategorieseite. Eine zusätzliche spezielle Landingpage wie www.example.com/stories (die dann von wichtigen Seiten wie Ihrer Startseite aus verlinkt wird) kann ebenfalls sinnvoll sein.

AMP Story-Seitenanhänge verwendenAMP
Story-Seitenanhänge
können verwendet werden, um zusätzliche Informationen neben Ihrer Web Story zu präsentieren. Dies ist nützlich, um zusätzliche Details, tiefergehende Einblicke oder weiterführende Inhalte zu den in Ihrer Web Story präsentierten Themen zu bieten.
Untertitel für Videos hinzufügenFügen Sie Untertitel zu Ihrem Video hinzu, damit Leser Ihre Geschichte besser verstehen können. Vermeiden Sie Untertitel, die in das Video eingebrannt sind, um sicherzustellen, dass sie nicht mit anderen Inhalten überlappen oder vom Bildschirm abgeschnitten werden.
Reine Video-Stories optimieren

Wir empfehlen, semantisches HTML für den Aufbau Ihrer Web Story zu verwenden. Einige Web Story-Editoren exportieren jedoch möglicherweise eine Story, bei der jede Folie als Videodatei formatiert ist, in die der gesamte Text eingebrannt ist. In diesem Fall empfehlen wir, den präzisen Text, der im Video angezeigt wird, als title-Attribut auf dem amp-video-Element hinzuzufügen. Tun Sie dies jedoch nur, wenn Sie kein semantisches Markup in Ihren Web Stories verwenden können.

Unterstützung für Querformat-Displays hinzufügenUm zu ermöglichen, dass Web Stories in den Google-Suchergebnissen auf dem Desktop erscheinen, fügen Sie Unterstützung für Querformat-Displays hinzu.

Technik

Kritische technische Best Practices
Story valide machenWeb Stories müssen valide AMP-Seiten sein. Um Probleme mit ungültigem AMP zu vermeiden, testen Sie Ihre Story mit dem AMP Validator-Tool und beheben Sie alle erkannten Fehler.
Keinen Text im Poster-Bild einfügenVermeiden Sie Bilder mit eingebranntem Text, da dies den Titel Ihrer Story verdecken könnte, wenn Nutzer eine Vorschau Ihrer Story in den Suchergebnissen sehen. Wenn Nutzer den Titel nicht klar lesen können, ist die Wahrscheinlichkeit geringer, dass sie weiterlesen.
Richtige Größe und Seitenverhältnis für das Poster-Bild wählenStellen Sie sicher, dass das Bild, das mit Ihrem <amp-story> poster-portrait-src-Attribut verknüpft ist, mindestens 640x853px groß ist und ein Seitenverhältnis von 3:4 aufweist.
Richtige Seitenverhältnis für das Logo wählenStellen Sie sicher, dass das Logobild, das mit Ihrem <amp-story> publisher-logo-src-Attribut verknüpft ist, mindestens 96×96 px groß ist und ein Seitenverhältnis von 1:1 aufweist.

Weitere technische Best Practices

Empfohlene technische Best Practices
og:image einbindenWir empfehlen, og:image in Ihre <meta>-Tags einzubinden, um die Auffindbarkeit Ihrer Story zu verbessern.

Weitere Ressourcen

Alien Road

So setzen wir das um

Web Story quality guidelines are mostly editorial: pacing, image quality, text length per frame. We brief the client’s design team on them directly, since the constraints are unfamiliar to people used to article layouts.

Verwandte Leistungen

Teilen

© Copyright 2026 Alien Road. All rights reserved.