Existem váarios plugins de SEO e de compartilhamento de redes sociais que fazem mil e uma coisas. Tem tambem vários outros plugins que também adicionam o og nas meta tags.

OG=Open Graph. São dados no código do site que redes sociais como facebook, instagram, twitter e mídias como o WhatsApp, telegram, etc usam para exibir informações como nome, resumo e imagem de destaque de um link que você cola na plataforma.

Como existem plugins e plugins, muitos tem 200 funcionalidades, e a maioria você não quer; ou ele tem várias configurações complicadas… e por eu ter conhecimento em html, css e php, muitas vezes prefiro buscar o código para inserir diretamente no tema. Assim o site fica mais leve e o SEO agradece.

Pois bem, pesquisando achei artigos muito bons, e o melhor deles deu um código que adaptei para o abaixo. Estava faltando os atributos de largura e altura da imagem para ficar perfeito, que adicionei.

Aqui o artigo, que ensina inclusive como usar o YOAST para fazer essa configuração (mas tive problemas, rs, então segui com a inserção do código bruto).
https://www.wpbeginner.com/wp-themes/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes/

Finalmente, o código bruto (mude o que estiver em negrito):

Ei! Por acaso você quer aprender a atender online? Baixe o meu e-book Gratuito para saber como começar a fazer atendimentos, consultas, consultorias, aulas, vendas etc na internet: Clique/toque aqui!

//Adicionando o Open Graph nos atributos de idioma
function add_opengraph_doctype( $output ) {
return $output . ‘ xmlns:og=”http://opengraphprotocol.org/schema/” xmlns:fb=”http://www.facebook.com/2008/fbml”‘;
}
add_filter(‘language_attributes’, ‘add_opengraph_doctype’);

//Informações para adicionar nas metas do Open Graph:

function insert_fb_in_head() {
global $post;
if ( !is_singular()) //se não for post ou página
return;
echo ‘<meta property=”fb:app_id” content=”ID do seu App Facebook caso tenha” />’;
echo ‘<meta property=”og:title” content=”‘ . get_the_title() . ‘”/>’;
echo ‘<meta property=”og:type” content=”article”/>’;
echo ‘<meta property=”og:url” content=”‘ . get_permalink() . ‘”/>’;
echo ‘<meta property=”og:site_name” content=”Nome do Site“/>’;
if(!has_post_thumbnail( $post->ID )) { //se o seu post não tiver uma imagem destaque definida, insira aqui a URL da imagem a substituí-la.
$default_image=”http://exemplo.com/imagem.jpg“; //substitua aqui a URL da imagem
echo ‘<meta property=”og:image” content=”‘ . $default_image . ‘”/>’;
echo ‘<meta property=”og:image:width” content=”Número da largura da imagem“/>’;
echo ‘<meta property=”og:image:height” content=”Número da altura da imagem“/>’;
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ );
echo ‘<meta property=”og:image” content=”‘ . esc_attr( $thumbnail_src[0] ) . ‘”/>’;
echo ‘<meta property=”og:image:width” content=”‘ . esc_attr( $thumbnail_src[1] ) . ‘”/>’;
echo ‘<meta property=”og:image:height” content=”‘ . esc_attr( $thumbnail_src[2] ) . ‘”/>’;
}
echo ”
“;
}
add_action( ‘wp_head’, ‘insert_fb_in_head’, 5 );

Adicione-o no functions.php via Editor no Menu Aparência do painel WordPress.

Adicionar no functions.php é uma questão de organização, para centralizar lá as funções extras.

Ele funcionará especificamente para páginas e posts, ok?

Não imagino outra contraindicação para inserí-lo diretamente no header.php junto com as outras meta tags, se for mais facilmente recordado ali e por algum motivo você precisar ficar voltando neste código.

 

Para já facilitar a sua vida, segue link do depurador de compartilhamento do facebook para você inserir uma URL do site que inseriu o código e já validar se stá tudo correto no funcionamento das suas novas og tags inseridas na unha:
https://developers.facebook.com/tools/debug/

E caso precise alterar algo relacionado à forma de puxar a imagem para a minitaura, aqui a documentação oficial do WordPress, o codex:

wp_get_attachment_image_src()

Estou colocando esses links todos também porque um dos motivos de eu escrever snippets no meu blog, é facilitar a minha própria vida quando estiver precisando usá-lo novamente. ;p

Um conhecimento que sempre me foi útil, foi o de saber html, css, php e WordPress.

E é bem sabido que conhecimento em programação é algo extremamente útil para o futuro das coisas…

Um viva pros programadores e desenvolvedores. \o/

Você também gostará de...

Seja avisado quando houver novos artigos relevantes por aqui para melhorar a sua eficiência, na sua caixa de e-mail. Basta inserir seus dados abaixo :)