iFrame

Wie funktioniert ein Inline Frame?

Ein Iframe erzeugt innerhalb einer Webseite einen separaten Darstellungsbereich mit eigenem Dokument und eigenem Browser-Kontext. Die einzubettende Ressource wird meistens über das Attribut src angegeben. Der Browser ruft diese URL zusätzlich zur Hauptseite ab und stellt ihre Inhalte innerhalb des definierten Bereichs dar.

Ein einfacher Einbettungscode kann beispielsweise so aussehen: <iframe src='https://example.com/karte' title='Standortkarte' width='600' height='400'></iframe>. Das Attribut title beschreibt den Inhalt für assistive Technologien, während width und height die anfänglichen Abmessungen festlegen.

Alternativ kann das Attribut srcdoc direkt ein HTML-Dokument enthalten. Diese Variante eignet sich für begrenzte, kontrollierte Inhalte, erfordert jedoch eine sorgfältige Absicherung. Text zwischen dem öffnenden und schließenden Element dient in modernen Browsern nicht als verlässlicher Ersatzinhalt.

Welche Attribute sind bei einem Iframe relevant?

• src: Gibt die URL des eingebetteten Dokuments an.
• title: Liefert eine verständliche Bezeichnung für Screenreader und andere Hilfsmittel.
• loading: Steuert mit lazy oder eager, wann der Browser den Inhalt lädt.
• sandbox: Schränkt Skripte, Formulare, Navigation und weitere Funktionen des eingebetteten Dokuments ein.
• allow: Legt fest, welche Browser-Funktionen wie Kamera, Mikrofon oder Vollbildmodus verfügbar sind.
• referrerpolicy: Bestimmt, welche Referrer-Informationen beim Abruf übertragen werden.
• width und height: Reservieren Platz und helfen dabei, Layout-Verschiebungen zu vermeiden.

Welche Auswirkungen haben Iframes auf SEO?

Inhalte innerhalb eines Iframes stammen technisch aus einem eigenen Dokument. Suchmaschinen können die eingebettete URL separat crawlen und indexieren, sofern sie erreichbar und für den Crawler freigegeben ist. Die Zuordnung des eingebetteten Inhalts zur übergeordneten Seite ist jedoch nicht garantiert. Google behandelt beide URLs grundsätzlich als eigenständige HTML-Dokumente.

Zentrale Texte, Produktinformationen, Überschriften, interne Links und strukturierte Daten sollten deshalb direkt im HTML der Hauptseite stehen. Wenn der wesentliche Seiteninhalt ausschließlich eingebettet wird, kann die Hauptseite für Suchmaschinen weniger vollständig oder thematisch schwächer erscheinen. Google empfiehlt generell, wichtige Informationen als Text auf der Seite bereitzustellen.

Eine eingebettete Seite mit noindex wird normalerweise nicht indexiert. Für besondere Anwendungsfälle unterstützt Google die Kombination noindex,indexifembedded. Dadurch kann ein Dokument im Kontext einer einbettenden Seite berücksichtigt werden, ohne als eigenständiges Suchergebnis erscheinen zu müssen. Diese Anweisung wird nicht von allen Suchmaschinen unterstützt.

Wie beeinflusst ein Iframe Ladezeit und Core Web Vitals?

Jeder Inline Frame kann weitere Netzwerkverbindungen, HTML-Dateien, Stylesheets, Skripte, Schriftarten und Medien abrufen. Umfangreiche Video-Player, Karten oder externe Formulare erhöhen dadurch den Datenverbrauch und können die Reaktionsfähigkeit einer Seite beeinträchtigen. Die tatsächliche Belastung hängt vom Inhalt und den geladenen Ressourcen ab, nicht allein vom HTML-Element.

Das Attribut loading='lazy' verschiebt den Abruf eines außerhalb des sichtbaren Bereichs liegenden Frames. Native Lazy-Loading-Funktionen des Browsers eignen sich besonders für Karten, Videos und Widgets unterhalb des sichtbaren Seitenanfangs. Sichtbare Inhalte sollten dagegen früh geladen werden, da eine Verzögerung ihre Darstellung für den Nutzer verlangsamen kann.

Festgelegte Abmessungen oder ein responsiver Container reservieren den benötigten Platz vor dem Laden. Dadurch sinkt das Risiko unerwarteter Layout-Verschiebungen, die den Cumulative Layout Shift beeinflussen. Für Mobilgeräte lässt sich der Rahmen beispielsweise mit einer maximalen Breite von 100 Prozent und einem passenden Seitenverhältnis gestalten.

Prüfe nach dem Einbau, ob externe Inhalte die Ladezeit deiner Seite erhöhen:

Analyse starten

Mit Nutzung dieses PageSpeed-Checks erklären Sie, dass Sie die Datenschutzerklärung zur Kenntnis genommen haben und damit einverstanden sind, dass die von Ihnen angegebenen Daten elektronisch erhoben und gespeichert werden. Ihre Daten werden dabei nur streng zweckgebunden zur Bearbeitung des PageSpeed-Checks benutzt. Mit der Nutzung dieses PageSpeed-Checks erklären Sie sich mit der Verarbeitung einverstanden.

🔒

Tageslimit erreicht!

Erstelle dir einen Free Account für die Performance Suite und erhalte trotzdem weitere Daten zu deiner URL.

Direkter Zugriff mit Free Account

Ladezeiten-Score: N/A von 100

i Ladezeiten (Desktop):	N/A
i Ladezeiten (Mobile):	N/A
i PageSpeed (Desktop):	N/A
i PageSpeed (Mobile):	N/A
i CMS:
i Gehosted bei:
i WordPress Theme:

Ladezeiten (Desktop)

Check fehlgeschlagen

✕ Optimierungsvorschläge

Leistungsmessung i

Performance-Möglichkeiten i

Ladezeiten (Mobile)

Check fehlgeschlagen

✕ Optimierungsvorschläge

Leistungsmessung i

Performance-Möglichkeiten i

Barrierefreiheit und Sicherheit bei eingebetteten Inhalten

Ein aussagekräftiges title-Attribut erklärt Nutzern assistiver Technologien, was der eingebettete Bereich enthält. Bezeichnungen wie title='Kontaktformular' oder title='Video zur Produktmontage' sind verständlicher als allgemeine Angaben wie title='Frame'. Rein dekorative Einbettungen sollten möglichst vermieden werden.

Die Bedienung muss per Tastatur möglich bleiben. Nutzer sollten in den eingebetteten Bereich wechseln und ihn anschließend wieder verlassen können. Formulare benötigen erkennbare Beschriftungen, Videos zugängliche Bedienelemente und Karten eine textliche Alternative mit den wesentlichen Adress- oder Standortinformationen.

Das Attribut sandbox aktiviert zusätzliche Einschränkungen für den eingebetteten Inhalt. Einzelne Rechte lassen sich über Werte wie allow-scripts, allow-forms oder allow-same-origin gezielt freigeben. Eine Kombination weitreichender Berechtigungen kann den Schutz abschwächen und sollte nur nach technischer Prüfung eingesetzt werden.

Unterschied zwischen Iframe, Frame, Embed und Object

Wann ist ein Iframe sinnvoll?

Inline Frames eignen sich für Inhalte, die technisch unabhängig bleiben sollen oder von einem externen Dienst bereitgestellt werden. Dazu gehören Video-Player, Karten, Terminbuchungen, Zahlungsdialoge, Support-Werkzeuge und interaktive Produktkonfiguratoren. Die Einbettung reduziert häufig den eigenen Entwicklungsaufwand, erzeugt jedoch eine Abhängigkeit vom externen Anbieter.

Für SEO, SEA und GEO sollte der eigentliche Informationskern weiterhin auf der Hauptseite verfügbar sein. GEO steht für Generative Engine Optimization und beschreibt die Optimierung für KI-gestützte Such- und Antwortsysteme. Da Crawler und KI-Systeme eingebettete Dokumente unterschiedlich verarbeiten können, verbessert direkt zugänglicher HTML-Text die eindeutige Erfassung von Leistungen, Produkten und Markeninformationen.

Eine technische Prüfung sollte Erreichbarkeit, mobile Darstellung, Ladeverhalten, Indexierbarkeit, Rechtevergabe und alternative Inhalte abdecken. Ein umfassender SEO-Audit für technische und inhaltliche Schwachstellen erfasst solche Abhängigkeiten systematisch. Ergänzend zeigt der kostenlose Ladezeiten-Check, ob eingebettete Ressourcen die Seitenperformance belasten.

Fragen zur technischen SEO und zur sicheren Einbindung externer Inhalte kannst du im Rahmen einer unverbindlichen Erstberatung klären.

Häufige Fragen zu Inline Frames