Microformats: os atributos rel e rev

Além de dar continuidade na série de artigos sobre hyperlinks, este texto também trata sobre as especificações microformats que utilizam estes atributos como parte de sua especificação. Apesar destes atributos estarem presentes nas documentações da W3C do HTML desde meados da década de 90, só agora eles estão sendo amplamente utilizados com o advento das especificações microformats. Vamos ver todas estas especificações aqui uma a uma.

O atributo Rel: qual é a relação?

O atributo rel (“rel vem da palavra “relationship” ou “relação”, “relacionamento” em português) pode ser aplicado aos elementos e para informar a relação que a URL que você está linkando tem em relação com a página onde o link está. Por exemplo, se eu posto um link aqui no meu site para o site do Flávio Japs eu poderia usar o atributo rel da seguinte forma:

<a rel="friend co-worker" title="Visite o site do Japs"
href="http://www.japs.etc.br/">Japs </a>

Isto pode ser lido da seguinte maneira: O site Japs é um amigo (friend) e trabalha junto comigo (co-worker). Ou seja, links são pessoas. Principalmente no mundo dos blogs. O atributo rel te permite informar a relação que você (www.seusite.com.br) tem com os links que você posta diariamente no seu site.

Veja outro exemplo do atributo rel aplicado na tag link:

<link title="RevolucaoEtc - Todos os Posts"
type="application/rss+xml" rel="alternate" />

Isto pode ser lido da seguinte maneira: o link para os feeds do meu site (http://feeds.feedburner.com/Revolucao) é um conteúdo alternativo (rel=”alternate”) para o meu próprio site (www.revolucao.etc.br) que é onde o link se encontra. Esta é a função deste atributo criado pela W3C desde meados da década de 90. Fornecer informação e meta-informação de relação entre uma fonte (URL) e outra na web, ou entre um documento (.html) e outro.

O atributo Rev: qual a relação reversa?

Agora que você entendeu o atributo rel, entender o atributo rev e a diferença entre eles é mais fácil. Acima eu exibi a relação que o meu site tem com o meu endereço de feeds (alternate). Agora dentro do meu arquivo de feed, eu poderia colocar um link para o meu site e inserir o atributo rev da seguinte maneira:

<a rev="alternate"
href="http://www.revolucao.etc.br/wp-admin/www.revolucao.etc.br">
Revolução etc
</a>

Ou seja rev (da palavra “reverse” que significa, “inverso” ou “ao contrário”) informa a relação contrária que uma fonte (URL) tem com outra. Se você ainda está com uma pulga atrás da orelha, vamos dar uma olhada nas especificações microformats uma a uma para entender melhor como isso funciona.

Rel Tag

Ao adicionar o atributo rel com o valor de tag (rel=”tag”) em um hyperlink, você está indicando aos user agents que o destino daquele link refere-se ao que chamamos de “tag” (ou “categoria”) de um site. Quando você escreve um artigo no seu site e o classifica em uma ou mais de uma categoria, espera-se que o usuário possa acessar uma listagem de artigos relacionados com aquela categoria específica. Ou seja, o destino deste hyperlink deve existir como uma página e que funcione como um filtro que relacione apenas os textos relacionados com aquela categoria específica. Veja um exemplo:

<a rel="tag" title="Technorat"
href="http://www.revolucao.etc.br/archives/category/technorat/">
Technorat
</a>

A aplicação desta especificação rel-tag está muito relacionada com blogs mas não limitando-se a ela. O maior exemplo prático disso você encontra no Technorati, o maior mecanismo de busca relacionado a blogs. Lá você faz uma busca selecionando uma tag que busca em milhares de sites espalhados pelo mundo e que compartilham da mesma palavra chave (tag). O Technorati é o maior incentivador desta especificação e até ensina os usuários a taggear corretamente.

As tags (ou categorias como preferir) são tipos de de meta-informação visíveis, ou seja, através de uma listagem de tags em um site, você consegue acessar informações muito mais facilmente relacionada com uma palavra-chave, como na lateral do meu site. No site microformats você pode ver diversas implementações que podem servir como sugestões pra você.

XHTML Friends Network (XFN)

A W3C especificou um atributo para ser inserido na tag HEAD chamado “profile” ou “Meta data profiles”. A função deste atributo é especificar a localição de um perfil de meta-informação onde usar agents podem utilizar estes perfis profile reconhecendo uma identidade comum e executar algum tipo de atividade baseado nas convenções daquele perfil. Por exemplo, os mecanismos de busca podem fornecer uma interface de busca que utilize um catálogo de documentos HTML onde todos estes documentos utilizem o mesmo perfil de entrada. Um exemplo prático disso é o buscador Rubhub que faz suas buscas baseadas na relação que um site tem com outro utilizando o perfil do XFN.

O XHTML Friends Network é um profile criado para representar relacionamentos entre sites através de hyperlinks onde você informa a relação que você tem com os sites que você linka no seu blog, apenas utilizando o atributo “rel” nos seus hyperlinks. Vamos ver como isso funciona.
Primeiro você insere o atributo profile com o valor apontando para a página de profiles do XFN da seguinte maneira:


<head profile="http://gmpg.org/xfn/11">

Nesta página linkada, se encontra o perfil de meta-informação de relacionamentos (XFN 1.1 relationships meta data profile) que você pode utilizar. Lá cada item está explicado um a um. A aplicação destes perfis é como no exemplo que eu dei logo acima. Veja novamente:

<a rel="friend co-worker" title="Visite o site do Japs"
href="http://www.japs.etc.br/">Japs</a>

Como eu mostrei no exemplo acima, eu indiquei através do atributo “rel” que o Flávio Japs é meu amigo (friend) e trabalha junto comigo (co-worker) conforme especificado no perfil que eu referênciei na tag head do meu site através do atributo profile.

O Technorati, WordPress, Feedster (o site foi descontinuado) são alguns exemplos de sistemas que já adotam amplamente o XFN.

Rel-license

Rel-license nada mais é do que um padrão para indicar conteúdo relacionado a licença. Adicionando rel=”license” a um hyperlink você estará indicando que o destino do hyperlink se refere a licença da página atual. Veja um exemplo que você pode encontrar no meu site:

 <a title="Creative Commons License" rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/2.0/br/">
Creative Commons License
</a>

Declarando desta maneira eu estou indicando que o meu site está sob a licença da Creative Commons License. Para vocês terem uma idéia da implementação disto, o Yahoo e o Google (o Google removeu esta página) possuem em seus mecanismos de buscas formas específicas de encontrar conteúdo baseado na licença de uso.

Rel-nofollow

A especificação Rel-nofollow inserida em hyperlinks através do atributo rel (rel=”nofollow”) indica que o destino do hyperlink não deve ser seguido por nenhum tipo de user agent automatizado, como os mecanismos de busca por exemplo. Para você ter uma idéia prática sobre esta especificação, sabe aqueles comentários nos blogs de pessoas que só querem divulgar seus sites para aumentar o hanking deles no Google espalhando, da forma mais viral possível, links em todos os sites que permite comentários? O Google estimula o uso de rel=”nofollow” em todos os links de comentários nos sites como uma forma de combater os comentários de spammers. Veja um exemplo:

<a rel="nofollow" xhref="http://www.example.com/">Exemplo</a>

O Google estimula o uso de rel=”nofollow” em qualquer lugar em que os usuários podem inserir por si próprios comentários e hyperlinks, como nas áreas de comentários de qualquer site. São várias as ferramentas de blogs que já trazem esta especificação por padrão, como o Blogger, WordPress e Flickr. No WordPress, bem como no meu site, por exemplo, todos os links dos sites das pessoas que comentam aqui, trazem por padrão o atributo rel=”nofollow” toda vez que você preenche o campo “site” para inserir algum comentário, ou seja, o Google não considera os links inseridos aqui e eles não são links válidos para aumentar o hanking de ninguém.

Vote Links

Sistemas de indexação geralmente tratam os hyperlinks como um tipo de “apoio” que se oferece ao destino do próprio hyperlink, ou seja, uma forma de expressar aprovação, suporte, admiração etc. Quantos de nós não fica feliz a cada vez que o nosso site é linkado espontaneamente em outro site como uma referência? Isto também em certos aspectos é sinal de prestígio. Uma das razões práticas que justifica esse prestígio é que a cada vez que o seu site é linkado, o seu hanking na web aumenta, por que naturalmente se consideranda que quanto mais links o seu site possui espalhado pelo mundo, mais relevante ele é em relação aqueles que possuem menos links. Este é um princípio básico de SEO. Agora e quando queremos demonstrar o sentimento oposto de desaprovação a uma referência na web? Qual seria a solução?

A especificação microformat vote-links propõe três novos valores para ser inserido no atributo rel. Eles são vote-for (voto a favor), vote-abstain (abster do voto) ou vote-against (voto contra) que significam respectivamente concordância, abstenção ou indiferença e desacordo.

Um hyperlink qualquer inserido no seu site que não utilize nenhum destes valores através do atributo “rel” julga-se implicitamente que o fato de estar linkando para um determinado endereço, sua relação seja de apoio, suporte e aprovação conforme eu descrevi acima a relação que os hyperlinks naturalmente suportam. Com exceção do rel=”nofollow” que na prática funciona como um rel=”vote-against”, ou seja, não se declara à favor e nem contra.
De modo geral as possibilidades de aplicação desta especificação microformat é enorme. Você pode criar user agents específicos que avaliam índices de aprovaçao ou desaprovação nos sites, gerar estatísticas e medir a populaidade sobre determinado assunto simplesmente implementando a especificação vote-links.

O Paolo Massa chegou até a criar uma extensão para o Firefox chamada SemanticLinks que mostra de uma forma visual através de ícones certas meta-informações inseridas nos links, como vote-links, rel-nofolow etc.

Referências:

  • Kico Zaninetti

    "Com exceção do rel=”nofollow” que na prática funciona como um rel=”vote-against”, ou seja, não se declara à favor e nem contra."

    Se eu entendi bem, o nofollow seria algo como vote-abstain e não vote-against.

    Muito bom o artigo.

  • Flávio Theruo

    Excelente artigo, muito esclarecedor, e acima de tudo muito bem explicado. E valeu pelos links.

    Abraços.

  • capixaba

    Posso usar mais de um atributo rel por link? Se eu quiser prestigiar o Creative Commons (rel:license) com um "vote for" por exemplo?

  • LUCAS TS

    Olha Henrique, não sou de elogiar(no sentido daqueles que sempre batem palma em blogs, por qualquer merda do autor).

    mas neste comment, vou deixar claro uma lago.

    Voce esta de parabéns por este site, a maneira com que voce expõe seu conhecimento e objetos de estudo é muito boa, sinceramente seus textos são os mais didaticos que ja li na internet. COntinue assim e sucesso em sua vida profissional.

  • Douglas d'Aquin

    thanks, justamente o que eu estava esperando xD

    apesar de já ter familiaridade com rel, rev e xfn, eh sempre bom rever e até encontrei algumas coisas que não tinha visto ainda

    Muito bom o post, parabéns

  • Pingback: Folksonomia e a maneira com que nós colocamos ordem nas coisas » Revolução Etc()

  • Pingback: Microformats » Revolução Etc()

  • http://alenonimo.com.br/ Alexandre Roberto Pe

    Pensei que os Vote-links usassem a tag "rev" ao invés da "rel".

  • Pingback: Technorati, Pingerati e Microformats Search » Revolução Etc - Web Standards em uma casca de noz!()

  • Hudson Dunice

    No site do Microformat está dizendo que o atributo rel está depreciado… confira

    A previous draft of the specification used the 'rel' value instead of the 'rev' attribute. Analysis and feedback has demonstrated this to have been inappropriate use of the 'rel' attribute, when the 'rev' attribute was much more important.

  • http://www.techzine.com.br Rael B. Riolino

    Informações preciosas!

    sempre quis saber como barrar a indexação de conteudos específicos em uma pagina… agora aprendi!

    Valeu pelas dicas henrique!

  • Jean

    Opa.. estou tentando usar o rel para fazer uma chamada para um campo ajax que vai abrir ele aonde estou mandando ex. -Publico Alvo .. so que nao funciona no ie 6 alguem sabe explicar? muito obrigado abraços a todos

  • sht

    Será que um dia alguém vai explicar a função do rel="bookmark" nos links de post do WordPress e da real necessidade?

    Acho que só você poderá explicar essa tag com clareza.

  • sht

    Explica rel="bookmark" please!

  • http://www.mdesigner.com.br/mapaSite.html Portfolio Dem&eacute

    Alguém sabe explicar pra que serve rel="bookmark" ????

  • http://www.riotemporada.com.br Thiago Velloso

    Respondendo a quem queria saber pra que serve o bookmark:

    "The HTML4 spec (http://www.w3.org/TR/REC-html40/types.html#h-6.12) describes a bookmark as "a link to a key entry point within an extended document". By convention (citation needed), this entry point also captures the notion of a "permalink"."

  • http://www.mdesigner.com.br/curriculo.htm Web Design Dem&eacut

    Álguem pode traduzir o a explicação em inglês sobre pra que serve "bookmark"?

    Valeu

  • http://oskaras.com/ paulop

    Tirei todas as mínhas dúvidas aqui

  • Pingback: Seeding mal feito é spam ≈ Revolução Etc()

  • Thiago

    Tirei minhas dúvidas aqui.

    Ótimo artigo, e muito bem explicado!

  • megasdown

    Muito Bom vlw por tirar minhas duvidas. brigadão

  • http://www.temmaistudo.com Adriano

    Fuçando como sempre, observei que você não possui rel="tag" em suas categorias, o "correto" seria colocar? Estou montando um tema para wordpress e estou com dúvidas se coloco ou não nas categorais.

    Valew o post. Um grande abraço.

  • Pingback: [BLOCKED BY STBV] Primeira postagem | Conteúdo Experimental()