Si parla da tempo di web semantico e di come esso cambierà il panorama della rete.

Amit Kumar, product manager del sistema di ricerca di Yahoo!, ha annunciato che il suo motore di ricerca supporterà gli standard semantici.
In fase di start-up saranno supportati alcuni microformati tra cui hAtom, hCalendar, hCard, hReview, XFN. La lista è però destinata a crescere notevolmente in quanto è iniziata (o inizierà a breve) una collaborazione tra Yahoo! e la comunità che si occupa di web semantico.
I siti semantici godranno, da parte del rivale di Google, di alcuni servizi volti a fornire un nuovo tipo di ricerca agli utenti e in termini di web marketing, questa novità si traduce in possibilità: possibilità di sfruttare questo nuovo canale per aumentare le visite e le conversioni sui nostri siti.

Per sfruttare le possibilità date dal web semantico dobbiamo adeguare le nostre pagine e renderle il più possibile semantic-friendly: nasce così il SEO semantico .

In realtà è sbagliato pensare il SEO semantico come una cosa separata dal SEO tradizionale: l’arte SEO consiste nell’aumentare in qualche modo le conversioni sul sito tramite i motori di ricerca ed il SEO semantico non è altro che uno dei tanti aspetti della questione.  Quindi è corretto parlare di SEO semantico come sotto-categoria del ben più grande SEO.

Veniamo al sodo:

come si ottimizza un sito per renderlo semantic-friendly?

Qui ci addentriamo in una questione abbastanza tecnica. I fattori che rendono un sito semantic-friendly sono praticamente tutti OnPage, quindi con qualche aggiunta, modifica e spuntatina ai nostri templates riusciamo a costruire una buona base di partenza.

Vediamo un po’ come implementare i microformati di cui abbiamo parlato all’inizio dell’articolo.

Innanzitutto va premesso che per ogni microformato esiste un particolare vocabolario di termini che vanno usati in punti diversi dei tag HTML della pagina. Ad esempio alcuni andranno inseriti come class  di un tag, altri nell’attributo rel. Cominciamo proprio da qui:

Implementare XFN

Forse il più intuitivo dei microformati semantici, molto semplice da inserire nelle nostre pagine.
XFN serve per rappresentare relazioni umane attraverso i link, quindi all’interno dell’attributo rel dovremo inserire valori come “friend” se stiamo linkando il blog di un nostro amico, oppure “met colleague” se stiamo indicando il sito di un collega incontrato di persona. La sintassi è molto semplice e potete vedere come funziona qui .

Esempio: <a href="http://sito.ext" rel=”co-worker”>Il sito di un mio collaboratore</a>

hAtom, hCard, hCalendar e hReview (e simili)

La tecnica per implementare tutti questi formati è molto simile. Prendiamo come esempio hReview che serve per rendere semantic-friendly le recensioni di prodotti, servizi, ecc. Rubo l’esempio da qui e lo riporto .
Facciamo la recensione di un ristorante, il nostro codice potrebbe assomigliare a questo:
<div>
<span>5 stars out of 5 stars</span>
<h4>Crepes on Cole is awesome</h4>
<span>Reviewer: <span>Tantek</span> - April 18, 2005</span>
<blockquote><p>
Crepes on Cole is one of the best little creperies in San Francisco.
Excellent food and service. Plenty of tables in a variety of sizes
for parties large and small. Window seating makes for excellent
people watching to/from the N-Judah which stops right outside.
I've had many fun social gatherings here, as well as gotten
plenty of work done thanks to neighborhood WiFi.
</p></blockquote>
<p>Visit date: <span>April 2005</span></p>
<p>Food eaten: <span>Florentine crepe</span></p>
</div>

Per renderlo semantic-friendly è necessario semplicemente fare qualche aggiunta (in rosso):
<div class=”hreview”>
<span><span class=”rating”>5</span> out of 5 stars</span>
<h4 class=”summary”>Crepes on Cole is awesome</h4>
<span class=”reviewer vcard”>Reviewer: <span class=”fn”>Tantek</span> -
<abbr class=”dtreviewed” title=”20050418T2300-0700″>April 18, 2005</abbr></span>
<div class=”description item vcard”><p>
<span class=”fn org”>Crepes on Cole</span> is one of the best little
creperies in <span class=”adr”><span class=”locality”>San Francisco</span></span>.
Excellent food and service. Plenty of tables in a variety of sizes
for parties large and small. Window seating makes for excellent
people watching to/from the N-Judah which stops right outside.
I’ve had many fun social gatherings here, as well as gotten
plenty of work done thanks to neighborhood WiFi.
</p></div>
<p>Visit date: <span>April 2005</span></p>
<p>Food eaten: <span>Florentine crepe</span></p>
</div>

Così a occhio può sembrare complicato, ma quello che ho fatto è molto semplice.
Ho selezionato i dati chiave della recensione utilizzando l’attributo class. Ovviamente non ho inventato le classi, ma le ho prese dal vocabolario delle specifiche hReview.
I casi sono 3:

1. il valore si trova già racchiuso perfettamente dentro un tag
   <h4 class=”summary”>Crepes on Cole is awesome</h4>
   quindi aggiungo semplicemente la classe “sommario” della revisione
2. il valore è all’interno di tag, ma ci sono altri contenuti
   <span><span class=”rating”>5</span> out of 5 stars</span>
   allora separo il valore puro (5) con il tag span e gli do la classe “voto” della revisione
3. il valore non è rappresentato correttamente
   <abbr class=”dtreviewed” title=”20050418T2300-0700″>April 18, 2005</abbr>
   usando l’attributo title specifico il valore vero, se non voglio visualizzarlo nella pagina

Ora non sto a fare esempi per ogni microformato, li potete trovare nelle pagine dedicate, e sono tutti molto simili. L’unica difficoltà, se vogliamo, sta nel ricordare le classi da utilizzare. Un po’ di pratica e diventarà naturale come aggiungere un meta keywords !

Questo articolo è stato pubblicato Lunedì, 17 Marzo 2008 alle 10:49 e classificato in SEO, Web Design. Puoi seguire i commenti a questo articolo tramite il feed RSS 2.0. Puoi inviare un commento, o fare un trackback dal tuo sito.