Introduzione
Una buona ottimizzazione SEO non consiste nell’inserire parole chiave in modo casuale, ma nel comunicare con chiarezza l’argomento e lo scopo di una pagina. Tre elementi HTML molto utili per iniziare sono il tag title, la meta description e l’attributo alt delle immagini.
Questi elementi svolgono funzioni diverse. Il title identifica la pagina nei risultati di ricerca e nella scheda del browser. La meta description offre un’anteprima del contenuto e può incoraggiare l’utente a fare clic. L’attributo alt descrive un’immagine quando non può essere visualizzata e migliora l’accessibilità per chi utilizza tecnologie assistive.
Il sotto-argomento di questo tutorial è la coerenza tra questi tre elementi. Consideriamo una pagina dedicata a un corso di fotografia per principianti. Il titolo, la descrizione e le immagini dovrebbero presentare lo stesso contenuto senza promettere informazioni che la pagina non offre.
Codice completo
<title>Corso di fotografia per principianti | FotoLab</title>
<meta
name="description"
content="Impara le basi della fotografia con un corso pratico per principianti: esposizione, messa a fuoco e composizione."
>
<main>
<article>
<h1>Corso di fotografia per principianti</h1>
<p>
Un percorso pratico per imparare a usare la fotocamera
e realizzare immagini più consapevoli.
</p>
<img
src="fotografa-regola-dei-terzi.jpg"
alt="Fotografa mentre applica la regola dei terzi in un parco"
width="1200"
height="800"
>
<h2>Che cosa imparerai</h2>
<ul>
<li>Come controllare esposizione e luminosità</li>
<li>Come scegliere la messa a fuoco</li>
<li>Come applicare le regole base della composizione</li>
</ul>
<img
src="macchina-fotografica-su-tavolo.jpg"
alt="Macchina fotografica digitale appoggiata su un tavolo di legno"
width="1200"
height="800"
>
</article>
</main>Spiegazione
Il tag title
Il tag title deve riassumere con precisione il contenuto della pagina. Non è il titolo visibile dell’articolo, anche se spesso contiene informazioni simili all’elemento h1. Viene mostrato nella scheda del browser e può essere utilizzato dai motori di ricerca come titolo del risultato.
Nell’esempio, “Corso di fotografia per principianti” indica immediatamente l’argomento principale. L’aggiunta del nome “FotoLab” identifica il sito o il progetto. È preferibile evitare titoli generici come “Home”, “Pagina corso” o “Benvenuti”, perché non aiutano né gli utenti né i motori di ricerca a comprendere il contenuto.
La meta description
La meta description contiene una breve presentazione della pagina. Non garantisce direttamente un miglior posizionamento, ma può influenzare il numero di persone che scelgono il risultato nella pagina di ricerca.
Una descrizione efficace spiega:
- Qual è l’argomento della pagina;
- Per quale tipo di utente è utile;
- Quali informazioni o vantaggi può trovare il visitatore.
La descrizione dell’esempio è coerente con il title: parla di fotografia, principianti e contenuti concreti come esposizione, messa a fuoco e composizione. È meglio scrivere una frase naturale invece di ripetere la stessa parola chiave molte volte.
L’attributo alt
L’attributo alt fornisce una descrizione testuale dell’immagine. È importante per l’accessibilità: un lettore di schermo può comunicare questa descrizione a una persona non vedente. Inoltre, il testo alternativo può essere utilizzato quando l’immagine non viene caricata.
Un buon alt descrive ciò che è realmente importante nell’immagine e il suo rapporto con il contenuto. “Fotografa mentre applica la regola dei terzi in un parco” è più utile di “foto fotografia corso”, perché comunica una scena concreta e comprensibile.
Se un’immagine è puramente decorativa e non aggiunge informazioni, è possibile usare un attributo vuoto:
<img src="separatore-decorativo.svg" alt="">L’attributo vuoto comunica alle tecnologie assistive che l’immagine può essere ignorata. Non bisogna invece omettere completamente alt senza una motivazione precisa.
Best practice
- Rendi coerenti i messaggi: il title, la description e gli alt devono descrivere la stessa pagina senza creare aspettative errate.
- Scrivi pensando all’utente: usa frasi naturali e informazioni utili, non elenchi artificiali di parole chiave.
- Evita il keyword stuffing: ripetere continuamente la stessa espressione può peggiorare la leggibilità.
- Distingui immagini informative e decorative: assegna un alt descrittivo alle prime e un alt vuoto alle seconde.
- Non inserire “immagine di” nell’alt: il lettore di schermo comunica già che si tratta di un’immagine.
- Controlla la pertinenza: se l’immagine mostra una fotocamera, l’alt non dovrebbe parlare di un corso o di una fotografa che non compare nella scena.
- Evita titoli duplicati: ogni pagina importante del sito dovrebbe avere un title specifico.
- Usa dimensioni delle immagini: gli attributi width e height aiutano il browser a riservare lo spazio corretto e possono ridurre spostamenti visivi durante il caricamento.
- Verifica il risultato visibile: il testo del title e della description deve rappresentare davvero ciò che l’utente troverà nella pagina.
Riepilogo
Title, meta description e alt sono elementi semplici, ma contribuiscono alla chiarezza tecnica e comunicativa di una pagina HTML. Il title identifica il documento, la meta description ne presenta il valore e l’alt rende le immagini comprensibili anche senza contenuto visivo.
La strategia più efficace è mantenerli coordinati con l’argomento reale della pagina. Prima di pubblicare, chiediti se un utente può capire il contenuto leggendo solo il title e la description e se può comprendere il ruolo di ogni immagine attraverso il relativo alt.