Fachlich kompetent
Äußerst flexibel
Absolut zuverlässig
SEO & SEA Guide

iFrame einfach erklärt

Marcin FabisiakSEO-Experte

Bei einem iFrame handelt es sich um ein HTML-Element. Mithilfe dieses Elements kannst Du externe Inhalte in Deine HTML-Datei einbinden. Beim Aufruf Deiner Webseite lädt das iFrame den Fremdinhalt innerhalb des hinterlegten Rahmens (daher auch der Begriff „frame“). Mithilfe von CSS- und HTML-Attributen kannst Du das iFrame individuell z.B. hinsichtlich der Position und Größe anpassen. Bei der Bezeichnung iFrame handelt es sich um die abgekürzte Form des Begriffs Inlineframe.

Anwendungsbeispiele von iFrames

Mithilfe eines iFrames kannst Du die Funktionalität und die Inhalte Deiner Webseite ohne zusätzliche Programmierarbeit erweitern. Häufig werden etwa Videos der Plattform YouTube mittels eines Inlineframes eingebunden. Dein Seitenbesucher muss hierbei nicht die Seite zum Abspielen des Videos verlassen. Die häufigsten Anwendungsbeispiele für iFrames wären außerdem:

  • Einbindung eines Kartenausschnitts aus Google Maps mit Markierungen und dem festgelegten Standort
  • Einbindung von externen Applikationen wie etwa Kontaktformularen
  • Widgets wie etwa ein Buchungstool für Termine
  • Externe Werbebanner
  • Social Media Posts

Wie wende ich ein iFrame an?

Möchtest Du ein Inlineframe auf Deiner Webseite einbinden, musst Du in den Quellcode der Seite gehen. Dort kannst Du das iFrame als HTML-Zeile einfügen und über verschiedene Attribute anpassen. Innerhalb des iFrame Codes kannst Du die optische Darstellung wie etwa Höhe, Breite und Ausrichtung festlegen.

Attriubute eines iFrames

Nachfolgend findest Du eine Auflistung einiger möglicher Attribute, die Du innerhalb eines Inlineframes verwenden kannst:

  • src=: Hier gibst Du die Quelle (URL) des Verlinkten Dokuments an
  • name=: Hier kannst Du den Namen des eingebundenen iFrames angeben
  • width=: wie bei einem Bild lässt sich hierdurch die Breite des Frames angeben
  • height=: hiermit setzt Du die Höhe des Frames fest
  • align=: damit kannst Du die Ausrichtung bestimmen
  • scrolling=: Mit „scrolling“ kannst Du bestimmen, ob eine Scrollbar eingefügt werden soll
  • frameborder=: damit kannst Du dem iFrame einen Rahmen geben
  • marginheight=: die innere Höhe des Randes
  • marginwith=: die innere Breite des Randes

Hinweis: Bei den Längenmaßen solltest Du beachten, dass diese in Pixeln angegeben werden müssen.

Beispielcode

Damit Du eine bessere Vorstellung vom Code hast, siehst Du nachfolgend einen Beispielcode. Wie Du merken wirst, habe ich hierbei nicht alle Attribute verwendet, da das nicht zwingend erforderlich ist:

<iframe src=“https://beispieldomain.de/iframe.html“  name=“Beispielhaftes iFrame“ width=“600″ height=“400″></iframe>

Vorteile von iFrames

Der Vorteil von iFrames ist der geringe Arbeitsaufwand, der bei der Einbindung für Dich entsteht. Mit grundlegenden HTML-Kenntnissen kannst Du dynamische Inhalte einer anderen Webseite auf Deiner eigenen darstellen. Du sparst dir also die notwendige Programmierarbeit und erweiterst Deinen Webauftritt um weitere nützliche Funktionen. Betrachten wir als Beispiel ein eingebundenes Video von YouTube, können Deine Nutzer dieses auf Deiner Seite ansehen, ohne auf die externe Seite geführt zu werden. Die Einbindung von Inlineframes gilt als sichere Methode, da es sich hierbei nur um eine visuelle Einbindung externer Inhalte handelt. Die beiden Dokumente selbst sind isoliert voneinander und können sich somit nicht beeinflussen.

Nachteile von iFrames

Der soeben erwähnte Vorteil kann auch als Nachteil betrachtet werden. Dadurch das die beiden Dokumente isoliert voneinander sind, ist auch kein Datenaustausch zwischen den beiden Dokumenten möglich. Der größte Nachteil bei der Verwendung von Inlineframes liegt jedoch im Datenschutz. Bindest Du etwa eine Social-Media-Seite ein, werden Daten gesammelt und an die Quelle des Frames gesendet ohne das Deine Nutzer das beeinflussen können. Auch kann es passieren, dass sich die Quell-URL bzw. der Inhalt der Quell-URL verändert und entweder einen Fehler oder aber einen falschen Inhalt darstellt.

iFrames und die SEO

Suchmaschinen wie Google können iFrames erkennen und folgen auch dem Link zur Quelle. Deinen eingebundenen Inhalt hingegen lesen und werten die verschiedenen Crawler nicht aus, sodass hier kein positiver Effekt für Deine SEO auftritt. Auf der anderen Seite bedeutet das aber auch, dass Du dir mit Blick auf Deine Suchmaschinenoptimierung keine Sorgen um Duplicate Content machen musst.

Je nach CMS-System, Browser und Bildschirmauflösung kann es zudem zu Darstellungsproblemen kommen, was wiederum die Usability Deiner Seite negativ beeinflusst. Aus Sicht der SEO solltest Du daher iFrames mit Bedacht und nicht exzessiv einsetzen.

Weiterführende Links


Unser kostenloser SEO-Kurs

Erweitere Dein Wissen über Suchmaschinenoptimierung in nur 5 Tagen!

Das erwartet Dich:
  • E-Mails mit 5 spannenden Inhalten für ein solides Grundlagenwissen
  • Erlerne Schritt für Schritt alle Basics für sichtbare und nachhaltige Erfolge
  • Verbessere Deine Rankings bei Google und sorge für mehr Traffic auf Deiner Website
Melde Dich hier kostenlos an:

Nach der Anmeldung erhälst Du unseren kostenlosen SEO-Kurs fünf Tage lang. Anschließend bekommst Du 2-3x pro Woche unseren Newsletter (auch kostenlos) mit aktuellen Tipps zum Thema SEO und Online Marketing. Deine Daten werden vertraulich behandelt und nicht an Dritte weitergegeben. Du kannst Dich jederzeit abmelden. Datenschutz