Introduzione agli attributi Alt tag e Title delle immagini

Discutiamo sull’attributo del titolo dell’immagine, di come differisce dall’attributo alt e parleremo della tua strategia SEO.

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:

<img src=”filename.jpg” alt=”descrizione dell’immagine” title=”titolo immagine”>

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:

attributo title

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:

titolo attributo

Puoi anche aggiungerlo direttamente nell’Editor blocchi. Espandi le Impostazioni avanzate per il blocco immagine e compila il campo Attributo titolo:

attributo titolo 3

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:

<img src=”nomefile.jpg” alt=”descrizione della immagine” title=”image title”>
Lo scopo del testo alternativo è descrivere gli elementi visivi agli utenti che non possono vederli, perché l’immagine non è stata caricata o perché stanno utilizzando uno screen reader. Questo testo verrà visualizzato al posto dell’immagine nei casi in cui non può essere renderizzato:
attributo titolo

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:

<script>
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>
Se utilizzi Divi, puoi aggiungere questo codice accedendo a Divi> Opzioni tema> Integrazione:
integrazione codice
Il primo editor di codice su questa schermata aggiungerà JavaScript alla sezione < head > del tuo sito proprio come farebbe Inserisci intestazioni e piè di pagina.

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!

Mostra/Nascondi Commenti (3 commenti)
L

3 Commenti

  1. 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

    Rispondi
    • 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>

      Rispondi
      • 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.

        Rispondi

Invia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ti potrebbe anche interessare…

Persona in procinto di accendere un laptop

Come scrivere articoli per il tuo blog di WordPress

In questo articolo vi raccontiamo come scrivere articoli efficaci per i blog di WordPress e perchè è importante farlo.
Persona che guarda un computer fisso alla scrivania

Come ottimizzare la homepage del tuo sito web

Se sei alla ricerca del metodo più efficace per ottimizzare pagine, in questo post ti spiego come è possibile farlo.
Laptop con pagina sul backend di WordPress

Come installare un plugin su WordPress

Installare un plugin su Wordpress è qualcosa che si deve assolutamente sapere per integrare nuove funzionalità al tuo sito Web.
Mano che legge telefono smartphone con Google

Come indicizzare il tuo sito su Google

In questo articolo troverai tutte le indicazioni necessarie per riuscire a indicizzare il tuo sito su Google al meglio.
Persona che lavora a un sito wordpress

Come ricevere più commenti nel tuo blog

In questo articolo vedremo come è possibile ricevere più commenti nel tuo blog e aumentare le interazioni social.
Schermata backend di WordPress

Come aggiornare i plugin di WordPress

Aggiornare plugin è un’attività essenziale affinché Wordpress funzioni al meglio. In questo articolo ti mostro come aggiornare i plugin del tuo sito.
Divi page builder

Cosa sono i Page Builder per WordPress

Oggi vediamo cosa sono i page builder per Wordpress e perché possono rappresentare uno strumento utile ed efficace.
Protezione attacchi sito Wordpress Illustrazione

Verificare la presenza di malware nel tuo sito WordPress

In questo post conoscerai alcuni strumenti per verificare se il tuo sito è affetto da malware e come mantenerlo protetto da attacchi hacker.
Sosituire Icona Hamburger Divi

Come sostituire l’icona hamburger per mobile nel tema Divi

In questa breve guida imparerai a sostituire l’icona hamburger standard di Divi per dispositivi mobili come cellulari e tablet.
Wocoomerce Shopping Wordpress

Come disabilitare l’uso di una password forte in WooCommerce

È importante disabilitare l’uso di password complesse in WooCommerce per non indurre gli utenti ad abbandonare la fase di checkout.

Layout Divi

Scopri un’ampia collezione di layout Divi in continuo aggiornamento.

Membership

Benvenuto nel club segreto dei web designer! Uno spazio riservato a chi ha scoperto i vantaggi dei layout Divi per creare siti web moderni e professionali.

N 90+ Layout Divi
N Licenza Lifetime
N Download illimitati
N Documentazione
N SUPPORTO VIA EMAIL

0,00 €

Possibilità di utilizzare tutti i layout Divi per sempre, senza limitazioni.

Divi Logo

Tema Divi

Il più potente e accessibile dei temi WordPress è disponibile anche in italiano!

Divi Builder