Oggi parliamo di iFrame, un tag HTML molto importante per incorporare elementi esterni ad una pagina di un sito web o di un blog.
Conoscere questo strumento è importante perché va usato con sapienza e moderazione per rendere l’esperienza di navigazione fluida ma non penalizzata in termini di velocità di caricamento della pagina e, quindi, di posizionamento.
In generale il tag iFrame ti permette di aggiungere dettagli informativi utili a completare la navigazione da parte dell’utente, come un documento da sfogliare o una mappa. Chiaramente occorre conoscere anche come funzionano le regole del diritto d’autore e i parametri per un corretto settaggio, altrimenti i risultati possono essere disastrosi.
Per questo se stai pensando che, dopotutto, basta un semplice copia e incolla, ti conviene leggere questa nostra breve guida. Se sei alle prime armi nella costruzione di un sito web ti consigliamo di affidarti ad un hosting che ti assiste passo per passo, magari sfruttando la semplicità dell'hosting WordPress e il supporto di Tophost.
Qualunque sarà la tua scelta devi sapere che l’iFrame potrà servirti in tante occasioni per cui vediamo subito di cosa si tratta e come funziona.
Cos’è un iFrame e a cosa serve
Per prima cosa cerchiamo di dare una definizione all’iFrame. Si tratta di un tag che incorpora elementi esterni alla tua pagina web su cui stai lavorando. Si tratta di una stringa di codice che allega un elemento esterno senza il bisogno di caricare nulla sul tuo database. Per esempio anziché caricare un video di YouTube, appesantendo il sito, lo incorpori direttamente tramite tag iFrame.
Con questo metodo non puoi appropriarti indebitamente di tutti i contenuti che trovi online, anche se, volendo, puoi farlo tramite la stringa iFrame. Quindi quando ti servi di questo facile codice ti conviene aggiungere il copyright e menzionare sempre la fonte da cui attingi.
È un copia e incolla che può essere vantaggioso e svantaggioso al tempo stesso, per cui assicurati che questo sia davvero necessario e che non sia indebitamente rubacchiato in rete. In secondo luogo dovrai assicurarti che i parametri siano correttamente settati, come altezza e larghezza, per rendere l’esperienza di navigazione fluida e ben calibrata.
iFrame html: come aggiungerlo
Aggiungere un iFrame ad una pagina web è davvero molto facile. Nel gergo si parla di “embeddare” un contenuto attraverso una stringa che, solitamente, viene fornita direttamente da chi mette a disposizione il contenuto stesso da incorporare.
Ci vuole meno di un minuto per portare a termine l’operazione per cui prendi nota e segui la nostra guida per principianti. Dirigiti sul sito dove si trova il contenuto che desideri incorporare sulla tua pagina web e trova il tasto che ti consente di condividerlo.
YouTube o Maps, per esempio, offrono diverse possibilità di condivisione di un contenuto tra cui la sezione “embed” nella quale trovi il codice iFrame da incollare sull’HMTL del tuo sito.
In altri portali, invece, il contenuto embeddabile viene fornito sotto la voce “iFrame”. Con la tastiera copia il codice e tienilo in memoria per poi dirigerti sul tuo sito, dove dovrai incollarlo.
Si ma…dove? Ti basterà aggiungere un modulo HTML personalizzato grazie a widget e moduli che ti permettono di farlo automaticamente, senza passare per l’editor.
In pratica troverai, come in WordPress, la possibilità di aggiungere moduli HTML sui quali incollare il codice iFrame. Adesso non ti resta che salvare e verificare il risultato ottenuto perché, se non è di tuo gradimento, dovrai tornare sul codice che hai incollato modificando i tag width, height ecc… per personalizzarli in base alla tua pagina web.
iFrame e WordPress
L’embed di un iFrame con WordPress è davvero molto semplice. In pratica se usi Gutenberg per elaborare i contenuti ti basterà semplicemente inserire la URL del sito da cui intendi incorporare il contenuto e il sistema farà l’embed al posto tuo.
In alternativa potrai selezionare dai blocchi di lavoro quello riferito all’aggiunta di stringhe HTML e incollare il codice che, in pochi istanti, verrà incorporato e fornito agli utenti in formato di contenuto navigabile.
Hai già un sito web in WordPress? Che aspetti, hai trovato il prezzo più vantaggioso!
Con questo metodo puoi incorporare prodotti Amazon, Mappe, PDF da leggere e molto altro ancora. Se sei attento e scrupoloso alla velocità del tuo sito, tuttavia, potresti sfruttare un plugin apposito che ottimizza il processo.
Su WordPress il più popolare è proprio iFrame, grazie al quale embeddi e personalizzi qualsiasi short code. Lo stesso discorso vale per Lite Speed Cache che, oltre a caricare velocemente contenuti incorporati mette in lazy-load gli iFrame, migliorando i tempi di caricamento del sito.
Perché usarli con moderazione?
Le regole di base sono sempre le stesse: occhio a non esagerare e pensa sempre che il sito deve essere comprensibile per chi non ti conosce. Avere tanti iFrame su un sito potrebbe rallentarlo gravemente, influendo negativamente sulle prestazioni del posizionamento.
Considera anche che gli iFrame non dovrebbero mai essere posizionati in alto, tra i primi elementi in caricamento su una pagina proprio per evitare questo genere di rallentamenti. Come per qualsiasi ambito la regola più valida da mettere in pratica nella costruzione di un sito web è “Less is More”, la cui traduzione potrebbe essere “meno è meglio”.
Pubblicato: | Aggiornamento: