[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Missing the information I need"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Too complicated / too many steps"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Out of date"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Translation issue"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Samples/Code issue"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Other"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Easy to understand"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Solved my problem"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Other"
}]
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 empfehlen, dich zuerst auf die wichtigen Best Practices zu konzentrieren. Wenn dann noch Zeit ist, kannst du anschließend die empfohlenen Best Practices umsetzen.
Storytelling
Wichtige Best Practices für das Storytelling
Videos haben oberste Priorität
Sie 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
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. Achte darauf, dass sich Nutzer in dich hineinversetzen können.
Schaffe einen Handlungsbogen
Erzähle eine spannende Geschichte. Achte darauf, dass du Hintergrundinformationen einfügst und eine Erzählstruktur aufrechterhältst. Belohne Nutzer, die bis zum Ende dabei bleiben.
Design
Best Practices für das Design
In der Kürze liegt die Würze
Vermeide mehrere Seiten mit sehr viel Text. Versuche, etwa 280 Zeichen pro Seite zu schreiben (die Länge eines Tweets).
Text darf nicht verdeckt werden
Achte darauf, dass Text nicht durch andere Inhalte auf der Seite verdeckt wird. Vermeide fest eingebetteten Text. So verhinderst du, dass er verdeckt wird, wenn er an verschiedene Bildschirmgrößen angepasst wird.
Begrenze deinen Text
Achte darauf, dass der ganze Text deiner Web Story für den Leser sichtbar ist. Vermeide fest eingebetteten Text. So verhinderst du, dass er überläuft, wenn er an verschiedene Bildschirmgrößen angepasst wird.
Verwende Animationen mit Vorsicht
Du kannst deine Stories mit Animationen zum Leben erwecken. Vermeide dabei aber sehr auffällige oder sich wiederholende Animationen, die Nutzer ermüden können.
Weitere Best Practices für das Design
Empfohlene Best Practices für das Design
Verwende nur für deine Web Stories relevante Calls-to-Action
Wenn du Stories neu erstellst, die du ursprünglich für eine soziale Plattform wie Instagram, Snapchat oder YouTube erstellt hast, achte darauf, alle Calls-to-Action, die sich auf eine bestimmte Plattformen beziehen, zu 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.
Verwende kurze Videos
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
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.
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:
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, 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
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 Best Practices zur Technik
Empfohlene Best Practices zur Technik
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: Hier ist der Entwicklerleitfaden zum Erstellen von Web Stories zu finden, die den technischen Richtlinien für die Anzeige in der Google Suche entsprechen.
AMP Stories-Website: In dieser Dokumentation für Entwickler werden die Möglichkeiten des Web Story-Formats erörtert.
Barrierefreiheit im Web: Hier erhältst du Tipps, mit denen du dafür sorgst, dass deine Web Story für alle Nutzer zugänglich ist.
Allgemeine Richtlinien für strukturierte Daten: Hier findest du Details dazu, wie du strukturierte Daten einsetzt, damit deine Inhalte durch die Google Suche besser erfasst werden können.
