Programmazione Web » Html » Utilizzare i tag di intestazione per favorire il posizionamento nei motori di ricerca
Utilizzare i tag di intestazione per favorire il posizionamento nei motori di ricerca
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 720 volte
In questo tutorial vedremo una tecnica interessante per ottimizzare l'accessibilità del nostro sito sia agli utenti sia ai motori di ricerca. I tag h1, h2, h3 definiscono le intestazioni di un documento e, sebbene spesso siano poco utilizzati, essi sono considerati elementi chiave sia dai browsers sia dai motori di ricerca.
Tralasciando i browsers, focalizziamo la nostra attenzione sui motori di ricerca. Di una pagina web, il motore valuta soprattutto i metatags e i tags "principali" del documento. Intendiamo per principali quei tag che dovrebbero contenere di un documento le informazioni più importanti. Questi tags sono certamente i tag di intestazione, H.
L'importanza quindi di avere un documento in cui si evidenzino le varie aree tramite intestazioni è fondamentale, dal momento che tale struttura permette di rendere più evidenti le informazioni chiave (titoli, spot, ecc..) ponendo all'interno di un tag H.
Applicare lo stile CSS ai tag h1, h2, h3
Arrivati al punto di aver compreso l'importanza dei tags h1, h2, h3, è necessario puntualizzare che per quanto riguarda l'assegnazione di elementi di stile sia possibile trattare tali marcatori come normali tags del documento. Quindi nel caso in cui volessimo che il carattere del tag h1 sia di colore rosso, digiteremo semplicemente questo codice:
h1 {
color:#CC3300;
}
E' tuttavia frequente che nello stesso documento due elementi h1 debbano avere caratteristiche stilistiche e quindi estetiche differenti, conformemente al layout della pagina. A tal proposito basterà creare delle classi e definire di esse il tag h1. Vediamo un esempio.
Possediamo due DIV, "articoli" e "guide". Ognuno di questi possiede un titolo di intestazione, posto in h1, che vorremmo essere in un caso arancione, e nell'altro azzurro. La struttura HTML è questa:
...
<div id="articoli">
<h1>Elenco degli articoli</h1>
...
Qui le informazioni riguardanti il paragrafo
...
</div>
<div id="guide">
<h1>Elenco delle guide</h1>
...
Qui le informazioni riguardanti il paragrafo
...
</div>
...
Vediamo ora il codice CSS:
...
#articolo {
/* Qui le eventuali informazioni del DIV articolo */
}
#articolo h1 {
color:#FFCC00;
/* Imposto il colore dello h1 del DIV articolo ad arancione */
}
#guide {
/* Qui le eventuali informazioni del DIV guide */
}
#guide h1 {
color:#0099FF;
/* Imposto il colore dello h1 del DIV guide ad azzurro */
}
...
Conclusione
Abbiamo quindi compreso l'importanza dei tag di instestazione, nonchè attraverso un esempio siamo stati in grado di personalizzarne l'aspetto formale.
Logicamente a questo punto spetta al lettore fare proprio e personalizzare il tutorial, e quindi utilizzare nei propri documenti i tags di intestazione e definirne le caratteristiche formali come meglio crede.
Aggiungi questo tutorial ai preferiti
