Mit HTML iFrames kannst du Inhalte fremder Webseiten in deine eigene Seite einbetten. Das hat Vorteile, ist aber vor allem in Bezug auf SEO mit Vorsicht zu genießen.
Stell dir vor, du platzierst in einem großen Bild ein kleines. Genauso funktionieren iFrames in HTML. Der Begriff iFrame ist die Kurzform für Inlineframe und bezeichnet eine Möglichkeit, Content einer anderen Webseite in deine eigene zu integrieren.
So funktionieren iFrames in HTML
iFrames werden vor allem genutzt, um Bilder, Videos oder Werbebanner von fremden Seiten in die eigene einzufügen.
Sie sehen zum Beispiel folgendermaßen aus:
<iframe width="560" height="315"
src="https://www.youtube.com/watch?v=qu-nR1jj9yk"
frameborder="0" allowfullscreen></iframe>Der Inhalt lässt sich durch Variablen wie „height“ oder „width“ anpassen. Seit der Einführung von HTML5 steht Nutzern außerdem das Attribut „allowfullscreen“ zur Verfügung, das du in unserem Beispiel siehst. Dadurch lassen sich eingebettete Videos an die volle Bildschirmgröße anpassen. Insgesamt sind die Anpassungsmöglichkeiten aber beschränkt.
Soweit, so gut. Doch warum werden iFrames überhaupt verwendet?
Vor- und Nachteile von iFrames
iFrames haben die folgenden Vorteile:
- Dadurch, dass es sich um einen externen Inhalt handelt, beansprucht dieser keinen Speicherplatz auf deiner Webseite. Das heißt: er beeinflusst die Ladezeit nicht negativ.
- Außerdem ist es einfach und mit wenig Aufwand verbunden, Content auf diese Art einzubinden.
- Nutzer müssen nicht auf eine andere Seite wechseln, um sich ein Video anzusehen.
Allerdings bringen iFrames in HTML auch Nachteile mit sich:
- Du hast keine Kontrolle über die externen Inhalte und ihre Funktionalität. Zu viele iFrames schränken die Anpassungsfähigkeit von Seiten deutlich ein.
- In ungünstigen Fällen bedeuten iFrames in HTML ein Sicherheitsrisiko. So können Inhalte Phishing betreiben, ohne dass du davon etwas mitbekommst. Hinzu kommen datenschutzrechtliche Bedenken. Zum Beispiel greifen Plug-ins sozialer Medien teilweise Nutzerdaten ab.
- Du kannst keine Bookmarks oder Links auf die Inhalte setzen.
- iFrames werden von verschiedenen Webbrowsern unterschiedlich dargestellt.
iFrames in HTML und SEO
Wer in HTML iFrames verwendet, sollte sich auch der Auswirkungen auf SEO bewusst sein.
Der Haken dabei: Die Auswirkungen lassen sich nicht vorhersagen.
Zwar herrscht die Meinung vor, dass Google die Inhalte von iFrames nicht der umgebenden Webseite zuschlägt. Martin Splitt erklärte allerdings in einem Webmaster-Hangout zum Thema JavaScript, dass dies durchaus der Fall sein kann, zum Beispiel bei einem großen Frame. Was das für Indexing und Ranking bedeutet, ist unklar.
Theoretisch besteht sogar die Gefahr, dass Google die Seite mit dem iFrame für die betreffenden Inhalte gegenüber dem Original bevorzugt.
Dazu kommt ein weiterer Nachteil: Viele iFrames können die Usability beeinträchtigen.
Tipp: Wenn du testen willst, ob Google einen iFrame-Inhalt der umgebenden Webseite zuordnet, verwende das Mobile-Friendly-Test-Tool. Falls der Inhalt auf der gerenderten Version erscheint, kann es sein, dass die Suchmaschine die iFrame-Seite gegenüber dem Original bevorzugt.
iFrames mit Maßen einsetzen
Die Verwendung von iFrames in HTML ist verführerisch, aber mit Vorsicht zu genießen. Denn unter Umständen führt sie zu SEO-Problemen und einer schlechten Usability. Dazu kommen Sicherheits- und Datenschutzrisiken. Alle diese Nachteile haben bereits dazu geführt, dass iFrames an Bedeutung verlieren.
Übrigens hast du Möglichkeiten, zu verhindern, dass dein Content in einem iFrame erscheint – zum Beispiel durch die X–Frame–Options im HTTP-Antwort-Header. Dadurch beugst du dem Worst Case vor, dass Google eine fremde Seite für deine Inhalte bevorzugt.
