O Facebook faz o rastreamento das configurações de compartilhamento do conteúdo de um site através de um tipo especial de meta tags: as Open Graph (OG).
Parece pouco, mas a associação equivocada entre um conteúdo e uma imagem pode causar constrangimentos e até contar negativamente para uma campanha ou a marca de uma empresa.
Para trabalhar com as OG meta tags de forma eficiente existem alguns cuidados e boas práticas a serem seguidos. Assim, o conteúdo compartilhado é melhor apresentado e problemas e equívocos são evitados.
1. Use as OG meta tags apropriadas
Elas devem ser adicionadas dentro do <head> na página HTML. A maioria delas deve ser configurada dinamicamente, de acordo com o conteúdo em questão.
As meta tags básicas que devem ser implementadas são:
- og:title – o título do artigo;
- og:site_name – o nome do site (não a URL);
- og:url – a URL exclusiva do artigo; ela deve ser única, ‘limpa’ (não incluir variáveis de sessão ou parâmetros) e corresponder a URL canônica usado para o SEO;
- og:description – uma descrição resumida (no máximo 4 frases) do que se trata o conteúdo em questão; é opcional, mas pode melhorar a velocidade em que os links são lidos e compartilhados;
- og:image – uma imagem relacionada ao conteúdo;
- og:type – o tipo de conteúdo; se não for especificado, por padrão o tipo será website; isso pode ocasionar algum erro se você tentar compartilhar um artigo, por exemplo; há tipos pré–definidos e novos podem ser criados através do Open Graph.
Pulo do gato: Use caminho absoluto na declaração de url e imagem; caso contrário, não vai funcionar.
2. Declare o ID do app do Facebook
Declarado na meta tag fb:app_id, o identificador único permite ao Facebook saber a identidade do seu site. Esse parâmetro é crucial para a comunicação entre o Facebook e um sistema externo.
Lembrando que somente a partir de uma conta de desenvolvedor válida é que se pode criar um aplicativo no Facebook.
Pulo do gato: Desde uma atualização de plataforma, em abril do ano passado, um novo aplicatvo no Facebook é criado em modo sandbox. Ou seja, ele é acessível somente ao desenvolvedor e usuários com permissão. É necessário desativar o modo sandbox para que o aplicativo se torne visível e utilizável para os compartilhamentos públicos.
3) Inclua os namespaces necessários
Como é possível notar, as meta tags do Facebook usam namespaces próprios: og:, fb:, article:. Para que as meta tags sejam corretamente reconhecidas é preciso defini-las no atributo prefix do <head>, da seguinte forma:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
Anteriormente, o namespace era declarado no <html> com o parâmetro xmlns. Como a W3C não valida o código com essa declaração, o protocolo Open Graph sugere a declaração no <head> com o parâmetro prefix.
4. Defina imagens nos tamanhos certos
O facebook recomenda o uso de imagens com tamanho mínimo de 600×315 pixels para exibir os conteúdos compartilhados com imagens grandes. Caso a imagem seja menor que isso, ela será exibida em tamanho reduzido.
Para dispositivos de alta resolução, a recomendação é usar imagens de no mínimo 1200×630 pixels.
Pulo do gato: Para evitar cortes nas imagens, procure mantê-las na proporção de 1.91:1.
5. Use o Debug Tool
O Facebook oferece uma ferramenta própria de depuração de erros. Ela aponta os erros de configuração das meta tags e dá dicas de como corrigi-los.
Pulo do gato: o API do Facebook guarda cache das definições das OG meta tags; usando o debug tool você também reinicia essas configurações.
Para saber mais:
- The Open Graph Protocol
- The Grap API
- Facebook Sharing Checklist
- Facebook Development Mode and App Roles
- XML Namespaces
- OG Object Types
E se você tiver alguma experiência a acrescentar sobre as OG meta tags, compartilhe com a gente nos comentários.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?