Iframe: cos’è, come funziona e come usarlo in HTML

Un iframe è un elemento HTML che permette di visualizzare un altro documento web all’interno della pagina che stai visitando. Viene usato spesso per incorporare video, mappe, moduli, player, documenti e applicazioni gestite da servizi esterni.

Il punto importante è che il contenuto non viene copiato dentro la pagina principale. Il browser carica un documento distinto in uno spazio delimitato, con un proprio URL e un proprio contesto.

Questa separazione spiega sia l’utilità della tecnologia sia molti dei problemi che puoi incontrare: embed che vengono bloccati, layout poco adatti agli smartphone, permessi, privacy, caricamenti pesanti e dubbi sull’indicizzazione.

In questa guida vediamo come funziona realmente, come inserirlo in HTML, come renderlo responsive e cosa controllare quando un contenuto incorporato non si comporta come previsto.

Cos’è un iframe e come funziona nel browser

L’elemento <iframe> fa parte di HTML e consente di inserire un documento all’interno di un altro documento.

Lo standard HTML corrente lo classifica come contenuto incorporato. La documentazione dell’HTML Living Standard definisce inoltre attributi specifici per indirizzo, dimensioni, caricamento, permessi e sandbox.

Non si tratta quindi soltanto di una “finestra grafica”. Dietro quel riquadro il browser sta gestendo una seconda risorsa web.

Cosa significa inline frame

Il nome deriva da inline frame: un frame inserito direttamente nel flusso della pagina.

Il codice minimo può essere questo:

<iframe
  src="https://example.com/"
  title="Contenuto incorporato">
</iframe>

src indica quale risorsa deve essere caricata, mentre title descrive lo scopo del contenuto alle tecnologie assistive.

La pagina contenitore continua a esistere normalmente attorno all’elemento. La risorsa caricata al suo interno mantiene invece un contesto distinto.

Iframe e frame HTML non sono la stessa cosa

Non bisogna confondere <iframe> con il vecchio elemento <frame>.

Nei primi anni del Web era possibile suddividere l’intera finestra del browser attraverso <frameset> e diversi <frame>. Quel modello appartiene ormai al Web legacy: frame, frameset e noframes sono elementi obsoleti e non devono essere utilizzati nei nuovi documenti.

L’inline frame è invece ancora parte dell’HTML moderno.

La differenza pratica è importante: non stai dividendo l’intera pagina secondo il vecchio modello a frame, ma stai incorporando una risorsa in un punto preciso del documento.

Pagina principale e documento incorporato: cosa resta separato

Il documento caricato può avere HTML, CSS, JavaScript, immagini, font e ulteriori richieste di rete.

Se proviene da un altro dominio, inoltre, la same-origin policy limita ciò che gli script della pagina principale possono leggere o modificare al suo interno.

Questo chiarisce anche un dubbio frequente.

Il CSS del sito può controllare larghezza, altezza, bordo e posizione dell’elemento esterno, ma normalmente non può cambiare colori, pulsanti o layout del documento cross-origin.

Se due pagine appartenenti a origini differenti devono comunicare, occorre utilizzare meccanismi progettati per questo scopo, come window.postMessage(), e non tentare di accedere liberamente al DOM della risorsa esterna.

A cosa serve un iframe

Questa tecnica è utile quando vuoi mostrare una risorsa che ha senso mantenere separata dal documento principale.

Il criterio non dovrebbe essere semplicemente “è il modo più rapido per inserirla”. Conviene chiedersi chi controlla il contenuto, come viene aggiornato e quanto è importante per l’esperienza principale della pagina.

Video, mappe, moduli e altri contenuti esterni

Gli esempi più comuni sono:

• player video;
• mappe interattive;
• moduli e questionari;
• calendari;
• documenti;
• widget;
• strumenti esterni;
• alcune applicazioni web incorporate.

In questi casi il provider continua a gestire interfaccia e funzionamento, mentre il tuo sito riserva lo spazio necessario.

Se il servizio aggiorna la propria risorsa, normalmente non devi copiare sul sito una nuova versione: la pagina continua a richiamare la destinazione prevista dal provider.

Quando incorporare un’altra pagina ha davvero senso

La situazione più semplice è quella in cui il servizio mette a disposizione un codice di incorporamento ufficiale.

Significa che il provider ha progettato quella risorsa per funzionare anche dentro pagine di terzi.

È molto diverso dal prendere l’URL di una pagina qualsiasi e provare a inserirla direttamente.

Una normale pagina web può:

• impedire esplicitamente l’incorporamento;
• essere inutilizzabile in uno spazio ridotto;
• richiedere l’intera navigazione del sito;
• dipendere da autenticazione o cookie;
• cambiare struttura senza preavviso.

Un embed ufficiale elimina parte di questa incertezza.

Quando questa soluzione è poco adatta

Se il contenuto è tuo e costituisce una parte essenziale della pagina, spesso è meglio pubblicarlo direttamente nel documento.

Immagina una pagina di servizio in cui tutta la spiegazione principale sia caricata da una seconda pagina. Sarebbe tecnicamente possibile, ma avresti meno controllo su accessibilità, stile, caricamento e indicizzazione.

Lo stesso vale quando stai usando un documento incorporato soltanto per evitare di sviluppare un componente relativamente semplice.

La domanda utile diventa:

questo contenuto deve restare una risorsa autonoma oppure dovrebbe essere parte nativa della pagina?

Nel primo caso l’embed può essere appropriato. Nel secondo conviene valutare HTML nativo, un blocco del CMS, un componente o un’integrazione tramite API.

Come inserire un iframe in HTML

Per utilizzarlo servono almeno una destinazione da caricare e una descrizione comprensibile del contenuto.

Una base ragionevole è:

<iframe
  src="https://example.com/embed/"
  title="Esempio di contenuto incorporato"
  width="800"
  height="450">
</iframe>

Da qui puoi aggiungere altri attributi in base al comportamento richiesto dal provider e dal progetto.

La sintassi minima con src e title

L’attributo fondamentale è src:

src="https://example.com/embed/"

Indica al browser la risorsa da aprire.

title svolge una funzione diversa:

title="Mappa della sede"

Fornisce un nome comprensibile del contenuto, particolarmente importante per chi naviga con tecnologie assistive.

Evita quindi formule generiche come:

title="iframe"

quando puoi descrivere realmente ciò che viene mostrato:

title="Mappa interattiva della sede di Ancona"

width e height: dimensioni e spazio riservato

Gli attributi width e height stabiliscono le dimensioni iniziali.

Per esempio:

<iframe
  src="https://example.com/embed/"
  title="Video dimostrativo"
  width="800"
  height="450">
</iframe>

Definire dimensioni coerenti aiuta anche a riservare spazio al contenuto prima che sia completamente disponibile.

Questo non significa che il componente debba restare fisso a 800×450 pixel. Puoi utilizzare il CSS per adattarlo al contenitore e ai diversi schermi.

Gli attributi loading, allow, referrerpolicy e sandbox

Gli attributi disponibili svolgono funzioni diverse.

Attributo	A cosa serve	Quando valutarlo
src	Definisce la risorsa da caricare	Sempre
title	Descrive il contenuto alle tecnologie assistive	Praticamente sempre
width / height	Impostano le dimensioni iniziali	Quando conosci lo spazio previsto
loading	Suggerisce quando caricare la risorsa	Utile per embed fuori dalla prima schermata
allow	Delega capacità previste dalla Permissions Policy	Quando il provider richiede funzioni specifiche
referrerpolicy	Controlla le informazioni di referrer inviate	Quando serve una policy specifica
sandbox	Applica restrizioni aggiuntive	Quando vuoi limitare il documento incorporato

Per esempio:

<iframe
  src="https://example.com/embed/"
  title="Contenuto incorporato"
  width="800"
  height="450"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin">
</iframe>

Non conviene aggiungere attributi di sicurezza o permessi copiandoli alla cieca da un altro progetto.

Un player video, una mappa e un’applicazione interattiva possono avere esigenze differenti. Se il provider fornisce un codice ufficiale, è preferibile partire da quello e modificare soltanto gli aspetti che comprendi e che devi realmente personalizzare.

Come rendere un iframe responsive con CSS

Un elemento con larghezza fissa può funzionare bene sul desktop e uscire dal viewport su uno smartphone.

La soluzione dipende dal tipo di contenuto: un video 16:9 ha esigenze diverse da un modulo molto alto o da una dashboard.

Iframe CSS: larghezza fluida e proporzioni con aspect-ratio

Quando si parla di iframe CSS, il lavoro riguarda soprattutto il contenitore esterno: dimensioni, proporzioni e adattamento allo spazio disponibile.

Per contenuti con proporzioni prevedibili puoi utilizzare:

<div class="iframe-wrapper">
  <iframe
    src="https://example.com/embed/"
    title="Video dimostrativo"
    loading="lazy">
  </iframe>
</div>

con:

.iframe-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.iframe-wrapper iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

Il contenitore occupa la larghezza disponibile e mantiene la proporzione scelta.

È un approccio più robusto di una coppia di dimensioni rigide quando il contenuto deve adattarsi allo schermo.

Perché modificare solo width e height può non bastare

Scrivere:

width="100%"
height="450"

non rende automaticamente responsive qualsiasi embed.

Un video può richiedere il mantenimento delle proporzioni. Un modulo può avere un’altezza determinata dal numero di campi. Una dashboard potrebbe richiedere una larghezza minima per restare utilizzabile.

Non esiste quindi una dimensione universale.

Per elementi con proporzioni definite, aspect-ratio è spesso una buona scelta. Per documenti dall’altezza variabile può essere più appropriata una min-height, una misura scelta in base al contenuto o un sistema specifico offerto dal provider.

Come evitare scroll, tagli e spazi vuoti

Quando compare una barra di scorrimento interna o parte del contenuto viene tagliata, la prima cosa da verificare è chi controlla l’altezza.

Se il documento esterno è più alto dello spazio disponibile, il browser non può semplicemente inventare l’area mancante.

Inoltre il foglio di stile della pagina principale non può normalmente entrare in un documento cross-origin e ridisegnarne l’interfaccia.

Gli embed più affidabili sono quelli in cui:

• il provider offre un layout pensato per l’incorporamento;
• le dimensioni sono configurabili;
• il componente è responsive;
• oppure esiste un metodo documentato per comunicare l’altezza al documento parent.

Nascondere lo scroll senza risolvere la causa rischia soltanto di rendere parte del contenuto irraggiungibile.

Perché un iframe non si vede o non funziona

Se un URL si apre normalmente in una scheda del browser, non significa che debba necessariamente funzionare anche come contenuto incorporato.

Il sito sorgente e la pagina che lo include possono applicare regole di sicurezza specifiche.

Quando il sito impedisce di essere incorporato

Un server può dichiarare quali siti hanno il permesso di mostrare una sua pagina dentro un frame.

Uno dei controlli moderni è la direttiva CSP frame-ancestors.

Per esempio:

Content-Security-Policy: frame-ancestors 'none'

comunica al browser che la pagina non deve essere incorporata.

Oppure la policy può permettere l’operazione soltanto alla stessa origine o a domini specifici.

Questa decisione appartiene alla risposta HTTP della risorsa che vuoi mostrare, non al markup della pagina che tenta di caricarla.

frame-ancestors e X-Frame-Options: chi decide davvero

frame-ancestors non va confuso con frame-src.

La differenza è essenziale:

• frame-ancestors stabilisce chi può incorporare la pagina corrente;
• frame-src stabilisce da quali origini la pagina corrente può caricare contenuti framed.

Esiste inoltre l’header X-Frame-Options, più vecchio e meno flessibile, ancora utilizzato per impedire o limitare l’incorporamento.

Se il server esterno risponde con una policy restrittiva, cambiare dimensioni, CSS o plugin non elimina il blocco.

frame-src, HTTPS e Content Security Policy

Anche la pagina contenitore può avere una Content Security Policy.

Se la CSP autorizza risorse framed soltanto da determinate origini e la destinazione non rientra nell’elenco, il browser può impedirne il caricamento.

Un altro controllo riguarda HTTPS.

Una pagina servita via HTTPS che prova a caricare una risorsa HTTP crea mixed content. La documentazione MDN sul mixed content include i frame HTTP tra i contenuti che possono essere bloccati in un contesto sicuro.

Quando un embed non funziona, controlla quindi:

1. URL utilizzato;
2. protocollo HTTPS;
3. console del browser;
4. CSP della pagina principale;
5. header della risorsa esterna.

Gli strumenti per sviluppatori mostrano spesso direttamente la policy che ha causato il problema.

Perché non puoi forzare dal tuo HTML un sito che rifiuta l’embed

Se non controlli il server esterno, non puoi neutralizzarne frame-ancestors o X-Frame-Options aggiungendo un attributo al tuo codice.

È precisamente lo scopo di queste protezioni: impedire a una pagina terza di decidere unilateralmente di incorporare un contenuto.

Le alternative realistiche sono:

• utilizzare il metodo embed ufficiale;
• usare un’API prevista dal provider;
• collegare direttamente la pagina;
• contattare chi gestisce il servizio;
• modificare la policy soltanto se controlli il server.

Un plugin che promette genericamente di “sbloccare qualsiasi embed” non cambia le regole applicate dal browser a una risposta HTTP esterna.

Sicurezza, privacy e accessibilità

Un documento incorporato può contenere script, richieste di rete, cookie, controlli interattivi e permessi propri.

Per questo sicurezza e privacy vanno considerate come parte dell’integrazione, non soltanto quando qualcosa smette di funzionare.

Cosa limita davvero l’attributo sandbox

L’attributo sandbox permette di applicare restrizioni aggiuntive.

La forma:

<iframe
  src="https://example.com/embed/"
  title="Contenuto esterno"
  sandbox>
</iframe>

attiva un insieme piuttosto restrittivo di limitazioni.

Puoi poi concedere singole capacità tramite token specifici:

sandbox="allow-scripts allow-forms"

Il criterio corretto è partire dai permessi realmente necessari.

La specifica HTML segnala inoltre un caso delicato: concedere contemporaneamente allow-scripts e allow-same-origin a contenuto same-origin può ridurre fortemente l’efficacia della sandbox.

sandbox non è quindi una parola magica da aggiungere al markup, ma una policy da configurare in funzione del contenuto.

Permessi e contenuti di terze parti

L’attributo allow può applicare una Permissions Policy al documento incorporato e delegare determinate capacità.

Un player o un’applicazione possono richiedere funzioni che un semplice documento statico non utilizza.

La regola pratica resta la stessa: concedi ciò che serve al componente, non ciò che trovi casualmente nel codice di un altro servizio.

La pagina esterna rimane inoltre soggetta alle proprie policy.

Cookie, richieste cross-site e privacy

Un embed di terze parti può generare connessioni verso domini esterni e caricare script, immagini, font, player, analytics o altre risorse.

Il comportamento relativo a cookie, storage e tracciamento dipende dal provider, dalla configurazione, dal browser e dal contesto.

Prima di integrare un servizio esterno conviene verificare:

• quali domini contatta;
• quali dati trasmette;
• se carica risorse prima dell’interazione;
• quali impostazioni privacy mette a disposizione;
• come si integra con la gestione del consenso del sito.

Il metodo di incorporamento non rende automaticamente innocuo ciò che viene caricato.

Perché title è importante per l’accessibilità

Per una persona che vede lo schermo, una mappa o un video sono spesso immediatamente riconoscibili.

Per chi utilizza uno screen reader il passaggio a un documento incorporato può essere meno evidente.

Per questo conviene fornire un titolo breve ma descrittivo:

<iframe
  src="https://example.com/mappa/"
  title="Mappa interattiva della sede">
</iframe>

La documentazione MDN su etichette e nomi accessibili raccomanda di assegnare un nome comprensibile ai frame.

title="iframe" comunica poco. Il testo dovrebbe descrivere cosa troverà l’utente entrando in quella risorsa.

Prestazioni: come evitare caricamenti inutili e CLS

Un singolo riquadro nell’interfaccia può nascondere il caricamento di un intero documento con script, font, immagini e richieste API.

L’impatto varia quindi molto da un servizio all’altro.

Quando usare loading="lazy"

L’attributo:

loading="lazy"

indica al browser che il caricamento può essere differito quando il contenuto non è immediatamente necessario.

Per esempio:

<iframe
  src="https://example.com/embed/"
  title="Video dimostrativo"
  loading="lazy"
  width="800"
  height="450">
</iframe>

È particolarmente utile per embed posizionati più in basso nella pagina.

Non deve però diventare un automatismo: se il componente è il contenuto principale visibile appena si apre la pagina, ritardarlo può peggiorare l’esperienza.

Un embed può caricare molte risorse

Il documento esterno può richiamare:

• fogli di stile;
• JavaScript;
• immagini;
• font;
• API;
• strumenti di misurazione;
• ulteriori documenti incorporati.

È quindi possibile che un componente apparentemente semplice abbia un costo molto superiore a quello suggerito dal suo spazio visivo.

Se una pagina contiene molti widget esterni, verifica con gli strumenti per sviluppatori quali richieste partono realmente e se tutte devono essere eseguite subito.

Come evitare il CLS riservando lo spazio

Se la pagina viene inizialmente renderizzata senza spazio sufficiente e il contenuto compare successivamente spingendo verso il basso gli elementi circostanti, può contribuire al Cumulative Layout Shift.

La soluzione è prevedere lo spazio prima del caricamento.

Per un video 16:9:

.iframe-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Per un modulo più alto puoi invece definire una min-height coerente con il contenuto.

Il principio non è usare sempre la stessa tecnica, ma evitare che il layout scopra le dimensioni soltanto dopo aver già mostrato il resto della pagina.

Iframe SEO: cosa può indicizzare Google davvero

Il rapporto iframe SEO viene spesso ridotto a due affermazioni opposte: “Google ignora tutto” oppure “il contenuto viene trattato come se fosse scritto direttamente nella pagina”.

Nessuna delle due descrive bene la situazione.

La risorsa incorporata rimane un documento separato e Google può elaborare sia la pagina principale sia quella caricata al suo interno.

Il contenuto incorporato non diventa automaticamente contenuto della pagina

Se mostri una pagina esterna non dovresti costruire la strategia pensando che tutto il suo testo diventi automaticamente equivalente al contenuto pubblicato direttamente nel tuo HTML.

Hai meno controllo sul documento, sulla disponibilità e sulle istruzioni di indicizzazione.

Quando un contenuto editoriale è centrale per soddisfare l’intento della pagina e lo controlli direttamente, pubblicarlo nel documento principale resta normalmente la soluzione più prevedibile.

L’incorporamento è più adatto a risorse che devono davvero restare autonome: player, mappe, moduli, applicazioni o documenti esterni.

Come Google tratta il documento incorporato

Google ha chiarito nei suoi SEO Office Hours dedicati agli iframe che i sistemi cercano generalmente di associare il contenuto della sottopagina alla pagina principale ai fini dell’indicizzazione.

Google precisa però che questa associazione non è garantita.

Non significa quindi che il documento sia invisibile al motore di ricerca, ma neppure che sia equivalente al markup scritto direttamente nella pagina parent.

Se una parte essenziale del search task dipende da questa associazione, stai facendo affidamento su un comportamento che Google stesso non garantisce.

noindex e indexifembedded: quando servono

Google supporta anche la direttiva indexifembedded.

È un caso avanzato pensato soprattutto per chi controlla la risorsa che viene incorporata.

Una pagina può avere:

<meta name="robots" content="noindex,indexifembedded">

per indicare che non deve essere indicizzata autonomamente ma può essere considerata quando compare all’interno di un’altra pagina.

La documentazione Search Central su indexifembedded precisa che la direttiva funziona insieme a noindex.

Se stai incorporando una mappa o un player di terze parti, normalmente non controlli queste istruzioni: appartengono al provider.

Perché “gli iframe fanno male alla SEO” è una semplificazione

Non c’è una regola utile secondo cui la sola presenza dell’elemento provochi un problema SEO.

I problemi possono nascere invece quando:

• tutto il contenuto importante vive nella risorsa esterna;
• l’embed rallenta la pagina;
• provoca layout shift;
• dipende da un servizio instabile;
• funziona male su mobile;
• sostituisce senza necessità contenuto HTML che potresti gestire direttamente.

Sono conseguenze dell’implementazione, non una penalizzazione automatica collegata al tag.

La domanda corretta è:

quale parte del search task sto delegando a un documento separato e quali conseguenze produce questa scelta?

Iframe WordPress: Embed, HTML o plugin?

Sul tema iframe WordPress, il primo errore da evitare è pensare che serva sempre un plugin.

Il CMS offre già più strade e la scelta dipende dal servizio che vuoi incorporare.

Prima verifica se basta il blocco Embed

La documentazione del blocco Embed di WordPress permette, per i provider supportati, di incollare direttamente l’URL del contenuto.

Il flusso è semplice:

1. copia l’URL;
2. aggiungi il blocco Embed;
3. incolla l’indirizzo;
4. verifica l’anteprima.

Se funziona correttamente, non hai bisogno di installare un plugin soltanto per ottenere lo stesso risultato.

Quando incollare direttamente il codice HTML

Se il provider consegna espressamente un tag <iframe>, puoi utilizzare un blocco HTML personalizzato.

La documentazione WordPress sul blocco Custom HTML segnala però che gli utenti privi della capability unfiltered_html sono soggetti alla sanitizzazione e alcuni tag possono essere rimossi al salvataggio.

Se incolli il codice e poi scompare, quindi, non dare subito per scontato che il problema sia nel servizio esterno.

Controlla:

• ruolo e capability dell’utente;
• sanitizzazione;
• eventuali plugin di sicurezza;
• Content Security Policy;
• markup effettivamente salvato;
• console del browser.

Quando un plugin può avere senso

Un plugin diventa utile quando aggiunge una funzione concreta:

• gestione centralizzata di molti embed;
• shortcode riutilizzabili;
• regole responsive;
• lazy loading specifico;
• configurazioni ripetibili;
• integrazioni particolari con il CMS.

Ha meno senso installarlo soltanto per un singolo codice che WordPress può già gestire.

Soprattutto, un plugin non può neutralizzare le policy di sicurezza imposte dal server esterno.

Google Maps, Google Forms e video: casi pratici diversi

La tecnologia di base può essere la stessa, ma l’implementazione cambia in funzione del servizio.

Per un modulo puoi seguire una procedura specifica per incorporare Google Forms in WordPress, utilizzando il codice messo a disposizione da Google.

Per una sede fisica, invece, puoi seguire i passaggi per integrare Google Maps in WordPress.

Un player video può avere altre esigenze relative a proporzioni, fullscreen, autoplay, privacy e caricamento differito.

Per questo conviene partire dal codice ufficiale del servizio e applicare successivamente i controlli generali descritti in questa guida.

Iframe o alternativa: come scegliere

La scelta finale può essere ricondotta a una domanda:

il contenuto deve rimanere una risorsa autonoma oppure deve diventare parte nativa della pagina?

Scenario	Soluzione da valutare per prima	Motivo
Provider offre un embed ufficiale	Embed/iframe del provider	La risorsa è progettata per essere incorporata
Video o contenuto supportato dal CMS	Blocco Embed	Meno markup manuale
Testo editoriale che controlli	HTML o blocchi nativi	Maggiore controllo su struttura e indicizzazione
Componente interno del tuo sito	HTML/CSS/JavaScript o componente	Eviti un documento separato non necessario
Dati esterni da mostrare con un’interfaccia personalizzata	API, se disponibile	Mantieni il controllo della presentazione
Pagina che vieta il framing	Link, API o integrazione ufficiale	Il divieto non può essere neutralizzato dal markup

Quando mantenere l’iframe

Mantienilo quando risolve bene il problema:

• il provider lo supporta;
• il contenuto deve restare autonomo;
• il layout funziona su mobile;
• le prestazioni sono accettabili;
• privacy e permessi sono stati valutati;
• l’embed è accessibile;
• non stai delegando inutilmente il contenuto principale.

Non serve sostituire una soluzione funzionante soltanto perché esiste una tecnologia più complessa.

Quando è meglio un embed nativo, un blocco WordPress o un componente

Se il CMS riconosce direttamente il provider, un blocco Embed può semplificare la gestione.

Se il contenuto viene prodotto dal tuo sito, un componente nativo può integrarsi meglio con design, responsive layout e accessibilità.

Se ti servono soprattutto dati provenienti da un servizio esterno, un’API può essere più appropriata rispetto al caricamento di un’intera pagina.

La soluzione più sofisticata non è automaticamente la migliore. Conta il controllo che serve davvero.

Quando incorporare un’intera pagina crea più problemi che vantaggi

Una normale pagina esterna non progettata per essere visualizzata dentro un altro sito può produrre:

• header e menu duplicati;
• cookie banner annidati;
• scroll multipli;
• layout inutilizzabile su mobile;
• login problematici;
• policy che bloccano improvvisamente il caricamento;
• navigazioni difficili da prevedere.

In questi casi non stai realmente integrando un componente: stai cercando di mostrare un sito dentro un altro sito.

Un collegamento diretto, un embed ufficiale o un’integrazione tramite API possono essere più solidi.

Conclusione

Un iframe è utile quando devi incorporare un documento che ha senso mantenere separato dalla pagina principale. Video, mappe, moduli e applicazioni esterne sono gli esempi più comuni.

Il markup iniziale è semplice. La parte che richiede maggiore attenzione riguarda responsive design, autorizzazioni, sicurezza, HTTPS, performance, accessibilità e comportamento dei motori di ricerca.

Se il provider offre un codice embed ufficiale, parti da quello. Se invece il contenuto è tuo e costituisce una parte centrale della pagina, verifica prima se abbia davvero bisogno di vivere in un documento separato.

Il criterio più utile resta questo: usa l’iframe quando serve realmente un confine tra due documenti, non soltanto perché è il sistema più rapido per visualizzare qualcosa.