Mikrodata, RDF och Schema.org i Googles sökresultat

I HTML 5, kommande generation av HTML, så finns det många nya saker som revolutionerar branschen. En av dessa som jag kommer lyfta i denna artikeln är mikrodata.

I artikeln kommer du kunna läsa om vad mikrodata och schema.org är, samt hur man kan använda dessa två tillsammans. Jag kommer också nämna en del alternativ till mikrodata och vilken inverkan man kan ha på ”rich snippets” med hjälp av dessa tekniker.

Lite bakgrund

HTML står för ”hypertext markup language” och är den främsta tekniken vi använder oss av för att märka upp information på internet. Allting handlar om informationsdesign och vi använder oss av olika element för att berätta för maskiner vad som är vad. Bland dessa maskiner så menar vi webbläsarna och olika spindlar som kan krypa runt på webbplatser, däribland Googles indexeringsspindel.

Milt talat så kan man säga att det funnits begränsningar i HTML-språket när man velat förklara vad informationen i ett element är. En lösning som blivit populär och anses som god sed är att använda sig av semantiska klassnamn, till skillnad från strukturella namn så beskriver ett semantiskt klassnamn vad elementet är istället för hur det presenteras.

Exempel:

I html5 kommer vi nu också få tillgång till ytterligare element för att bättre kunna märka upp koden. Framförallt så är det tal om segmentering som tillåter oss ha flera olika innehåll på en sida men på ett enkelt sätt kunna förklara vilket segment som är huvudinnehållet och vilka segment som är kopplade till varandra i en familjerelation, dvs: förälder, barn och syskon.

Mikrodata, en del av HTML5

Mikrodata är en WHATWG HTML-specifikation som implementerats i HTML5. På samma vis som vi ovan beskrivit lösningar på hur vi kan märka upp vilken typ av information som gömmer sig i elementen så kan vi också använda oss av mikrodata till detta. Det vill inte säga att den ena metoden utesluter den andra, snarare så kan vi använda mikrodata som ytterligare ett komplement.

Så vad är mikrodata? Mikrodata är ett sätt för oss att namnge element på ett sätt som gör det möjligt för maskiner att bättre förstå informationen.

Hur använder man mikrodata? Vi specificerar ett objekt (item) genom att ge ett element attributet ”itemscope”. Ett objekt kan sen ha olika egenskaper (properties) som specificeras med hjälp av attributet ”itemprop”.

Ett kortare exempel:

<p itemscope>
  En person som heter <span itemprop="name">Olof</span> föddes den
  <span itemprop="birthdate">4 juli – 2012</span>.
</p>

Här ovan har vi specificerat ett objekt med två egenskaper, ett namn och en födelsedag. Vilket namn dessa egenskaper har bestäms av värdet i attributet ”itemprop”. Det finns ingen regel för vad dessa ska heta, vi väljer däremot att använda oss av ett semantiskt namn som förklarar informationen.

Som synes så kan detta regellösa tillvägagångssätt innebära utrymme för misstolkning. Därför är det lämpligt att använda ett vokabulär tillsammans med mikrodata. Det är här som schema.org kommer in i bilden.

Schema.org

Schema.org är framtaget av Bing, Google och Yahoo vilket speglar användningsområdet väldigt bra.

Vad är schema.org? Schema.org är ett vokabulär som kan användas tillsammans med mikrodata. Det är en samling fördefinierade objekt som vid definition underlättar för läsaren att bättre förstå din märkning då du använder ord som kan förstås.

Hur använder man schema.org? Gå in på deras hemsida och se över alla objekt som erbjuds: http://schema.org/docs/full.html. Som synes så finns här för många för att jag ska kunna gå igenom allihop, ytterligare ett kortare exempel som förhoppningsvis kan innebära lite klarhet:

<div itemscope itemtype="http://schema.org/Product">
  <img itemprop="image" src=”http://exempel.se/produkt­bild.jpg” />
  <span itemprop="name">Produktens namn</span>
  <p itemprop="description">
    En beskrivning av produkten, kortare eller mer omfattande.
  </p>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <span itemprop="price">365.00 kr</span>
  </div>
</div>

Här ser vi ett objekt av typen ”Product” som går att läsa om här: http://schema.org/Product. ”Product” är en typ som endast ärver egenskaper från typen ”Thing” som är en grundläggande typ. Detta innebär att alla egenskaper som ”Thing” har kan man också specificera i ”Product”.

Ovan har vi specificerat en del olika egenskaper, så som namn och beskrivning. Efter vad vi redan har gått igenom så borde inte detta kännas helt främmande. Vad vi inte har gått igenom däremot är då en egenskap kräver, istället för text eller liknande, en objekttyp. I detta fallet så är det egenskapen ”offers” som ska vara av typen ”Offer”. Som vi ser ovan så deklarerar vi då ett nytt objekt i elementet som är av önskad typ. Här finns också möjlighet att utöka barn objektet, dvs ”Offer”, med andra egenskaper än ”price”.

Alternativ till mikrodata

Andra liknade metoder som finns för att åstadkomma samma sak är mikroformat och RDFa. Mikroformat använder sig av förbestämda semantiska klassnamn som du kan läsa mer om på deras hemsida: http://microformats.org/. Min uppfattning är att mikroformat är något begränsat, men jag har inte satt mig in i det tillräckligt mycket för att göra ett pålitligt uttalande.

RDFa ska däremot vara lika komplett som mikrodata, om inte än bättre. Har sett en del bloggar som påpekar fördelarna med RDFa framför mikrodata med definitivt bra argument för sin sak. Schema.org har i första hand utvecklats för mikrodata men sägs ska stödja RDFa i framtiden om den inte redan gör så. Rekommendationen från Google är iallafall mikrodata, vilket i och för sig också kan bero på att det helt enkelt är lättare lära sig och komma igång med.

Rich snippets

Den första och främsta anledningen som de flesta intresserar sig för en semantisk HTML-kod är då det kan generera ”rich snippets” i sökresultatet på t ex Google

Här ser vi sökresultatet på en sida med ”rich snippets”. Jag har framhävt färgerna på de delar som det gäller, dvs: de gröna brödsmulorna och stjärnorna samt resterande del av samma rad räknas som ”rich snippets”. Dessa ger ytterligare information till personen som söker och attraherar även blicken, bevisat i UX test där man mätt var den sökande mest läser på en hemsida.

Google har ett verktyg där man kan testa hur ens format kan visa sig i sökresultaten: https://search.google.com/structured-data/testing-tool/. Verktyget är i skrivande stund i beta stadie men erbjuder ändå ett bra gränssnitt när man vill testa.

Viktigt att komma ihåg när man jobbar på att få till rich snippets är att inget är en garanti. Vi kan bara märka upp på korrekt sätt och på så vis be Google snällt.

Sammanfattning

Den semantiska hemsidan hjälper maskiner att läsa din kod. Mikrodata är ett format som kan hjälpa till med att beskriva informationen på hemsidan. Schema.org är en samling fördefinierade objekt som kan användas tillsammans med mikrodata för att vara än mer tydlig.

Resultatet vi uppnår med att jobba med detta är att vi bättre gör oss förstådda för eventuella spindlar som besöker webbplatsen. Möjligen kan ett sådant arbete också resultera i ”rich snippets” som i sin tur kan höja webbplatsens CTR i sökresultat.