Marketing 3064 IA & Tech 650 Gestão & Carreira 423 Vendas & CRM 245 SEO 164
Marketing

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

MM
Matt Montenegro Founder & CEO
24/08/2015 7 min
TL;DR

Metatags de compartilhamento orientam como uma página aparece quando seu link circula nas redes sociais. O artigo explica como organizar título, descrição, imagem e URL para que a prévia corresponda ao conteúdo e não dependa de uma escolha automática da plataforma.

  • Por que importa: Uma prévia coerente ajuda a audiência a reconhecer o assunto antes de abrir o link.
  • Como funciona: Open Graph descreve elementos como título, tipo, imagem e endereço canônico da página.
  • Ponto de atenção: A imagem precisa estar acessível publicamente e refletir o que a página entrega.
  • Na prática: Revise o código publicado e teste a prévia depois de qualquer alteração importante.
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.)
Neste post 4

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://analoghq.ai/blog/br/resources/wp-content/uploads/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://example.com/blog/dicas-de-marketing/# /”/>

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=”example_page″/> 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:

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://analoghq.ai/blog/br/resources/wp-content/uploads/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.

Perguntas frequentes

Quais tags Open Graph merecem prioridade?

Comece pelas informações que identificam claramente a página: og:title, og:description, og:image e og:url. O tipo de conteúdo também ajuda alguns consumidores da prévia a interpretar o link. O conjunto deve expressar o mesmo assunto do título visível e da página de destino, com uma URL canônica estável.

O que fazer com as antigas Twitter Cards?

O prefixo twitter: aparece em muitas implementações por herança da plataforma. Antes de mantê-lo ou adicioná-lo, consulte a documentação da rede e da ferramenta de publicação usada pelo site. Um conjunto Open Graph completo oferece uma base útil, mas cada destino pode tratar metadados e cache de modo próprio.

Por que a imagem certa não aparece ao compartilhar?

Verifique se a página publicada contém a tag de imagem, se o arquivo responde sem bloqueios e se a URL é absoluta. Também vale conferir a proporção e a legibilidade da arte. Redes sociais podem armazenar uma versão anterior da prévia, por isso uma mudança recente pode demorar a ser refletida.

MM Matt Montenegro

Matt Montenegro

Publicitário e Designer de Produto; ex-CEO da VidMonsters (M&A Hotmart). Fala sobre a indústria de tecnologia e compartilha insights a respeito do atual zeitgeist.

Leia mais