Ein iFrame, auch bekannt als Inline Frame, ist ein HTML Element, welches zur Einbettung von Inhalten von einer Seite in eine andere genutzt wird. Es wird von den meisten Browsern unterstützt, soweit diese mindestens mit HTML-4.0 arbeiten. Das Element wird eingesetzt, um Inhalte zu teilen und auf anderen Webseiten einzubinden (zum Beispiel Video Clips).
Inhaltsverzeichnis
Definition
iFrames dienen zur Gestaltung von Webseiten, wenn Inhalte einer anderen Seite einzubinden sind und gilt als eine Form des Webnapping. Dies verringert den Arbeitsaufwand, da der Inhalt, außer der Einbindung des HTML Elements, keine weitere Kodierung erfordert. iFrames können auch von Webseiten genutzt werden, damit Besucher Inhalte der Seite teilen können. Dadurch lassen sich externe Inhalte einfach verteilen. In der Regel wird dafür ein Code bereitgestellt, der sich kopieren und an einer anderen Stelle einfügen lässt. So können Videos von Seiten wie Youtube durch iFrames auf anderen Seiten, wie beispielsweise Blogs oder soziale Netzwerke, von Besuchern oder Followers geteilt werden.
Einbindung und Beispiele
Die Anwendung von iFrame Objekten erfolgt im HTML Körper, wobei die Gestaltung des Elements durch CSS ausgearbeitet werden kann.
Seit der Einführung von HTML5 hat sich die Form des iFrames verändert, da neue Attribute vorgestellt und andere Attribute aus HTML 4.1 gestrichen wurden. Da aktuelle Browser in der Regel die neuere Version unterstützen, bezieht sich folgende Tabelle lediglich auf diese aktuelle Fassung. Prinzipiell muss eine iFrame Anmerkung immer einen Hyperlink oder Backlink beinhalten, da der Inhalt auf eine Quelle zurückgeführt werden muss. Alle weiteren Attribute im HTML Element sind optional und beeinflussen die Gestaltung oder die Performance auf der Seite.
| Attributname | Attributinhalt | Beschreibung |
| height | Beliebige Zahl | Höhe des iFrames. Wird in Pixel dargestellt |
| name | Name des iFrames | Die Bezeichnung des iFrames |
| sandbox |
|
Ermächtigung von Einschränkungen wie zum Beispiel Pop-Up Fenster |
| src | URL | Hyperlink des einzubettenden Inhalts |
| srcdoc | htmlcode | Einbindung eines eigenen Codes |
| width | Beliebige Zahl | Breite des iFrames. Wird in Pixel dargestellt |
Die ältere HTML Fassung 4.1 besitzt zwar eine höhere Anzahl an Attributen, wie zum Beispiel das Scrolling-Attribut und das Align-Attribut, jedoch lassen sich iFrames auch mit Hilfe von CSS gestalten, welches sich üblicherweise im Kopfteil des Quelltextes befindet.
<iframe src="http://www.beispiel.de/iframe.html" name="iFrame Name" width="500" height="600" align="center" scrolling="no" marginwidth=“2“ frameborder=“0“> </iframe>
Dieses Beispiel zeigt die Anwendung von iFrames unter den Bedingungen der früheren HTML Fassung. Sie kann von einer Vielzahl an Attributen beschrieben werden. iFrames, die unter diesen älteren Maßgaben operieren, können in der Regel in den meisten Browserversionen angezeigt werden.
<iframe src="http://www.beispiel.de/iframe.html" name="iFrame Name" sandbox="allow-forms" srcdoc="iFrames und SEO"> </iframe>
Die Anwendung von iFrames unter den Bedingungen des neueren HTML5 hat zwar Vorteile, wie beispielsweise die Erlaubnis zu Ausfüllformularen und eigene HTML Elemente, aber diese können nicht von jedem Browser korrekt dargestellt werden.
<html>
<head>
<style type=“text/css“>
.Iframeclass {height:500px;
Width:600px;
overflow:hidden;}
</style>
</head>
<body>
<iframe src="http://www.beispiel.de/iframe.html" name="iFrame Name" class=“iframeclass“>
</iframe>
</body></html>
In diesem Beispiel wurde der iFrame mit Hilfe von CSS bestalltet, wobei es noch weitere Möglichkeiten gibt, die beiden Elemente zu verwenden. Diese Variante der iFrames eignet sich vor allem für Seiten, die nicht geteilt werden, sondern lediglich für den eigenen Gebrauch gedacht sind, weil der iFrame sich auf den lokalen CSS Code im Head Bereich bezieht.
Die Erstellung eines iFrames, welches sowohl mit CSS gestaltet wird, als auch teilbar ist, kann durch das style Attribut erreicht werden. Dies hat zur Folge, dass er nicht mehr von einem internen CSS Code abhängig ist, sondern in sich selber vollkommen ist.
Vorteile
Aus einer praktischen Perspektive haben iFrames einen entscheidenden Anreiz für Webseitenbetreiber. Die Einbindung von diesem Element bedeutet eine Erleichterung des Arbeitsaufwandes, da der Inhalt nicht erneut gestaltet werden muss, weil er im iFrame Tag verlinkt wird. Dadurch lassen sich auch Inhalte von werbender Natur auf anderen Seiten einbinden, wie zum Beispiel Bannerwerbung.
Weiterhin ermöglichen iFrames eine parallele Ladung des eingebundenen Inhalts und der Seite, welche den Inline Frame nutzt. Da ein wichtiger Aspekt der Usability und User Experience eine möglichst kurze Ladezeit ist, kann die Anwendung von iFrames aus SEO-Sicht zumindest in diesem Punkt als vorteilhaft angesehen werden.
Nachteile aus der SEO Sicht
Obwohl Suchmaschinen wie Google iFrames identifizieren können, behandeln sie dessen Inhalte in einigen Fällen als Duplicate Content. Das Problem aus der Sicht der Suchmaschinenoptimierung besteht in der Annahme von Google, das immer nur eine URL für eine Seite steht. Inline Frames intervenieren dieses Annahmemodell, weil sie mindestens eine zusätzliche URL auf eine Seite einbindet. Google versucht zwar, iFrames zu erkennen und den Inhalt an die iFrame-Quelle zurückzuführen, jedoch kann dies nicht immer garantiert werden. Daraus resultiert die Kategorisierung als Duplicate Content.
Aus diesem Grund kann die Crawlability negativ betroffen werden, weil die Webcrawler (siehe Crawler) von Google und anderen Suchmaschinen den Inhalt des iFrames nicht berücksichtigen. Es wird lediglich der Link der Quelle betrachtet, jedoch nicht den Textinhalt, welcher jedoch relevanten Content beinhalten kann. Folglich kann es vorkommen, dass Suchmaschinen diese Texte ignorieren.
Ein weiteres Problem ist die inkonsistente Darstellung auf verschiedenen Browsern. Unterstützen diese beispielsweise kein HTML5, bedeutet dies, dass ein Inline Frame nicht optimal dargestellt werden kann und so auch die Usability negativ beeinträchtigt wird. Vor allem Browser auf mobilen Endgeräten haben Schwierigkeiten mit der korrekten Anzeige, nicht zuletzt weil sich ihre Bildschirmauflösung in vielen Fällen von der Desktopversion unterscheidet.
Werden externe Links genutzt, hat der Webseitenbetreiber keine Kontrolle über die Funktionalität der Links. Eine Entfernung der Inhalte an der Quelle, oder eine Änderung der Source-URL, führt dazu, dass das iFrame Element nicht angezeigt wird. Vereinzelt werden iFrames durch Browser Erweiterungen oder Add-Ons sogar blockiert und können damit gar nicht angezeigt werden.
Aufgrund dieser Nachteile sind iFrames aus der Sicht der SEO sparsam zu verwenden, weil sie die Crawlability beeinträchtigen können und es in aller Regel keine Garantie gibt, dass iFrames auf den Endgeräten korrekt angezeigt werden.
Häufige Fragen
Was ist ein iFrame?
iFrames sind HTML-Elemente, mithilfe derer sich externe Inhalte in einer Website einbetten lassen. Dazu zählen beispielsweise Videos.
Wie funktioniert die Einbindung?
iFrames werden im HTML-Code eingefügt. Für die optionale Bearbeitumg und Anpassung des Elements ist es allerdings notwendig, entsprechende Arbeiten am CSS-Code vorzunehmen.
Welche Vorteile haben iFrames?
iFrames ersparen dem Webseitenbetreiber Arbeitsaufwand, da das Einfügen von Videos auf diese Art und Weise schnell und unkompliziert vonstatten geht. Zudem werden Inhalte des iFrames sowie die Website selbst gleichzeitig geladen, was die Ladedauer des Angebots erheblich verkürzt.