Comprensione dell'attributo del titolo dell'immagine

Ottimizzare le immagini del tuo sito web non è un compito da poco. Non solo devi assicurarti che le dimensioni dei loro file siano gestibili per evitare lunghi tempi di caricamento della pagina, ma presentano anche molte opportunità per migliorare la tua ottimizzazione dei 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 title 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.

Immergiamoci subito!

Iscriviti al nostro canale Youtube

Un'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 dell'elemento grafico. Ecco un esempio, con l'attributo title alla fine:

<img src="filename.jpg" alt="description of your image" title="image title">

L'impatto più notevole dell'attributo title è che gli utenti possono vederlo come un "descrizione comando" sul front-end del tuo sito quando passano il mouse sopra l'immagine:

Non tutti i browser supportano questa funzione. Tuttavia, Firefox è uno dei pochi che lo fa ed è il terzo browser più popolare sul web. Puoi aggiungere gli 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 title, 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 del testo alternativo alle tue immagini, anche se hanno gli 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 fornisca valore ai tuoi visitatori.

La differenza tra l'attributo Title e l'attributo Alt

Abbiamo detto prima che è importante aggiungere testo alternativo alle tue immagini anche se hai incluso un attributo title. È un errore comune per i creatori di contenuti confondere l'attributo del 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 precedente:

<img src="filename.jpg" alt="description of your image" 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 usando uno screen reader. Questo testo verrà visualizzato al posto dell'immagine nei casi in cui non può essere renderizzato:

In WordPress, puoi aggiungere testo alternativo alle immagini tramite la tua libreria multimediale o le impostazioni di qualsiasi blocco di immagini nell'editor blocchi. Questa è la chiave per garantire che il tuo sito soddisfi 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 con il mouse su un'immagine per vederla, quindi questo potrebbe portare a seri problemi di accessibilità sul tuo sito.

In che modo l'attributo del titolo dell'immagine influisce sul SEO

Ci sono molti messaggi contrastanti quando si tratta di quanto sia importante l'attributo del titolo dell'immagine per la SEO. Alcuni sostengono che sia un modo eccellente per incorporare parole chiave aggiuntive, mentre altri dicono che i bot dei motori di ricerca non lo scansionano nemmeno.

Per andare al sodo, l'attributo del titolo dell'immagine non è un fattore di classificazione diretto. L'ottimizzazione delle immagini aggiungendo titoli a tutte probabilmente non cambierà in modo significativo la visibilità delle tue pagine nei risultati dei motori di ricerca.

Tuttavia, anche l'inclusione degli attributi del titolo non danneggerà il tuo sito dal punto di vista SEO. In effetti, Google lo consiglia. Se i bot dei motori di ricerca li scansionano e incorpori parole chiave, potresti essere in grado di dare alle tue immagini una spinta almeno nei risultati di ricerca di Google Immagini.

Inoltre, i titoli delle immagini possono migliorare l'esperienza utente (UX) del tuo sito condividendo i dettagli chiave con i visitatori. Ciò può contribuire indirettamente alla SEO influenzando fattori di ranking come visualizzazioni di pagina, durata della sessione e altre metriche simili.

Anche così, come abbiamo detto più volte, non tutti i browser e i dispositivi supportano il testo al passaggio del mouse. Esaminare la tua libreria multimediale e aggiungere titoli a ogni file potrebbe essere un'enorme perdita di tempo se la maggior parte dei tuoi utenti non lo vedrà mai.

Come nascondere il tooltip 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 vorranno usarlo principalmente per scopi SEO, ma non lo ritengono 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 tua libreria multimediale. Tuttavia, perderai quindi tutti i potenziali vantaggi SEO che potresti vedere da esso.

La maggior parte delle persone che vogliono nascondere il tooltip finisce per aggiungere JavaScript ai propri siti in modo che possano mantenere l'attributo nei tag dell'immagine ma impedirne la visualizzazione sul front-end. Ti consigliamo di utilizzare un plug-in come Inserisci intestazioni e piè di pagina per semplificare questo processo.

Aggiungi il seguente codice nella sezione <head> , racchiuso nei tag di script:

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

Se stai utilizzando Divi, puoi saltare l'installazione del plug-in aggiuntivo e aggiungere questo codice accedendo a Divi > Opzioni del tema > Integrazione :

Il primo editor di codice in 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 e non pensare mai agli attributi del titolo delle tue immagini. Tuttavia, ignorarli completamente potrebbe essere un'opportunità mancata per fornire un contesto aggiuntivo ai tuoi utenti. Ancora più importante, l'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 spiegato come nascondere la descrizione comando del titolo dell'immagine sul front-end in modo che i visitatori non possano vederla quando passano il mouse su una foto o un elemento grafico.

Hai domande sull'attributo del titolo dell'immagine o sull'ottimizzazione dell'immagine? Lasciali per noi nella sezione commenti qui sotto!

Immagine di Jane Kelly / Shutterstock.com