Benvenuti in un nuovo articolo su ElaMedia Group, un'agenzia con oltre 15 anni di esperienza nella realizzazione di siti web a Roma e nella Consulenza sul Marketing. Il nostro sito vi svelerà tutti i segreti di internet spiegando di che cos’è il copywriting SEO, fornendo una pratica guida alle estensioni SEO su Chrome e persino un approfondimento dedicato ai tool Semrush vs SeoZoom a confronto. Ma oggi di cosa parleremo?
Menu di navigazione dell'articolo
- Quali sono le differenze tra Tag Alt, Title e nome dell’immagine
- Come ottimizzare i meta tag immagine per i motori di ricerca
- Le dimensioni delle immagini e le immagini Responsive
- Ottimizzare la sitemap delle immagini
- Perché utilizzare le immagini e come sceglierle
- FAQ
Dopo aver visto come gestire le headline dei nostri articoli, oggi parliamo di qualcosa ancora più concreto.
Il mondo del web è sempre più visual e meno verbale; si dice spesso che un’immagine comunica più di mille parole, e il web si sta arricchendo di immagini – anche molto belle – ma che possono restare invisibili e rendere invisibili anche i contenuti alle quali sono poste a commento in modo anche appropriato se non si adottano le giuste strategie SEO per le immagini. Non è sufficiente ottimizzare solo i contenuti testuali di una pagina web per posizionarsi nelle prime pagine dei Motori di ricerca, ma anche e soprattutto i contenuti multimediali necessitano di essere ottimizzati per creare una sinergia perfetta in ottica SEO (hai già letto il nostro approfondimento su come fare l'ottimizzazione seo di un sito web?).
A proposito di SEO: Per migliorare la visibilità e l'autorità di un sito web, sono estremamente utili in ottica SEO, le citazioni e le menzioni, anche dette brand mention. Infatti, Quando un marchio, un'azienda o un sito web viene menzionato su altri siti, viene riconosciuto dagli algoritmi dei motori di ricerca come un segnale di autorevolezza e popolarità. Ciò influisce positivamente sul posizionamento del sito nei risultati di ricerca.
Per ottimizzare le immagini bisogna saper usare e conoscere gli attributi ALT e il Title immagini. Cosa sono?
Dopo aver dedicato un'intera guida al CSS e dato tutte le informazioni su come creare un sito protetto da attacchi informatici, oggi, cominciamo con un rapido excursus delle definizioni per poter passare al manuale delle istruzioni del Tag Alt Immagini, vero e proprio.
Per ampliare la tua conoscenza sulle tematiche SEO, ti raccomandiamo di consultare il nostro articolo incentrato su Googlebot.
Quali sono le differenze tra Tag Alt, Title e nome dell’immagine
Per ottimizzare le immagini di un sito o del proprio blog personale non è necessario diventare dei professionisti, tuttavia è importante saper utilizzare gli strumenti di base offerti dagli editor e talvolta anche intervenire per modificarli. Cosa significano, dunque, i termini tag alt, title e nome dell’immagine e soprattutto a cosa servono e perché sono utili?
Se vuoi un aiuto per difenderti dall'hotlinking, leggi il nostro approfondimento.
Definizione di Tag Alt immagine nell'ambito della realizzazione di contenuti per il web
Il tag <Alt> è un attributo HTML nel linguaggio di programmazione web che viene inserito all’interno di una pagina web con immagine e rappresenta il testo ALTernativo delle immagini; in sostanza è il testo che l’utente visualizza quando posiziona il cursore del mouse su un’immagine e che la descrive.
A cosa serve inserire nel campo apposito dell’editor la descrizione di un’immagine che si desidera “postare”? Il testo posto a descrizione di un’immagine serve:
- Ai motori di ricerca per capire il contenuto dell’immagine e la pertinenza o coerenza con il testo;
- Ai non vedenti che utilizzano gli screen reader o lettori di schermo che decifrano e leggono la descrizione delle immagini su un sito;
- A intuirne il contenuto anche in caso di connessioni lente o problemi di connessione o qualora un’immagine risulta disattivata.
Da sottolineare il fatto che noi di ElaMedia offriamo consulenza per quanto riguarda questo tipo di attività. Chiamaci al 349 0503368 per ricevere un preventivo gratuito.
Se questo articolo sta catturando la tua attenzione, allora ti consigliamo di mettere da parte anche questo sul "noindex". Aprilo subito in un nuovo Tab del browser per non dimenticarne.
Se vuoi saperne di più sulla Grafica ti segnaliamo il nostro articolo sulla generazione delle immagini con l'intelligenza artificiale.
Definizione di Tag title
Il Tag <Title> altro non è che il titolo dell’immagine (da non confondere con il nome con la quale si salva l’immagine sul proprio PC). Anche se non è fondamentale ai fini del posizionamento è importante attribuire un titolo all’immagine che sia coerente con la sua descrizione per una qualità SEO complessiva ottimale. Il titolo da inserire nell’editor è bene che sia breve, accattivante, integrato con il testo alternativo e che contenga la parola chiave. Se ti serve abbiamo scritto quest'approfondimento sugli editor HTML online.
Se per esempio si inserisce una foto con il Tag Alt descrittivo seguente: “Panorama dell’isola di Capri dal Belvedere”, il titolo della foto sarà “Isola di Capri” e il nome della foto sul nostro PC sarà “Capri01.jpg”, per le ragioni che vi spieghiamo nel paragrafo seguente.
Se stai trovando interessante questo argomento dedicato alla scrittura su internet, sappiate che il nostro sito potrà svelarvi ulteriori contenuti simili, infatti, ElaMedia Group, vi svelerà tutti i segreti della scrittura sul web spiegando il significato di co-occorrenze e semantica, fornendo una pratica guida alla keyword density e persino un approfondimento dedicato all’article spinner in italiano. Leggi questi articoli più tardi!
Se ti serve un preventivo per delle Analisi SEO a Roma ricorda che puoi chiamarci subito al numero gratuito che trovi sulla destra.
Il nome dell’immagine: a cosa serve?
Per ottimizzare al meglio una immagine su una pagina web, i motori di ricerca come Google valutano anche il nome dato all’immagine per coerenza con l’argomento trattato. È bene, dunque, nominare i file immagine con parole che ne riflettano il contenuto e che siano soprattutto coerenti con il testo alternativo (Tag Alt) e il titolo (Tag Title). Si consiglia, quindi di non utilizzare, per esempio la numerazione standard utilizzata dalle macchine fotografiche o dalle fotocamere smartphone (ima24_23012019.jpg oppure 115667.gif) o nomi troppo lunghi o non pertinenti con la foto stessa. Inoltre, dare il nome giusto ad un’immagine rende più facile l’archiviazione e la facilita di recupero della stessa sul proprio hard disk se si dovessero verificare problemi di connessione o si dovesse ricaricarla per un errore o ridimensionarla.
Come ottimizzare i meta tag immagine per i motori di ricerca
Conoscere le definizioni dei meta tag non serve se non si sanno utilizzare nel modo giusto. I motori di ricerca utilizzano i tag delle immagini per generare gli snippet, in punti di “aggancio” tra le Parole chiave inserite nella barra di ricerca dall’utente e i potenziali risultati di ricerca. Per ottimizzare al meglio anche gli attributi immagine oltre ai testi, si consiglia di:
- Scrivere testi descrittivi coerenti con il contenuto testuale e multimediale presenti nel resto della pagina web;
- Nominare i file con termini specifici e separati da un trattino per i titoli composti da più parole;
- Non esagerare con l’uso delle parole chiave per non incorrere in penalizzazioni; piuttosto è meglio
- Utilizzare varianti semantiche delle parole chiave all’interno dei meta tag alt e title;
- Scrivere un titolo dell’immagine diverso dal testo alternativo (tag alt) che, invece, deve fornire informazioni aggiuntive.
Le dimensioni delle immagini e le immagini Responsive
Si definiscono immagini responsive quelle immagini che si adattano in base al dispositivo di navigazione e si tratta di un altro aspetto importante ai fini SEO perché le immagini che non sono visualizzate correttamente potrebbero disturbare l’esperienza di navigazione degli utenti aumentare la “frequenza di rimbalzo” che peggiora la fruizione della pagina. Lo stesso problema nonché il rischio di disturbare la navigazione si verifica con un cattivo dimensionamento delle immagini.
Per evitare, per esempio, che dispositivi diversi – PC, tablet, smartphone – visualizzino male le immagini si possono applicare tecniche diverse di implementazione; la più comune consiste nell’impostare tramite l’editor la larghezza dell’immagine utilizzando la proprietà “max-width: 100%” oppure me modalità adattive. Il modo più sicuro per rendere le immagini sempre leggibili e su qualsiasi dispositivo è però la scelta delle “dimensioni” giuste tramite gli attributi “srcset” e “sizes”.
Chiama l'800 119 270 o scrivici per un preventivo
Come ottimizzare le dimensioni dei file immagine
Una pagina web con immagini che si caricano lentamente non è attraente, questo fenomeno si chiama browser reflow e perciò nel momento in cui si carica un’immagine sul proprio sito o blog non bisogna sottovalutare di compilare anche i campi relativi alle dimensioni delle immagini: Height (altezza) e Width (larghezza). Il modo più semplice ed efficace per velocizzare il caricamento delle pagine e ottimizzarle è scalare le dimensioni, in modo tale che anche immagini molto grandi da 1500 pixel possono essere ridotte a 250 pixel senza perdere la qualità e la definizione. Il ridimensionamento avviene attraverso lo stesso editor oppure si possono ridimensionare le immagini all’origine con un software per editing delle foto come Photoshop o GimP e simili. A volte però, non è sufficiente ridurre le dimensioni di un’immagine se il suo “peso” – in termini di byte o giga - è notevole. In questi casi occorre ricorrere alla compressione delle immagini.
Come si “comprimono” le immagini? Un lavoro da fare prima della creazione del sito web
Comprimere o ridurre il peso delle immagini significa diminuire la quantità di byte in transito tra browser e server durante il caricamento delle informazioni e, nel caso specifico, delle immagini. L’alleggerimento di una pagina web aumenta la velocità di caricamento della pagina stessa senza tempi di attesa con notevole vantaggio per il traffico utenti e il posizionamento nei motori di ricerca, in particolar modo Google prende molto in considerazione questo aspetto: più veloce è il caricamento di un sito, più semplice è la scansione della pagina e la sua indicizzazione.
Ridurre le dimensioni e comprimere un’immagine, però, può compromettere la qualità, la nitidezza e la definizione della stessa immagine a danno di una pagina ben costruita; per cui è importante utilizzare gli strumenti giusti per la compressione delle immagini. Ci sono software e servizi specifici anche gratuiti che permettono di riscrivere il codice interno di un file immagine in modo che occupino meno spazio pur lasciando i contenuti visuali inalterati e senza perdita della definizione.
Quali sono i principali software di compressione delle immagini
Un software di elaborazione delle immagini particolarmente prestigioso e specifico è Adobe Photoshop, ma ve ne sono altri e altrettanto validi completamente gratuiti e online. I principali software di compressione delle immagini gratuiti sono:
- Pixlr: consente di fare qualsiasi modifica sulla immagini ed è compatibile con tutti i dispositivi mobili grazie alle App sviluppate per Android e Apple o come estensione dei browser Google Chroe e Firefox. Ha le stesse funzioni di Photoshop, ma via web; gli addetti ai lavori lo apprezzano per la possibilità di editare file. psd a livelli.
- Compressor.io: è un tool gratuito e semplice da utilizzare e permette di comprimere file jpeg, png, gid e svg. Si possono ridurre le immagini fino al 90% senza perdere qualità e informazioni.
- Optimizilla: è un software che permette la compressione di file Jpeg e Png, ma le prestazioni sono eccellenti con una resa della qualità elevata. Ciò che distingue questo tool è la possibilità di caricare elaborazioni multiple, fino a 20 file contemporaneamente.
- Kraken.io: esistono due versioni, una gratuita e l’altra “Pro” a pagamento che sblocca diverse altre funzioni. Anche nella versione free, però, i risultati sono soddisfacenti, grazie all’interfaccia moderna e intuitiva, facile da utilizzare che consente il caricamento anche di gruppi di immagini, persino in archivio zip.
Altri tool da utilizzare sono anche Caesium, FILEminimizer Pictures, FileOptimizer, ImageOptim.
Ottimizzare la sitemap delle immagini
Per velocizzare l’indicizzazione delle immagini e aumentare le probabilità che il motore di ricerca le mostri nei risultati di ricerca è consigliabile saper ottimizzare anche la Sitemap delle immagini, in formato .xml. La Sitemap serve a indicare al robot del motore di ricerca le immagine che si desiderano indicizzare fornendo ulteriori informazioni sulle immagini stesse, come per esempio l’ubicazione geografica e la licenza. Una sitemap immagini si può “ costruire” manualmente o generare automaticamente con strumenti digitali come Screaming Frog.
Come ottimizzare le immagini anche sui social
I social network più famosi come Facebook, Instagram e Twitter hanno costruito il proprio successo sulle immagini e sulla loro condivisione; per facilitare l’acquisizione delle immagini di un post sui canali social o di una immagine pubblicata su un blog e da condividere sui social si raccomanda di aggiungere nella sezione <head> della propria pagina o del sito i meta tag Open Graph, un’implementazione che assicura l’inserimento corretto dell’immagine nei propri post social. In questi casi, però, la qualità delle immagini deve essere alta, perché i post con immagini di alta definizione creano maggior traffico e condivisione sulle piattaforme web e social.
Perché utilizzare le immagini e come sceglierle
Un contenuto testuale ben curato se viene accompagnato dalla scelta della foto giusta è in grado di creare un’emozione o di colpire favorevolmente l’attenzione dell’utente. Quando si apre una pagina web, la prima cosa che si nota è la presenza delle immagini e poi del testo. Il potere attrattivo delle immagini deve essere ben utilizzato, per questo è importante che siano poste in coerenza con i contenuti e che aiutino il lettore a comprendere meglio il testo stesso. Psicologicamente, le immagini che inducono gli utenti a una permanenza più lunga su una pagina web o a ritornare sulla stessa pagina sono quelle che trasmettono sensazioni positive e serenità, ecco perché anche quando si trattano argomenti sgradevoli o si sfogliano le pagine web dei giornali di cronaca è sempre meglio adottare una policy di immagini che non distolgano il lettore, ma lo inducono piuttosto alla curiosità.
In ogni caso, le immagini sono importanti ed eloquenti e parlano un linguaggio universale, ma occorre saperle utilizzare con criterio.
FAQ
Come posso inserire un'immagine in una pagina HTML?
Nell'HTML, l'elemento <img> è usato per inserire un'immagine. Il formato base per inserire un'immagine è il seguente:
<img src="/URL dell'immagine" alt="Descrizione alternativa dell'immagine">
src è un attributo che indica il percorso dell'immagine che vuoi inserire. Può essere un URL assoluto (http://www.example.com/image.jpg) o un percorso relativo (image.jpg).
alt è un attributo che descrive l'immagine. Questa descrizione viene visualizzata nel caso l'immagine non possa essere caricata, ed è anche utile per la lettura delle immagini da parte dei lettori di schermo per utenti non vedenti.
Cosa significa specificare le dimensioni dell'immagine in HTML?
Le dimensioni dell'immagine possono essere specificate utilizzando gli attributi width e height nell'elemento <img>:
<img src="/URL dell'immagine" alt="Descrizione alternativa dell'immagine" width="500" height="600">
In questo esempio, l'immagine sarà larga 500 pixel e alta 600 pixel. Questo può essere utile se si desidera controllare precisamente le dimensioni dell'immagine. Tuttavia, si deve fare attenzione a mantenere le proporzioni originali dell'immagine per evitare distorsioni.
Come posso centrare un'immagine in HTML?
Per centrare un'immagine, è possibile utilizzare il CSS. Qui di seguito c'è un esempio in cui si utilizza il CSS per centrare un'immagine sia orizzontalmente che verticalmente:
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<img src="/URL dell'immagine" alt="Descrizione alternativa dell'immagine" class="center">
In questo esempio, la classe CSS center viene applicata all'immagine, che centrerà l'immagine nel suo contenitore.
Cosa sono le immagini responsive in HTML e come posso crearle?
Le immagini responsive sono immagini che si adattano automaticamente per adattarsi alle dimensioni dello schermo o della finestra del browser. Si può creare un'immagine responsive in HTML utilizzando il CSS:
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<img src="/URL dell'immagine" alt="Descrizione alternativa dell'immagine">
In questo esempio, il CSS fa sì che l'immagine non superi mai la larghezza del suo contenitore, e l'altezza si adatta automaticamente per mantenere le proporzioni dell'immagine.
Cosa significa avere un'immagine come link in HTML?
Un'immagine può funzionare come un link in HTML. Questo significa che quando un utente fa clic sull'immagine, viene reindirizzato a un'altra pagina o a un'altra sezione della stessa pagina. Ecco come puoi farlo:
<a href="/URL di destinazione">
<img src="/URL dell'immagine" alt="Descrizione alternativa dell'immagine">
</a>
In questo esempio, se un utente fa clic sull'immagine, sarà reindirizzato all'URL specificato nell'attributo href dell'elemento <a>.
Oltre al Tag Alt delle immagini, una cosa molto importante quando si deve scrivere per il web è l'originalità dei contenuti che si può verificare con un tool, perciò abbiamo creato questa guida all'utilizzo di Copyscape.
Se ti è piaciuto questo articolo, leggi anche la nostra guida sui Tag Header. Ricordatevi sempre di inserire il tag canonical per permettere a Google di riconoscere le vostre pagine. Se vuoi andare più in profondità e studiare come ottenere più link esterni, ti suggeriamo il nostro approfondimento sulla Broken Link Building.
