Seguici su Telegram, ne vale la pena ❤️ ➡ @trovalost
Vai al contenuto

Che cos’è un iframe, e perchè non dovresti farne uso

Tag:

Definizione iframe e uso

Il tag HTML <iframe> sta per inline frame (telaio o cornice in linea, in italiano) e viene comunemente utilizzato al fine di embeddare o includere un sito web dentro un altro. Dotato di particolari attributi per stilizzarlo via CSS, è un elemento HTML che richiede primariamente l’uso di un titolo (attributo title), che rappresenta il titolo dell’iframe e che viene “letto” sia dai browser per l’usabilità  che dai motori di ricerca per “capirne” il contenuto.

Esempio di iframe e problemi di compatibilità

Un iframe permette di includere un contenuto di un dominio1.it all’interno di dominio2.it, consentendogli cosଠimplicitamente di essere embeddato o incluso nella pagina. Di seguito vediamo l’uso di un iframe:

<iframe src="https://google.it" title="Questo è un iframe per includere Google su questa pagina"></iframe>

ed il suo risultato visuale:

In realtà  qui sopra non dovreste poter vedere nulla: nelle nuove versioni di Firefox e Chrome, ad esempio, emerge da subito un problema: il contenuto, per motivi di sicurezza e di policy del browser, non viene mostrato affatto.

Già  questo basterebbe a renderne sconsigliabile l’uso, di suo, dato che si tratta di un tag poco funzionale e tanto “sbrigativo” quanto inefficace. A livello di browser, viene formalmente ancora supportato da tutti i browser, per quanto poi alcuni – specie se impostati in modo restrittivo da parte dell’utente – diano da qualche tempo problemi di caricamento, interazione e visualizzazione. In teoria è supportato, in altri termini, ma in pratica no.

Vale la pena di approfondire i “perchè” di questa situazione, perchè dipende dal sito che stiamo provando ad embeddare alla fine: il problema di fondo, nel caso di un iframe con Google.it, è che il sito in questione invia degli header HTTPS di tipo

X-Frame-Options: SAMEORIGIN

cioè impone, per motivi di sicurezza e per evitare di essere vittima di clonazioni del sito via scraper, che il loro sito possa essere embeddato soltanto all’interno della stessa origine, cioè nello stesso dominio. Siccome stiamo provando a farlo da un dominio non autorizzato, il browser se ne accorge e (in buona parte dei casi), rifiuta di effettuare l’embed.

iframe e video

L’unico caso “pulito” in cui dovrebbe valere la pena fare uso di iframe è quello dell’embed di Video o GIF da server esterni: ora, per quanto possa essere preferibile caricare il video sul server del sito, questo non sempre è possibile farlo (per motivi di spazio dell’hosting o, ad esempio, per problemi di copyright). Youtube consente da sempre questa pratica, ad esempio, per quanto sarebbe più consigliabile fare uso del tag <video> (che vedremo tra un attimo), con questo risultato:

I siti web possono fare uso di iframe (e lo fanno, al netto dei “puristi” di HTML) per vari motivi, tra cui embed di video, inclusione di slideshow, inclusione di Google Maps, inclusione di file PDF pubblici o ads di vario genere. Gli iframe sono molto semplici da usare in questi casi, risolvono effettivamente un problema che diversamente sarebbe complesso e vengono incontro, in fondo, alla semplicità  del web ed al fatto che “chiunque può fare qualsiasi cosa”, in questa sede.

Ovviamente pero’ questo non significa che vadano usati a casaccio o come scelta primaria, proprio perchè hanno problemi di compatibilità .

iframe e SEO

In genere l’uso di iframe per la SEO è considerato sbagliato perchè di fatto i motori di ricerca non è detto che riescano a leggere il contenuto, difficoltà  riflessa anche a livello di client come abbiamo visto. Generalmente quando si decide di usare un iframe bisogna sempre riflettere sul perchè lo stiamo facendo, perchè quasi sempre la risposta sarà  per introdurre un qualcosa che diversamente sarebbe laboriosa e non siamo degli sviluppatori o non vogliamo assumerne uno.

C’è anche il problema, peraltro, che un sito che si basi sugli iframe potrebbe essere considerato un duplicato di un alto dallo scarso valore aggiunto. E visto che la SEO dovrebbe badare a questo aspetto, rimane una pratica sconsigliabile a tutti gli effetti, se non in casi molti specifici come quelli che abbiamo elencato poco fa.

Alternativa: il tag <video>

Grazie al tag HTML <video> possiamo fare embed più sicuri, anche se in Opera (e solo per questo browser) questo tag non sembra essere ancora supportato: si scrive in questa forma innestata (tag source dentro video)

<video width="400" controls>
<source src="https://archive.org/download/candycandys01e01/Candy%20Candy%20S01E01.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>

e compare così:

Di fatto, Youtube non permette questa modalità  perchè la costringerebbe, di fatto, ad esporre l’URL dei video che diventerebbero, cosà¬, fin troppo facili da scaricare per gli utenti. Di fatto, il tag iframe è ancora la scelta primaria ma soltanto per i siti web, come Youtube, che consentono esplicitamente l’embed dei video o sono pensati per questo motivo.

Foto di copertina di Markus Spiske da Pixabay

👇 Da non perdere 👇

Trovalost esiste da 4467 giorni (12 anni), e contiene ad oggi 7219 articoli (circa 5.775.200 parole in tutto) e 13 servizi online gratuiti. – Leggi un altro articolo a caso
5/5 (2)

Ti sembra utile o interessante? Vota e fammelo sapere.

Leggi anche:
Questo sito contribuisce alla audience di sè stesso.
Il nostro network informativo: Lipercubo.it - Pagare.online - Trovalost.it.