Blogger Seo: Microdata

Como vimos no artigo anterior , podemos tornar o conteúdo de uma página para seja melhor indexado pelos buscadores, usando  microformats . H...

Como vimos no artigo anterior, podemos tornar o conteúdo de uma página para seja melhor indexado pelos buscadores, usando microformats. Hoje vamos aprender a fazê-lo usando microdata.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.

A maior diferença é que nesse tipo o conteúdo não é marcado por classes, mas sim por atributos HTML.
Existe três atributos básicos:

• itemscope: como isso marcamos um elemento.
• itemtype: indica o tipo de objeto que estamos marcando.
• itemprop: este atributo indica que o conteúdo é uma parte do ancestral mais próximo que tenha um itemtype.

Outra diferença importante é que nós podemos marcar uma quantidade muito maior de conteúdo.

Dito o mais importante, vamos começar:

Nota importante: É possível que duplicar informações mediante a diferentes tipos de marcação possa não ser totalmente benéfico. Por isso, recomendo que se decida por um dos dois métodos, este por microdata ou o anterior por microformats. Este é mais completo. O anterior é mais simples. Escolha qual achar melhor.

1- Marcar o Blog

Temos que indicar qual parte é o blog em si. Nesse caso será a <div class='blog-posts hfeed'>. Mude-a para:

<div class='blog-posts' itemscope='itemscope' itemtype='http://schema.org/Blog'>

2- Marcar os Artigos

Agora, temos que marcar os artigos. A maneira de fazer pode ser diferente se usamos os comentários aninados (não podemos indexá-los), ou se usamos outros comentários.

• No primeiro caso precisamos mudar: <div class='post hentry'> por <div class='post hentry' itemprop='blogPosts' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
• No segundo será utilizado a div post-outer, já que os comentários estão dentro dessa div e não dentro de post-hentry, assim mudaremos <div class='post-outer'> por <div class='post-outer' itemprop='blogPosts' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>.

3- Marcar o título, o conteúdo...

Oloman chegou antes de mim e fez um artigo sobre isso, então eu não vejo necessidade de repeti-lo.

4- Marcar o Autor

No artigo anterior, vimos como marcar o autor com microformats. Com microdata seria:

<span itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<a expr:href='data:post.authorProfileUrl' rel='author' itemprop='name url'>
<data:post.author/>
</a>
<b:else/>
<span itemprop='name'><data:post.author/></span>
</b:if>
</span>

Como pode ver, indicamos que é uma pessoa, e que é o autor. Se possui link, inforna que o link é do autor, e qual é o nome. Se não tem, somente indica o nome, e pronto.

5- Marcar os marcadores

Para isso busque o fragmento do código que vimos no post anterior, e adicione às etiquetas com rel='tag' o atributo itemprop='keywords'.

6- Marcar os comentários

Esta é a parte mais difícil, porque os códigos dos comentários geralmente são diferentes (lembre-se que para comentários aninados não será preciso). O caso é adicionar ao bloco de comentário itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/UserComments'. Nos comentários do Filipe, a área onde você teria que adicionar seria <div class='comentario-base'> e a <div class='respuesta'>.

No caso anterior, será necessário adicionar itemprop='commentText' às duas class='comment-body'.

E também temos que alterar todas as <span class='autorcomentario'> por:

<span itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/UserComments' class='autorcomentario'>
<b:if cond='data:comentariohijo.authorUrl'>
<a itemprop='url name' expr:href='data:comentariohijo.authorUrl' rel='nofollow'><data:comentariohijo.author/></a>
<b:else/>
<span itemprop='name'><data:comentariohijo.author/></span>
</b:if>
</span>

Por último, em class='comment-timestamp', adicione ao link (etiqueta <a>) o atributo itemprop='url'.

Outras alterações:

Para marcar a data de publicação, substitua <abbr class='published ...</abbr> por <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.timestamp/><meta expr:content='data:post.timestampISO8601' itemprop='datePublished'/></a>

Sobre advertências

Se analisou qualquer artigo individual no Rich Snippets Testing Tool, é possível que encontre avisos como este:

Não se preocupe, eles são pelos avatares dos comentários (porém não podemos evitar).

Confira o resultado:

Que saiba que sou consciente de que um tutorial assim é difícil, mas espero que possa ter o entendido bem.
Verifique os resultados em Rich Snippets Testing Tool e digite o endereço (se tiver algum problema/dúvida comente, e vou tentar resolver).