L’ottimizzazione delle immagini del tuo sito web non è un compito da poco. Non solo devi assicurarti che le dimensioni dei file siano gestibili per evitare lunghi tempi di caricamento delle pagine, ma presentano anche molte opportunità per migliorare l’ottimizzazione per i motori di ricerca (SEO) che sono facili da trascurare. Ad esempio, potresti non essere a conoscenza dell’attributo del titolo dell’immagine e del ruolo che svolge negli elementi visivi del tuo sito.
In questo post, faremo luce sull’attributo del titolo dell’immagine, discuteremo di come differisce dall’attributo alt e parleremo di cosa significa per la tua strategia SEO. Ti mostreremo anche come nasconderlo ai visitatori del tuo sito.
Andiamo a scoprirlo insieme!
Introduzione all’attributo del titolo dell’immagine
Per prima cosa: l’attributo del titolo dell’immagine non è lo stesso del nome del file dell’immagine. Si tratta piuttosto di informazioni che possono essere incluse nel tag HTML della foto o della grafica. Ecco un esempio, con l’attributo title alla fine:
L’impatto più notevole che l’attributo titolo ha è che gli utenti possono vederlo come un “suggerimento” sul front-end del tuo sito quando passano il mouse sopra l’immagine:
Non tutti i browser supportano questa funzionalità. Tuttavia, Firefox è uno dei pochi che lo fa ed è il terzo browser più popolare sul Web. Puoi aggiungere attributi del titolo dell’immagine in WordPress tramite la tua libreria multimediale. Basta cliccare sull’immagine in questione e compilare il campo Titolo:
Puoi anche aggiungerlo direttamente nell’Editor blocchi. Espandi le Impostazioni avanzate per il blocco immagine e compila il campo Attributo titolo:
Lo scopo di rendere visibile il titolo dell’immagine al passaggio del mouse è fornire un po ‘di contesto aggiuntivo per i tuoi visitatori. Ad esempio, alcuni creatori di contenuti includeranno i nomi delle persone raffigurate nell’immagine o dettagli chiave che gli utenti potrebbero trarre vantaggio dalla conoscenza.
Tuttavia, non vuoi fare affidamento esclusivamente sull’attributo titolo, soprattutto perché non è visibile agli utenti in tutti i browser. In alcuni casi, una didascalia potrebbe essere più efficace. Inoltre, dovresti sempre assicurarti di aggiungere testo alternativo alle tue immagini, anche se hanno attributi del titolo.
Quando crei gli attributi del titolo, è meglio limitarli a poche parole. Sii selettivo e descrittivo in modo che il testo al passaggio del mouse non sia troppo lungo e offra valore ai tuoi visitatori.
La differenza tra l’attributo del titolo e l’attributo alt
Abbiamo accennato in precedenza che è importante aggiungere testo alternativo alle tue immagini anche se hai incluso un attributo del titolo. È un errore comune per i creatori di contenuti confondere l’attributo titolo dell’immagine con l’attributo alt o presumere che l’utilizzo di entrambi sia eccessivo.
L’attributo alt specifica il testo alternativo dell’immagine nel suo tag HTML. È il secondo attributo elencato nel nostro esempio di prima:
In WordPress, puoi aggiungere testo alternativo alle immagini tramite la libreria multimediale o le impostazioni di qualsiasi blocco immagine nell’Editor blocchi. Questa è la chiave per garantire che il tuo sito rispetti
gli standard di accessibilità, quindi ti consigliamo vivamente di farlo.
È estremamente importante non tentare di utilizzare l’attributo del titolo dell’immagine per sostituire l’attributo alt. Non tutti gli screen reader supportano l’attributo title e non c’è modo per gli utenti che si affidano alla navigazione da tastiera di passare il mouse su un’immagine per visualizzarla, quindi questo potrebbe portare a gravi problemi di accessibilità sul tuo sito.
Come nascondere la descrizione comando del titolo dell’immagine in WordPress
Potresti preferire nascondere la descrizione comando del titolo dell’immagine. Forse sei preoccupato che i visitatori lo troveranno fastidioso o desideri utilizzarlo principalmente per scopi SEO, ma non ritieni che sia necessario per aiutare i lettori a comprendere i tuoi contenuti.
Puoi semplicemente rimuovere l’attributo del titolo dalle tue immagini nell’Editor blocchi e nella Libreria multimediale. Tuttavia, perderai quindi tutti i potenziali vantaggi SEO che potresti vedere da esso.
Esiste un modo per nascondere completamente il box di testo al passaggio del mouse sull’immagine. Basta usare un semplice codice javascript per ottenere questo risultato.
Aggiungi il codice seguente nella sezione < head > in Divi > Opzioni tema > Integrazione:
jQuery(document).ready(function($) {
$(“img”).mouseenter(function() {
let $lwp_title = $(this).attr(“title”);
$(this).attr(“lwp_title”, $lwp_title);
$(this).attr(“title”, “”);
}).mouseleave(function() {
let $lwp_title = $(this).attr(“lwp_title”);
$(this).attr(“title”, $lwp_title);
$(this).removeAttr(“lwp_title”);
});
});
</script>
Conclusione
È possibile creare contenuti online per anni senza mai pensare agli attributi del titolo delle immagini. Tuttavia, ignorarli completamente potrebbe essere un’opportunità persa per fornire ulteriore contesto ai tuoi utenti. Ancora più importante, un uso improprio di questo attributo potrebbe avere conseguenze negative per l’accessibilità e la SEO del tuo sito.
In questo post, abbiamo discusso le differenze tra l’attributo del titolo dell’immagine e l’attributo alt in modo da poter massimizzare il tuo SEO. Ti abbiamo anche illustrato come nascondere la descrizione comando del titolo dell’immagine sul frontend in modo che i visitatori non possano vederla quando passano il mouse su una foto o un’immagine.
Hai domande sull’attributo del titolo dell’immagine o sull’ottimizzazione dell’immagine? Scrivici nella sezione commenti qui sotto!
Prima di tutto complimenti per i contenuti.
Volevo esporti un problema che mi si è verificato oggi in WordPress con tema Divi. Quando vado con il mouse su una qualsiasi immagine mi appare il rettangolino con il nome del file di immagine, cosa che prima non succedeva. Guardando nella libreria media di WP ho rimosso il titolo dell’immagine che corrispondeva anche al nome del file di immagini senza però risolvere il problema.
Ho provato ad aggiungere nella sezione “integrazione” di Divi a livello dell’head il javascript che hai indicato sopra ma sembra non avere alcun effetto. Cosa potrebbe essere?
Ti chiedo se non ti arreca troppo disturbo se puoi darmi una mano a risolvere.
Grazie 1000
Ciao Marco, grazie davvero per i complimenti! Quindi se intendi nascondere completamente gli attributi al passaggio del mouse, questo codice dovrebbe funzionare:
<script>jQuery(document).ready(function($) {
$('img').hover(function()
{ $(this).removeAttr('title'); });
});
</script>
Grazie 1000 Riccardo per la tua superveloce risposta.
Ho risolto utilizzando un plugin che permette di scrivere frammenti di codice, quando provavo ad insrirlo nella parte “integrazioni” di Divi a livello “head” non mi funzionava.
Grazie ancora per il tuo aiuto e buona giornata.