Se avete mai guardato un video di YouTube incorporato in un post di un blog o interagito con un widget di Google Maps su una pagina di contatto, avete già visto un iFrame in azione.
L'elemento HTML iFrame è uno degli strumenti più potenti e meno appariscenti del web, utilizzato quotidianamente da sviluppatori e proprietari di siti per incorporare contenuti da fonti esterne direttamente all'interno di una pagina web senza che gli utenti si accorgano della giunzione
In questa guida, analizzeremo cos'è effettivamente un iFrame, come funzionano i suoi attributi principali, come aggiungerlo al tuo sito e in che modo gli iFrame possono danneggiare la SEO o creare rischi per la sicurezza se non si presta attenzione.
Cos'è un iFrame: la spiegazione del frame inline
Un iFrame, abbreviazione di inline frame, è un elemento HTML che consente di incorporare un altro documento HTML all'interno della pagina web corrente.
Il modo più semplice per immaginarlo è come una piccola finestra del browser autonoma, annidata all'interno della pagina esistente. Il contenuto all'interno di questa finestra viene caricato e funziona in modo completamente indipendente dal resto del documento HTML.
Gli iframe HTML sono presenti sul web da decenni, ma continuano ad essere ampiamente utilizzati nello sviluppo web moderno perché il problema principale che risolvono non è cambiato.
Spesso è necessario visualizzare contenuti che si trovano altrove senza reindirizzare l'utente fuori dalla propria pagina.
La caratteristica che rende l'elemento iFrame tecnicamente unico è la creazione di un contesto di navigazione separato. Ciò significa che il documento incorporato possiede un proprio albero DOM, un proprio ambito JavaScript e un proprio CSS .
Nulla all'interno dell'iFrame viene visualizzato nella pagina principale, e nulla dalla pagina principale viene visualizzato all'interno.
Questo isolamento è garantito dalla politica di stessa origine del browser, che limita l'accesso agli script provenienti da contesti diversi a meno che sia la pagina principale che il documento incorporato non condividano lo stesso dominio.
Desideri funzionalità avanzate per il tuo sito WordPress?
L'integrazione di strumenti, app esterne e contenuti dinamici richiede un'attenta configurazione. Seahawk Media ti aiuta a implementare le funzionalità del tuo sito web, mantenendo al contempo il tuo sito WordPress veloce, sicuro e scalabile.
A cosa servono gli iframe: esempi pratici comuni
La maggior parte delle persone si imbatte negli iframe HTML più volte al giorno senza rendersene conto. Questa tecnologia è talmente integrata nel design web moderno da risultare praticamente invisibile al visitatore medio. Ecco alcuni degli utilizzi più pratici e comuni che troverete sul web.
Incorporare video di YouTube
Questo è l'esempio di iFrame più riconoscibile sul web. Quando un video di YouTube viene riprodotto all'interno di un articolo di blog o di una pagina prodotto, viene caricato tramite un iFrame che punta all'URL di incorporamento di YouTube.
Il video risiede sui server di YouTube e viene trasmesso in streaming tramite la loro CDN, quindi il tuo hosting non sostiene alcun costo di banda.
I visitatori guardano il video direttamente sulla tua pagina senza dover abbandonare il sito, mantenendo così l'interazione sul tuo sito anziché reindirizzarla a YouTube.
Visualizzazione di Google Maps nelle pagine di localizzazione
Qualsiasi mappa interattiva incorporata in un sito web viene quasi sempre visualizzata tramite un iFrame. Google Maps genera un codice sorgente iframe pronto all'uso per qualsiasi località, che è sufficiente incollare nel documento HTML.
Per le attività commerciali locali, si tratta di un'aggiunta pratica alle pagine di contatto e di localizzazione, che aiuta i clienti a raggiungervi senza dover abbandonare il vostro sito.
Integrazione di strumenti e moduli di pagamento di terze parti
I gateway di pagamento, i calendari di prenotazione, i widget di chat in tempo realee gli strumenti per i sondaggi vengono comunemente forniti tramite iFrame.
Il fornitore ospita la funzionalità sui propri server sicuri. La tua pagina web la incorpora tramite l'elemento iFrame, il che significa che i dati sensibili, come i dettagli della carta di pagamento, vengono gestiti interamente all'interno dell'ambiente del fornitore, non del tuo.
Questo approccio evita complessi sviluppi di backend e riduce la tua responsabilità per i dati elaborati.
Pubblicazione di annunci e feed esterni
Le reti pubblicitarie display come Google AdSense pubblicano annunci tramite iframe, isolando gli script pubblicitari dalla tua pagina per evitare interferenze.
Anche i feed in tempo reale dei social media, i widget meteo e i notiziari scorrevoli vengono comunemente visualizzati in questo modo, perché l'iFrame consente ai contenuti esterni di aggiornarsi indipendentemente dal resto della pagina.
Attributi degli iframe che devi assolutamente comprendere
Molte piattaforme generano automaticamente il codice iFrame, ma conoscere la funzione di ciascun attributo può evitare molta confusione in caso di problemi o comportamenti imprevisti. Ecco una spiegazione semplice e chiara degli attributi più importanti.
L'attributo src: la parte più importante
L'attributo src di un iframe specifica l'URL del documento o della risorsa esterna da caricare all'interno del frame. Senza un attributo src valido, l'iframe non carica nulla.
Il valore deve essere un URL HTTPS completo che punti a una pagina accessibile pubblicamente o a un endpoint di incorporamento. Piattaforme come YouTube e Google Maps generano URL di incorporamento specifici che differiscono dai loro URL standard del browser.
Utilizza sempre l'URL di incorporamento nell'attributo src dell'iframe, non l'URL nella barra degli indirizzi standard. Un tipico tag iframe ha questo aspetto:
<iframe src="https://www.youtube.com/embed/mij0fmZ7lGw" width="560" height="315" title="Video di YouTube incorporato"></iframe>Larghezza e altezza: dimensioni e reattività
Gli attributi width e height definiscono le dimensioni dell'iFrame sulla tua pagina.
È possibile utilizzare dimensioni fisse in pixel, ma per un design responsivo l'approccio migliore è quello di controllare larghezza e altezza tramite CSS utilizzando larghezze basate su percentuali e una regola di proporzioni.
Le dimensioni fisse, se non gestite correttamente, compromettono la compatibilità con i dispositivi mobili, quindi pensateci bene prima di inserire le dimensioni in pixel direttamente nel codice di incorporamento.
L'attributo Titolo: Obbligatorio per l'accessibilità
L'attributo title fornisce un'etichetta descrittiva all'iFrame. I lettori di schermo lo utilizzano per indicare agli utenti ipovedenti il contenuto di un iFrame prima che vi accedano.
i motori di ricerca, incluso Google, lo utilizzano per comprendere lo scopo della risorsa incorporata. Ometterlo rappresenta sia una mancanza di accessibilità sia un segnale SEO perso.
Ogni iFrame pubblicato deve avere, senza eccezioni, un attributo title chiaro e preciso.
L'attributo Sandbox: il tuo primo livello di sicurezza
L'attributo sandbox impone restrizioni alle azioni consentite al documento incorporato.
Quando si aggiunge la sandbox senza alcun valore, l'iFrame viene eseguito in modalità di massima restrizione, senza script, moduli o popup consentiti. È possibile concedere le autorizzazioni in modo selettivo utilizzando valori specifici.
Il valore allow-scripts consente l'esecuzione di JavaScript all'interno dell'iFrame, mentre allow-forms consente l'invio di moduli.
Utilizzare una sandbox per qualsiasi contenuto incorporato in un iframe di cui non si ha il pieno controllo è un modo semplice per ridurre i rischi nel caso in cui la fonte risulti compromessa.
sandbox="consenti script consenti moduli"L'attributo Allow: autorizzazioni delle funzionalità del browser
L'attributo `allow` controlla a quali funzionalità del browser può accedere il documento incorporato, come la modalità a schermo intero, la fotocamera, il microfono e la riproduzione automatica.
Se si desidera consentire agli utenti di attivare la modalità a schermo intero su un video incorporato, è necessario aggiungere allow="fullscreen" al tag.
Mentre la modalità sandbox regola ciò che il codice incorporato può fare a livello di programmazione, la modalità allow regola quali API del browser e funzionalità hardware l'elemento iFrame è autorizzato ad accedere.
L'attributo di caricamento: proteggi la velocità della tua pagina
Aggiungendo loading="lazy" si indica al browser di posticipare il caricamento dell'iFrame fino a quando l'utente non si avvicina ad esso scorrendo la pagina, anziché caricarlo immediatamente all'apertura della pagina.
Questo è uno dei miglioramenti più semplici che puoi apportare al tuo Core Web Vitals , soprattutto sulle pagine con mappe o video incorporati posizionati nella parte inferiore della pagina.
Non costa nulla e non richiede altre modifiche al codice esistente o alla configurazione dell'hosting.
Come aggiungere un iFrame al tuo sito web?
Aggiungere un iFrame al tuo sito web è più semplice di quanto sembri. A seconda di come è strutturato il tuo sito, hai a disposizione tre metodi semplici tra cui scegliere.
Metodo 1: Aggiungere il tag direttamente all'HTML
Apri il codice sorgente HTML della tua pagina web e inserisci il tag iFrame nella posizione in cui desideri che appaia il contenuto esterno.
- Inserisci l'URL di incorporamento nell'attributo src dell'iframe, imposta la larghezza e l'altezza, includi un attributo title descrittivo e aggiungi gli attributi sandbox e loading dove necessario.
- Salva e pubblica la pagina: il browser caricherà automaticamente il contenuto esterno all'interno dell'iFrame.
Questo metodo funziona su qualsiasi sito web, indipendentemente dalla piattaforma su cui è ospitato.
Metodo 2: Copia del codice di incorporamento dalla piattaforma di origine
La maggior parte delle principali piattaforme genera automaticamente il codice iFrame completo.
- Su YouTube, fai clic su Condividi sotto il video, quindi seleziona Incorpora e YouTube genererà il tag completo con l'attributo src dell'iframe corretto già precompilato.
- Google Maps segue lo stesso schema anche nel suo menu Condividi.
- Spotify, le piattaforme di social mediae molti strumenti SaaS offrono la stessa generazione di codice di incorporamento con un solo clic. Basta copiarlo, incollarlo nel documento HTML e il gioco è fatto.
Questo è il metodo più veloce per chi non è uno sviluppatore e copre i casi d'uso standard senza richiedere alcuna programmazione manuale.
Metodo 3: Aggiungere un iFrame in WordPress senza modificare il codice
Se il tuo sito è basato su WordPress, un plugin come Advanced iFrame ti permette di configurare l'URL di incorporamento tramite un pannello di impostazioni.
- Inserisci l'iFrame utilizzando uno shortcode nei temi classici, oppure un blocco dedicato nell'editor Gutenberg.
- Ottieni tutte le funzionalità di un iframe senza scrivere una singola riga di codice HTML.
Per i team che lavorano su configurazioni di incorporamento personalizzate più complesse, Seahawk Media offre supporto pratico per lo sviluppo WordPress , aiutando a implementare e ottimizzare gli iFrame come parte di un'architettura del sito più ampia.
Gli iframe danneggiano la SEO? Ecco la risposta sincera
Gli iframe non danneggiano automaticamente la SEO, ma un uso improprio può assolutamente farlo. La distinzione è importante e si riduce a capire come Google gestisce effettivamente i contenuti incorporati.
Google è in grado di indicizzare gli iframe, ma il merito va alla fonte
Google è in grado di elaborare i contenuti all'interno di un iFrame, ma il valore SEO di tali contenuti appartiene in genere all'URL di origine, non alla pagina che li incorpora.
Dal punto di vista di Google, inserire un video di YouTube nel tuo post del blog non arricchisce l'articolo con nuove parole chiave.
La tua pagina trae vantaggio indirettamente attraverso segnali di coinvolgimento come un tempo di permanenza più lungo sulla pagina e una frequenza di rimbalzo, ma il contenuto dell'iFrame in sé non contribuisce al posizionamento della tua pagina nello stesso modo in cui lo fa il contenuto HTML nativo.
Qualsiasi elemento per cui si desidera ottenere un buon posizionamento deve essere presente come codice HTML nativo sulla pagina, mai esclusivamente all'interno di un iFrame.
iFrame e Core Web Vitals
Gli iframe pesanti che si caricano immediatamente all'apertura della pagina possono ridurre il Largest Contentful Paint e causare spostamenti del layout se le dimensioni di larghezza e altezza non vengono definite esplicitamente prima del caricamento del contenuto.
La soluzione è semplice: utilizzare sempre loading="lazy", impostare sempre dimensioni esplicite ed evitare di sovrapporre più iFrame di grandi dimensioni su una singola pagina.
Ogni iframe aggiuntivo rappresenta un'ulteriore richiesta HTTP esterna e il costo in termini di prestazioni si moltiplica rapidamente su una pagina che sta già caricando altre risorse.
Rischi per la sicurezza degli iframe e come proteggere il tuo sito
Gli iframe sono potenti, ma comportano rischi che non puoi permetterti di ignorare. Ecco cosa può andare storto e come assicurarti che non accada sul tuo sito.
Clickjacking: l'attacco iframe più comune
Il clickjacking è il principale rischio per la sicurezza associato agli iframe. Un malintenzionato carica la tua pagina all'interno di un iframe trasparente sovrapposto a una pagina ingannevole sotto il suo controllo.
Quando gli utenti pensano di cliccare su qualcosa di sicuro, in realtà attivano delle azioni sul tuo sito senza rendersene conto.
La difesa consiste nell'intestazione di risposta HTTP, che indica ai browser se la tua pagina può essere caricata all'interno di un iFrame su altri siti web.
Impostandolo su SAMEORIGIN si impedisce ai siti esterni di inserire i tuoi contenuti in un frame.
L'intestazione Content-Security-Policy con la direttiva frame-ancestors è l'approccio moderno preferito e offre un controllo più granulare sui domini autorizzati a incorporare le tue pagine.
Cross-Site Scripting e fonti non attendibili
L'inserimento di un iFrame da una fonte non attendibile può introdurre di cross-site scripting se il contenuto incorporato esegue codice JavaScript dannoso che tenta di interagire con la pagina principale.
L'attributo sandbox è la principale difesa lato client. Limitando le azioni consentite al documento incorporato, si riducono i danni anche in caso di compromissione del codice sorgente.
Inoltre, assicurati sempre che l'attributo src di ogni iframe utilizzi https anziché http.
L'inserimento di contenuti non protetti in una pagina HTTPS attiva avvisi di contenuto misto nei browser moderni, il che interrompe l'iFrame e compromette immediatamente la fiducia dell'utente.
Considerazioni finali
Gli iframe sono uno strumento davvero utile se usati con criterio. Permettono di arricchire le pagine con video, mappe, strumenti di prenotazione e contenuti live senza i costi di hosting o di sviluppo necessari per creare queste funzionalità autonomamente.
Le regole sono semplici: includi sempre l'attributo title, usa l'attributo sandbox per le fonti non attendibili, applica loading="lazy" per proteggere la velocità della pagina e mantieni i contenuti che migliorano il posizionamento in HTML nativo anziché bloccati all'interno di un iFrame, nel qual caso i motori di ricerca non li attribuiranno alla tua pagina.
Hai bisogno di aiuto per implementare gli iFrame o ottimizzare il tuo sito web WordPress per prestazioni e SEO?
Seahawk Media offre servizi dedicati di sviluppo WordPress e gestione di siti web per agenzie e aziende in crescita.
Domande frequenti sugli iframe
È sicuro utilizzare gli iframe sul mio sito web?
Sì, con le dovute precauzioni. Incorpora solo contenuti provenienti da fonti attendibili e protette da HTTPS. Utilizza l'attributo sandbox per limitare le funzionalità del contenuto incorporato.
Proteggi le tue pagine dall'essere incorporate in frame da altri utilizzando l'intestazione X-Frame-Options. Gli iFrame non sono di per sé pericolosi; è l'uso imprudente che crea il vero rischio.
L'utilizzo di un iFrame rallenta il mio sito web?
Sì, è possibile. Un iFrame pesante che si carica immediatamente aumenta il tempo di caricamento iniziale della pagina e influisce di Core Web Vitals . L'aggiunta di `loading="lazy"` posticipa il caricamento fino a quando l'utente non scorre la pagina in prossimità dell'iFrame.
Imposta sempre valori espliciti per larghezza e altezza per evitare spostamenti del layout durante il caricamento del contenuto. Questi due semplici passaggi risolvono la maggior parte dei problemi di prestazioni comuni degli iframe senza bisogno di altre modifiche.
Google è in grado di indicizzare i contenuti all'interno di un iFrame?
Google è in grado di indicizzare i contenuti degli iFrame, ma il merito SEO va all'URL di origine, non alla pagina che li incorpora. I contenuti per i quali si desidera ottenere un buon posizionamento devono essere presenti nel codice HTML nativo della pagina stessa, non all'interno di un iFrame.
Gli iframe funzionano sui dispositivi mobili?
Sì, ma richiedono un trattamento CSS responsivo per essere visualizzati correttamente. Le larghezze fisse in pixel vanno in overflow sugli schermi piccoli e compromettono il layout. Utilizza larghezze basate su percentuali e una regola di proporzioni in CSS per mantenere le proporzioni corrette su tutti i dispositivi.
È sempre consigliabile eseguire i test su dispositivi mobili reali, anziché limitarsi a ridimensionare una finestra del browser desktop, poiché il comportamento può variare in modi che si manifestano solo su hardware reale.
