Olá todos !

Hoje aprenderemos a trabalhar com Microformats e criar um vCard para tornar o seu site mais semântico. Inicialmente irei descrever o que são Microformats.

O que são microformats?

Microformatos é um conjunto de formatos abertos projetados para adicionar semântica em qualquer documento XML, especialmente HTML/XHTML. Visando aumentar a semântica e a acessibilidade do seu site.

Isso é feito usando atributos do HTML específicos:

  • class
  • rel
  • rev

Aplicações, como buscadores, podem extrair informações específicas de páginas que usam microformatos, como informações de contato, evento, licença, etc. Isto tornará sua página mais acessível e melhor indexada nos motores de busca.

Exemplos de utilização:

Para adicionar informações sobre seu contato à uma página, usando a especificação “hCard” utilize a seguinte marcação XHTML:

<span class="fn">Nome</span>
<span class="org">Organização</span>
<span class="tel">41-3333-1234</span>
<a class="url" href="http://site.com/">Nome do seu Website</a>

Para informar ao visitante um e-mail de contato seu utilize o código:

<a class="email" href="mailto:seu e-mail">repita seu e-mail</a>

Para adicionar informações de localização do seu escritório ou local de trabalho, você deve adicionar as seguintes marcações:

<div class="adr">
   <span class="locality">Cidade</span>,
   <span class="region">Estado</span>,
   <span class="postal-code">CEP</span>
   <span class="country-name">País</span>
</div>

Se você não quiser que estas informações sejam exibidas em seu site para não afetarem o layout, basta colocar um style=”display: none;” no elemento “div” principal com o class=”vcard”, devendo a marcação completa ficar da seguinte forma:

<div id="hcard-seu-nome" class="vcard" style="display:none">
<p>seu nome<br />
   <img src="url de uma imagem sua ou do seu site" alt="photo" class="photo"/><br /></p>
   <span class="fn n">
   <span class="given-name">Nome</span>
   <span class="additional-name">Sobrenome1</span>
   <span class="family-name">Sobrenome2</span>
   </span>
   <a class="email" href="mailto:e-mail">e-mail</a>
      <div class="adr">
	<span class="locality">Bairro - Cidade</span>,
	<span class="region">Estado</span>,
	<span class="postal-code">CEP</span>
	<span class="country-name">País</span>
      </div>
</div>

Se o seu browser padrão for o Firefox, você poderá visualizar as informações do seu vCard instalando um plugin dele chamado Operator no site da Mozilla Fundation.

Maiores informações e também um gerador automático do seu vCard você pode conseguir acessando o site: www.microformats.org.

Espero ter contribuído com mais este artigo.

Obrigado.