Todos nós sabemos o quanto é importante compartilhar e divulgar nossos blogs de forma com que o conteúdo seja bem apresentado, não é? Uma imagem ilustrativa, um título bem sucinto e de onde vem aquele conteúdo, inclusive quem é o autor do post, é muito importante para chamar a atenção do leitor. Para mostrar tudo isso é necessário saber todas as meta tags necessárias.
As meta tags que irei ensinar neste tutorial não só são úteis para um compartilhamento bacana de um link de post no Facebook, mas também importantíssimo para mostrar a interface do comentário que um leitor fez em seu blog caso você tenha a opção de comentários do facebook em seu blog. Ou seja, mais uma forma de divulgar. Veja abaixo como fica.
Para os que preferem plugins
Você pode instalar o plugin Open Graph Protocol que irá praticamente fazer tudo o que explicarei aqui e você fica livre de códigos (tem o Yoast SEO também, mas ele abrange outras meta tags de recursos de SEO). Mas, como eu sempre digo, quanto menos plugins no wordpress, melhor é para nossa vida, já que é uma coisa a menos a ser instalada, e mais seguro fica nosso blog, pois nunca sabemos como foi programado o plugin e sabe-se lá se tem alguma vunerabilidade, né? Quanto mais podemos evitar, melhor. Vai da consciência e escolha de cada um. Se você é como eu e prefere as coisas de forma mais simples, rápida e prática, então continue este tutorial. ;D
1) O que são meta tags e onde inseri-las?
Meta tags são linhas de código básicas das quais você coloca no início de seu HTML (após a abertura da tag <head>). Funcionam como uma espécie de "etiquetas" que descrevem o conteúdo do seu blog para as redes sociais e buscadores como o Google, bem como a sua autoria do conteúdo do mesmo — portanto, é imprescindível para o SEO do seu blog.
2) Conhecendo as meta tags do facebook
As meta tags específicas do facebook são chamadas de Open Graph, das quais cada uma possui a sua função de mostrar conteúdo (veja a lista completa no site), que vai até da data de publicação, até lista categoria, tags, título e link do perfil de autor de quem publicou o artigo. São por estas meta tags específicas que o facebook lê o seu blog e o mostra na rede social. Segue abaixo o exemplo de lista das principais meta tags e o conteúdo descritivo das mesmas:
<meta property="og:locale" content="pt_BR"> <meta property="og:type" content="article" /> <meta property="og:title" content="Titulo do post" /> <meta property="og:description" content="Texto resumo do post" /> <meta property="og:url" content="http://meublog.com/link-do-post"/> <meta property="og:image" content="http://imagem-thumbnail-do-post.jpg" /> <meta property="og:site_name" content="Nome do blog"> <meta property="article:author" content='http://facebook.com/perfil-do-autor' /> <meta property="article:section" content="Nome da categoria do post"> <meta property="article:tag" content="Lista de tags do post"> <meta property="article:published_time" content="2015-08-22T22:18:56+00:00">
- og:locale – País de origem do conteúdo. No Brasil é pt_BR. Para outros países, veja a lista.
- og:type – Tipo do site, se é website (para sites comuns) ou article (para artigos e blogs)
- og:title – Título do artigo
- og:description – Texto resumo do post
- og:url – URL do blog ou do post
- og:image – URL da imagem destacada do post ou marca do blog (imagens somente acima de 200x200px)
- og:site_name – Nome do blog
- article:author – Link do perfil ou página do autor do artigo
- article:section – Categorias do post
- article:tag – Tags utilizadas no post
- article:published_time – Data de publicação do post
3) Como aplicar as meta tags no tema wordpress
Sabemos que só inserir as meta tags cruas no wordpress não irá adiantar nada, pois o conteúdo sempre está em constante atualização. Diante disso, precisamos recorrer ao Template Tags (de linguagem PHP) do WordPress para também deixar estas meta tags dinâmicas e ir se atualizando com o conteúdo.
Abra o seu header.php, procure pela tag <head> e substitua por
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# profile: http://ogp.me/ns/profile#">
Esse código acima é quem irá permitir o facebook de mostrar o link do autor no compartilhamento. Depois disso, insira as seguintes meta tags logo abaixo do novo <head> que você definiu.
<!-- META TAGS FACEBOOK - POR MADLYLUV.COM -->
<meta property="og:locale" content="pt_BR">
<?php if(is_single() || is_page()) { ?>
<!-- se está num post ou página, aparecerá estas meta tags -->
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php single_post_title(''); ?>" />
<meta property="og:description" content='<?php while(have_posts()):the_post(); $out_excerpt = str_replace(array("\r\n", "\r", "\n"), "", get_the_excerpt()); echo apply_filters("the_excerpt_rss", $out_excerpt); endwhile;?>' />
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php global $user_ID; if ( get_the_author_meta('facebook_profile',$user_ID) ) : ?>
<meta property="article:author" content='<?php the_author_meta('facebook_profile'); ?>' />
<?php endif; ?>
<meta property="article:section" content="<?php $category = get_the_category(); if($category[0]){ echo ''.$category[0]->cat_name.''; } ?>">
<meta property="article:tag" content="<?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) {echo $tag->name . ', ';} }?>">
<meta property="article:published_time" content="<?php the_time('c') ?>">
<?php } else { ?>
<!-- se não está em post ou página, aparecerá meta tags da página principal -->
<meta property="article:author" content='http://facebook.com/FANPAGEBLOG' />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:url" content="<?php bloginfo('url'); ?>"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/screenshot.png" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php } ?>O código acima está dividido em duas partes, uma da qual aparece as meta tags para posts e páginas e outra parte mostrará as meta tags para a página principal. Entenda as tags wordpress que usei abaixo:
- single_post_title(); – Título do post
- get_the_excerpt(); – Resumo do post
- the_permalink(); – Link do post
- wp_get_attachment_url(); – URL da imagem destacada em seu formato original
- bloginfo('name'); – Nome do blog
- get_the_author_meta(); e the_author_meta(); – Tags que pegam algum tipo de informação do autor (que será a url do perfil do facebook, que explicarei como fazer no próximo passo)
- get_the_category(); – Nome da categoria do post (somente a principal)
- get_the_tags(); – Lista de todas as tags do post
- the_time(); – Tag de data
- bloginfo('url'); – URL do blog
- bloginfo('description'); – Descrição do blog
- bloginfo('template_url'); – URL da pasta do tema
Calma que não acabou o tutorial ainda! Salve o arquivo acima e siga com o tutorial.
4) Inserindo o link do autor do post
Você deve ter percebido no código de meta tags acima que há duas formas das quais aparecem o autor, certo?
<?php global $user_ID; if ( get_the_author_meta('facebook_profile',$user_ID) ) : ?>
<meta property="article:author" content='<?php the_author_meta('facebook_profile'); ?>' />
<?php endif; ?><meta property="article:author" content='http://facebook.com/FANPAGEBLOG' />
A primeira forma aparecerá exatamente o link do autor do post, ou seja, quando o post dele em específico for compartilhado (veja o print). Já a segunda forma é a forma quando o link principal, ou seja, só o domínio do seu blog é compartilhado na rede. Neste segundo caso, nada mais justo do que aparecer a fanpage do blog, né? Isso é muito legal pois, além do blog, a fanpage também é divulgada simultaneamente. 😍
Como sei que é muito comum blogs ter colaboradores, achei justo já deixar inserida a função pronta na meta tag de autor (que é da primeira parte do código) pegar o link automático. Agora, ensinarei como permitir no painel que cada autor insira a url do seu perfil (e dai quando o post é compartilhado, o link do autor é divulgado). Para isso acontecer, abra o arquivo functions.php da pasta do tema e insira o código abaixo:
// função de inserir perfil de facebook do autor do post
// por madlyluv.com
add_action( 'show_user_profile', 'redes_sociais' );
add_action( 'edit_user_profile', 'redes_sociais' );
function redes_sociais( $user )
{
?>
<h3 style="margin-bottom:0">Facebook</h3>
<table class="form-table">
<tr>
<th><label for="facebook_profile">URL</label></th>
<td><input type="text" name="facebook_profile" value="<?php echo esc_attr(get_the_author_meta( 'facebook_profile', $user->ID )); ?>" class="regular-text" /></td>
</tr>
</table>
<small>Função por madlyluv.com</small>
<?php
}
add_action( 'personal_options_update', 'salvando_dados_redes_sociais' );
add_action( 'edit_user_profile_update', 'salvando_dados_redes_sociais' );
function salvando_dados_redes_sociais( $user_id ) {
update_user_meta( $user_id,'facebook_profile', sanitize_text_field( $_POST['facebook_profile'] ) );
}Ao salvar o arquivo você vai no painel do seu wordpress em Users > Your Profile e você verá que ficará mais ou menos desta forma abaixo.
Em URL basta o colaborador inserir a url do perfil. Se só você que escreve em seu blog, fique livre para inserir seu perfil ou o link da fanpage do mesmo.
5) Forçando o Facebook a ler as metatags
Depois que você coloca as metatags do Facebook, nem sempre as metatags que você acabou de adicionar são lidas na hora. Isso acontece porque, assim como o Google, o Facebook possui uma ferramenta que entra dentro de cada site e lê as informações contidas nas metatags e em todo site. Imagina fazendo isso para sites do mundo todo? Por isso que nunca é instantâneo. O Google mesmo pode demorar até 90 dias para ler as informações de um site e indexa-lo nos sistemas de busca.
Entretanto, o Facebook tem uma solução que agiliza muito mais rápido o processo, chamada Open Graph Debug. É uma ferramenta de "debug" que encontra toda e qualquer incompatibilidade das páginas com a rede social e, com um só botão, faz correções.
É só você entrar no site colocar a url que você quer atualizar e clicar em Debug. Abaixo desta url aparecerá várias informações inseridas nas metatags. Se não forem as informações que você inseriu, então você precisa atualizar sua página. Para isso, basta clicar em Fetch new scrape information.
O Debug é ótimo para quando você erra o texto do título ou quando quer trocar de thumbnail, mas está com pressa de mudar, ou justamente quando você acrescenta novas metatags e elas precisam ser lidas o mais rápido possível, como é este o nosso caso.
Prontinho, agora você tem um arsenal completo para divulgar lindamente o seu blog no Facebook. Agora, mãos a obra e bora divulgar, haha! 😊
