Microformats

By Markus Johansson
2012-03-23

Idag har jag arbetat en hel del med att uppdatera denna sida, enkelmedia.se. Bland annat har vi byt ut kommentarsfunktionen i Umbraco bloggen till att använda Disqus istället för Facebooks Social Plugins. Tanken är att det ska bli enklare att kommentera och interagera med sajten.

 

Samtidigt så gjorde vi också endel tillägg "under huven" och utökade vår användning av så kallade microformats. Dessa är små taggar o koden som gör att maskiner (ofta sökmotorer) kan förstå vad som är vad på en hemsida, att bara skriva ut adressen förklarar inte för en maskin att det faktiskt är en adress. Vi ändrade bland annat mikroformats på vår kontaktsida. Nu ser koden ut ungefär så här:

 

<div class="vcard">
   <p><span class="tel">08 - 53 33 27 26</span></strong></p>
   <h4>Adress</h4>
   <p class="fn org">Enkel Media Stockholm AB</p>   
   <div class="adr">
   <p class="street-address">Västgötagatan 22</p>
      <p>
         <span class="postal-code">118 27</span> 
         <span class="locality">Stockholm</span>
      </p>
  </div>
</div>

 

Där vi börjar med en div-tag som innehåller klassen "vcard" vilket talar som att här börjar ett hCard. vcard blir till hCard? Fråga mig inte vem som kom på den logiska kopplingen. Sedan använder vi olika klass-värden för att tala om olika saker för den maskin som vill lära vårt microformat.

 

  • tel - Telefonnummer
  • fn org - Talar om att det är en organisation och vad den heter. Om man vill ha personlig kontaktinfo skiv bara "fn".
  • adr - Inleder en adress
  • street-address - Gatuadress
  • postal-code - Postnummer
  • locality - Stad

 

Det finns en massa intressant läsning om microformats och hCards, men även en smidig tjänst där du kan skapa ditt eget hCard. När du lagt upp ditt hCard kan du validara det med hjälp av Geekhood.net.






More blog posts



15 januari 2021

Umbraco and MiniProfiler