iFrame

Ein iFrame (oder Inlineframe) ist ein HTML-Element, das dazu dient, externe Inhalte auf einer Website einzubinden.

Was ist ein iFrame?

Vereinfacht gesagt ist ein iFrame ein HTML-Element. Webseitenbetreiber nutzen es, um Fremdinhalte in eine HTML-Datei einzubetten. Ruft der Nutzer die entsprechende Seite auf, lädt das iFrame den externen Inhalt. Wie das englische Wort „Frame“ (deutsch: Rahmen) bereits andeutet, sind die Fremdinhalte in einem konkreten Rahmen eingebunden. CSS- und HTML-Attribute bieten die Möglichkeit, die Größe und Position des Inhalts anzupassen.

Ein Inlineframe sieht zum Beispiel so aus:

 <iframe src="http://www.domainyxz.de/iframe.html" name="Inlineframe Beispiel" width="600" height="300"></iframe>

Wann kommt ein iFrame zum Einsatz?

Es gibt viele Anwendungsbeispiele für iFrames. Häufig werden YouTube-Videos mit Hilfe eines iFrames auf einer Website eingebettet. Der Vorteil: Webseitenbetreiber können ihren Content erweitern, ohne selbst programmieren zu müssen.

iFrames kommen am häufigsten hier zum Einsatz:

• Google Maps Standorte
• YouTube-Videos
• Werbebanner
• Tools zur Terminbuchung
• externe Formulare
• Social Media Posts

Inlineframes können an beliebiger Stelle auf einer Website eingebunden werden. Im Gegensatz zu herkömmlichen Elementen muss es dafür nicht direkt in die HTML-Struktur des Weblayouts integriert werden.

Wie kann ich ein iFrame einbetten?

Wer ein iFrame auf seiner Website einbinden möchte, kann dafür meist einen kurzen Code-Schnipsel kopieren. Bei YouTube kann zum Beispiel für jedes Video ein iFrame-Code abgerufen werden. Webseitenbetreiber rufen den Quellcode ihrer Seite auf und fügen das zuvor kopierte iFrame in den HTML-Code ein.

Damit sich der externe Inhalt gut in die Seite einfügt, können Attribute wie die Größe, Höhe, Breite und die Ausrichtung des Elements angepasst werden.

Welche Attribute besitzt ein iFrame?

Bei einem iFrame handelt es sich um einen vorgegebenen HTML-Code. Trotzdem können Webseitenbetreiber diesem Schnipsel verschiedene Attribute hinzufügen, um das iFrame individuell anzupassen. Klassischerweise betrifft das die Darstellung des Fremdinhaltes auf der Seite.

Die häufigsten Attribute, die für iFrames verwendet werden, sind:

• height gibt die Höhe des Frames an.
• width gibt die Breite des Frames an.
• align gibt die Ausrichtung des Frames an.
• frameborder vergibt einen Rahmen.
• name vergibt einen Namen für das iFrame.
• src definiert eine Quelle für das iFrame .

Längenmaße müssen immer in Pixeln angegeben werden.

Welche Vorteile haben iFrames?

Inlineframes lassen sich unkompliziert in jeden Quellcode einbetten und bringen daher einige Vorteile für Webseitenbetreiber mit sich. Jeder, der über grundlegende HTML-Kenntnisse verfügt, kann ein iFrame einsetzen. So lässt sich der eigene Website-Content mit wenig Programmieraufwand um dynamische Elemente erweitern.

Nutzer profitieren von praktischen Funktionen und interaktiven Inhalten. Zum Beispiel können sie sich Videos ansehen, Formulare bedienen oder Online-Termine buchen. Das HTML-Dokument für den Quellcode der Website und das Dokument für das iFrame sind isoliert voneinander. Das bedeutet: Die beiden Dokumente haben keinerlei Einfluss aufeinander und dynamische Inhalte können sicher wiedergegeben werden.

Welche Nachteile haben iFrames?

Der Vorteil, dass die beiden Dokumente keinen Einfluss aufeinander haben, kann auch als Nachteil betrachtet werden. Denn zwischen den beiden Dokumenten findet kein Datenaustausch statt. Allerdings ist der wesentliche Nachteil von Inlineframes ein anderer. Und zwar der Datenschutz. Denn sobald ein iFrame von einer externen Seite eingebunden wird, sammelt diese ebenfalls Daten über die Website des Betreibers. Die Nutzer können diesen Datenaustausch nicht beeinflussen. Hin und wieder kommt es zu Darstellungsfehlern, weil sich etwas am Inhalt der Quell-URL des Frames verändert.

Bedeutung für SEO

iFrames können einen Einfluss auf die Suchmaschinenoptimierung einer Website haben. Von Vorteil ist, dass sich Nutzer die externen Inhalte direkt auf der eigenen Seite anschauen und diese dafür nicht verlassen müssen. Sie verweilen also länger auf der Website, was wiederum positive Nutzersignale an die Suchmaschine sendet. Zudem können die praktischen Funktionen das Nutzererlebnis verbessern und die User schneller an ihr Ziel führen.

Um Duplicate Content müssen sich Betreiber keine Sorgen machen. Denn: Die Crawler erkennen die eingebundenen Inhalte zwar, lesen diese aber nicht aus. Vorsicht ist dennoch geboten. Denn der übermäßige Einsatz von iFrames kann dazu führen, dass sich die Webseitengeschwindigkeit verlangsamt. Inlineframes sollten außerdem nur von vertrauenswürdigen Seiten verwendet werden. Der Einsatz von unseriösen iFrames kann ein Sicherheitsrisiko darstellen.