Meta tags para redes sociais: como usar o Facebook Open Graph e o Twitter Cards

O Neil Patel é um dos nossos maiores gurus de marketing digital.

Sempre olhamos para seus artigos como fonte de inspiração e já aprendemos muita coisa com ele. Tivemos a oportunidade de conversar com o Patel na sua recente visita a Belo Horizonte para o FIRE 2015. Nesse bate papo, ele nos autorizou a traduzir e publicar um de seus artigos, que você pode ver aqui em inglês.

Ficamos honrados! A tradução você confere agora.

(E se você ainda não segue o Neil Patel, sugerimos fortemente que você dê uma olhada no seu site e na sua fanpage no Facebook. Acredite em nós: ele pode te ensinar muito sobre marketing digital.)

Meta tags para redes sociais: como usar o Facebook Open Graph e o Twitter Cards

Você utiliza title tags e meta tags de descrição? Se sim, com certeza sabe da importância destes dois pontos quando o assunto é SEO.

Mas você sabia que o tráfego nas mídias sociais também é sensivelmente afetado pela utilização correta destes recursos?

O que o post de hoje abordará é que existem regras diferentes para utilização de tags e meta tags para o Facebook, o Twitter e os demais motores de busca, e o nosso foco aqui é lhe fazer compreender como aumentar o tráfego nas redes sociais através de algumas dicas a respeito destas particularidades chamadas Twitter Cards e Facebook Open Graph.

CONTEÚDOS RECOMENDADOS
– [Ebook gratuito]: Marketing no Facebook
– [Ebook gratuito]: Marketing no Instagram
– [Ebook gratuito]: Marketing no LinkedIn
– [Ebook gratuito]: Marketing no Twitter
– [Ebook gratuito]: Marketing no Youtube

Facebook Open Graph

Quando você tenta compartilhar uma imagem no Facebook, costuma aparecer uma imagem acompanhada das informações referentes, ou apenas o título e a descrição?

Provavelmente você já deve ter se deparado com este tipo de situação. Fato é que quando o Open Graph não é utilizado (ou não está devidamente configurado) a segunda situação deverá ocorrer, frustrando os seus objetivos, pois o Facebook desta forma não consegue “puxar” suas imagens.

Saiba que não se trata apenas de embelezar seu post.

Quem entende o mínimo de marketing digital sabe que quando uma imagem está agregada à sua mensagem o tráfego aumenta de forma considerável. Estamos falando de algo maior do que 150%!

Agora que você está convencido de que deve usar o Open Graph, aqui vão dicas de como configurá-lo em seu site ou blog para que seus posts no Facebook estejam sempre com as imagens que dão muito mais relevância para seu conteúdo:

Se você usa WordPress, basta instalar o plugin Open Graph Protocol e tudo estará praticamente pronto.

Agora caso não esteja usando o WordPress, você precisará gerar meta tags para cada página no seu site manualmente. Para facilitar as instruções abaixo, para que você entenda, usaremos o artigo “50 dicas fantásticas de marketing no Facebook” como um exemplo prático.

Og: title

Og: title é onde você coloca o título de seu conteúdo.

Pense nisso como sendo semelhante a sua title tag de html convencional que você usa para o Google. Ao criar seu og: title, mantenha o número de caracteres menor do que 95 caracteres.

Por exemplo: <meta property=”og:title” content=”50 dicas fantásticas de marketing no Facebook“/>

Og: type

Aqui estamos falando de onde você descreve o tipo de conteúdo que você está compartilhando.

Trata-se de um vídeo, imagem, blog post, etc.? Aqui está a lista completa, que você pode escolher ao definir o tipo de conteúdo:

Atividades

• activity
• sport

Negócios

• bar
• company
• cafe
• hotel
• restaurant

Grupos

• cause
• sports_league
• sports_team

Organizações

• band
• government
• non_profit
• school
• university

Pessoas

• actor
• athlete
• author
• director
• musician
• politician
• public_figure

Locais

• city
• country
• landmark
• state_province

Produtos e entretenimento

• album
• book
• drink
• food
• game
• product
• song
• movie
• tv_show

Websites

• blog
• website
• article

Por exemplo: <meta property=”og:type” content=”article“/>

Og:Description

Isto também é semelhante à sua meta descrição de html, porque é usado para descrever o seu conteúdo. Não se importe com a força da palavra-chave aqui neste caso.

Ao invés disso, pense em uma descrição convincente que terá o potencial de gerar mais cliques. Você tem até 297 caracteres para esta tag.

Por exemplo: <meta property=”og:description” content=” Quer saber como ter sucesso com os anúncios do Facebook e quais são os posts que aumentam a interação com os fãs? Confira as nossas dicas! “/>

Og: image

Lembra-se que mencionamos que posts com imagens eram capazes de aumentar o tráfego do Facebook cerca de 150%?

Isso é possível pois, utilizando o Open Graph, você tem a garantia que o Facebook mostrou uma imagem a cada vez que alguém compartilhou uma URL do seu site. Os resultados são até óbvios, tendo em vista que o post ficará muito mais atraente.

Utilizando uma tag de og: image, você vai garantir que uma imagem estará sempre junto ao conteúdo que você está compartilhando. Desta forma destaca-se de todas as outras atualizações de status baseadas em textos de sua timeline.

Antes de entrarmos no mérito de como você pode usar esta tag, você precisa saber que o Facebook possui alguns pré-requisitos para a postagem de imagens. Uma imagem precisa ter pelo menos 50px por 50px, mas de preferência maior que 200px por 200px. Além disso, a imagem não pode ter mais do que 5 MB de tamanho.

Por exemplo:

<meta property=”og:image”content=”https://rockcontent.com/br/wp-content/uploads/sites/2/2014/09/zuckerberg-620×316.png “/>

Og: url

Nesta tag, você deve colocar a URL da página que você está compartilhando. Esta tag pode parecer irrelevante, mas é muito importante, pois às vezes você vai ter mais de uma URL para o mesmo conteúdo, e usando esta tag você vai garantir que todos os compartilhamentos acessarão apenas uma URL, o que deve ajudar o seu Facebook Edgerank.

Por exemplo:

<meta property=”og:url” content=” https://rockcontent.com/br/blog/dicas-marketing-no-facebook/# /”/>

Og: site_name

Esta tag informa ao Facebook qual é o nome do seu site. Você realmente não precisa desta tag, mas não há mal nenhum em incluí-la.

Por exemplo: <meta property=”og:site_name” content=”Marketing de Conteúdo“/>

FB:admins

Se você tem uma fan page no Facebook e deseja obter mais dados através do Facebook Insights, então você precisa utilizar esta tag. Ela “conta” para o Facebook que você é o proprietário do site e conecta seu Facebook à sua página.

Por exemplo: <meta property=”fb:admins” content=”werockcontent″/>

Agora que você tem seu Facebook Open Graph meta tags devidamente configurados e sabe mais sobre eles, vamos avançar para o Twitter Cards.

Twitter Cards

Você já teve oportunidade de ver postagens do Twitter que possuem imagens, e com uma descrição completa do post relacionado dentro de um box bem organizado?

Bem, esses tweets detalhados só aparecem quando você utiliza o Twitter Cards. Não seria ótimo poder contar sempre com isso? Com certeza o destacaria em meio a uma multidão de posts.

Aqui está a fórmula de como você pode alavancar seu alcance com o Twitter Cards:

Se você faz o trabalho de SEO pelo plugin Yoast para o WordPress, basta seguir os passos desse link. Nos demais casos, siga os passos abaixo:

Twitter: cards

Este meta tag descreve o tipo de conteúdo que você está compartilhando. Você tem três opções com o Twitter, diferentemente das várias que apresentamos para o Facebook: photo (para imagens), player (para vídeos) e Summary (para todo o resto).

Se você não definir o seu card, o Twitter utilizará o padrão Summary para todos os posts.

Por exemplo: <meta name=”twitter:card” content=”summary“>

Twitter: url

Esta é a página que você está compartilhando no Twitter. Da mesma forma que acontece no Facebbok no caso das URL’s, o Twitter faz isso porque você pode ter o mesmo conteúdo em seu site várias vezes.

Isso garantirá que uma URL possa abranger todos os tweets. Caso contrário, eles serão divididos em várias urls, o que não é bom para os motores de busca.

Por exemplo:

<meta name=”twitter:url” content=”https://https://rockcontent.com/br/blog/dicas-marketing-no-facebook/”>

Twitter: title

Da mesma forma que é feito com o seu título do Facebook Open Graph, isto não deveria ser recheado de palavras-chave, o caso definitivamente não é esse.

Torná-lo atraente para que as pessoas queiram clicar nele é o principal objetivo aqui. Novamente, como no Facebook, você precisará limitar o número de caracteres para 70.

Por exemplo: <meta name=”twitter:title” content=”50 dicas fantásticas de marketing no Facebook “>

Descrição: Twitter

Isso é semelhante a uma meta tag de descrição que você usaria para o Google. Mas, novamente, não é necessário enchê-la de palavras-chave. Seu objetivo aqui deve ser criar uma frase atraente, que orienta e incita que as pessoas cliquem no link que direciona ao seu site. Lembre-se que aqui a sua descrição é limitada a 200 caracteres.

Por exemplo: <meta name=”twitter:description” content=” Quer saber como ter sucesso com os anúncios do Facebook e quais são os posts que aumentam a interação com os fãs? Confira as nossas dicas!“>

Twitter: image

Para fazer com que seu tweet se destaque, já sabemos que você precisa de uma imagem, não é?.

No caso do Twitter, suas imagens precisam ser menores que 1 MB de tamanho de arquivo, e não podem ser menores que 60px por 60px. Outro detalhe é que as imagens maiores que 120px por 120px serão automaticamente redimensionadas.

Por exemplo:

<meta name=”twitter:image”content=”https://rockcontent.com/br/wp-content/uploads/sites/2/2014/09/zuckerberg-620×316.png“>

Depois de aplicar as metatags Twitter Cards para seu site, você precisa aplica-las no Twitter Card Program. Uma vez que você for aceito, as URLs de seu site serão mostrados no formato cartão, como descrevemos no primeiro tópico a respeito do assunto.

Conclusão

Meta tags não são apenas voltadas para os motores de busca. Sites de mídias sociais também estão aproveitando-os, da mesma forma como você as otimizaria para o rankeamento do Google e outros similares e para as taxas de abertura.

Portanto, mãos à obra também para o Facebook e para o Twitter, e veja seu alcance crescer consideravelmente após isso. Ao menos é isso que esperamos.

Quer descobrir mais sobre redes sociais e entender como ser um mestre em cada uma delas? Descubra com nosso kit completo de marketing para redes sociais.