Während iFrames notwendig sein können, um externe Inhalte einfach einzubetten, können sie auch Herausforderungen für die "Suchmaschinenoptimierung" darstellen.
Der HTML-Code, der für iFrames verwendet wird, wirkt sich negativ auf die Seitenerfahrung der übergeordneten Seite aus. Wenn ein iFrame Inhalte aus einer externen Quelle lädt, kann dies Ladeverzögerungen verursachen, was zu einer schlechten "Benutzererfahrung" führt.
Und wie Sie wissen, priorisieren Suchmaschinen "zugängliche" Designs und "benutzerfreundliche" Schnittstellen. Eine schlechte iFrame-Implementierung kann zu Einschränkungen führen, die sogar zu einer Google-Strafe führen können.
Lassen Sie uns über iFrame-SEO lernen und wie das iFrame-Tag mit JavaScript und anderen Elementen interagiert, um die Suchmaschinenrankings zu beeinflussen.
Was ist ein iFrame?
Ein iFrame, oder Inline-Frame, ist ein HTML-Element, das es Entwicklern oder Vermarktern ermöglicht, ein externes Dokument in ein aktuelles HTML-Dokument einzubetten.
Wenn ein iFrame geladen wird, enthält es JavaScript-Code für "dynamische Inhaltsbereitstellung", wie externe Anzeigen oder interaktive [Funktionen].
iFrames können verschiedene Arten von Inhalten direkt auf eine Webseite laden. Diese Inhalte können sein:
- YouTube-Videos
- Karten
- Social-Media-Feeds
- Web-Apps
Attribute wie "Höhe" und "Breite" können Webdesignern helfen, die Anzeigengröße des iFrame zu steuern, um das visuelle Layout einer Seite zu verbessern.
Außerdem kann ein CSS-Rahmen angewendet werden, um das Erscheinungsbild des iFrames anzupassen und mit dem umgebenden Text zu verschmelzen.
Beispiele von iFrames
Einbetten eines YouTube-Videos
Ein Inline-Frame kann effektiv ein Video einbetten und die Benutzerbindung [erhöhen]. Entwickler können [leicht] multimediale Inhalte mit dem <iframe>-Tag einfügen.
Das Attribut Höhe und Breite steuern die Anzeigegröße, während die Vollbildfunktion es den Benutzern ermöglicht, das Video im Vollbildmodus anzusehen.
Das Hinzufügen eines YouTube-Videos mit iFrames ist wirklich einfach. Kopieren Sie einfach den Einbettungscode von YouTube:
Und dann fügen Sie den Code dort ein, wo Sie das Video auf Ihrer Website "einbetten" möchten.
Einbetten einer Google-Karte
Ein Inline-Frame kann interaktive Elemente wie Google Maps einbetten, sodass Benutzer Standorte direkt auf Ihrer Website erkunden können. Hier ist, wie man eine Google Map einbettet:
Das obige Beispiel verwendet drei verschiedene "Eigenschaften":
- allowfullscreen: Ermöglicht den [Vollbildmodus] für bestimmte [Kartenabschnitte].
- frameborder="0" und style="border:0": Entfernt den [Standard-iframe-Rahmen] um die [Karte].
- referrerpolicy="no-referrer-when-downgrade": Sendet die vollständige [URL] im [Referer-Header], um [richtige API-Schlüsselbeschränkungen] zu ermöglichen.
Hier ist ein Blick auf eine digitale Agentur, die Google Maps auf ihrer Website mit iFrames verwendet:
Einbetten eines PDF-Dokuments
Ein iFrame kann PDF-Dokumente direkt innerhalb einer Webseite anzeigen. Daher müssen Benutzer die Datei nicht herunterladen. Hier ist ein Screenshot des Codes zum Einbetten eines PDFs:
Im obigen Beispiel definiert das Attribut src den Speicherort der PDF-Datei, entweder im Web (unter Verwendung der URL) oder auf einem lokalen Server (unter Verwendung des Dateipfads).
Einbetten von Social-Media-Beiträgen (wie Twitter)
Sie können auch Social-Media-Inhalte wie einen Tweet auf einer Webseite mithilfe von iFrames einbetten. Es erhöht die "Engagement", indem es dynamische, interaktive Inhalte direkt auf Ihrer Website anzeigt.
Sie können Live-Updates aus sozialen Medien mit einem iFrame und dem Twitter-Widget einfügen.
Der <blockquote> [Tag] [enthält] den Tweet, während eine JavaScript-Datei erforderlich ist, um ihn [korrekt] darzustellen. Hier ist ein [Beispiel] dafür, wie ein eingebetteter Twitter-Beitrag auf einer [Website] aussieht:
Wird der Inhalt von iFrames "indexiert"?
Ja, iFrame-Inhalte können gecrawlt und indexiert werden.
Google-Suchspinnen können iFrame-Inhalte durch DOM-Flattening durchsuchen, bei dem der Browser alle Webseiten-Elemente, einschließlich iFrames, zu einer einzigen Struktur kombiniert.
Jedoch behandelt Google nicht alle iFrame-Inhalte "gleich".
Beim Laden von iFrames fordert Google zusätzliche HTTP an, um den Inhalt des iFrames abzurufen. Während es diesen Inhalt crawlen und möglicherweise indexieren kann, hängt es davon ab, wie das iFrame implementiert ist.
Die Verwendung der eingebetteten Index-Direktive ist entscheidend für Verlage, die sicherstellen möchten, dass spezifische iFrame-Inhalte indiziert werden, um ihre iFrame-SEO-Strategie zu verbessern.
Die in den Index eingebettete Direktive ist ein Meta-Tag oder HTTP-Header, der es Google ermöglicht, Inhalte, die in einem iFrame eingebettet sind, zu indexieren, selbst wenn die Seite, die das iFrame enthält, mit einem noindex-Tag versehen ist.
Dies ist nützlich für Verleger, die möchten, dass eingebettete Inhalte (wie Videos oder Widgets) von Google indexiert werden, wenn sie Teil anderer Websites sind.
Hier ist ein Beispiel für die Verwendung des Meta-Tags im <head>-Abschnitt:
<head><meta name="robots" content="noindex, indexifembedded"></head>
In diesem Beispiel wird die Seite selbst nicht indexiert ("noindex"), aber wenn dieser Inhalt in einem anderen Site-iFrame eingebettet ist, kann er indexiert werden ("indexifembedded").
Wie beeinflussen iFrames das SEO?
iFrames können einen erheblichen Einfluss auf SEO haben, sowohl positiv als auch negativ. Hier ist, wie Inline-Frames SEO [beeinflussen]:
SEO-Gutschrift
Im Gegensatz zu direkt im HTML Ihrer Webseite platzierten Inhalten wird eingebetteter Inhalt durch iFrames von Suchmaschinen anders behandelt.
Wenn Webcrawler eine Webseite betrachten, suchen sie nach "Originalinhalten", die sie mit dieser Seite in Verbindung bringen können.
Inhalt, der direkt im HTML enthalten ist, wird als Teil Ihrer Website erkannt und trägt zu ihrer Relevanz und Autorität bei. Wohingegen, der durch ein iFrame angezeigte Inhalt aus einer anderen Quelle stammt, was bedeutet, dass Suchmaschinen ihn möglicherweise nicht mit Ihrer Domain in Verbindung bringen.
Daher ist es ratsam, iFrames bei Bedarf zu verwenden, um sicherzustellen, dass der primäre Inhalt für Webcrawler sichtbar und zugänglich bleibt.
Web-Crawler und Indexierung
Suchmaschinen senden Webcrawler, um die Inhalte Ihrer Website zu analysieren und zu indizieren.
Crawler können aufgrund mehrerer Faktoren Schwierigkeiten beim Indizieren von iFrames haben:
- Inhaltszugänglichkeit: Wenn der Inhalt innerhalb des iFrames auf einer anderen Domain (cross-origin) liegt, können einige Crawler möglicherweise nicht darauf zugreifen aufgrund von Sicherheitsbeschränkungen.
- Noindex-Tags: Wenn der eingebettete Inhalt ein noindex-Meta-Tag oder einen X-Robots-Tag-Header enthält, der die Indexierung verhindert, werden Crawler ihn nicht in ihren Index aufnehmen.
- JavaScript-Rendering: Einige iFrames sind auf JavaScript angewiesen, um Inhalte zu laden. Wenn Crawler JavaScript nicht rendern können, sehen oder indexieren sie möglicherweise den Inhalt des iFrames nicht.
Um die Indexierung von iFrames zu verbessern und Ihr iFrame-SEO zu steigern, ziehen Sie Folgendes in Betracht:
- Verwenden Sie ein gültiges Src-Attribut: Verwenden Sie das iFrame-Tag ordnungsgemäß mit einem gültigen src-Attribut, das auf zugänglichen Inhalt verweist.
- Erlaube Cross-Origin Resource Sharing: Wenn der iFrame-Inhalt von einer anderen Domain stammt, konfiguriere den Server, um CORS zu erlauben, damit Crawler darauf zugreifen können.
- Verwenden Sie keine Noindex-Meta-Tags: Stellen Sie sicher, dass es keine Noindex-Direktiven im iFrame-Inhalt gibt, die das Indexieren blockieren würden. Strukturierte Daten: Implementieren Sie strukturierte Daten (wie Schema.org) im übergeordneten Dokument, um Suchmaschinen Kontext zum iFrame-Inhalt zu bieten.
- Verwenden Sie kanonische Tags: Verwenden Sie <link rel="canonical">, um auf die primäre Version des Inhalts zu verweisen, falls zutreffend.
Seitengeschwindigkeit
Die Verwendung von iFrames kann die PageSpeed reduzieren, weil das Laden externer Inhalte zusätzliche HTTP-Anfragen erfordert, was die [Gesamt]ladezeit der Seite verlangsamen kann.
Der Grund für die reduzierte Ladezeit ist, dass jedes iFrame Daten von externen Quellen zieht, und wenn diese Quellen langsam sind oder große Dateien haben, kann dies die Leistung Ihrer Website negativ beeinflussen.
Darüber hinaus können iFrames das Rendering anderer Elemente auf der Seite verzögern, was sich weiter auf die Geschwindigkeit auswirkt, insbesondere bei langsameren Verbindungen.
Und wie Sie wissen, wirkt sich eine langsame PageSpeed nicht nur auf die Core Web Vitals-Werte aus, sondern führt auch zu einer schlechten Benutzererfahrung. Tatsächlich haben mehrere Quellen (einschließlich Google) die Auswirkungen einer langsamen Ladegeschwindigkeit auf die Absprungrate angegeben.
Die Ergebnisse sind wie folgt: "Absprungraten" steigen um 32%, wenn die "Seitenladezeit" von 1 Sekunde auf 3 Sekunden steigt.
Und als SEOs ist das Letzte, was wir tun wollen, die "page experience" negativ zu beeinflussen.
Also lautet die Frage wirklich: „Sollte ich iFrames verwenden, um Inhalte einzubetten, wenn dies möglicherweise die PageSpeed reduzieren könnte?
Probleme mit "doppeltem Inhalt"
In iFrames wird derselbe Inhalt auf mehreren Seiten oder Websites eingebettet. Daher haben Suchmaschinen Schwierigkeiten, die ursprüngliche Version zu bestimmen.
Es führt zu einer Verdünnung des SEO-Credits und Link-Gleichgewichts.
Um dieses Problem zu mildern, stellen Sie sicher, dass der eingebettete Inhalt "einzigartig" für jede Seite ist oder ordnungsgemäß "kanonisiert" wird, um Konflikte mit anderen Seiten zu vermeiden.
Die Verwendung von SEO-freundlichen iFrames, die die primäre Quelle klar kommunizieren, kann Suchmaschinen helfen, die Beziehung zwischen dem ursprünglichen Inhalt und seinen eingebetteten Instanzen zu verstehen.
Was sind die "Vorteile" von iFrames?
Inline-Frames bieten mehrere Vorteile für Webentwickler und Content-Ersteller. Es verbessert die "Site-Performance" beim Einbetten externer Medien und beim Teilen von Inhalten.
Hier sind die wichtigsten Vorteile der Verwendung von iFrames:
Schnelleres Aktualisieren von Seiten
iFrames ermöglichen ein schnelleres Aktualisieren von Seiten, die auf das iFrame verweisen, da Inhaltsaktualisierungen an der eingebetteten Ressource vorgenommen werden können, ohne die Hauptseite zu ändern.
Dies verringert die Notwendigkeit, ganze Seiten neu zu laden, und erhöht die Effizienz.
Wiederverwendbarkeit von Code
Ein großer Vorteil von iFrames ist die "Wiederverwendbarkeit" von Code.
Entwickler können das gleiche iFrame auf mehreren Seiten wiederverwenden, indem sie die gleiche Ressource einbetten, was Zeit und Speicher spart und die Anzahl der Codezeilen reduziert, die benötigt werden, um Inhalte auf der gesamten Website zu implementieren.
Einbetten von externen Inhalten und Medien
iFrames vereinfachen das Einbetten von Inhalten aus Drittquellen, wie zum Beispiel "Videos", "Karten" und "Widgets".
Durch das Teilen externer Mediendateien und die Nutzung von iFrame-Tags können Entwickler "reichhaltige Medien" integrieren, ohne sie selbst zu hosten, wodurch sie CORS-Beschränkungen umgehen und "domänenübergreifenden Zugriff" ermöglichen.
Einfach zu verwenden und zu pflegen
iFrames sind einfach zu verwenden und erfordern nur minimalen Aufwand, um auf einer Seite implementiert zu werden.
Sie ermöglichen es Ihnen, komplexe Inhalte einzubetten, ohne Ihren Code zu überladen. Inline-Frames verbessern die Funktionalität Ihrer Website, optimieren die Inhaltsbereitstellung und sorgen für ein konsistentes Branding, während sie gleichzeitig die Komplexität des Codes reduzieren.
Werden iFrames als "Cloaking" betrachtet?
Nein, iFrames werden nicht von Natur aus als "Cloaking" betrachtet.
Cloaking ist eine "Black Hat SEO"-Praxis, bei der eine Website den Suchmaschinen andere Inhalte zeigt als den Nutzern, oft um die Suchrankings zu kontrollieren.
iFrames, wenn sie angemessen verwendet werden, fallen nicht unter diese Definition. Allerdings müssen technische Aspekte berücksichtigt werden, um sicherzustellen, dass iFrames korrekt verwendet werden, ohne Suchmaschinen oder Benutzer in die Irre zu führen.
Abschluss
Während HTML5 die Verwendung von iFrames unterstützt und Google iFrame-HTML-Code indizieren kann, ist es am besten, sie nach Möglichkeit zu vermeiden.
Einige Browser und Suchmaschinen-Crawler können den Inhalt innerhalb von iFrames möglicherweise immer noch nicht indexieren, was letztendlich zu SEO-Problemen führt.
Sie können das <embed>-Tag als Alternative zu iFrame verwenden. Es wird zum Einbetten von Multimedia-Inhalten wie PDFs, Audio und Video verwendet, anstatt vollständige Webseiten.
