Le immagini sono un elemento importante per i nostri articoli. Attraverso le immagini si può essere in grado di colpire positivamente le persone, incuriosendole a tal punto da convincerle ad iniziare la lettura del post. Soprattutto, le immagini possono essere l’ennesimo elemento utile per portare visitatori al sito, purché se ne ottimizzi la SEO. In questo post, andremo a vedere il lavoro da fare sulle immagini per raggiungere questo obiettivo.
Indice dei contenuti
Ottimizzazione SEO delle Immagini su WordPress
Le immagini sono presenti praticamente su tutti gli articoli di ogni sito. Raramente oggi si trovano post che non ne contengono. Se vogliamo che le immagini siano utili per portare visitatori al nostro sito web, devono essere ottimizzate sotto il punto di vista della SEO. Per avere delle immagni SEO Friendly, queste devono avere principalmente le seguenti caratteristiche:
- Avere un titolo ottimizzato con la keyword di nostro interesse
- Essere delle giuste dimensioni
- Essere del giusto peso
- Contenere l’attributo alt e l’attributo title
Prima di caricare un’immagine, è bene lavorarla per soddisfare i primi 3 dei 4 requisiti elencati.
I titoli delle immagini
Quando scegliete un’immagine da inserire nell’articolo, è probabile che essa abbia un nome del tipo DSC_0001 se scattata con una fotocamera digitale o con uno smartphone, oppure abbia un determinato altro nome se presa dal web o da qualche sito di stock immagini.
La prima cosa che dovete fare è rinominarla con un titolo attinente al contenuto dell’articolo. Se scrivo un articolo che parla di “come fare seo con WordPress”, il miglior titolo per l’immagine in evidenza dovrà contenere le chiavi “seo” e “WordPress”.
Personalmente, a questa immagine do lo stesso titolo dell’articolo. Se il mio articolo si intitola “come fare seo”, la mia immagine in evidenza sarà titolata nello stesso modo. E’ la prima immagine che googlebot incontra e voglio che comprenda subito di cosa si parla nell’articolo.
Le immagini successive saranno rinominate a seconda del contenuto del testo che le circonda. Se mettessi un’immagine in questo paragrafo, intitolato “i titoli delle immagini”, sicuramente la titolerei, “ottimizzazione seo dei titoli delle immagini“, o qualcosa di simile.
Come rinominare un’immagine.
- Scaricatela
- Posizionate il cursore sull’immagine e cliccateci sopra con il tasto destro
- Seleziona “rinomina”
- Scrivete il titolo dell’immagine
- Date il comando “invio”
Attributo ALT e TITLE delle immagini
Benché è noto che molti blogger che utilizzano WordPress non conoscono una riga di HTML, è bene sapere che quando vengono inserite delle immagini in una pagina web, essa può contenere due attributi: ALT (alternate text) e TITLE (titolo immagine).
Il title è nato per permettere a persone con difficoltà visive, di ascoltare attraverso dei browser appositi, il titolo dell’immagine in modo da poter comprendere che in quel punto della pagina vi è un’immagine e cosa rappresenta quell’immagine. L’attenzione alla user experience di ogni tipo di utente, dovrebbe obbligarci ad integrare questo attributo alle nostre immagini, inserendo nel campo una descrizione dell’immagine stessa.
I Seo Specialist per molti anni hanno sfruttato questa opportunità per migliorare il posizionamento dei propri siti web, utilizzando questo attributo per rimpinzarlo di keyword e servendo ai browser frasi senza senso. Per questo Google non considera più questo attributo utile al posizionamento. Potreste non implementarlo senza inficiare la vostra attività SEO. Ma volete proprio privare le persone meno fortunate di voi di questa funzionalità?
Diverso il discorso per l’attributo ALT. Non potendo “leggere” le immagini, i motori di ricerca leggono la loro descrizione inserita nell’alternate text per capire cosa rappresentano ed inserirle nei loro indici. Utilizzate questo strumento per dare una descrizione all’immagine utilizzando una frase attinente al discorso che la contorna. Le immagini indicizzate vanno a finire dritte dritte su Google Images.
Ed ecco come inserire l’attributo alt e l’attributo title alle vostre immagini con WordPress.
- Portatevi su “Media”
- Cliccate sul pulsante “Aggiungi Nuovo”
- Cliccate sul Pulsante Seleziona i File
- Selezionate l’immagine dal vostro PC o dispositivo e caricatela
- Nel lato destro avrete una colonna con i campi titolo e testo alternativo da popolare. Vedi immagine successiva.
Nel campo titolo, WordPress scriverà automaticamente il titolo che avete dato all’immagine. Il campo didascalia serve per inserire una didascalia ala vostra immagine. Mettetela. Anche questo particolare favorisce l’ottimizzazione della SEO. E’ il testo visibile più vicino all’immagine ed ha una sua rilevanza.
Nel campo “Testo Alternativo” inserirete la frase che andrà a popolare l’ALT tag. Inseritela.
Il campo descrizione invece serve per impostare una meta description all’immagine. Potete farne a meno se…
A cosa serve il campo descrizione delle immagini in WordPress
Quest’ultimo campo merita un approfondimento. WordPress, essendo un CMS che restituisce pagine “dinamiche”, genera anche una pagina specifica per ogni immagine. Quando questo accade, WordPress considera quella pagina alla stregua di tutte le altre e restituisce per essa anche una meta description. La meta description viene presa proprio da qui.
Personalmente evito che questo accada, sfruttando la funzione “Reindirizza le URL degli allegati all’URL del post genitore” presente nel plugin Yoast SEO. Con questa opzione attivata, non avrò mai pagine dedicate alle sole immagini, e nel caso queste vengano richiamate, il browser sarà reindirizzato alla pagina o all’articolo contenente l’immagine stessa.
Inserire il Title Tag alle immagini su WordPress
Adesso, se volete, potete inserire il title tag all’immagine. Una volta che l’immagine viene inserita nell’articolo, se nell’editor clicchiamo sull’immagine vedremo comparire la possibilità di modificarla (cliccate sul simbolo della matita nella barretta che appare). Andando in modifica scopriremo che il campo title è tristemente vuoto. Come detto non è un fattore che influenza la SEO e potete anche evitare di inserire questa informazione. Ma se volete ottimizzarla per il discorso fatto prima, è qui che dovete scrivere il title tag.
Impostare immagini delle giuste dimensioni
E’ molto importante inserire le immagini delle giuste dimensioni. Ciò permetterà di ottimizzare la SEO dell’intera pagina. Inserire immagini troppo grandi infatti, farà si che il browser si trovi a doverle “scalare” alla giusta dimensione prima di visualizzarle. Questo passaggio comporta tempi di caricamento della pagina più lunghi ed invece dobbiamo fare in modo che le nostre pagine si carichino il più velocemente possibile.
Ma come stabilire le giuste dimensioni per le nostre immagini? Per farlo potete far riferimento alla guida di configurazione del tema scelto per il vostro sito. Se non l’avete, basterà visualizzare con Chrome o Mozilla Firefox una pagina del vostro sito. Portatevi con il mouse su una riga e selezionatela. Poi fate click con il tasto destro del mouse e selezionate “ispeziona elemento“. Vedrete quindi apparire la larghezza del container della pagina.
Nell’esempio, se volessimo che la nostra immagine fosse larga quanto il container, la sua larghezza dovrà essere pari a 728 px. L’altezza potete determinarla da voi in base ai vostri gusti o preferenze. Se voleste inserire un’immagine più piccola, allineata a destra o a sinistra, basterà che questa sia larga meno di 728 px. Ovviamente dovrete fare in modo che il testo abbia il suo giusto spazio, per cui fate delle prove prima di decidere la dimensione finale dell’immagine.
Come fare se abbiamo un’immagine di dimensione diversa?
Beh, se l’immagine è inferiore in larghezza, a meno che non siate abili nell’utilizzo di strumenti di fotoritocco come photoshop o, ancora meglio, Adobe Illustrator, scartatela e sceglietene un’altra per evitare di presentare una brutta immagine sgranata ai vostri lettori.
Se l’immagine è più grande potete utilizzare un qualsiasi programma di fotoritocco per portarla alle giuste dimensioni. Photoshop o Gimp saranno più che idonei. Ma potete farlo anche con il classico Paint di Windows. Ecco come.
- Aprite l’immagine con Paint
- Cliccate sul pulsante “ridimensiona”
- Selezionate Pixel nella finestra che si apre
- Inserite il valore della larghezza, lasciando spuntata la voce “Mantieni proporzioni”
- Cliccate su “Ok”
- Fate click su File >>> Salva con nome
- Selezionate con l’estensione Jpg e Salvate
L’unica pecca nell’utilizzare paint è che la vostra immagine sarà salvata a 96 dpi. Meglio abbassare questo valore a 72 che è la risoluzione ottimizzata per gli schermi dei pc. Per questo sarebbe meglio che adoperiate Gimp. Il programma è gratuito e per sapere come fare a ridimensionare un’immagine seguite quest semplice tutorial. E’ davvero molto ma molto semplice.
Ridurre il peso delle immagini
Abbiamo detto che tempi brevi di caricamento delle pagine favoriscono la SEO. Per questo abbiamo scalato le immagini alla giusta dimensione. Naturalmente scalare le immagini non vuol dire per forza diminuzione del peso, anche se spesso è così. Per fare in modo di alleggerire il peso delle immagini utilizzeremo due accortezze.
La prima è quella di salvare le immagini ridimensionate a 72 dpi. Possiamo farlo con Gimp o Photoshop per poi salvarle in modalità “Salva per il web”. Ma per chi non è avvezzo all’utilizzo di questi strumenti potrebbe essere utile servirsi di un tool online che alleggerisce il peso delle immagini per noi: TinyPNG.
Questo strumento online fa in modo che le immagini caricate, possano poi essere scaricate ridotte di peso, senza intaccare la qualità dell’immagine. Una vera comodità che utilizzo spesso.
Il tocco finale da vero NERD per ottimizzare le immagini con WordPress
Ma non è finita qui perché agendo sul file functions.php, possiamo fare in modo che le immagini siano servite ancora più leggere, restituendole al browser con qualità leggermente ridotta. Naturalmente non è che si possa esagerare con la riduzione della qualità altrimenti le immagini farebbero schifo. Però possiamo trovare un ottimo compromesso dimensione/qualità settando un valore pari all’80%. Ecco come fare.
- Scaricate il file functions.php ed apritelo con un editor di testo
- Inserite la riga di codice che segue alla fine del file e prima della chiusura ?>
- Salvate e ricaricate il file.
add_filter( ‘jpeg_quality’, create_function(‘ ‘, ‘return 80;’ ));
Per completezza, il file functions.php lo trovate nel percorso Wp-Content –> Themes –>Nome-Tema —> functions.php
L’ottimizzazione delle immagini in ottica SEO non finisce qui.
Ci sono altri piccoli aspetti da non trascurare:
- E’ bene che ogni vostro articolo ne contenga almeno una. E’ dimostrato che articoli contenenti un’immagine si posizionino meglio di quelli senza. Attenzione, questo non vuol dire che se ne mettete tante sarete ancora più favoriti. I test dicono che la quantità di immagini non influisce sul posizionamento.
- Se create delle gallerie immagini fate in modo che siano categorizzate per tema. Se ad esempio avete un hotel al mare è una buona pratica dividere le gallerie categorizzandole in questa maniera: foto albergo, foto spiagge, foto eventi.
- Create una sitemap per le immagini da inviare a Google. I plugin SEO per WordPress di solito prevedono questa funzione.
Siamo giunti alla fine di questo articolo e spero abbiate compreso l’utilità dell’ottimizzazione SEO delle immagini. Anche loro possono portare visitatori al vostro sito. Perché privarsi di questa opportunità?
ottio lavoro…. grazie mi servirà…
Grazie Maurizio.
Ciao Flavio, io sto utilizzando Gimp per editare ed ottimizzare le immagini, secondo te quale deve essere in KB il peso massimo ottimale di una foto per avere sufficienti dettagli, ma senza appesantire il caricamento?
Ciao Fabrizio. Mi scuso per il ritardo nella risposta ma il commento era stato filtrato da akismet e finito nello spam.
Detto questo non ci sono regole assolute. Semplicemente l’immagine deve essere più leggera possibile mantenendo però una nitidezza accettabile.
Bisogna trovare un compromesso. Puoi salvare le immagini a 72 dpi ed evitare che il browser debba scalarne le dimensioni. Per esempio se hai un box immagine da 400×400, prepara l’immagine con dimensioni 400×400 a 72 dpi.
Saluti
Ciao Flavio, ho notato che in ogni foto c’è una scheda proprietà, all’interno trovo la pagina dettagli con queste diciture:
Titolo
Oggetto
Classificazione (con stelline)
Tag
Commenti
Autori
Copyright
ecc, ecc.
A cosa servono?
Possono aiutare a rendere più visibili le foto pubblicate?
Grazie
Tiziano
Ciao Tiziano. Quelle sono le meta informazioni dell’immagine. Non occorre tutto questo. Quello che serve è nominare la foto con una frase che contenga la keyword e inserire nell’html della pagina l’alternate text e il title tag. Se poi ci metti anche la didascalia è ancora meglio.
Saluti
Come sempre ottimo articolo da conservare con cura ;-
Posso chiederti se usi un plug-in particolare per la gestione delle gallerie? Io per i miei lavoretti avrei pensato di optare per la versione PRO di Nextgen Gallery perché lo trovo abbastanza personalizzabile su quelle che sono le esigenze personali.
Ciao Alberto e grazie.
No, non ho un plugin preferito. Dipende da cosa voglio ottenere e opto per il plugin che mi da il risultato voluto nel più breve tempo possibile. Ovviamente Nextgen Gallery PRO mi piace molto ed è uno dei migliori in assoluto. Ci fai praticamente tutto.
Grazie per la risposta Flavio se posso ne approfitterei per strapparti un altro consiglio sulla SEO delle immagini; ho un dubbio riguardante l’eventuale inserimento del nome/brand dell’oggeto del sito (azienda, studio medico, società tra privati etc…) come suffisso finale nel nome di tutte le immagini caricate all’interno dello stesso o piú specificatamente nel nome delle foto che riguardano direttamente l’attività promossa dal sito web come per esempio la fotogallery dell’azienda.
L’idea di inserire questo tipo di suffiso nasce dall’esigenza di far saltare fuori le foto nei risultati in ricerche per immagini riguardanti il nome dell’attività; tuttavia cosí facendo non vorrei sottrarre inutilmente spazio prezioso nel nome per l’inserimento di altre keyword visto che google potrebbe ugualmente associare le immagini al nome dell’azienda semplicemente analizzandone la SEO del sito.
Esempio pratico supponiamo di avere una paginetta dedicata alla fotogallery cosí fatta:
title: Galleria Fotografica | Pincopallino srl
h1: Foto della sede di Pincopallino srl
e poi una fotogallery con una ventina immagini con nome e tag alt cosí strutturati con il seguente schema:
– alt: macchinario xyz | Pincopallino srl nome-file: macchinario-xyz-pincopallino-srl.jpg
– alt: foto-recepttion | Pincopallio srl mome-file: foto-reception-pincopallino-srl
In buona sostanza ripetere Pincopallino srl nella parte finale del nome delle immagini e nel tag alt è utile o inutile visto che è già inserito nella url e nella SEO? omettendolo nelle immagini non si rischia che una ricerca per immagini “Pincopallino srl” possa produrre un pessimo risultato?
Ciao Alberto. No, non occorre secondo me. Saluti 🙂
Ciao Flavio.
Da circa un paio d’anni ho aperto un blog di viaggi.
Allora non sapevo nulla di SEO, ma da qualche tempo sto cercando di imparare qualcosa.
Mi sono accorto di aver combinato un bel disastro: ho caricato in circa 139 post una marea di immagini (migliaia…se non erro) senza cambiare il nome del file ma lasciando quello in codice assegnato dalla fotocamera.
In più non ho mai messo nessuna descrizione alternativa (l’unica cosa che scrivevo era la didascalia).
Ho un problema enorme: ho acquistato un plugin per una quindicina di dollari (quindi fortunatamente una cifra irrisoria) che mi permette per un anno di modificare automaticamente o manualmente i dati dei “media” caricati in WordPress.
Dopo averne modificati un centinaio circa (uno per uno…) sono andato a verificare sul sito cosa fosse successo e tali modifiche non si notano.
Domande:
A) Esiste qualcosa (un plugin o altro) che mi consenta di modificare ed ottimizzare le immagini direttamente “on page” in un tempo decisamente più breve che fare tutto a mano foto per foto?
B) Hai suggerimenti da darmi su come fare per terminare il lavoro prima della vecchiaia?
Ho le mani nei capelli perchè non so come fare…
Buona serata
Ciao Juri. Io non mi strapperei i capelli. E’ vero che le immagini ottimizzate sono un bene per la SEO ma è anche vero che ciò che conta è l’esperienza utente sul tuo sito. Le immagini si caricano velocemente?
Quando sono così tante è impensabile andare a modificarle tutte una per una. Se non ricordo male c’è un plugin che rinomina le immagini massivamente. Dovrebbe essere questo https://wordpress.org/plugins/media-file-renamer/. Il plugin rinomina le immagini prendendo spunto dal titolo dell’articolo. Quello che rischi però è che alcune immagini non vengano visualizzate sugli articoli a causa del cambio di percorso. Per questo un check a mano di tutti gli articoli è poi d’obbligo. Altra cosa che puoi fare è ridimensionarle (immagino che se non le hai rinominate, non le hai nemmeno alleggerite). Per farlo ci sono diversi plugin. Io ho scoperto recentemente https://wordpress.org/plugins/shortpixel-image-optimiser/. E’ un plugin freemium che comprime le immagini per migliorarne i tempi di caricamento. Con una decina di euro dovresti poter comprimere fino a 10000 immagini. A 30 euro arrivi a 50000.
Spero di esserti stato d’aiuto.