As tags Open Graph são um conjunto de meta tags que podes colocar no teu site e que podem ser interpretadas por diversas redes sociais: Facebook, Pinterest, LinkedIn e, no passado, Google+.
Estas tags são essenciais se tiveres um site e quiseres controlar o aspeto de cada link partilhado nas plataformas sociais.
Podes, por exemplo, definir um título diferente do que se encontra na tua página, ou carregar uma imagem de destaque que só surge quando o conteúdo é partilhado nas redes, para tentar aumentar a CTR (taxa de cliques) quando o teu link é partilhado – seja por ti, seja pelos teus fãs.
Se estas meta tags não estiverem presentes no código da tua página, o crawler do Facebook tentará encontrar um título e uma descrição para apresentar, bem como uma imagem de destaque.
Às vezes até faz um bom trabalho, mas nem sempre. Como não terás controlo sobre o aspeto, sem as tags Open Graph devidamente personalizadas a partilha poderá ser menos convidativa ao clique e poderás estar a perder visitas ao teu site.
É importante referir que estas tags não serão interpretadas por uma das principais plataformas: o Twitter. O código para essa rede é diferente, apesar dos campos serem similares. A boa notícia é que as ferramentas que vou partilhar neste artigo também te permitem definir os campos para essa rede social!
As tags Open Graph podem ser definidas para todo o tipo de conteúdos:
- Vídeos;
- Artigos;
- Websites;
- Apps Android e iOS;
- Produtos de e-commerce;
Consoante a tua escolha, existirão diferentes campos a ter em conta. No caso de um Artigo para um blog, por exemplo, podes definir o Nome do Autor, ou o Tópico do Tema, enquanto que num Vídeo poderás indicar a Duração, os Actores ou o Realizador do mesmo.
Como exemplo, vamos utilizar este meu recente artigo do blog.
Sem qualquer personalização de tags Open Graph, o crawler do Facebook conseguiu encontrar com sucesso o título e imagem de destaque do meu artigo. A descrição seria o primeiro parágrafo do meu texto.
Assim sendo, se partilhasse o artigo no Facebook, teria o seguinte aspeto:
O resultado final não foi nada mau, mas não será o caso para todos os sites/conteúdos.
Com um pouco de personalização das tags Open Graph, eis o resultado final.
Repara na imagem de destaque ser diferente (e agora com as dimensões recomendadas, 1200x630px), e o título ter sido alterado (somente para as redes).
A descrição passou também a ser a seguinte:
Como criei novos atalhos de teclado e gestos no trackpad para aumentar a minha produtivade em macOS, graças à aplicação BetterTouchTool.
O que foi necessário para este resultado? A edição de algumas meta tags, que podes ver aqui (repara nos valores em property e content de cada linha):
Sempre que editares algum campo (mesmo que seja apenas uma letra), é boa prática visitares o Facebook Sharing Debugger para refrescar a forma como o Facebook interpreta o link em questão.
Primeiro, insere o link do teu conteúdo:
Neste ecrã poderás constatar, visualmente, como o teu conteúdo aparecerá quando partilhado, bem como outras informações, como o número de likes, shares e comentários.
O Facebook vai-te mostrar várias informações sobre como está a exibir esse link. Se fizeste alterações recentemente, é provável que alguma informação esteja desatualizada.
Para resolver isto, deves clicar no botão Scrape Again, para garantir que o Facebook servirá a versão mais recente do teu link a partir daqui.
De seguida, vamos aprender a inserir estas tags em qualquer website – e não, não é preciso perceberes imenso de código! ☺️
Como inserir as tags Open Graph num site WordPress
Se o teu site for WordPress, poderás recorrer ao Yoast SEO, um dos plugins mais populares para WordPress.
Uma vez instalado, se fores ao final da página de cada artigo no backoffice, verás alguns campos que podes personalizar, que dizem respeito a vários aspetos relacionados com SEO.
Na tab “Social”, verás que podes inserir uma imagem de destaque específica para as redes sociais, bem como definir o título e descrição. Sâo estas as tags Open Graph que deves preencher para cada conteúdo.
Também podes definir alguns parâmetros gerais do teu site se fores à área SEO > Social no menu lateral do WordPress.
Se precisares de maior controlo, experimenta o plugin Complete Open Graph para WordPress, que apesar de não ser atualizado há algum tempo, ainda me parece bastante completo.
Como inserir as tags Open Graph em qualquer outro site
Se o teu site for simplesmente baseado em HTML/CSS/JS, o melhor será recorreres a um site como o Mega Tags, que te apresentará um formulário com todos os campos que poderás querer preencher.
À medida que fores preenchendo cada campo, o código final será atualizado à direita, bastando depois copiares e colares no teu site, algures antes do fim do </head> do teu projeto.
Como vês, a inserção de tags Open Graph é bastante simples, independentemente do tipo de site que tiveres.
É um passo adicional que pode ser trabalhoso se produzires conteúdos com frequência, mas que garante que o teu link é sempre apresentado nas redes sociais conforme pretendes, podendo levar ao aumento de tráfego ao teu site!
