Le intestazioni e la struttura di una pagina

Modulo 3: La base tecnica di una pagina · Tempo di lettura: 11 minuti

Obiettivo della lezione: Al termine di questa lezione saprà costruire una pagina con un titolo principale chiaro e sottotitoli logici, spiegare che cosa fanno Google e i lettori di schermo con le intestazioni e scrivere buoni testi alt e nomi file per le immagini.

Concetti chiave: intestazione (da <h1> a <h6>), titolo principale, sottotitolo, saltare un livello, HTML semantico, lettore di schermo, testo formattato che non è un'intestazione, testo alt, alt="" vuoto per le decorazioni, nome del file, testo nelle immagini

Le intestazioni sono l'indice della Sua pagina

A nessuno piace leggere un testo lungo senza sottotitoli. Su internet questo vale ancora di più: i visitatori prima scorrono la pagina con lo sguardo e iniziano a leggere solo quando vedono che la risposta è lì. Le intestazioni aiutano proprio in questo. Ma le intestazioni sono più di lettere grandi e in grassetto. In HTML sono elementi a sé, con un livello:

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

L'<h1> è il titolo principale: di che cosa parla questa pagina? Gli <h2> sono i capitoli, gli <h3> i paragrafi al loro interno, e così via fino a <h6>. Nell'esempio qui sopra (bouquet da sposa su misura, come lavoriamo, il primo incontro, il bouquet di prova, esempi, domande frequenti) il rientro serve solo a mostrare la struttura; nel vero HTML non ha alcuna importanza.

Due gruppi leggono davvero questa struttura:

1. Le persone che usano un lettore di schermo. Un visitatore cieco o ipovedente spesso fa elencare al lettore di schermo tutte le intestazioni e poi salta alla parte che cerca. Senza vere intestazioni la pagina è un unico lungo blocco di testo.
2. I motori di ricerca. Google usa le intestazioni per capire di che cosa parlano le diverse parti di una pagina.

Che cosa dice Google sulle intestazioni

Sulle intestazioni circolano molti miti. Ecco che cosa dice Google stesso:

• La guida introduttiva alla SEO di Google afferma che l'ordine delle intestazioni non conta per la Ricerca Google e che non esiste un numero magico di intestazioni che una pagina deve avere. Intestazioni in un ordine logico sono però molto utili per i lettori di schermo.
• John Mueller di Google ha detto in un video (2019) che i sistemi di Google non hanno problemi con più intestazioni <h1> in una pagina. Google cerca di lavorare con l'HTML così com'è: un solo <h1>, più di uno, oppure solo testo formattato senza vere intestazioni.
• Nella documentazione sui link del titolo (lezione 3.1) Google indica però una situazione che può creare problemi: l'assenza di un titolo principale chiaro. Se in alto ci sono più intestazioni grandi e vistose e non è chiaro quale sia il titolo principale, Google può avere difficoltà a scegliere un buon link del titolo. Google consiglia di distinguere chiaramente il titolo principale, ad esempio come primo <h1> visibile.

La conclusione di questo corso: un solo <h1> chiaro per pagina è una buona abitudine, non perché altrimenti Google La penalizzi, ma perché così la pagina dice chiaramente a tutti di che cosa parla. Lettori, lettori di schermo e Google non possono fraintenderla. Per questo il controllo dell'esercizio A3.2 dà verde con esattamente un <h1> non vuoto, arancione con più di uno e rosso se non ce n'è nessuno.

Gli errori più frequenti

Costruire una pagina che dà risposte

Un buon ordine per quasi tutte le pagine:

1. Titolo principale (<h1>) che dice che cosa trova qui il visitatore. Spesso assomiglia al titolo della lezione 3.1, ma non deve essere identico. Il titolo compare nei risultati di ricerca, il titolo principale nella pagina stessa.
2. Una breve introduzione che dà subito la risposta più importante.
3. Sottotitoli (<h2>) per ogni argomento, formulati come qualcosa che il lettore cerca: "Quanto costa un bouquet da sposa?" dice di più di "Prezzi".
4. Dove serve, un <h3> sotto un <h2>, mai da solo.

La lezione 7.3 approfondisce la scrittura vera e propria. Qui ci occupiamo dello scheletro.

Immagini: testo alt e nome del file

Un motore di ricerca non "vede" una foto come la vede Lei. Google usa la visione artificiale, ma ricava molto dal testo che la circonda. La fonte più importante la indica Google stesso: il testo alt.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

Il testo alt (testo alternativo, qui "bouquet da sposa con peonie bianche ed eucalipto") ha due compiti:

• Accessibilità: un lettore di schermo lo legge ad alta voce a chi non può vedere l'immagine. Se l'immagine non si carica, il browser lo mostra al posto della foto.
• Comprensione: Google usa il testo alt, insieme alla visione artificiale, per capire che cosa c'è nell'immagine. Questo aiuta soprattutto in Google Immagini.

Ecco come scrivere un buon testo alt:

• Descriva che cosa si vede e perché si trova in questa pagina, in una breve frase.
• Usi le parole chiave solo se ci stanno in modo naturale. Google avverte che i testi alt pieni di parole chiave offrono una cattiva esperienza e possono essere considerati spam.
• Un'immagine che è solo decorazione (una linea, un motivo di sfondo) riceve un alt vuoto: alt="". Così il lettore di schermo la salta. Un attributo alt mancante è un'altra cosa: in quel caso un lettore di schermo a volte legge ad alta voce il nome del file.
• Se nell'immagine c'è un testo importante (un orario di apertura, un prezzo, un volantino), metta quel testo anche nella pagina come testo normale. Il testo dentro un'immagine è difficile da leggere per un lettore di schermo e per un motore di ricerca.

Anche il nome del file aiuta un po'. Google consiglia nomi brevi e descrittivi e cita image1.jpg o pic.gif come esempi di ciò che è meglio evitare. bruidsboeket-pioenrozen-wit.jpg dice più di IMG_4032.jpg.

Velocità e dimensioni delle immagini sono trattate nella lezione 4.3.

In pratica: le intestazioni nei website builder

• Nell'AI Builder di WebOké la prima intestazione di una pagina diventa automaticamente l'<h1> e tutte le intestazioni successive diventano <h2>. Così ogni pagina ha esattamente un titolo principale. Per ogni foto può inserire una descrizione, che diventa il testo alt. Il controllo SEO La avverte delle foto senza descrizione.
• In WordPress, nell'editor a blocchi, sceglie il livello (da H1 a H6) nel blocco Titolo. Di solito il tema trasforma già il titolo della pagina nell'<h1>; nel testo usi quindi H2 e livelli inferiori. Il testo alt si inserisce nell'immagine, nella libreria dei media o nel blocco.

Gli altri website builder funzionano in modo simile. In caso di dubbio guardi il codice sorgente (Ctrl+U) oppure cerchi <h1 con Ctrl+F.

Riepilogo

• Le intestazioni (da <h1> a <h6>) sono l'indice della Sua pagina, per lettori, lettori di schermo e motori di ricerca.
• Google non ha problemi con più <h1> o con un ordine diverso, ma consiglia comunque un titolo principale chiaro. Un solo <h1> chiaro è una buona abitudine.
• Scelga il livello in base alla struttura, non alla dimensione del carattere; preferibilmente non salti livelli.
• Un buon testo alt descrive brevemente che cosa si vede; le decorazioni ricevono alt=""; niente accumulo di parole chiave.
• Il testo importante va nella pagina, non solo in un'immagine.

Quiz

Esercizio

Esercizio A3.2: Un solo titolo principale e una struttura logica. Inserisca l'indirizzo di una pagina del Suo sito. Il programma recupera la pagina, conta le intestazioni <h1> e mostra la struttura delle intestazioni come un indice. Vedrà se c'è esattamente un titolo principale non vuoto, se vengono saltati dei livelli e quante immagini non hanno un attributo alt. Prima indichi quanti <h1> pensa che ci siano. Non ha un sito Suo? Usi www.rijksoverheid.nl.

Per approfondire

• Google Search Central, Guida introduttiva alla SEO (intestazioni, testo alt): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, Best practice per le immagini: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (intestazioni accessibili): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, Testi alternativi: https://www.w3.org/WAI/tutorials/images/