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.

La maggior parte delle persone che vogliono nascondere il suggerimento finiscono per aggiungere JavaScript ai propri siti in modo da poter mantenere l’attributo nei tag immagine ma impedirne la visualizzazione sul front-end. Si consiglia di utilizzare un plug-in come Inserisci intestazioni e piè di pagina per semplificare questo processo.

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

jQuery(document).ready(function($) {
$(‘img[title]’).each(function() { $(this).removeAttr(‘title’); });
});
Se utilizzi Divi, puoi saltare l’installazione del plug-in aggiuntivo e aggiungere questo codice accedendo a Divi> Opzioni tema> Integrazione:
integrazione codice
Il primo editor di codice su questa schermata aggiungerà JavaScript alla sezione 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 front-end 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 (0 commenti)
L

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato.

Ti potrebbe anche interessare…