Erklärvideo auf der Website einbinden: Ladezeit, SEO und Autoplay

Selbst hosten oder YouTube: Wo sollte dein Erklärvideo liegen?

Es gibt zwei Grundwege: Du lädst die Videodatei auf deinen eigenen Server oder ein Speicher-Netzwerk und spielst sie mit dem Video-Element des Browsers ab. Oder du lädst das Video bei einer Plattform wie YouTube oder Vimeo hoch und bettest deren Player ein.

Viele Unternehmen kombinieren beides: auf der eigenen Website selbst gehostet, weil es dort um Ladezeit und einen ruhigen Auftritt geht, und zusätzlich auf YouTube für die Reichweite dort.

Wie verhinderst du, dass das Video die Seite langsam macht?

Eine Videodatei ist viel größer als ein Bild. Wenn der Browser sie sofort komplett lädt, wartet die ganze Seite. Die Lösung ist, zuerst nur ein Bild zu zeigen und das Video erst zu laden, wenn es gebraucht wird.

Die Empfehlung, mit preload="none" das Laden des Videos zu verhindern und ein Posterbild als Platzhalter zu nutzen, steht im Leitfaden von Google zu Lazy Loading von Videos auf web.dev. Dort steht auch: Ist das Video das größte Element im sichtbaren Bereich, sollte es nicht verzögert geladen werden.

Darf ein Erklärvideo automatisch starten?

Mit Ton in der Regel nicht. Browser lassen Autoplay mit Ton nur unter bestimmten Bedingungen zu. Laut der Autoplay-Richtlinie von Chrome ist Autoplay ohne Ton immer erlaubt. Ein Erklärvideo lebt aber vom Sprecher. Stumm gestartet verpasst der Besucher genau das, worauf es ankommt.

Wenn ein bewegter Inhalt automatisch startet, länger als fünf Sekunden läuft und neben anderem Inhalt steht, verlangen die Richtlinien für barrierefreie Webinhalte eine Möglichkeit, ihn anzuhalten, zu stoppen oder auszublenden (WCAG, Erfolgskriterium 2.2.2).

Stummer Loop als Blickfang (Explikate Produktion)

Ohne Ton

Explikate Produktion

Wie wird dein Erklärvideo bei Google gefunden?

Google hat eigene Empfehlungen für Videos in der Suche. Die wichtigsten Punkte für ein Erklärvideo auf deiner Website:

• Das Video in einem üblichen HTML-Element einbinden. Google findet Videos in video, embed, iframe und object.
• Ein gültiges Vorschaubild bereitstellen.
• Dem Video einen eindeutigen Titel und eine Beschreibung geben, die zum Inhalt passen.
• Strukturierte Daten vom Typ VideoObject ergänzen, mit Angaben, die zum tatsächlichen Video passen.
• Eine Video-Sitemap anlegen, wenn du mehrere Videos hast.
• Die Videodatei und das Vorschaubild unter stabilen Adressen erreichbar halten.
• Wenn es für dein Angebot sinnvoll ist, jedem Video eine eigene Seite geben.

Der Text auf der Seite bleibt trotzdem wichtig. Eine kurze Zusammenfassung dessen, was im Video erklärt wird, hilft Besuchern, die nicht abspielen, und Suchmaschinen, die den Inhalt einordnen.

Wo auf der Seite sollte das Erklärvideo stehen?

Dort, wo die Frage entsteht, die es beantwortet. Auf der Startseite ist das meist der obere Bereich, direkt neben der Kernaussage, weil Besucher dort wissen wollen, was du anbietest. Auf Produktseiten gehört es neben die Beschreibung der Funktion, die es zeigt.

• Neben der Kernaussage, nicht unter einem langen Text versteckt.
• Mit Laufzeit am Play-Symbol, damit Besucher wissen, worauf sie sich einlassen.
• Mit dem nächsten Schritt daneben: Anfrage, Demo oder Kontakt.
• Nicht mehrere Videos gleichzeitig im sichtbaren Bereich, die alle abspielen wollen.

Brauchst du Untertitel?

Ja, wenn das Video auch stumm geschaut werden könnte. Im Büro, im Zug oder auf LinkedIn schauen viele ohne Ton. Es gibt zwei Varianten: eingebrannte Untertitel, die fest im Bild stehen und überall funktionieren, und Untertitel als separate Datei, die der Player ein- und ausblenden kann. Für Social Media sind eingebrannte Untertitel üblich, auf der eigenen Website ist eine zuschaltbare Datei flexibler. Untertitel helfen außerdem Menschen, die nicht hören können.

Worauf musst du auf dem Smartphone achten?

• Das Video mit playsinline einbinden, damit es auf dem iPhone nicht sofort im Vollbild startet.
• Das Seitenverhältnis festlegen, damit die Seite beim Laden nicht springt.
• Schrift im Video groß genug für kleine Bildschirme halten.
• Für Social Media und schmale Bildschirme eine Fassung im Hochformat oder Quadrat bereithalten.

Checkliste: Ist dein Erklärvideo richtig eingebunden?

• Posterbild zeigt das Produkt und ein deutliches Play-Symbol.
• Die Videodatei wird erst bei Bedarf geladen.
• Das Erklärvideo mit Ton startet per Klick, stumme Loops lassen sich anhalten.
• Titel, Beschreibung und strukturierte Daten passen zum Video.
• Untertitel sind vorhanden.
• Auf dem Smartphone läuft das Video im Seitenlayout und springt nicht.
• Neben dem Video steht der nächste Schritt.

Im Vertriebspaket und im Komplettpaket von Explikate ist ein auf Ladezeit optimierter Einbau-Code für deine Website enthalten, dazu Kurzfassung, Hochformat, Quadrat und eingebrannte Untertitel. Welche Länge für welchen Einsatz passt, steht in Wie lang sollte ein Erklärvideo sein?