Wenn Sie schon einmal ein in einen Blogbeitrag eingebettetes YouTube-Video angesehen oder mit einem Google Maps-Widget auf einer Kontaktseite interagiert haben, haben Sie bereits einen iFrame in Aktion erlebt.
Das iFrame-HTML-Element ist eines der unauffälligsten und mächtigsten Werkzeuge des Webs. Es wird täglich von Webentwicklern und Website-Betreibern verwendet, um Inhalte aus externen Quellen direkt in eine Webseite einzubetten, ohne dass die Benutzer den Übergang bemerken.
In diesem Leitfaden erklären wir, was ein iFrame eigentlich ist, wie die wichtigsten Attribute funktionieren, wie man einen iFrame zu seiner Website hinzufügt und wo iFrames die Suchmaschinenoptimierung beeinträchtigen oder Sicherheitsrisiken bergen können, wenn man nicht aufpasst.
Was ist ein iFrame: Der Inline-Frame erklärt
Ein iFrame, kurz für Inline-Frame, ist ein HTML-Element , mit dem Sie ein anderes HTML-Dokument in Ihre aktuelle Webseite einbetten können.
Am einfachsten lässt es sich als kleines, in sich abgeschlossenes Browserfenster vorstellen, das in Ihre bestehende Seite eingebettet ist. Der Inhalt dieses Fensters wird völlig unabhängig vom Rest Ihres HTML-Dokuments geladen und ausgeführt.
HTML iFrames sind seit Jahrzehnten Teil des Webs, werden aber in der modernen Webentwicklung weiterhin häufig verwendet, weil sich das Kernproblem, das sie lösen, nicht verändert hat.
Oftmals müssen Sie Inhalte anzeigen, die sich an einer anderen Stelle befinden, ohne den Benutzer von Ihrer Seite wegzuleiten.
Das iFrame-Element ist technisch einzigartig, weil es einen eigenen, separaten Browserkontext erzeugt. Das bedeutet, dass das eingebettete Dokument über einen eigenen DOM-Baum, einen eigenen JavaScript-Bereich und eine eigene CSS- Umgebung verfügt.
Nichts innerhalb des iFrames dringt auf die übergeordnete Seite ein und nichts auf der übergeordneten Seite dringt nach innen.
Diese Isolation wird durch die Same-Origin-Policy des Browsers erzwungen, die den kontextübergreifenden Skriptzugriff einschränkt, es sei denn, sowohl die übergeordnete Seite als auch das eingebettete Dokument teilen sich dieselbe Domäne.
Möchten Sie erweiterte Funktionen auf Ihrer WordPress-Website?
Das Einbinden von Tools, externen Apps und dynamischen Inhalten erfordert eine sorgfältige Einrichtung. Seahawk Media unterstützt Sie bei der Implementierung von Website-Funktionen und sorgt gleichzeitig dafür, dass Ihre WordPress-Website schnell, sicher und skalierbar bleibt.
Wofür werden iFrames verwendet? Häufige Beispiele aus der Praxis
Die meisten Menschen stoßen mehrmals täglich auf HTML-iFrames, ohne es zu bemerken. Die Technologie ist so nahtlos in modernes Webdesign integriert, dass sie für den durchschnittlichen Besucher praktisch unsichtbar ist. Hier sind die gängigsten und praktischsten Anwendungsfälle, die Ihnen im Web begegnen werden.
YouTube-Videos einbetten
Dies ist das bekannteste Beispiel für einen iFrame im Web. Wenn ein YouTube-Video in einem Blogbeitrag oder auf einer Produktseite abgespielt wird, wird es über einen iFrame geladen, der auf eine YouTube-Einbettungs-URL verweist.
Das Video befindet sich auf den Servern von YouTube und wird von deren CDN, sodass für Ihr Hosting keine Bandbreitenkosten anfallen.
Die Besucher sehen sich das Video direkt auf Ihrer Seite an, ohne die Seite verlassen zu müssen. Dadurch bleibt das Interesse auf Ihrer Website und wird nicht zu YouTube weitergeleitet.
Google Maps auf Standortseiten anzeigen
Interaktive Karten, die in eine Website eingebettet sind, werden fast immer über einen iFrame bereitgestellt. Google Maps generiert für jeden Standort einen sofort einsatzbereiten iFrame-Quellcode, den Sie in Ihr HTML-Dokument einfügen können.
Für lokale Unternehmen ist dies eine praktische Ergänzung zu den Kontakt- und Standortseiten, die es Kunden ermöglicht, Sie zu finden, ohne Ihre Website verlassen zu müssen.
Integration von Drittanbieter-Tools und Zahlungsformularen
Zahlungsportale, Buchungskalender, Live-Chat-Widgetsund Umfragetools werden üblicherweise über iFrames bereitgestellt.
Der Anbieter hostet die Funktionalität auf seinen eigenen sicheren Servern. Ihre Webseite bindet sie über das iFrame-Element ein, wodurch sensible Daten wie Zahlungskartendaten vollständig in der Umgebung des Anbieters und nicht in Ihrer verarbeitet werden.
Dieser Ansatz vermeidet eine aufwendige Backend-Entwicklung und reduziert Ihre Haftung für die verarbeiteten Daten.
Auslieferung von Anzeigen und externen Feeds
Display-Werbenetzwerke wie Google AdSense liefern Anzeigen über iFrames aus und isolieren so die Werbeskripte von Ihrer Seite, um Störungen zu vermeiden.
Auch Live-Feeds sozialer Medien, Wetter-Widgets und Newsticker werden häufig auf diese Weise bereitgestellt, da der iFrame es ermöglicht, externe Inhalte unabhängig vom Rest Ihrer Seite zu aktualisieren.
iFrame-Attribute, die Sie wirklich verstehen müssen
Viele Plattformen generieren den iFrame-Code automatisch, doch das Wissen um die Funktion der einzelnen Attribute erspart Ihnen viel Verwirrung, falls etwas nicht funktioniert oder sich unerwartet verhält. Hier finden Sie eine leicht verständliche Erklärung der wichtigsten Attribute.
Das src-Attribut: Der wichtigste Teil
Das src-Attribut des iFrames gibt die URL des externen Dokuments oder der Ressource an, die im Frame geladen werden soll. Ohne ein gültiges src-Attribut lädt der iFrame nichts.
Der Wert muss eine vollständige HTTPS-URL sein, die auf eine öffentlich zugängliche Seite oder einen Einbettungs-Endpunkt verweist. Plattformen wie YouTube und Google Maps generieren spezifische Einbettungs-URLs, die sich von ihren Standard-Browser-URLs unterscheiden.
Verwenden Sie im src-Attribut Ihres iFrames immer die Einbettungs-URL, nicht die URL aus der Adressleiste. Ein typisches iFrame-Tag sieht so aus:
<iframe src="https://www.youtube.com/embed/mij0fmZ7lGw" width="560" height="315" title="Eingebettetes YouTube-Video"></iframe>Breite und Höhe: Größe und Reaktionsfähigkeit
Die Attribute „width“ und „height“ definieren die Abmessungen des iFrames auf Ihrer Seite.
Sie können feste Größen in Pixeln verwenden, aber für responsives Design ist es besser, Breite und Höhe über CSS mithilfe von prozentualen Breitenangaben und einer Seitenverhältnisregel zu steuern.
Feste Größenangaben führen zu Problemen mit mobilen Layouts, wenn sie nicht korrigiert werden. Überlegen Sie daher gut, bevor Sie Pixelabmessungen in Ihren Einbettungscode fest codieren.
Titelattribut: Erforderlich für Barrierefreiheit
Das Attribut „title“ gibt dem iFrame eine beschreibende Bezeichnung. Bildschirmleseprogramme nutzen es, um sehbehinderten Nutzern den Inhalt eines iFrames zu erklären, bevor sie ihn öffnen.
Suchmaschinen wie Google nutzen diese Information ebenfalls, um den Zweck der eingebetteten Ressource zu verstehen. Das Überspringen dieser Information stellt sowohl ein Problem der Barrierefreiheit als auch ein verpasstes SEO-Signal dar.
Jeder von Ihnen veröffentlichte iFrame sollte ausnahmslos ein klares und präzises Titelattribut haben.
Das Sandbox-Attribut: Ihre erste Sicherheitsebene
Das Sandbox-Attribut legt Beschränkungen für die Aktionen des eingebetteten Dokuments fest.
Wenn Sie eine Sandbox ohne Werte hinzufügen, läuft der iFrame im Modus mit maximalen Einschränkungen, wobei weder Skripte noch Formulare oder Popups zulässig sind. Sie können Berechtigungen gezielt über spezifische Werte erteilen.
Der Wert allow-scripts erlaubt die Ausführung von JavaScript innerhalb des iFrames, und allow-forms erlaubt das Absenden von Formularen.
Die Verwendung einer Sandbox für alle iFrame-Einbettungsinhalte, über die Sie keine vollständige Kontrolle haben, ist eine einfache Möglichkeit, Ihr Risiko zu reduzieren, falls sich herausstellt, dass die Quelle kompromittiert wurde.
sandbox="allow-scripts allow-forms"Das Allow-Attribut: Browser-Funktionsberechtigungen
Das Attribut „allow“ steuert, auf welche Browserfunktionen das eingebettete Dokument zugreifen kann, z. B. Vollbildmodus, Kamera, Mikrofon und Autoplay.
Wenn Sie Benutzern die Möglichkeit geben möchten, den Vollbildmodus für ein eingebettetes Video zu aktivieren, fügen Sie dem Tag allow=”fullscreen” hinzu.
Während Sandbox regelt, was der eingebettete Code programmatisch tun kann, regelt Allow, auf welche Browser-APIs und Hardwarefunktionen das iFrame-Element zugreifen darf.
Das Ladeattribut: Schützen Sie Ihre Seitengeschwindigkeit
Durch Hinzufügen von loading="lazy" wird dem Browser mitgeteilt, dass das iFrame erst geladen werden soll, wenn der Benutzer in dessen Nähe scrollt, anstatt es sofort beim Öffnen der Seite zu laden.
Dies ist eine der einfachsten Verbesserungen, die Sie an Ihren Core Web Vitals- Werten vornehmen können, insbesondere auf Seiten mit eingebetteten Karten oder Videos, die weiter unten auf der Seite positioniert sind.
Es kostet nichts und erfordert keine weiteren Änderungen an Ihrem bestehenden Code oder Ihrer Hosting-Konfiguration.
Wie füge ich einen iFrame zu meiner Website hinzu?
Das Einbinden eines iFrames in Ihre Website ist einfacher als es klingt. Je nach Aufbau Ihrer Website stehen Ihnen drei unkomplizierte Methoden zur Auswahl.
Methode 1: Das Tag direkt in HTML einfügen
Öffnen Sie den HTML-Quelltext Ihrer Webseite und fügen Sie das iFrame-Tag an der Stelle ein, an der der externe Inhalt erscheinen soll.
- Füllen Sie das Feld „src“ des iframes mit Ihrer Einbettungs-URL aus, legen Sie Breite und Höhe fest, fügen Sie ein beschreibendes Titelattribut hinzu und ergänzen Sie gegebenenfalls die Attribute „sandbox“ und „loading“.
- Die Seite wird gespeichert und veröffentlicht, und der Browser lädt den externen Inhalt automatisch in den iFrame.
Diese Methode funktioniert auf jeder Website, unabhängig von der Plattform, auf der sie läuft.
Methode 2: Kopieren des Einbettungscodes von der Quellplattform
Die meisten großen Plattformen generieren den kompletten iFrame-Code für Sie.
- Klicken Sie auf YouTube unterhalb des Videos auf „Teilen“, wählen Sie dann „Einbetten“ aus, und YouTube generiert den vollständigen Tag, in dem die korrekte iframe-Quelle bereits eingetragen ist.
- Google Maps folgt dem gleichen Muster über sein Teilen-Menü.
- Spotify, Social-Media-Plattformenund viele SaaS-Tools bieten die gleiche Einbettungscode-Generierung mit nur einem Klick. Sie kopieren den Code, fügen ihn in Ihr HTML-Dokument ein, und fertig.
Dies ist die schnellste Methode für Nicht-Entwickler und deckt die Standardanwendungsfälle ohne manuelle Codierung ab.
Methode 3: Hinzufügen eines iFrames in WordPress ohne Codeänderungen
Wenn Ihre Website auf WordPress basiert, können Sie mit einem Plugin wie Advanced iFrame die Einbettungs-URL über ein Einstellungsfeld konfigurieren.
- Fügen Sie den iFrame mithilfe eines Shortcodes in klassischen Themes oder eines dedizierten Blocks im Gutenberg-Editor.
- Sie erhalten die volle Funktionalität von iFrames, ohne eine einzige Zeile HTML schreiben zu müssen.
Für Teams, die an komplexeren, kundenspezifischen Einbettungskonfigurationen arbeiten, bietet Seahawk Media praktische WordPress-Entwicklungsunterstützung , um iFrames als Teil einer umfassenderen Website-Architektur zu implementieren und zu optimieren.
Schadet die Verwendung von iFrames Ihrer Suchmaschinenoptimierung? Hier ist die ehrliche Antwort
iFrames schaden Ihrer Suchmaschinenoptimierung nicht automatisch, aber Missbrauch kann dies durchaus tun. Die Unterscheidung ist wichtig und hängt davon ab, zu verstehen, wie Google eingebettete Inhalte tatsächlich behandelt.
Google kann iFrames crawlen, aber die Anerkennung gebührt der Quelle
Google kann zwar Inhalte innerhalb eines iFrames verarbeiten, der SEO-Wert dieser Inhalte liegt jedoch typischerweise bei der Quell-URL und nicht bei Ihrer Einbettungsseite.
Das Einbetten eines YouTube-Videos in Ihren Blogbeitrag erhöht aus Googles Sicht nicht die Keyword-Reichhaltigkeit Ihres Artikels.
Ihre Seite profitiert indirekt durch Engagement-Signale wie längere Verweildauer auf der Seite und niedrigere Absprungrate, aber der iFrame-Inhalt selbst trägt nicht zum Ranking Ihrer Seite bei, wie es nativer HTML-Inhalt tut.
Alles, wofür Sie ein gutes Ranking erzielen möchten, muss als natives HTML auf der Seite vorliegen und darf niemals ausschließlich in einem iFrame eingebettet sein.
iFrames und Core Web Vitals
Schwere iFrames, die sofort beim Öffnen der Seite geladen werden, können Ihren Largest Contentful Paint- Wert verschlechtern und zu Layoutverschiebungen führen, wenn vor dem Laden des Inhalts keine expliziten Breiten- und Höhenabmessungen definiert werden.
Die Lösung ist einfach: Verwenden Sie immer loading="lazy", legen Sie immer explizite Abmessungen fest und vermeiden Sie es, mehrere große iFrames auf einer einzigen Seite zu stapeln.
Jeder zusätzliche iFrame stellt eine zusätzliche externe HTTP-Anfrage dar, und die Leistungseinbußen summieren sich schnell auf einer Seite, auf der bereits andere Ressourcen geladen werden.
Sicherheitsrisiken von iFrames und wie Sie Ihre Website schützen können
iFrames sind leistungsstark, bergen aber Risiken, die Sie nicht ignorieren sollten. Hier erfahren Sie, was schiefgehen kann und wie Sie dies auf Ihrer Website verhindern.
Clickjacking: Der häufigste iFrame-Angriff
Clickjacking ist das größte Sicherheitsrisiko im Zusammenhang mit iFrames. Ein Angreifer lädt Ihre Seite in einem transparenten iFrame, der über eine von ihm kontrollierte, irreführende Seite gelegt wird.
Wenn Nutzer glauben, auf etwas Sicheres zu klicken, lösen sie tatsächlich Aktionen auf Ihrer Website aus, ohne es zu merken.
Die Verteidigung erfolgt über den HTTP-Antwortheader, der Browsern mitteilt, ob Ihre Seite in einem iFrame auf anderen Websites geladen werden kann.
Die Einstellung SAMEORIGIN verhindert, dass externe Websites Ihre Inhalte einbetten.
Der Content-Security-Policy-Header mit der frame-ancestors-Direktive ist der moderne bevorzugte Ansatz und ermöglicht eine feinere Kontrolle darüber, welche Domains Ihre Seiten einbetten dürfen.
Cross-Site-Scripting und nicht vertrauenswürdige Quellen
Das Einbetten eines iFrames aus einer nicht vertrauenswürdigen Quelle kann Cross-Site-Scripting- Risiken mit sich bringen, wenn der eingebettete Inhalt bösartigen JavaScript-Code ausführt, der versucht, mit Ihrer übergeordneten Seite zu interagieren.
Das Sandbox-Attribut ist der primäre clientseitige Schutzmechanismus. Indem es die Aktionen des eingebetteten Dokuments einschränkt, begrenzt es den Schaden, selbst wenn der Quellcode kompromittiert wurde.
Prüfen Sie außerdem immer, ob jede iframe-Quelle https und nicht http verwendet.
Das Einbetten ungesicherter Inhalte auf einer HTTPS-Seite löst in modernen Browsern Warnungen vor gemischten Inhalten aus, was den iFrame beschädigt und das Vertrauen der Nutzer sofort untergräbt.
Schlussbetrachtung
iFrames sind ein wirklich nützliches Werkzeug, wenn sie gezielt eingesetzt werden. Sie ermöglichen es Ihnen, Ihre Seiten mit Videos, Karten, Buchungsfunktionen und Live-Inhalten anzureichern, ohne dass die Hostingkosten oder der Entwicklungsaufwand für die Eigenentwicklung dieser Funktionen anfallen.
Die Regeln sind einfach: Fügen Sie immer das title-Attribut hinzu, verwenden Sie das sandbox-Attribut für nicht vertrauenswürdige Quellen, wenden Sie loading="lazy" an, um die Seitengeschwindigkeit zu schützen, und halten Sie Ihre Ranking-Inhalte in nativem HTML, anstatt sie in einem iFrame einzuschließen, wo Suchmaschinen sie Ihrer Seite nicht zuordnen können.
Benötigen Sie Hilfe bei der Implementierung von iFrames oder bei der Optimierung Ihrer WordPress-Website hinsichtlich Leistung und Suchmaschinenoptimierung?
Seahawk Media bietet spezialisierte WordPress-Entwicklungs- und Website-Management-Dienstleistungen für Agenturen und wachsende Unternehmen an.
Häufig gestellte Fragen zu iFrames
Ist die Verwendung von iFrames auf meiner Website sicher?
Ja, mit den richtigen Vorsichtsmaßnahmen. Inhalte sollten nur von vertrauenswürdigen, HTTPS-gesicherten Quellen eingebettet werden. Verwenden Sie das Sandbox-Attribut, um die Aktionen eingebetteter Inhalte einzuschränken.
Schützen Sie Ihre eigenen Seiten vor dem Einbetten in Frames durch andere Seiten mithilfe des X-Frame-Options-Headers. iFrames sind an sich nicht gefährlich; das eigentliche Risiko entsteht durch deren unachtsame Verwendung.
Verlangsamt ein iFrame meine Website?
Das kann sein. Ein ressourcenintensiver iFrame, der sofort geladen wird, verlängert die Ladezeit Ihrer Seite und beeinträchtigt die Core Web Vitals- Werte. Durch Hinzufügen von `loading="lazy"` wird das Laden verzögert, bis der Nutzer in die Nähe des iFrames scrollt.
Um Layoutverschiebungen während des Ladens von Inhalten zu vermeiden, sollten Sie stets explizite Breiten- und Höhenwerte festlegen. Diese beiden Schritte allein beheben die meisten gängigen iFrame-Leistungsprobleme ohne weitere Änderungen.
Kann Google Inhalte innerhalb eines iFrames indexieren?
Google kann iFrame-Inhalte zwar crawlen, die SEO-Gutschrift geht jedoch an die Quell-URL, nicht an die Seite, die das Bild einbettet. Inhalte, für die Sie ein gutes Ranking erzielen möchten, müssen als nativer HTML-Code auf der Seite selbst vorliegen und dürfen nicht in einem iFrame eingebettet sein.
Funktionieren iFrames auf Mobilgeräten?
Ja, aber sie benötigen responsives CSS, um korrekt angezeigt zu werden. Feste Pixelbreiten führen auf kleinen Bildschirmen zu Überlauf und beeinträchtigen das Layout. Verwenden Sie prozentuale Breiten und eine Seitenverhältnis-Regel in CSS, um die korrekten Proportionen auf allen Geräten beizubehalten.
Testen Sie immer auf echten Mobilgeräten und nicht nur in einem verkleinerten Browserfenster auf dem Desktop, da sich das Verhalten auf eine Weise unterscheiden kann, die sich nur auf realer Hardware zeigt.
