Iframe: een venster in je pagina met andermans website erin
Een reserveringssysteem, een agenda, een kaart of een formulier van een externe partij. Vaak krijg je daarvoor een stukje code aangeleverd met de mededeling: plak dit op je pagina. Dat werkt, en het is in tien seconden gebeurd. Wat je erbij krijgt zie je niet.
Je haalt namelijk een complete andere website je pagina binnen. Met eigen code, eigen opmaak en eigen regels over wat er wordt vastgelegd.
Bij Boekingssysteem-werk kom ik dat regelmatig tegen. Bij KV Springkussens zat de beschikbaarheid in zo’n ingesloten venster van de leverancier.
Dat werkte functioneel prima. Alleen sloot de opmaak niet aan en schoot het venster in hoogte alle kanten op. Ik heb de weergave laten meeschalen met de pagina. Het venster laadt bovendien pas als je erheen scrollt. Voor de bezoeker is het nu een onderdeel van de site in plaats van een vreemd blok.
Een venster in je pagina waar een andere website in draait.
Wat is een iframe?
Een iframe is een venster in je pagina waarin een complete andere pagina wordt geladen. De naam staat voor inline frame.
Alles binnen dat venster is afgeschermd van de rest van je site. Jouw opmaak werkt er niet in, en de code binnenin kan niet zomaar bij jouw pagina. Dat is een veiligheidsmaatregel en meestal precies wat je wilt.
Het verschil met embedden
Embedden is het bredere begrip: externe inhoud tonen op je eigen pagina. Een iframe is de meest gebruikte techniek daarvoor. Meer daarover lees je bij embed.
Waarvoor je het gebruikt
Bij mijn klanten zie ik steeds dezelfde vijf toepassingen terugkomen.
Een videospeler van een videoplatform.
Een kaart met je vestiging.
Een boekings- of reserveringssysteem.
Een formulier van een externe dienst.
Een blok met reviews.
Allemaal nuttig. Allemaal met dezelfde drie aandachtspunten: snelheid, privacy en toegankelijkheid.
Wat het kost aan snelheid
Meer dan mensen verwachten. Je laadt geen plaatje maar een hele website, met eigen scripts en opmaak.
Een enkele videospeler kan zwaarder wegen dan je hele pagina. Bij het laadtijd beperken laad ik zo’n venster daarom pas als het in beeld komt.
Bij video werkt een plaatshouder nog beter. Je toont een afbeelding met een afspeelknop en laadt de speler pas na een klik. Meer daarover lees je bij pagespeed.
Privacy
Zodra dat venster laadt, gaat er informatie naar de andere partij. Het IP-adres van je bezoeker en welke pagina hij bekijkt. Vaak wordt er ook iets op zijn apparaat geplaatst.
Daar hoort toestemming vragen bij, net als bij je statistieken. Laad je het direct, dan geef je gegevens door voordat dat mag. Meer over die regels lees je bij cookie.
Vindbaarheid
Inhoud in een iframe telt niet mee als jouw inhoud. Google beschouwt het als een aparte pagina van een andere partij.
Zet er dus nooit tekst in die je wilt laten ranken. Een productbeschrijving in een venster van een leverancier levert jou niets op.
Toegankelijkheid
Drie dingen die ik altijd regel
Het venster een naam geven, zodat hulpsoftware weet wat erin zit.
Bereikbaar met het toetsenbord, en er ook weer uit.
Een tekstalternatief eronder, bijvoorbeeld je adres onder een kaart.
Dat laatste is ook praktisch. Werkt het venster niet, dan kan je bezoeker alsnog verder. Kijk bij het hoogte instellen of het meeschaalt in plaats van vast te staan. Anders klopt het op een telefoon niet.
Wat je zelf kunt controleren
Open je pagina op een telefoon en kijk of het venster binnen de breedte blijft. Steekt het eruit, dan staat de hoogte of de breedte vast ingesteld.
Test daarna of je met de tabtoets in en uit het venster komt. Blijf je erin hangen, dan is dat een blokkade voor iedereen die geen muis gebruikt.
Als het niet werkt
Er zijn drie gebruikelijke oorzaken. De bron staat insluiten niet toe. Of je toestemmingsplugin houdt het tegen. Of een uitbreiding in de browser blokkeert het.
Test in een privevenster en op een tweede apparaat. Zie je het daar wel? Dan zit het aan jouw kant. Meer daarover lees je bij accessibility.
Meer vragen over Iframe
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een iframe?
Waarvoor gebruik je een iframe?
Vertraagt een iframe je website?
Is een iframe slecht voor je vindbaarheid?
Waarom werkt mijn iframe niet?
Hoe maak je een iframe toegankelijk?
Wat is een iframe?
Bij mijn klanten zie ik steeds dezelfde vijf toepassingen terugkomen.
Een videospeler van een videoplatform. Een kaart met je vestiging erop. Een boekings- of reserveringssysteem van een externe leverancier.
Daarnaast een formulier van een externe dienst, bijvoorbeeld voor aanmeldingen of enquetes. En een blok met reviews van een beoordelingsplatform.
Allemaal nuttig, en in veel gevallen is er geen alternatief. De leverancier levert het zo aan en dat is dat.
Maar allemaal met dezelfde drie aandachtspunten: snelheid, privacy en toegankelijkheid. Wie die drie regelt, heeft er verder geen last van. Wie ze overslaat, merkt het pas als een bezoeker klaagt of als er een controle komt.
Beperk het aantal ingesloten vensters per pagina tot een. Meer dan dat voelt je bezoeker direct, vooral op mobiel internet. Kijk ook of je die inhoud niet gewoon zelf kunt tonen, zonder venster van een ander. Vaak kan het gewoon met een afbeelding en een link naar de bron.
Waarvoor gebruik je een iframe?
Een iframe is een venster in je pagina waarin een complete andere website wordt geladen. De naam staat voor inline frame.
Alles binnen dat venster is afgeschermd van de rest van je site. Jouw opmaak werkt er niet in, en de code binnenin kan niet zomaar bij jouw pagina.
Dat is een veiligheidsmaatregel en meestal precies wat je wilt. Je haalt tenslotte iets binnen dat je niet zelf beheert.
Je herkent het aan de code die een leverancier aanlevert met de mededeling: plak dit op je pagina. Dat werkt en het is in tien seconden gebeurd.
Wat je erbij krijgt zie je alleen niet. Je haalt een hele website je pagina binnen, met eigen scripts, eigen opmaak en eigen regels over wat er wordt vastgelegd. Meer over het bredere begrip lees je bij embed.
Vraag bij elk stukje code dat je krijgt aangeleverd wat het precies doet. Een leverancier hoort te kunnen vertellen welke gegevens er worden verstuurd.
Vertraagt een iframe je website?
Meer dan mensen verwachten. Je laadt geen plaatje maar een hele website, met eigen scripts en opmaak.
Een enkele videospeler kan zwaarder wegen dan je hele pagina. Bij drie ingesloten vensters op een pagina merkt je bezoeker dat direct op zijn telefoon.
De oplossing is simpel: laad het pas als het nodig is. Ik zorg dat zo’n venster pas laadt als je erheen scrollt, in plaats van meteen bij het openen van de pagina.
Bij video werkt een plaatshouder nog beter. Je toont een afbeelding met een afspeelknop, en pas na een klik wordt de echte speler geladen.
Dat scheelt vaak meer dan alle andere snelheidsmaatregelen samen. En het lost meteen je toestemmingsvraag op. Meer daarover lees je bij pagespeed.
Meet het effect zelf een keer. Haal een video van een pagina af en vergelijk je laadtijd voor en na. Het verschil verrast bijna iedereen. Doe die meting op een mobiele verbinding, want daar telt het gewicht het zwaarst.
Is een iframe slecht voor je vindbaarheid?
Inhoud in een iframe telt niet mee als jouw inhoud. Google beschouwt het als een aparte pagina van een andere partij.
Dat is geen straf, maar het is wel belangrijk om te weten. Zet er dus nooit tekst in die je wilt laten ranken.
Ik zie dat regelmatig misgaan bij productinformatie van een leverancier. Die staat in een venster, en jij denkt dat je een uitgebreide productpagina hebt. Google ziet een lege pagina met een venster erin.
Schrijf je eigen tekst daarom altijd op je eigen pagina, buiten het venster om.
Datzelfde geldt voor een boekingssysteem. Zet je uitleg, je prijzen en je voorwaarden in je eigen tekst, en gebruik het venster alleen voor de handeling zelf.
Schrijf je eigen tekst altijd buiten het venster om. Wat erin staat telt niet mee als jouw inhoud, hoe uitgebreid het ook is. Zet je prijzen en voorwaarden dus altijd in je eigen tekst op de pagina.
Hoe maak je een iframe toegankelijk?
Er zijn drie dingen die ik altijd regel, en die kosten samen vijf minuten.
Geef het venster een naam, zodat hulpsoftware weet wat erin zit. Zonder naam hoort iemand alleen dat er een naamloos kader staat en weet hij niet wat hij overslaat.
Zorg dat het bereikbaar is met het toetsenbord, en dat je er ook weer uit kunt. Een venster waar je met de tabtoets in vast komt te zitten, is een blokkade.
Zet er een tekstalternatief onder. Onder een kaart hoort je adres in gewone tekst, onder een video een korte samenvatting of een transcript.
Dat laatste is ook praktisch. Werkt het venster niet, bijvoorbeeld door een blokkade in de browser van je bezoeker, dan kan hij alsnog verder. Meer daarover lees je bij accessibility.
Zet er altijd een tekstalternatief onder, bijvoorbeeld je adres onder een kaart. Dat helpt ook als het venster niet laadt. Controleer daarna of dat alternatief ook echt klopt en actueel blijft.
Staat er een boekingssysteem of een kaart op je site die niet lekker meeschaalt? Stuur me de link via het formulier hieronder. Ik kijk hoe zwaar dat venster is, of het pas laadt wanneer het nodig is en of het op een telefoon klopt. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Inline frame, ingesloten venster, frame
