Como criar um VCard para tornar seu site semântico.

Tutorial de VCard para a Web Semântica

Hoje aprenderemos a trabalhar com Microformats e criar um vCard para tornar o nosso site mais semântico, assim primeiramente precisamos saber o que é esse tal de Microformats.
-
Mas 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 como:
* 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><br />
<span class="org">Organização</span><br />
<span class="tel">41-3333-1234</span><br />
<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"><br />
<span class="locality">Cidade</span>,<br />
<span class="region">Estado</span>,<br />
<span class="postal-code">CEP</span><br />
<span class="country-name">País</span><br />
</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"><br />
<p>seu nome<br /><br />
<br /></p><br />
<span class="fn n"><br />
<span class="given-name">Nome</span><br />
<span class="additional-name">Sobrenome1</span><br />
<span class="family-name">Sobrenome2</span><br />
</span><br />
<a class="email" href="mailto:e-mail">e-mail</a><br />
<div class="adr"><br />
<span class="locality">Bairro - Cidade</span>,<br />
<span class="region">Estado</span>,<br />
<span class="postal-code">CEP</span><br />
<span class="country-name">País</span><br />
</div><br />
</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.

Responsável: Rafael Hernandez

Sou Profissional Web com mais de 10 anos de carreira. Atualmente Palestrante, Instrutor e Coordenador de Projetos voltados a SEO e Social Media em São Paulo como também administrador do Blog Rafael Designer.

Rafael Hernandez escreveu 504 artigos para o Blog Rafael Designer.