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.
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”.
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:
O snippet do Google deve ser parecido com isso:
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 } ?>
2 Comments
Nenhum código deu certo no meu.
Estranho… colocou os códigos no lugar certo? (functions.php, etc)?