Tutoriart
SEO e Segurança

Criando uma Caixa de Autor Compatível com o Rich Snippets

By 8 Mins Read
Anúncios Google

O Rich Snippets dos resultados de pesquisa do Google estão cada vez mais ninjas: além de mostrar os já tradicionais dados do autor, exibem avaliações em estrelas (o plugin GD Star Rating é uma ótima opção pra isso), resenhas de produtos, faixas de músicas, elencos de filmes e muito mais.

Pode parecer pouco importante, mas quanto mais completo e diferente seu snippet, mais atenção tende a ter do visitante, e é garantia de aumento nas visitas. Se você já implementou o mais elementar que é o snippet de autoria mas anda tendo problemas com avisos de “missing required fields”, vou mostrar aqui como criei uma caixa de autor com alguns desses objetos requeridos.

Importante: só criar a caixa e usar o código não resolve tudo. Seu blog/site precisa ter alguma relevância (segundo os critérios do Google, Bing, etc). Se você criou o blog “ontem” e/ou tem pouco conteúdo, vai demorar um pouco até ver os snippets nas pesquisas. O único jeito é trabalhar e esperar.

1º Novas Informações de Contato

Por padrão, o WordPress ainda não exibe muitas opções para acrescentar informações de contato no perfil do autor (aquele acessado pelo menu Usuários > Seu Perfil). Vamos melhorar isso acrescentando o código abaixo ao seu functions.php:

/* Informações de contato novas, por thomasgriffinmedia.com/blog/2010/09/how-to-add-custom-user-contact-info-in-wordpress */

function extra_contact_info($contactmethods) {
 unset($contactmethods['aim']);
 unset($contactmethods['yim']);
 unset($contactmethods['jabber']);
 $contactmethods['facebook'] = 'Facebook';
 $contactmethods['googleplus'] = 'GooglePlus';
 $contactmethods['twitter'] = 'Twitter';
 $contactmethods['pinterest'] = 'Pinterest';
 $contactmethods['tumblr'] = 'Tumblr';
 $contactmethods['lastfm'] = 'LastFM';
 $contactmethods['flickr'] = 'Flickr';
 $contactmethods['vimeo'] = 'Vimeo';
 $contactmethods['youtube'] = 'YouTube';
 return $contactmethods;
 }
add_filter('user_contactmethods', 'extra_contact_info');

Agora é isso que você deve ter lá para preencher.

Novas informações de contato

2º Informe seu GooglePlus de Autor

Na nova caixa GooglePlus, preencha com o endereço de seu perfil nessa rede. Atenção: não use o endereço da página do seu blog no Google Plus; tem que ser seu perfil comum, de usuário (pessoa).

No final do url, acrescente um ?rel=author. No meu caso, o link ficou assim:https://plus.google.com/u/0/110272283560947529742?rel=author

Salve as novas informações, e não deixe também de preencher sua descrição – ela vai aparecer na caixa de autor.

3º Confirme autoria no GooglePlus

Lá no seu perfil do GooglePlus, vá em Editar Perfil e procure na página por “Colaborador de”.

03 colaborador em no Google Plus

Clique na área e acrescente o link do seu blog, ou blogs. Coloque todos os que você escreve e quer que seu perfil apareça na pesquisa.

4º Marcação de Autor e Página

Abra o arquivo header.php do seu tema, e em qualquer lugar cercado pelas marcações <head> e </head>, insira o seguinte:

function assina_gplus() {
 $post_tmp = get_post($post_id);
 $user_id = $post_tmp->post_author;
 $current_author = get_the_author_meta('googleplus',$user_id);

 echo '<link href="'. $current_author .'" rel="author" />
 <link href="https://plus.google.com/u/0/b/ID/" rel="publisher" />';
}
add_action('wp_head', 'assina_gplus');

Isso vai inserir no cabeçalho do tema as “assinaturas” de autor e página do GooglePlus relacionadas ao blog. O “author” será carregado das informações da página de contato. Aí sim você pode colocar o url da página do seu blog no GooglePlus: coloque o ID ali (aqueles números finais do endereço).

5º Criar a Caixa

Isso já deve ser o bastante para seu perfil aparecer nos Rich Snippets, mas vamos melhorar colocando também uma caixa de autor nos seus artigos (caso ainda não tenha, claro). Se seu blog é multiautor, os outros também terão autoria confirmada individualmente, desde que forneçam o endereço de seus perfis no GooglePlus com a extensão ?rel=author, como mostrado antes.

Você precisa encontrar no seu tema qual o arquivo que carrega os posts. Geralmente será dentro do content.php, single.php ou post.php. Para saber, abra o que encontrar com esse nome e procure pelo trecho:

the_content

Aí é onde se chamam os posts completos. Note que caso seu tema exiba posts completos na homepage esse trecho pode estar também na index.php, não confunda. Se a chamada do the_content estiver contido em uma div, procure pela tag de fechamento </div> e logo antes dela acrescente:

<?php if (!is_page()) { ?>
 <div class="vcard post-author">
 <?php if (function_exists('get_avatar')) { 
  echo get_avatar(get_the_author_email(), '100'); } ?>

 <a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID' )); ?>" class="url"><?php the_author_posts(); ?> artigos</a> escritos por...
 <h3><span class="fn"><?php the_author(); ?></span></h3>
 <p><?php if ( get_the_author_meta('description') ) { 
  the_author_meta('description'); ?></p><?php }
 else { ?>
  O autor não forneceu uma descrição</p><?php }
  ?>

<p id="contatosautor">Contatos</p> 
<?php $url = get_the_author_meta('googleplus');
if (strpos($url, "plus.google")!==false){ ?>
 <a id="gpluslink" href="<?php the_author_meta('googleplus', $current_author->ID); ?>" rel="me" target="_blank" title="Google+" class="url">Google+</a> <?php }
else { } ?>

<?php $url = get_the_author_meta('facebook');
if (strpos($url, "facebook.com")!==false){ ?>
 <a id="fblink" href="<?php the_author_meta('facebook', $current_author->ID); ?>" rel="me" target="_blank" title="Facebook" class="url">Facebook</a> <?php }
else { } ?>

<?php $url = get_the_author_meta('twitter');
if (strpos($url, "twitter.com")!==false){ ?>
 <a id="twlink" href="<?php the_author_meta('twitter', $current_author->ID); ?>" rel="me" target="_blank" title="Twitter" class="url">Twitter</a> <?php }
else { } ?>

<?php $url = get_the_author_meta('pinterest');
if (strpos($url, "pinterest.com")!==false){ ?>
 <a id="ptlink" href="<?php the_author_meta('pinterest', $current_author->ID); ?>" rel="me" target="_blank" title="Pinterest" class="url">Pinterest</a> <?php }
else {  } ?>

<?php $url = get_the_author_meta('tumblr');
if (strpos($url, "tumblr.com")!==false){ ?>
 <a id="tblink" href="<?php the_author_meta('tumblr', $current_author->ID); ?>" rel="me" target="_blank" title="Tumblr" class="url">Tumblr</a> <?php }
else {   } ?>

<?php $url = get_the_author_meta('lastfm');
if (strpos($url, "lastfm.com")!==false){ ?>
 <a id="fmlink" href="<?php the_author_meta('lastfm', $current_author->ID); ?>" rel="me" target="_blank" title="LastFM" class="url">LastFM</a> <?php }
else {  } ?>

<?php $url = get_the_author_meta('flickr');
if (strpos($url, "flickr.com")!==false){ ?>
 <a id="fklink" href="<?php the_author_meta('flickr', $current_author->ID); ?>" rel="me" target="_blank" title="Flickr" class="url">Flickr</a> <?php }
else {  } ?>

<?php $url = get_the_author_meta('youtube');
if (strpos($url, "youtube.com")!==false){ ?>
 <a id="ytlink" href="<?php the_author_meta('youtube', $current_author->ID); ?>" rel="me" target="_blank" title="YouTube">YouTube</a> <?php }
else {  } ?>

<?php $url = get_the_author_meta('vimeo');
if (strpos($url, "vimeo.com")!==false){ ?>
 <a id="vmlink" href="<?php the_author_meta('vimeo', $current_author->ID); ?>" rel="me" target="_blank" title="Vimeo">Vimeo</a> <?php }
else {  } ?>

</div>
<?php }

A caixa já está pronta para aparecer no final dos seus artigos. Por estar dentro de uma condicional if (!is_page()), ela não aparecerá em páginas fixas. Você pode usar outras condicionais dependendo da necessidade. Ou até nenhuma, dependendo da estrutura do seu tema.

6° Estilizando a Caixa

Essa é uma sugestão de estilização, fique à vontade para usar as ids e classes e fazer o que quiser com ela. Ela também usa uma imagem com os botões sociais.

Acrescente no arquivo style.css:

.vcard {
background: white;
padding: 12px 12px 18px 12px;
box-shadow: 0 2px 2px #CCC; -webkit-box-shadow: 0 2px 2px #CCC; -moz-box-shadow: 0 2px 2px #CCC;
}
.vcard img {
float: left;
margin: 0 10px 0 0;
border: 0;
}
#contatosautor {
font-weight: bold;
text-transform: uppercase;
float: left;
position: relative;
top: -13px;
margin-right: 6px;
}

#gpluslink, #fblink, #twlink, #ptlink, #ytlink, #vmlink, #tblink, #fmlink, #fklink {
width: 24px;
height: 24px;
display: block;
text-indent: -999em;
overflow: hidden;
background: url(https://lh5.googleusercontent.com/-Z-sH6NkMo-g/UR2bNmpdyfI/AAAAAAAAOLg/tp5xfbDzusg/s288/social.png) no-repeat;
float: left;
position: relative;
top: -21px;
margin: 5px 3px;
}
#gpluslink {background-position: -192px -28px;}
#gpluslink:hover {background-position: -192px 0;}

#fblink {background-position: 0px -28px;}
#fblink:hover {background-position: 0 0;}

#twlink {background-position: -32px -28px;}
#twlink:hover {background-position: -32px 0;}

#ptlink {background-position: -128px -28px;}
#ptlink:hover {background-position: -128px 0;}

#tblink {background-position: -64px -28px;}
#tblink:hover {background-position: -64px 0;}

#ytlink {background-position: -256px -28px;}
#ytlink:hover {background-position: -256px 0;}

#vmlink {background-position: -160px -28px;}
#vmlink:hover {background-position: -160px 0;}

#fmlink {background-position: -224px -28px;}
#fmlink:hover {background-position: -224px 0;}

#fklink {background-position: -96px -28px;}
#fklink:hover {background-position: -96px 0;}

Se tudo correu bem, sua caixa deverá ser parecida com essa:

caixa de autor pronta

O snippet do Google deve ser parecido com isso:

01 richsnippet

E ao usar a ferramenta de teste do Rich Snippet, você não deve mais ser incomodado por avisos de “Missing required field url” ou “name”.

Notas

A imagem de usuário não é carregada do WordPress e sim do Gravatar relacionado ao e-mail do autor. Se ainda não usa Gravatar, leia Como Criar uma Conta no Gravatar e saiba como.

Não esqueça de preencher as “informações biográficas” no seu painel de autor do WordPress, é de lá que virá o texto da caixa. Caso contrário, vai aparecer uma mensagem “o autor não forneceu uma descrição”. Horrível.

Se quiser mudar totalmente o estilo da caixa é fácil, ela usa ids e classes em quase todas as partes. Se não gostou dos ícones usados, é só trocar o background associado a eles, mas cuidado para que os novos botões tenham exatamente o mesmo tamanho e estejam posicionados na imagem igual ao original, senão vai ter que editar todos os ids no CSS para reposicionar o fundo ao passar o mouse, bem trabalhoso.

A caixa não mostra data nem título do artigo, que ainda são “exigidos” pelo Rich Snippet. Para resolver, procure em seu tema o ponto em que o título do artigo é carregado e acrescente a classe “entry-title”, e onde a data de postagem é carregada, insira a classe “updated”.

Por opção minha, coloquei o link para a página de posts do autor no texto “XX artigos por…”. Se você mudar a estrutura e colocar o link no nome do autor, pode colocar as classes “fn” e “url” juntas para indicar o nome e link para o snippet. Ficaria mais ou menos assim:

<?php if (!is_page()) { ?>
 <div class="vcard post-author">
 <?php if (function_exists('get_avatar')) { 
  echo get_avatar(get_the_author_email(), '100'); } ?>

<?php the_author_posts(); ?> artigos escritos por...<br />
<a href="<?php echo get_author_posts_url(get_the_author_meta( 'ID' )); ?>" class="url fn"><h3><?php the_author(); ?></h3></a>
 <p><?php if ( get_the_author_meta('description') ) { 
  the_author_meta('description'); ?></p><?php }
 else { ?>
  O autor não forneceu uma descrição</p><?php }
  ?>
Author

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Related Posts

2 Comments

    • DanielLemes Reply

      Estranho… colocou os códigos no lugar certo? (functions.php, etc)?

Write A Comment

Pin