Ce sunt datele structurate si cum putem adauga reguli de stil CSS pentru variile elemente

Ce sunt datele structurate?
Datele structurate sunt seturi de tag-uri de markup care au fost introduse cu HTML5 si au rolul de a ajuta motoarele de cautare la indexarea site-urilor web. Cu cat mai multe informatii vor fi furnizate motorului de cautare, cu atat mai bine acesta va putea intelege despre ce este vorba in site si il va putea cataloga si indexa pentru ca succesiv sa il poata propune in lista rezultatelor de cautare pentru termenii relevanti gasiti in site.

Schema.org
Lista completa a proprietatilor si exemple pentru utilizare se pot gasi pe site-ul Schema.org.

Inserarea de rich snippets se poate face manual la construirea paginilor web. In alternativa microdatele se pot adauga succesiv realizarii si publicarii paginilor in mod automat cu ajutorul instrumentului fundamental pentru web developers: Google Webmasters Tools.

ItemScope, ItemType si ItemProp
In exemplul de mai jos am inserat o oferta pentru un curs HTML5, la care am adaugat pretul si disponibilitatea.

Pentru div-ul principal care gazduieste sectiunea ofertei am adaugat atributul “itemscope” pentru a comunica interlocutorului (motorului de cautare ce viziteaza pagina) ca incepe o sectiune about in care se descrie ceva.

Ce se descrie exact in sectiunea deschisa cu itemscope indicam utilizand atributul “itemtype” inserand link-ul ce identifica oferta in repertoriul Schema.org. Itemtype este deci atributul unui Itemscope in forma unui URL definit de schema.org.

Pana acum am definit o sectiune descritiva cu Itemscope si am specificat faptul ca descriem o Oferta cu ajutorul Itemtype. Acum inseram detalii despre oferta cu ajutorul etichetelor Itemprop, prin care putem defini o lista completa de parametri pentru oferta. In exemplu de mai jos am definit numele ofertei, pretul si disponibilitatea acesteia.

<div itemscope itemtype="http://schema.org/Offer"> 
<span itemprop="name">Curs HTML5</span> 
<span itemprop="price">Ron 129</span> 
<span itemprop="availability">Disponibila!</span> 
</div>

Aplicarea regulilor CSS pentru elementele ce definesc datele structurate
Pentru elementele div, span, li etc asupra carora aplicam atribute si etichete de tip microdate nu este nevoie neaparat sa utilizam id-uri sau clase CSS. Daca avem mai multe pagini de oferte sau de descriere a produselor putem utiliza variile etichete Itemprop pentru a formata aspectul grafic CSS al elementelor.

Acest lucru se poate realiza in mod foarte intuitiv, putem formata elementele itemprop in mod singular sau seta aceleasi reguli pentru mai multe etichete.

span[itemprop="name"]
{margin: 20px; color: blue; font-size: 18px;}
span[itemprop="price"],
span[itemprop="availability"]
{padding: 10px; color: grey;}

Concluzie
Datele structurate au devenit un standard in ultimii ani, site-urile web care le folosesc fiind indexate mai bine in principalele motoare de cautare.

Index-ul Schema.org este dezvoltat de o comunitare deschisa si este suportat de catre Google, Microsoft, Yahoo si Yandex. Mai bine de 10 milioane de site-uri utilizeaza Schema.org pentru realizarea markup-ului pentru paginile web si mesajele e-mail.

---

Curs HTML si CSS cu Adobe Dreamweaver

---