Como personalizar as metatags do Facebook Open Graph e do Twitter Card

Imagine isso: você está pronto com a postagem de blog perfeita e uma imagem atraente em destaque para acompanhá-la. Mas no momento em que você compartilha no Facebook ou Twitter, a imagem é cortada nos lugares errados. Pior ainda, não há imagem ou a imagem é tão pequena que é fácil rolar para a direita, perdendo completamente a postagem. Em algum momento de nossas jornadas de blog, todos nós já estivemos lá.

Uma imagem mal dimensionada não apenas dilui a mensagem que você está tentando passar para seus seguidores, mas também reduz a capacidade de compartilhamento das postagens. Mesmo seus fãs mais fervorosos hesitarão em compartilhar seu conteúdo (por mais informativo que seja) se não for acompanhado de uma imagem relevante em destaque, otimizada para a plataforma em questão.

Uma imagem vale mais que mil palavras, sem dúvida, mas se você não procurar ativamente assumir o controle de suas imagens de mídia social, essas podem ser as palavras erradas. Então, como você pode evitar essa armadilha e otimizar as imagens do seu blog para compartilhamento social?

As metatags Open Graph e Twitter Card são as soluções para isso.

O que são as Meta Tags Open Graph e Twitter Card?

Introduzidas pelo Facebook em 2010, as tags Open Graph são um conjunto de meta tags usadas para facilitar que qualquer página da web se torne um objeto rico em um gráfico social, permitindo que você, o editor de conteúdo, controle os elementos que são exibidos quando você compartilha seu página no Facebook. Desde a sua introdução, o protocolo Open Graph também foi adotado pelo LinkedIn e Pinterest. O Twitter usa um protocolo que emprega Twitter Cards, que é semelhante em função ao Open Graph do Facebook.

Se você visitar um site em que o Open Graph e os Cartões do Twitter estejam habilitados e fizer uma visualização da fonte do conteúdo, as metatags podem se parecer com o exemplo abaixo (com as informações de “conteúdo” substituídas adequadamente):

Quando incluídas, as tags Open Graph e Twitter Card não afetam diretamente o SEO da página, mas afetam a forma como a página é exibida nas plataformas sociais e, mais importante, dá ao editor um nível de controle sobre os elementos a serem exibidos quando suas páginas são compartilhadas em redes sociais por qualquer pessoa.

Como implementar as tags Open Graph e Twitter Card em seu site WordPress

Como habilitar os cartões do site do Twitter para mais tráfego social

Quase todos os tweets com um link parecem iguais. “Título + link + via @handle + #hashtag.” E esse vínculo? É completamente não otimizado. Entediante. Você clica no tweet e nada acontece. Todos os...

Até agora tudo bem. Mas a questão que surge a seguir é como manipular as metatags Open Graph e Twitter Card para obter os melhores resultados de exibição para sua postagem nas mídias sociais. A boa notícia é que existem vários plugins para escolher para implementar essas metatags. Neste artigo, vou me concentrar principalmente nos recursos premium de metatag do plugin Yoast SEO, mas depois falarei sobre algumas outras maneiras de fazer isso.

Yoast SEO para WordPress

Se você ainda não tem a versão premium do Yoast SEO instalada no seu site WordPress, esse é o primeiro passo para otimizar as imagens do seu blog para as redes sociais. Este plugin torna a adição de metatags Facebook Open Graph e Twitter Card muito fácil. Aqui está um guia passo a passo sobre como habilitar as metatags sociais usando o plug-in Yoast SEO.

1. Configure o Yoast SEO

Navegue até a guia “Social” do plugin Yoast SEO no painel do seu site WordPress. Preencha os detalhes associados às plataformas de mídia social do seu site na guia "Contas".

Ative os metadados do Open Graph na guia “Facebook” e preencha os outros detalhes relevantes conforme necessário na página.

Ative os metadados do cartão do Twitter na guia “Twitter” e preencha as informações relevantes conforme necessário na página.

Nota: É melhor usar “Resumo com imagem grande” para o Twitter porque os tweets com imagens grandes obtêm mais engajamento do que aqueles com imagens pequenas ou sem imagens. Então seus tweets ficarão assim:

Depois de concluir essas etapas, as metatags do Facebook Open Graph e do Twitter Card serão ativadas em todas as suas postagens. (Esta é uma configuração única!)

No entanto, as imagens que serão escolhidas para compartilhamento social por essas tags ainda não serão personalizadas exclusivamente para as plataformas em questão. Para que isso aconteça, você precisará fazer uma etapa adicional nas postagens individuais que deseja compartilhar. (Esta é uma etapa que você precisará repetir para cada nova postagem no blog).

2. Selecione imagens específicas para compartilhar no Facebook e Twitter

Quando você rola para baixo até a seção Yoast SEO de uma postagem recém-criada (ou qualquer postagem no modo de edição), a segunda guia na seção Yoast SEO permite selecionar os detalhes de compartilhamento social. Você pode usar essa guia para editar a imagem, título, descrição etc. do Facebook e do Twitter.

E é isso! Apenas algumas coisas para manter em mente:

1. O Yoast sugere um tamanho de imagem em destaque de 1200px por 630px para o Facebook e 1024px por 512px para o Twitter. Por tentativa e erro, descobri que qualquer imagem horizontal com a proporção largura/altura de 2:1 e uma largura maior que 450px funciona bem para o Facebook e o Twitter. Para obter mais informações sobre tamanhos de mídia social, confira este guia do Sprout Social e estas diretrizes do Buffer.
2. Se você estiver alterando as imagens em destaque para o Facebook retroativamente depois de já ter compartilhado seu link de postagem pelo menos uma vez antes, você deve executar sua URL por meio do Depurador de Compartilhamento do Facebook, para que as informações em cache antigas possam ser atualizadas e ele possa pegar as novas imagem em destaque a partir de então.

Outros plugins do WordPress para otimizar imagens de mídia social

Se você não estiver usando o plug-in Yoast SEO, existem outros plug-ins do WordPress que podem ajudá-lo a fazer o trabalho. Aqui estão algumas outras opções de plugins que você pode escolher dependendo de sua preferência e compatibilidade do site:

• Facebook
• Tudo em um pacote de SEO
• Tags de cartão do Facebook Open Graph, Google+ e Twitter
• Abrir gráfico

Como usar o PHP para adicionar manualmente os metadados do Open Graph e do Twitter Card ao seu tema WordPress

Finalmente, se você estiver procurando por uma solução tecnológica em vez de um plugin, você sempre pode optar por adicionar diretamente as meta tags ao seu tema WordPress, incluindo manualmente o código PHP necessário no arquivo function.php do seu tema. Aqui estão alguns links sobre como você pode fazer isso com instruções passo a passo:

• Como adicionar metadados do Open Graph do Facebook em temas do WordPress
• Como adicionar metatags Open Graph ao WordPress
• Functions.php código para incluir metatags do Open Graph

Observação: talvez seja necessário personalizar o código de referência fornecido acima para se adequar ao design do tema do seu site específico.

Depois de entender as metatags que unem suas postagens de mídia social, você pode colocá-las em funcionamento em seu site WordPress rapidamente. E o ROI? Bem, suas postagens terão um desempenho muito melhor nas mídias sociais e você terá um controle muito melhor sobre como elas aparecem e o que elas transmitem, tornando-as significativas e compartilháveis.