WER­KEN MET SE­MAN­TI­SCHE MARK UP

Wan­neer je ex­tra met­a­da­ta aan HTML toe­voegt, kun­nen brow­sers de con­tent mak­ke­lij­ker le­zen en slim­mer a han­de­len.

Web Designer Magazine - - Professioneel Programmeren -

Het voor­deel van se­man­ti­sche mark-up is het best te il­lu­stre­ren met een voor­beeld. Je bent waar­schijn­lijk wel be­kend met Goog­les ‘rich cards’, wat een­term is die ge­bruikt wordt voor­de sa­men­vat­tin­gen die ver­schij­nen bo­ven­aan de zoek­re­sul­ta­ten met re­cep­ten, pro­duct­in­for­ma­tie en meer. Goog­le kan de be­lang­rijk­ste in­for­ma­tie van een pa­gi­na zeer ac­cu­raat ex­tra­he­ren en die aan de ge­brui­kers la­ten zien als sa­men­vat­ting, soms met wat in­ter­ac­ti­vi­teit.

In het voor­beeld hier­on­der wordt dat ge­daan met Mi­cro­da­ta, wat een vorm van se­man­ti­sche mark-up is. Een si­te-au­teur kan de at­tri­bu­ten item­s­co­pe, item­ty­pe en item­prop ge­brui­ken met waar­den van sche­ma.org om spe­ci ie­ke in­for­ma­tie op een pa­gi­na aan te dui­den. Dat kan op de juis­te wij­ze ge­ïn­ter­pre­teerd wor­den door een zoek-en­gi­ne (of an­de­re soft­wa­re, zo­als de brow­ser). Meer al­ge­meen kun je zeg­gen dat se­man­ti­sche mark-up een ma­nier is om ex­tra be­te­ke­nis aan da­ta toe te ken­nen, zo­dat die door soft­wa­re ge­ïn­ter­pre­teerd kan wor­den en toch lees­baar blijft voor men­sen. <!-- A sim­ple Mi­cro­da­ta re­pre­sen­ta­ti­on of a pro­duct re­view --> <div item­s­co­pe item­ty­pe=”http://sche­ma.org/ Pro­duct”> <span item prop =” na­me ”> a Pro­duct </ span> <img item­prop=”ima­ge” src=”pro­duct.jpg” /> <div item­prop=”re­view” item­s­co­pe item­ty­pe=”http://sche­ma.org/re­view”> <span item prop =” a ut hor ”> si­mon </ span> <div item prop =” re view ra­ting” item sco­pe item­ty­pe=”http://sche­ma.org/ra­ting”>

<me­ta item prop =” worst ra­ting” con­tent=”1”> <span item­prop=”ra­ting­va­lue”>5</span> <span item­prop=”be­stra­ting”>10</span> </div> <span item­prop=”de­scrip­ti­on”>this pro­duct was aver­a­ge.</span>

</div> </div> Er be­staan ver­schil­len­de ma­nie­ren om se­man­ti­sche mark-up te stan­daar­di­se­ren. Zo­als bij zo­veel din­gen op het web is het niet dui­de­lijk wel­ke het be­lang­rijk­ste zal wor­den zijn. Naast Mi­cro­da­ta, dat breed ge­a­dop­teerd en on­der­steund wordt door Goog­le, zijn er drie an­de­re waar­van je het be­staan moet we­ten.

Mi­cro­for­mats be­staan het langst. Het is geen uit­brei­ding bo­ven­op de Html-stan­daar­den, maar een set con­ven­ties die ont­staan zijn over hoe de be­staan­de Html-syn­taxis ge­bruikt moet wor­den om be­paal­de ty­pen da­ta te iden­ti ice­ren. Het meest ge­bruik­te Mi­cro­for­mat is waar­schijn­lijk h-card, dat ge­bruikt wordt voor het pu­bli­ce­ren van con­tact­de­tails van in­di­vi­du­en en or­ga­ni­sa­ties. Mi­cro­for­mats ge­brui­ken voor­ge­de ini­eer­de klas­sen­waar­den om elementen te la­be­len. <!-- h-card re­pre­sen­ta­ti­on of a con­tact card --> <p class=”h-card”>

<img class=”u-pho­to” src=”http:// example.com/head­s­hot.jpg” />

<a class=”p-na­me u-url” href=”http:// example.com”>si­mon</a>

<a class=”u-email” href=”mail­to:si­mon@ example.com”>si­mon@example.com</a> </p> Een an­der al­ter­na­tief is RDFA. RDFA is ver­ge­lijk­baar met Mi­cro­da­ta, maar heeft een an­de­re syn­taxis. Het is een W3c-stan­daard en biedt meer mo­ge­lijk­he­den dan Mi­cro­da­ta, waar­on­der meer on­der­steu­ning voor het com­bi­ne­ren van meer­de­re sche­ma’s. Het is ver­der meer een kwes­tie van voor­keur. Er is een trend gaan­de om dit soort met­a­da­ta geheel bui­ten de mark-up te hou­den. De JSON Ld-spe­ci ica­tie (LD be­te­kent ‘lin­ked da­ta’) zet de se­man­ti­sche met­a­da­ta in JSON in plaats van bin­nen de mark-up. Het ar­gu­ment is dat dit be­ter lees­baar is en dat het Goog­les fa­vo­rie­te op­los­sing is – al on­der­steunt Goog­le al­le vier. De se­man­ti­sche mark-up wordt op dit mo­ment ge­woon te wei­nig ge­bruikt. Zoek-en­gi­nes re­a­ge­ren er wel op, maar brow­sers en ap­pa­ra­ten be­ste­den er min­der aan­dacht aan. Er is een ex­ten­sie voor Chro­me om Mi­cro­da­ta-in­for­ma­tie te in­ter­pre­te­ren om­dat dat niet stan­daard on­der­steund wordt. Niet al­le mo­bie­le ap­pa­ra­ten re­a­ge­ren op se­man­ti­sche da­ta. Des­al­niet­te­min kan het ge­brui­ken van Mi­cro­da­ta of ver­ge­lijk­ba­re se­man­ti­sche mark-up op de pa­gi­na een groot ver­schil uit­ma­ken voor de vind­baar­heid van ge­bruik­s­er­va­ring van je si­te. Het is dan ook aan­ne­me­lijk dat het be­lang­rij­ker gaat wor­den en soft­wa­re ge­üp­da­tet zal gaan wor­den om de voor­de­len te kun­nen be­nut­ten.

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.