iFrame

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).

Definition

iFrames dienen zur Gestaltung von Webseiten, wenn Inhalte einer anderen Seite einzubinden sind. 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
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
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.

Quellen

Ihr Weg zu mehr Besuchern und Umsatz