Che cos'è l’iframe e come lo usi nel tuo sito web?

Ti sei mai chiesto se esiste un modo semplice per aggiungere un video o una mappa alle tue pagine web da un’altra fonte? La risposta è sì, e si chiama iframe.

In questo articolo cos’è un iframe, come funziona, le sue applicazioni pratiche e come aggiungerlo alle tue pagine web.

Gli inline frame facilitano un contesto di navigazione nidificato in cui un browser visualizza più aree interattive incorporate l’una nell’altra su una singola pagina web. Questo tipo di impostazione abilita l’effetto di una pagina all’interno di una pagina e molti altri. Di seguito è riportato un esempio di iframe che visualizza un video di YouTube.

A cosa servono gli iframe

Gli inline frame hanno molte applicazioni pratiche che estendono il design standard e la funzionalità di una pagina web. I casi d’uso più comuni includono:

• Incorporamento di contenuti multimediali – Gli elementi iframe sono comunemente usati per incorporare contenuti multimediali come video, file audio e animazioni da piattaforme come YouTube, Vimeo e SoundCloud. Ciò consente agli utenti di interagire con il contenuto direttamente sul sito web visitato senza allontanarsi dalla pagina.
• Integrazione di applicazioni di terze parti – Gli sviluppatori utilizzano gli iframe per integrare facilmente le applicazioni di terze parti nei loro siti web. Ad esempio, un’azienda può incorporare un widget di Google Maps per mostrare la sua posizione, o un sito di e-commerce può includere un gateway di pagamento per le transazioni.
• Visualizzazione di pubblicità – Gli iframe sono una scelta popolare per la visualizzazione di pubblicità su pagine web. Possono separare il contenuto dell’annuncio dal contenuto della pagina principale, il che aiuta nella gestione degli script degli annunci e nel tracciamento delle visualizzazioni o dei click in modo indipendente.
• Caricamento di contenuti esterni – Gli iframe possono caricare contenuti da fonti esterne, come feed di notizie, aggiornamenti meteo o post sui social media. Pertanto, arricchiscono il sito web host con contenuti dinamici senza complesse integrazioni nel backend.
• Creare un sito all’interno di un sito – Gli iframe possono creare un’esperienza di “sito all’interno di un sito”, in cui i visitatori possono navigare su un altro sito web senza lasciare la pagina originale. Questo è particolarmente utile per ospitare micrositi o cataloghi di prodotti.
• Isolare il contenuto specifico del browser – Gli sviluppatori possono utilizzare gli iframe per isolare un contenuto che si comporta in modo diverso in vari browser, assicurandosi che non influisca sul resto della pagina. Questa può essere una soluzione temporanea mentre viene sviluppata una soluzione permanente.
• Migliorare Design e Layout – gli iframes possono aiutare a creare layout di pagine web più complessi. I designer possono usarli per incorporare elementi interattivi o fissi all’interno di una pagina, come un lettore musicale o una chat.
• Semplificare gli aggiornamenti dei contenuti – Quando lo stesso contenuto deve apparire su più pagine, è possibile utilizzare un iframe per centralizzare il contenuto in un’unica posizione. In questo modo, gli aggiornamenti al contenuto devono essere eseguiti solo una volta e le modifiche si rifletteranno automaticamente ovunque l’iframe sia incorporato.

Esempi di iframe

Gli iframe hanno molte applicazioni pratiche oltre a un video o un’immagine all’interno di una pagina web. Ecco alcuni esempi comuni di utilizzo di un iframe.

Video incorporato

Questa è probabilmente l’applicazione più popolare dell’iframe. Invece di mettere a dura prova il tuo server per la riproduzione di video, puoi incorporare video ospitati su un servizio dedicato come YouTube o Vimeo.

Mappa incorporata

Google Maps rende più facile per i tuoi clienti trovare la sede della tua attività. Puoi facilmente incorporare Google Maps con la tua posizione salvata utilizzando gli iframe.

Pagina nella pagina

Se desideri incorporare una funzionalità specifica di un altro sito nelle tue pagine web, puoi incorporare una parte selezionata o un’intera pagina di questo sito web con un iframe.

Come incorporare un elemento iframe in un sito web

Il metodo standard per aggiungere un elemento iframe è inserire il tag iframe nel codice HTML di una pagina web. Tuttavia, a seconda dell’applicazione del sito web o delle opzioni fornite dalla fonte, potrebbero esserci altri metodi più semplici e convenienti. Di seguito, esamineremo i modi più comuni.

Aggiungere un tag iframe a un documento HTML

Questo è il modo universale per aggiungere un iframe a una pagina web. È necessario modificare il codice HTML della pagina e inserire il tag <iframe> che crea l’area in cui il contenuto esterno verrà visualizzato.

Di seguito è riportato un esempio di iframe tag HTML.

<iframe src="https://www.youtube.com/embed/mij0fmZ7lGw?si=g5ghgoRcoUou5e9R" width="560" height="315" title=" YouTube video player"></iframe>

Analizziamo gli elementi che compongono il tag iframe.

• Il tag di apertura <iframe> identifica l’elemento come un iframe.
• L’attributo iframe src definisce l’indirizzo URL della sorgente iframe. La risorsa esterna trovata su questo indirizzo verrà visualizzata nella sezione iframe sulla pagina web.
• L’ attributo height definisce la dimensione verticale dell’elemento iframe. Puoi utilizzare una dimensione fissa (pixel) o automatica (impostata come percentuale della dimensione dello schermo).
• Gli attributi width definiscono la larghezza dell’iframe. Simile all’altezza, la larghezza può assumere valori fissi o automatici.
• L’ attributo title fornisce una descrizione dell’iframe, che può essere utilizzata dai motori di ricerca e dai visitatori che utilizzano tecnologie di assistenza.
• Il tag </iframe> chiude il codice iframe.

L’esempio contiene solo una piccola parte dell’intero set di attributi iframe. Ci sono vari altri attributi che modificano le proprietà dell’iframe in vari modi, come l’attributo sandbox, l’attributo name, l’attributo srcdoc, l’attributo allow, l’attributo target, l’attributo loading e molti altri.

Alcuni attributi come frameborder e seamless sono deprecati in HTML5 e dovrebbero essere gestiti con la proprietà CSS border. È sempre una buona pratica fare riferimento alle ultime documentazione o specifiche HTML per informazioni più aggiornate sugli attributi degli iFrame e sul loro utilizzo.

Puoi anche utilizzare attributi non specifici degli iframe, come l’attributo style. Assegna stili CSS in linea per un elemento all’interno del contenuto dell’iframe. Tuttavia, è consigliabile definire gli stili in fogli di stile CSS separati per una migliore organizzazione e riusabilità.

Copiare il codice iframe dalla sorgente

Alcuni siti web come YouTube facilitano l’integrazione dei contenuti negli iframe. Di solito forniscono un codice iframe da copiare e incollare nella tua pagina web.

Se desideri incorporare video di YouTube, utilizza i seguenti passaggi.

1. Nella pagina del video, clicca sul pulsante Condividi.
   

   

2. Nella seguente finestra pop-up, seleziona l’opzione Incorpora.
   

   

3. Apparirà una nuova finestra, che mostra l’intero tag iframe contenente l’URL di incorporamento di YouTube. Puoi evidenziare e copiare il codice o cliccare sul pulsante Copia nell’angolo in basso a destra.
   

   

4. Infine, apri la tua pagina web in un editor HTML e incolla il codice dove vuoi che appaia il contenuto dell’iframe.
   

   

Utilizzare i plugin di WordPress

I metodi sopra funzionano per qualsiasi tipo di applicazione del sito web. Tuttavia, se il tuo sito web è stato creato con WordPress, puoi aggiungere contenuti incorporati tramite iframe utilizzando un plugin. Uno di questi è Advanced iFrame.

Una volta installato, il plugin creerà una sezione nel menu di WordPress in cui è possibile controllare le sue impostazioni. Accedi alla bacheca di WordPress e seleziona Advanced iFrame dal menu di sinistra.

All’interno del pannello del plugin, apri la sezione Basic Settings. Nel campo URL, inserisci l’indirizzo della sorgente esterna da visualizzare nell’elemento iframe HTML.

Se il tuo tema non è basato su blocchi, puoi aggiungere l’elemento iframe inserendo il suo shortcode nella pagina web. Per generare lo shortcode, clicca sul pulsante Generate a shortcode for the current settings. Sotto il pulsante, vedrai lo shortcode generato che potrai poi copiare.

Quindi, modifica la pagina o pubblica con il tuo editor preferito. Scegli la posizione in cui desideri incorporare il contenuto e incolla lo shortcode.

Se il tuo tema è basato su blocchi come Gutenberg, inserire un elemento iframe è ancora più semplice. Non è necessario generare uno shortcode. Basta creare un blocco per visualizzare il contenuto con l’iframe. Quindi, scegli il widget Advanced iFrame e il contenuto HTML definito nelle impostazioni del plugin verrà automaticamente inserito.

Quali sono i vantaggi dell’utilizzo degli iframe

Gli iframe offrono diversi vantaggi che li rendono uno strumento prezioso per gli sviluppatori web e i creatori di contenuti. Ecco alcuni dei principali vantaggi:

Arricchimento dei contenuti

Gli iFrame forniscono un modo semplice per arricchire il tuo sito web con contenuti aggiuntivi senza ospitarlo sul tuo server. Incorporando contenuti come video, mappe o feed di social media, puoi offrire ai tuoi utenti un’esperienza più coinvolgente e informativa. Questo aggiunge valore al tuo sito e mantiene gli utenti sulla tua pagina più a lungo mentre interagiscono con il contenuto incorporato.

Esperienza utente

Gli inline frame possono migliorare significativamente l’esperienza dell’utente sul tuo sito web. Usandoli, puoi incorporare varie funzionalità, come moduli, calcolatrici o persino giochi, senza che gli utenti debbano lasciare il tuo sito. Questa perfetta integrazione garantisce agli utenti un’esperienza fluida e ininterrotta durante la navigazione sul tuo sito web.

Flessibilità

Gli iFrame sono incredibilmente flessibili e possono essere utilizzati in molti modi. Possono essere ridimensionati per adattarsi a qualsiasi parte di una pagina web e possono essere resi reattivi per funzionare su diversi dispositivi. Questa adattabilità rende gli iframes una scelta versatile per i designer che cercano di creare un sito web dinamico e reattivo.

Gestione efficace delle risorse del server

Incorporando contenuti da altre fonti, puoi risparmiare sulle risorse del server e sulla larghezza di banda. Poiché i contenuti incorporati sono ospitati su server esterni, il tuo sito web non sopporta il carico di hosting di tali contenuti. Ciò può portare a un miglioramento delle prestazioni della pagina e a una riduzione dei costi di hosting.

Svantaggi e rischi dell’utilizzo degli iframes

Nonostante i loro vantaggi, gli iframe presentano anche alcuni svantaggi e rischi che devono essere considerati attentamente:

Rischi di exploit di sicurezza

Una delle maggiori preoccupazioni con gli iframe è la sicurezza. Gli iframe possono essere utilizzati maliziosamente per eseguire attacchi di clickjacking, in cui i click di un utente vengono dirottati per eseguire azioni non intenzionali su un altro sito. Inoltre, se il contenuto di un iframe non proviene da una fonte attendibile, può potenzialmente introdurre vulnerabilità nel tuo sito web.

Rischi di violazione del copyright

Quando si incorporano contenuti da fonti esterne, c’è il rischio di violazione del copyright se non si ottengono le autorizzazioni appropriate. È importante assicurarsi che il contenuto che stai incorporando possa essere condiviso e che tu stia rispettando i requisiti di licenza.

Effetti negativi sui punteggi SEO

Gli iframe possono danneggiare la SEO del tuo sito web se non utilizzati correttamente. I motori di ricerca potrebbero avere difficoltà a indicizzare il contenuto all’interno di un iframe, quindi potrebbe non contribuire al posizionamento del tuo sito nei motori di ricerca. Inoltre, un uso eccessivo degli iframe può ingombrare la tua pagina web. Questo può portare a una scarsa esperienza utente, influenzando indirettamente le tue prestazioni SEO.

Riepilogo

Gli iframe sono un modo pratico per migliorare il tuo sito web. Consentono di incorporare video, mappe o intere pagine web in un sito web per migliorarne la funzionalità e il design. Tuttavia, è necessario utilizzare gli iframe con cautela in quanto possono portare a potenziali rischi e complicazioni per la sicurezza, come l’incorporamento di pagine web che possono infettare i computer dei visitatori o contenuti che violano i diritti d’autore.

Dopo aver letto questa guida, dovresti avere una migliore comprensione di cosa sono gli iframe, a cosa servono e quali sono i loro pro e contro. Ciò ti consentirà di ottenere il massimo dagli iframe evitando qualsiasi potenziale danno.