Republic / Artiklar /

Artikeln uppdaterad 2020-05-26.
Skriven av Christofer Sandin.

Struk­tur­erad infor­ma­tion med microformats

Genom att mär­ka upp din HTML-kod med speci­fi­ka klass­er tillför du seman­tisk mening och gör det möjligt för dator­er och sys­tem att förstå vad det är du beskriv­er på webben.

Föru­tom Micro­for­mats, som vi kom­mer att tit­ta på här, så finns det ett par andra stan­dards som gör uge­fär sam­ma sak. De van­li­gaste alter­na­tiv­en idag är JSON-LD, HTML Micro­da­ta och RDFa. Google stöder exem­pelvis alla dessa tre standards. 

Kon­ceptuellt så funger­ar dessa på unge­fär sam­ma sätt, så i det avseen­det får du förhopp­n­ingsvis ut något av artikeln även om du hellre arbe­tar med någon av dessa två andra standards.

Tips! På schema​.org finns stan­dard­is­er­ade sche­man för Micro­da­ta för mån­ga av de van­li­gaste sak­er man vill mär­ka upp.

Vad är microformats?

Idag finns det några pro­gram och webb­si­dor som verk­li­gen utnyt­t­jar micro­for­mats, men inom en inte allt för avlägsen framtid kom­mer det troli­gen finnas ännu fler smar­ta och vet­ti­ga sätt att utnyt­t­ja all den infor­ma­tion som ändå redan finns där. Vill du ha en adress­bok som upp­dat­er­ar sig själv? Vill du att sök­mo­tor­er skall förstå vad som är vad på din webb­plats? Vi är redan på väg dit.

Det kan väl knap­past ha undgått någon med intresse för webb­de­sign och web­butveck­ling att det numer är vik­tigt att byg­ga webb­platser med hjälp av webb­stan­dards. På sam­ma skon­ingslösa sätt som ång­mask­i­nen konkur­rerades ut av den elek­triska motorn har webb­de­sign med tabell­baser­ad lay­out, font-tag­gar och genom­skin­li­ga 1px sto­ra GIF-bilder konkur­rerats ut av respon­siv CSS och exter­na JavaScript de senaste åren. 

Utveck­lare valid­er­ar sin HTML och CSS och använ­der hjälpmedel som jslint för att skri­va bät­tre JavaScript, allt för att byg­ga bät­tre webb­platser. Föru­tom det­ta så bör­jar fler och fler kun­der krä­va att webb­plat­ser­na skall vara till­gäng­li­ga för alla typer av besökare, vilket gör att vi verk­li­gen höjt rib­ban de senaste åren.

Föru­tom allt det­ta så har vi den mobi­la webben, idag är det mån­ga som förvän­tar sig att de kan använ­da sin mobil­tele­fon för att kol­la på webben på bussen hem från job­bet eller på väg till tränin­gen. Infor­ma­tio­nen håller både på att bli mer till­gäng­lig och mobil, så vad kan vi göra för att byg­ga en ännu mer robust webb?

Infor­ma­tion på webben måste bli enklare att tolka

För att få ihop alla dessa krav och önskemål är det väldigt vik­tigt att infor­ma­tio­nen på webben är lätt att förstå. Det gäller inte bara för oss män­niskor, utan vår vardag blir väldigt myck­et enklare om även dator­erna kan tol­ka infor­ma­tio­nen och relat­era den till vad som egentli­gen beskrivs. Tanken med micro­for­mats är att använ­da van­lig HTML och CSS för att mär­ka upp infor­ma­tio­nen på webben för att åstad­kom­ma just detta.

Som näm­n­des inled­ningsvis finns det andra lik­nande stan­dards som micro­da­ta och RDFa, men kon­cepten är desam­ma som för micro­for­mats även om syn­tax och upp­märkn­ing går annor­lun­da till. Google har exem­pelvis en bra intro­duk­tion till kon­ceptet, som de generellt kallar för Rich Snip­pets, på webb­plat­sen ​”Verk­tyg för web­bans­vari­ga”.

Micro­for­mats låter dig allt­så tala om vilken typ av infor­ma­tion som finns rep­re­sen­ter­ad på din sida, och det är fak­tiskt inte speciellt svårt att implementera. 

Micro­for­mats intresser­ar mån­ga, och det tog exem­pelvis över tre år innan Microsoft över huvud taget offi­ciellt upp­märk­sam­made en teknik som RSS, men bara månad­er efter det att de förs­ta micro­for­mat­en pre­sen­ter­ades satt Bill Gates och pratade om dem i ett inled­ningsan­förande på en stor utveck­larkon­fer­ens.

Det bör­jar även bli lite trendigt med micro­for­mats, men det är inte där­för du skall bör­ja imple­mentera dem, utan för att det­ta kanske är bör­jan till en rad rik­tigt smar­ta app­lika­tion­er som skulle under­lät­ta varda­gen för mån­ga av oss.

Vad skulle du säga om din adress­bok själv höll reda på när dina kun­der och kol­le­gor på job­bet bytte mobil­num­mer eller adress? Eller vad skulle du tyc­ka om du hela tiden kunde ha kor­rek­ta uppgifter om den där kon­fer­ensen du skall åka på om två månad­er i din kalender?

Vi är inte rik­tigt där ännu, men det är inte långt borta…

Pub­licera kon­tak­tuppgifter med hjälp av hCard

Säg att du skall pub­licera dina kon­tak­tuppgifter på webben. Med hjälp av micro­for­mats kan du mär­ka upp dessa så att andra enkelt kan se att det är kon­tak­tuppgifter. Redan nu kan du importera dessa till din adress­bok tack vare ett for­mat som fun­nits sedan länge — vCard.

vCard är ett stan­dard­is­er­at for­mat för att utby­ta kon­tak­tuppgifter mel­lan exem­pelvis kon­tak­t­bo­ken på datorn, mobil­tele­fo­nen och din iPad. Med hjälp av micro­for­mat kan du näm­li­gen mär­ka upp dina uppgifter som ett hCard (vilket är det micro­for­mat som är baser­at på vCard).

Ett exem­pel är våra kon­tak­tuppgifter här på webbsidan

<p class="vcard">
  <span class="fn">Christofer Sandin</span>,
  <span class="org">
    <a href="http://www.republic.se/” class="url">Republic Factory AB</a>
  </span>
</p>
<p class="adr">
  <span class="street-address">Korsgatan 12</span>,
  <span class="postal-code">411 16</span>
  <span class="locality">Göteborg</span>
</p>
<p>
  <span class="tel">Tel: <span class="type">work</span>
  <span class="value">031-7112620</span>
</p>

Här finns mina kon­tak­tuppgifter upp­märk­ta efter den stan­dard som beskrivs på hcard/microformats.org/wiki/hcard/ — om ni kol­lar i käl­lko­den på kon­takt-sidan finns det även en länk till Tech­no­ratis tjänst som kon­vert­er­ar den­na HTML-kod till ett vCard. Tyvärr så funger­ar den inte helt klan­der­fritt med våra sven­s­ka teck­en å,ä och ö vis­sa gånger (trots att den är kodad med UTF‑8) så vi får väl byg­ga en egen snart… men ni förstår tanken.

Föru­tom hCard, som brukar vara stan­dard­ex­em­plet i de fles­ta intro­duk­tion­er jag läst, finns det fak­tiskt en rad andra gan­s­ka intres­san­ta format.

Märk upp kalen­der­da­ta med hCalendar

hCal­en­der, används för att mär­ka upp even­e­mang, dvs. kalen­der­da­ta så som kon­fer­enser, möten och andra hän­delser som är styr­da av tid, datum och plats. Tänk vad smidigt det skulle vara om iCal eller Out­look kunde prenu­mer­era på infor­ma­tio­nen istäl­let, och alltid hål­la kalen­dern uppdaterad.

Här är ett exem­pel, sax­at från micro​for​mats​.org/​w​i​k​i​/​h​c​a​l​e​ndar/, på en kon­fer­ens upp­märkt med hCalendar:

<span class="vevent">
  <a href="http://www.web2con.com/" class="url">
    <span class="summary">Web 2.0 Conference</span>:
    <abbr class="dtstart" title="2005-10-05">October 5</abbr>-
    <abbr class="dtend" title="2005-10-08">7</abbr>, at the 
    <span class="location">Argent Hotel, San Francisco, CA</span>
  </a>
</span>

Definiera en licens med rel-license

rel-license är ett sätt att tala om vilket typ av licens som gäller för pub­licer­at mate­r­i­al. Du kan till exem­pel mär­ka upp att en sida med ikon­er är pub­licer­ade under Cre­ative Com­mons, en licens som gör det tillåtet att använ­da mate­ri­alet i andra sam­man­hang, så att alla som kol­lar på dina ikon­er vet att det är ok att använ­da dessa i egna projekt. 

Även de sto­ra spelar­na utnyt­t­jar rel-license — Yahoo har till exem­pel redan idag en sök­mo­tor som sök­er bland mate­r­i­al med Cre­ative Com­mons-licens.

Det är allt­så rel-attrib­ut­et i a-taggen som sätts till ​“license” (därav då även nam­net rel-license) och länken läg­gs till på de sidor för vilken den tänk­ta licensen gäller;

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">
  CC by 2.0
</a>

Tag­ga upp infor­ma­tion med rel-tag

Tag­gar har bliv­it ett väldigt pop­ulärt sätt att mär­ka upp och kat­e­goris­era exem­pelvis artik­lar, länkar och blogginlägg. 

Tjän­ster som Flickr, Wikid­pe­dia och deli­cious använ­der alla tag­gar och då micro­for­matet rel-tag.

Så här märk­er du upp en länk med taggen ​“micro­for­mats” på Technorati;

<a href="http://technorati.com/tag/microformats" rel="tag">
  microformats
</a>

Märk upp vän­ner och kollegor

X.F.N. bety­der XHTML Friends Net­work och är ock­så det ett hjäl­pat­trib­ut för att ge länkar en mer bety­delse­full innebörd. 

Det­ta är ett sätt att tala om vilken din rela­tion är till den per­son som du länkar till. Exem­pelvis kan du tala om om du träf­fat per­so­n­en, om det är en vän, en bekant eller en kol­le­ga i sam­ma bran­sch. Men det finns ock­så sätt beskri­va dina roman­tiska känslor (så som en part­ner) och famil­jere­la­tion­er (syskon, förälder, etc). En kom­plett lista med alla vär­den som rel-attrib­ut­et kan anta finns på http://​gmpg​.org/​x​fn/11.

Här är ett exem­pel på hur det kan använ­das på pro­fes­sionel­la webb­si­dor för att län­ka till exem­pelvis kollegor;

<a href="http://www.republic.se" rel="co-worker colleague met">
  Republic Factory
</a>

Det finns mer…

Det­ta är några av de micro­for­mat som redan finns speci­fi­cer­ade men det finns mån­ga fler intres­san­ta vari­anter under utveckling. 

Bland annat finns det micro­for­mats för att mär­ka upp syn­diker­bart mate­r­i­al (exem­pelvis blog­g­poster som pub­liceras via RSS), du kan använ­da hRe­view för att mär­ka upp en recen­sion av någonting eller använ­da hRe­sume för att pub­licera din CV på webben.

Så var­för inte bör­ja använ­da micro­for­mats redan idag? Imor­gon kanske någon har utveck­lat en sök­mo­tor för bokre­cen­sion­er eller ett sys­tem för att lokalis­era vart poten­tiel­la kol­le­gor (eller konkur­renter) inom sam­ma bran­sch finns. 

Eller som Paul Boag reson­er­ade i en av sina pod­casts; med tanke på den return-on-invest­ment som man får genom att imple­mentera micro­for­mats är det inte försvars­bart mot kun­der­na att låta bli. Micro­for­mats kräver gan­s­ka lite extra utveck­lingstid och kan öpp­na mån­ga dör­rar i framtiden.

Länkar och källförteckning

Avs­lut­ningsvis tänk­te jag pub­licera en sam­lig med länkar till sidor som är intres­san­ta om du vill förd­ju­pa dig i micro­for­mats. Det finns även länkar till plug-ins för Fire­fox som med­de­lar när du befinner dig på en sida som innehåller micro­for­mats, och låter dig utnyt­t­ja dessa för lite oli­ka ändamål.

Fire­fox plug-ins