Outil d’intégration d’image: Embed Codice Generator
Cet outil gratuit a pour objectif de faciliter la promotion et la visibilité de vos contenus visuels sur des sites web tiers.
Pour cela, vous allez pouvoir intégrer un code sous votre image qui permettra aux propriétaires de sites tiers d'intégrer votre contenu, en vous citant comme source.
Ainsi, vous obtiendrez plus de backlinks (liens entrant) et plus de visibilité.
Vous trouverez dopo l'outil des explications supplémentaires, sous formats vidéos, infographies et articles afin de vous aider à exploiter au mieux le potentiel du embed code generator.
Codice à intégrer sur votre site
Risultato du code sur votre site web
GENERATORE DI CODICE DI INCORPORAMENTO | Strumento di integrazione immagini
In questo tutorial video, ti presento passo dopo passo come funziona lo strumento di integrazione immagini:
Oggi ti presento uno strumento che semplificherà il processo di integrazione e condivisione delle immagini, per te e per chiunque desideri utilizzare le tue immagini: il generatore di codice di incorporamento.
Grazie a questo strumento completamente gratuito, puoi raggiungere due obiettivi:
- facilitare l’utilizzo e l’integrazione delle tue immagini/infografiche da parte di altri blogger per ottenere backlink;
- integrare facilmente le immagini/infografiche con attribuzione, senza dover scaricare l’immagine.
Andrò oltre spiegandoti i motivi di questa strategia e mostrandoti come utilizzare le tue immagini per ottenere backlink.
Lo sapevi? Più di 3,2 miliardi di immagini vengono condivise ogni giorno sui social media.
Questo numero, ovviamente astronomico, si spiega in parte con la semplicità infantile che consente di condividere contenuti sui social media con un solo clic.
Infatti, bisogna riconoscere che tutto è stato messo in atto per facilitare la condivisione e/o la ripubblicazione sui nostri feed di notizie.
Tuttavia, questa stessa fluidità non si osserva a livello dei siti Web, in particolare per quanto riguarda l’aggiunta di contenuti visivi.
Sul Web, ci sono regole da rispettare, in particolare per l’attribuzione dei crediti agli autori e ai nomi delle aziende.
E poi il processo può essere considerato un po’ più complesso rispetto ai social media, poiché è necessario caricare questi elementi visivi sul tuo sito Web prima di inserirli negli articoli.
Infine, avrai suggerimenti per integrare nei tuoi articoli tutti i tipi di contenuti:
- MS Office: Word, Excel, PowerPoint…
- Google: Doc, Slide, Sheet…
- video;
- audio;
- pagine Web.
Pronto? Andiamo!
Capitolo 1: Come generare il codice di incorporamento della tua immagine?
Vediamo innanzitutto il processo di generazione del codice di incorporamento, per andare direttamente all’argomento principale di questo articolo: mostrarti come utilizzare il generatore di codice di incorporamento di Twaino.
Se questo concetto è ancora nuovo per te e desideri comprenderne il funzionamento, non esitare ad andare direttamente al capitolo 2. Successivamente, potrai tornare qui per trarre il massimo vantaggio dai codici di incorporamento.
Una volta sul generatore di codice di incorporamento, devi compilare questo modulo:
Procediamo passo dopo passo.
Passo 1: compila il “nome del sito”
Questo è l’URL verso il quale desideri che le persone che incorporano la tua infografica facciano un’attribuzione.
Oppure è il dominio su cui hai trovato l’immagine che desideri integrare sul tuo sito Web:
Questo consente di attribuire la fonte dell’immagine/infografica al sito Web in questione.
Passo 2: indica l’URL della pagina di provenienza dell’immagine
Questo è l’URL della pagina su cui si trova l’infografica che stai incorporando:
Se hai creato l’immagine e desideri creare il codice di incorporamento nel tuo articolo, includi l’URL dell’articolo in questione.
Fai attenzione a non fare errori a questo livello, poiché è ciò verso cui l’infografica/immagine incorporata sul sito di qualcun altro rimanda. Se commetti un errore, perdi traffico referrer e link juice.
Nel caso in cui si tratti dell’immagine di un’altra persona che desideri integrare nel tuo contenuto, è sufficiente indicare l’indirizzo dell’articolo/pagina su cui si trova.
Passo 3: inserisci l’URL dell’immagine
In questo passaggio, inserisci l’URL dell’immagine ospitata su un sito Web di terze parti o sul tuo sito.
Per ottenere l’URL di un’immagine, è sufficiente fare clic con il pulsante destro del mouse sull’immagine e scegliere “copia indirizzo immagine”:
Una volta ottenuto l’indirizzo, incollalo nella parte indicata del generatore di codice di incorporamento.
Passo 4: compila l’attributo Alt
Qui includerai un testo alternativo che descrive la tua immagine/infografica:
Nell’esempio sopra, scrivo: “14 modi per ottenere backlink senza chiedere”
Per le infografiche in particolare, puoi includere, oltre al titolo, la parola “infografica”, per consentire a coloro che cercano immagini di trovare rapidamente i tuoi elementi visivi.
Passo 5: regola la larghezza dell’immagine
Specifica la larghezza dell’infografica che desideri incorporare.
Nota che la larghezza varia generalmente in base alla larghezza del sito/blog dell’utente.
La larghezza del mio blog è di 800 pixel, ma chiunque incorpori la tua infografica può anche adattare il codice di incorporamento alle specifiche particolari del suo blog/sito Web personalizzando questo parametro.
Passo 6: indica l’altezza dell’immagine
Ti consiglio di lasciare questo campo vuoto, in modo che l’infografica rimanga proporzionata all’originale, indipendentemente dalla sua larghezza.
Ma se questa opzione esiste, è perché è possibile personalizzarla. Quindi puoi inserire l’altezza se hai un’esigenza specifica.
Passo 7: compila la larghezza della finestra contenente il codice
Questa è la larghezza della finestra (che visualizza il codice di incorporamento) sulla tua pagina Web o articolo di blog.
Ad esempio, se la larghezza del tuo blog è di 800 pixel, come il mio, inserirai questo numero in modo che la casella copra la larghezza del tuo blog, in modo che non ci sia overflow o spazio vuoto.
Passo 8: indica l’altezza della finestra con il codice
Questa è l’altezza della casella (che visualizza il codice di incorporamento) sulla tua pagina Web/articolo.
Più grande è questo blocco, più spazio occupa, ma meno l’utente ha bisogno di scorrere per vedere il codice di incorporamento completo.
Passo 9: incolla il tuo codice nell’editor o nel codice HTML della pagina
Il tuo codice è ora pronto per essere utilizzato nell’editor o nel codice HTML della tua pagina.
Copia e incolla questo codice nel codice HTML della tua pagina Web/blog, nel punto in cui desideri che il codice di incorporamento appaia.
Ti consiglio di metterlo sotto l’infografica, poiché è il luogo standard in cui vengono posizionati i codici di incorporamento.
In modalità “Visuale”, ecco il luogo in cui desidero incollare il codice:
Fai clic su “Testo”, accanto a “Visuale” per ottenere il codice HTML della tua pagina.
Devi quindi trovare la posizione esatta in cui posizionare il tuo codice.
Ho individuato rapidamente il mio:
Nota che puoi anche includerlo sopra la tua infografica se lo desideri. No ci sono regole definite in materia, puoi personalizzare le cose in base alle tue esigenze.
Passo 10: verifica il risultato della tua integrazione
Una volta pubblicato l’articolo, la finestra contenente il codice si presenta così:
Può anche apparire così:
<img src=’/wp-content/uploads/2019/09/infografia-14-modi-per-ottenere-backlink-senza-chiedere.png’ alt=’14 modi per ottenere backlink senza chiedere’ width=’800′ border=’0’/><style>.ampenable{ display:none;}</style><h3>Ti piace questa immagine? Incorporala gratuitamente sul tuo sito web<span class =’ampenable’> con <a href=’https://www.twaino.com/embed-code-generator/’ target=’_blank’>Twaino</a></span>.</h3><xmp onclick=’this.focus();this.select()’ style=’overflow-x: auto;white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;line-height: 21px;font-size: 16px;font-family: Dosis, Arial, Helvetica, sans-serif;border: 2px solid #eee;padding: 5px; width:800;height:120px’><a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’ title=’14 modi per ottenere backlink senza chiedere’><img data-no-lazy=’1′ src=’/wp-content/uploads/2019/09/infografia-14-modi-per-ottenere-backlink-senza-chiedere.png’ alt=’14 modi per ottenere backlink senza chiedere’ width=’800′ border=’0’/></a><br/>Fonte dell’immagine: 14 modi per ottenere backlink senza chiedere | <a target=’_blank’ href=’https://www.twaino.com/blog/seo/backlink/‘>twaino</a></xmp>
Sul sito di un’altra persona, viene visualizzato in questo modo:
<a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’ title=’14 modi per ottenere backlink senza chiedere’><img data-no-lazy=’1′ src=’/wp-content/uploads/2019/09/infografia-14-modi-per-ottenere-backlink-senza-chiedere.png’ alt=’14 modi per ottenere backlink senza chiedere’ width=’800′ border=’0’/></a><br/>Fonte dell’immagine: 14 modi per ottenere backlink senza chiedere | <a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’>twaino</a>
Ecco fatto! Hai finito l’integrazione, ma aggiungiamo un ultimo passaggio che potrebbe interessarti.
Capitolo 2: Come funziona il generatore di codice di incorporamento?
2.1. Alcune definizioni
Per comprendere meglio il concetto di codice di incorporamento o codice di incorporamento, iniziamo con alcune definizioni.
2.1.1. Che cos’è un collegamento ipertestuale/link?
Probabilmente sai già cos’è un collegamento ipertestuale o un link, ma è importante per il seguito fare un promemoria.
In un contenuto, un collegamento ipertestuale è una porzione di testo evidenziata, il più delle volte da una sottolineatura o da un cambio di colore, in modo che quando si fa clic su di esso, il browser visualizzi automaticamente un’altra pagina o sostituisca la pagina corrente con quella verso cui punta il collegamento.
L’elemento evidenziato è noto come collegamento ipertestuale o, in breve, link.
2.1.2. Che cos’è il collegamento incorporato/link incorporato?
I link “incorporati” o embed sono link che portano altrove quando vengono cliccati.
Le principali differenze tra linking e embedding sono il luogo in cui i dati vengono archiviati, così come il modo in cui vengono aggiornati dopo che sono stati collegati o incorporati.
Con un link standard, il tuo file è collegato a un file di origine o a una pagina. In questo caso, i dati vengono archiviati nel file di origine e vi vengono aggiornati.
Vale a dire che se una persona desidera consultare questi dati, è costretta a fare clic sul link e ad andare sulla pagina del file di origine. E poiché le informazioni sono archiviate sulla pagina di origine, gli aggiornamenti dei contenuti non sono noti sulla pagina contenente il link.
No preoccuparti, ecco un esempio per comprendere meglio il concetto.
Senza andare su Amazon, non avrò idea dei cambiamenti – in particolare quelli riguardanti il prezzo – che si verificheranno sulla pagina di questo libro:
Dovrò fare clic sul link e andare sulla pagina per conoscere le informazioni.
D’altra parte, con l’incorporamento, questi dati sono accessibili direttamente dal tuo articolo o pagina Web.
Sempre con l’esempio del prodotto Amazon, puoi avere questo tipo di blocco:
Quindi, indipendentemente dalle variazioni di prezzo, l’aggiornamento è automatico, poiché hai incorporato/incorporato il contenuto (qui il prodotto) sulla tua pagina Web.
Ecco la principale differenza tra linking e embedding. Detto questo, esiste anche un ultimo punto di differenza: l’aspetto della presentazione.
Mentre i link generalmente si presentano in questa forma « https://www.twaino.com/blog/ », i codici di incorporamento sono più complessi.
Come hai potuto constatare fino ad ora, un codice di incorporamento (embed code) è un pezzo di codice HTML che a volte può essere molto lungo e impossibile da individuare per un principiante:
« <a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’ title=’14 modi per ottenere backlink senza chiedere’><img data-no-lazy=’1′ src=’/wp-content/uploads/2019/09/infografia-14-modi-per-ottenere-backlink-senza-chiedere.png’ alt=’14 modi per ottenere backlink senza chiedere’ width=’800′ border=’0’/></a><br/>Fonte dell’immagine: 14 modi per ottenere backlink senza chiedere | <a target=’_blank’ href=’https://www.twaino.com/seo/backlink/’>twaino</a> »
Allora perché dovresti preoccuparti di tali codici?
2.2. Perché utilizzare i codici di incorporamento?
La creazione di contenuti di qualità e coinvolgenti è uno dei principi essenziali dell’agenzia SEO Twaino. Se attribuisci anche importanza a questo punto, questo strumento ti interesserà.
I codici di incorporamento consentono ad altri di pubblicare la tua infografica/immagine sul loro sito Web con un’attribuzione appropriata, sotto forma di link al tuo sito Web.
Ciò significa che la tua infografica è correttamente attribuita e accessibile a un numero maggiore di utenti Internet, che possono accedere al tuo sito Web se fanno clic sull’immagine.
Se ti chiedi “perché preoccuparsi di un codice di incorporamento quando potrei semplicemente condividere l’URL della pagina”, sappi che questi codici hanno lo scopo principale di facilitare l’utilizzo delle tue infografiche/immagini da parte di altri blogger.
Infatti, basta che prendano il tuo codice e lo incorporino nel loro editor, il che non richiede più di un minuto, mentre la procedura tradizionale consiste nel:
- scaricare l’immagine;
- caricare l’immagine sul loro sito Web;
- inserire l’immagine nell’articolo;
- menzionare la fonte dell’immagine.
Questo processo è piuttosto lungo, non trovi?
Con un codice di incorporamento, non devi più preoccuparti nemmeno di menzionare la fonte poiché tutto è già integrato.
In questo caso, puoi creare tu stesso i tuoi codici di incorporamento?
La creazione manuale di un codice di incorporamento è relativamente semplice per la maggior parte degli sviluppatori Web. Ma non è così per chi non conosce l’HTML.
Il generatore di codice di incorporamento di Twaino elimina le congetture e consente a chiunque di creare facilmente il proprio codice di incorporamento.
Incorporare facilmente le immagini è bello, ma perché preoccuparsi di creare o utilizzare immagini nei tuoi contenuti?
Capitolo 3: Perché e come utilizzare immagini/infografiche in una strategia di creazione di contenuti?
Abbiamo indicato regolarmente nei nostri articoli che le infografiche o le immagini in generale erano elementi molto buoni da integrare in un contenuto.
No abbiamo avuto l’opportunità di spiegare perché. Quindi, ecco i 10 motivi per cui dovresti considerare di utilizzare elementi visivi in tutti i tuoi contenuti.
3.1. Perché utilizzare le infografiche nella tua strategia di creazione di contenuti?
3.1.1. I 10 motivi per cui dovresti utilizzare le infografiche nei tuoi contenuti
Tra tutti gli elementi visivi sotto forma di immagine, le infografiche sono quelle che hanno più successo. Basta usare Google Trends per constatare l’entusiasmo che questo formato suscita dal 2008:
Useremo spesso il termine infografica nelle prossime sezioni. Ma sappi che questo include anche qualsiasi tipo di immagine che potrebbe attirare l’attenzione degli utenti Internet.
Motivo 1: Le infografiche possono facilmente catturare l’attenzione del tuo pubblico target
Gli esseri umani sono creature visive che, di conseguenza, sono più facilmente attratte da elementi visivi.
È importante tenere presente che la probabilità che un visitatore lasci la tua pagina è molto elevata nei primi secondi.
In altre parole, hai solo pochi secondi per fare una buona impressione e mantenere i tuoi visitatori interessati. Hai quindi bisogno di qualcosa che catturi immediatamente la loro attenzione.
Se le parole non riescono a farlo, gli elementi visivi come le infografiche potrebbero fare un lavoro migliore.
Una ricerca condotta da Brooke Barnett e Barbara Miller presenta abbastanza bene l’importanza degli elementi grafici o visivi:
« Da soli, il testo e la grafica sono metodi di comunicazione sia utili che imperfetti. Il linguaggio scritto consente un numero quasi infinito di combinazioni di parole che consentono un’analisi approfondita dei concetti, ma si basa fortemente sulla capacità del lettore di elaborare queste informazioni. La grafica può essere più facile da comprendere per il lettore, ma è meno efficace nella comunicazione di concetti astratti e complicati… La combinazione di testo e grafica consente ai comunicatori di trarre vantaggio dai punti di forza di ciascun mezzo e di ridurre i punti deboli di ciascun mezzo.”
Combinate con un testo ben scritto, le infografiche possono essere molto potenti per aiutare il tuo contenuto a risuonare con il tuo pubblico target e attraversare il numero astronomico di informazioni presenti sul Web.
Tendiamo naturalmente ad amare i fatti, i numeri, le statistiche e altri elementi grafici.
Se questi elementi sono sufficientemente convincenti, le informazioni contenute nella tua infografica possono davvero catturare l’attenzione.
Motivo 2: Le infografiche possono rendere il tuo contenuto virale
L’analisi condotta da MDG Advertising ha evidenziato che il contenuto con elementi visivi attraenti (immagini/grafici) può generare il 94% in più di visite rispetto al semplice testo o al contenuto che non contiene immagini.
Lo stesso rapporto sottolinea inoltre che i comunicati stampa possono generare fino al 14% di aumento del numero di visualizzazioni di pagina se l’articolo pubblicato contiene una fotografia.
Inoltre, se il comunicato stampa include sia foto che video, ci si può aspettare un aumento ancora maggiore del 48% di visualizzazioni di pagina.
Quando ben progettate, le infografiche sono contenuti visivi convincenti che attirano così tante persone che la maggior parte di loro vorrebbe condividerle attraverso i propri network e circoli di influenza.
Il risultato è un contenuto visivo che può davvero diventare virale man mano che le persone condividono l’infografica.
Motivo 3: Le infografiche possono aumentare la consapevolezza del tuo marchio
Generalmente, le infografiche sono progettate in modo tale che le informazioni pertinenti sul creatore vengano visualizzate.
Si tratta ad esempio di elementi come:
- il logo;
- l’indirizzo del sito Web;