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.
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
Per ottimizzare le immagini bisogna saper usare e conoscere gli attributi ALT e il Title immagini. Cosa sono? Cominciamo con un rapido excursus delle definizioni per poter passare al manuale delle istruzioni del Tag Alt Immagini, vero e proprio.
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?
Definizione di Tag Alt immagine nell'ambito della creazione 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.
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 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.
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”.
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?
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.
