Was sind iFrames?
“iFrames” ist die Abkürzung für Inline-Frames. Dabei handelt es sich um ein HTML-Element. Mit dem Element lassen sich eigene und fremde Dokumente und Websites in eine HTML-Datei einbetten.
HTML eines iFrames
Die einfachste Form ist wie folgt aufgebaut:
<iframe src="https://www.domain.com/"></iframe>
Hier wird nun nur das src-Attribut verwendet, welches die Adresse angibt, die eingebunden werden soll. Es gibt aber weitere HTML-Attribute, die man mitgeben kann:
- height: Definiert die Ausgabehöhe des iFrames.
- width: Definiert die Ausgabebreite des iFrames.
- name: Damit kann man einen Namen für das iFrame vergeben.
- sandbox: Hiermit können bestimmte Sicherheitsrestriktionen definiert werden.
- seamless: Damit konnte man erreichen, dass sich das iFrame der Website anpasst und somit keine Rahmen, etc. angezeigt werden. Chrome unterstützt ab Version 26 z.B. nicht mehr.
- srcdoc: Hiermit kann das HTML als Inhalt angezeigt werden (wird nicht von allen Browsern und Versionen unterstützt).
Verwendung von iFrames
Es gibt viele verschiedene Anwendungsfälle von iFrames:
- Einbindung von Tools: Mit iFrames können Tools wie Rechner oder Vergleichstools schnell und einfach eingebunden werden.
- Videos: Mit iFrames können Videos relativ einfach auf fremden Websites eingebunden werden. YouTube nutzt bspw. das iFrame-Element, um Videos auf Websites einzubinden.
- Widgets: Widgets wie eine Vorschau des eigenen Social Media Profils oder Wetterinformationen lassen sich so auf Websites einbetten.
iFrames vs. Frames
Oft spricht man nicht nur von iFrames, sondern auch einfach von Frames (also ohne “i”). Bei den Frames meint man das Frameset. Damit konnte man eine HTML-Seite in verschiedene Bereiche teilen. Diese Bereiche stellten einzelne Dateien dar. Wurden nun die verschiedenen Dateien innerhalb eines HTML-Dokuments zusammen eingebettet, so ergab es eine HTML-Seite mit Navigation, Hauptinhalt, Header, etc. Man hatte damit also eine Datei für den Header, eine Datei für die Navigation, etc. Diese Technologie wurde mit HTML5 aus dem Standard entfernt und gilt seitdem als “non-conforming feature”. Grund waren verschiedene Nachteile wie bspw. eine fehlende Navigation, wenn der Nutzer über eine Suchmaschine auf die Seite landet oder dass es keine einfache Möglichkeit gab die Seiten als Bookmark aufzunehmen.
iFrames und SEO
Theoretisch widersprechen iFrames dem Grundmodell des Internets aus SEO-Sicht. Jede Seite sollte über eine eigene URL aufrufbar sein. Werden auf einer URL Inhalte über iFrames eingebettet, so werden mehrere URLs auf einer URL angezeigt. Google selbst sagt dazu:
Stoßen Bots – insbesondere der Googlebot – auf iFrames kann folgendes passieren:
- Im besten Fall berücksichtigen die Crawler die iFrames nicht.
- Stellt der Bot fest, dass es sich um wertvolle Inhalte für die Suche handeln können, wird versucht den iFrame-Inhalt zunächst mal zu sichten.
Letzteres kann problematisch für SEO werden. Google versucht dann zwar den Inhalt des iFrames der Quelle zuzuordnen, kann aber dafür keine Garantie übernehmen. Das hatte Martin Splitt bei einem Webmaster-Hangout erklärt.
Im schlimmsten Fall bevorzugt Google die Website, die das iFrame benutzt gegenüber dem Original beim Ranking. Dafür müssen aber bestimmte Voraussetzungen erfüllt sein. Eine Voraussetzung, die Martin Splitt im Video nennt, ist eine ausreichende Größe des iFrames.
Um zu testen, ob Google den iFrame-Inhalt der umgebenden Website zuordnet, kann als Anhaltspunkt das Mobile-Friendly-Test-Tool benutzt werden. Wird auf der gerenderten Version der iFrame-Inhalt angezeigt, kann es sein, dass Google die iFrame-Seite und nicht das Original bevorzugt.
Auch John Müller äußerte sich dazu einmal. Die Frage war, wie man sicherstellen kann, dass eingebundene Inhalte über iFrames der Original-URL zugeordnet werden können.
Die kurze Antwort war, dass das nicht möglich ist. Sollte der eigene Inhalte über ein iFrame auf einer starken Website eingebunden werden, dann kann es passieren, dass der eingebettete Inhalt von Google ebenfalls indexiert wird. Beim Rendering wird der Inhalt vom Googlebot gesehen. Und da der Bot URLs als Gesamtes betrachtet, kann der iFrame-Inhalte der eben gerenderten Seite zugesprochen werden.
Man kann hier entgegenwirken, indem man beim Webmaster, der den iFrame einbindet fragt, ob er einen Canonical auf die eigene Website setzen kann. Oder man unterbindet die Möglichkeit die eigenen Inhalte als iFrame auf fremden Websites darzustellen. Neben Browsern werden das auch die Bots erkennen und können so die Inhalte nicht sehen.
