Um guia de compartilhamento para webmasters

Este documento descreve como otimizar um conteúdo hospedado na web que é compartilhado por pessoas no Facebook, seja via web móvel, desktop ou aplicativo para celular.

Você encontrará informações sobre os tópicos a seguir:

Marcação do Open Graph
Como testar a sua marcação
Testar se o agente de usuário do Facebook é tratado corretamente
Tipos de conteúdo de mídia

Marcação do Open Graph

Quase todo conteúdo é compartilhado com o Facebook como uma URL. Por isso, é importante marcar o site com as tags do Open Graph para ter o controle sobre como o seu conteúdo é exibido no Facebook. Para que o site seja compartilhado corretamente pelo nosso rastreador, o seu servidor também precisa usar as codificações gzip e deflate.

Sem essas tags do Open Graph, o rastreador do Facebook usa técnicas heurísticas internas para tentar dar o melhor palpite em relação ao título, à descrição e à imagem de prévia do seu conteúdo. Especifique essas informações explicitamente com as tags do Open Graph para garantir publicações de alta qualidade no Facebook.

Confira um exemplo de conteúdo formatado com tags do Open Graph para uma melhor exibição no Facebook:

Exemplo de marcação

Por exemplo, veja como marcar um artigo, notícias ou publicações de blog com og:type="article" e diversas outras propriedades:

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

As propriedades incluem metadados descritivos sobre o artigo específico que queremos apresentar quando alguém compartilha esse conteúdo.

Tags básicas

Estas são as metatags mais básicas que você deve usar para todos os tipos de conteúdo:

Tag	Descrição
`og:url`	A URL canônica da sua página. Deve ser a URL não decorada, sem variáveis de sessão, parâmetros de identificação do usuário nem contadores. As curtidas e os compartilhamentos relacionados serão agregados a essa URL. Por exemplo, as URLs de domínio para dispositivos móveis devem direcionar o usuário à versão para desktop como a URL canônica para combinar curtidas e compartilhamentos em diferentes versões da página.
`og:title`	O título do artigo sem nenhuma marca, como o nome do seu site.
`og:description`	Uma breve descrição do conteúdo. Em geral, inclui entre 2 e 4 frases. Esse texto será exibido abaixo do título da publicação no Facebook.
`og:image`	A URL da imagem que é exibida quando alguém compartilha o conteúdo no Facebook. Veja outras informações abaixo e confira o nosso guia de melhores práticas para saber como especificar uma imagem de prévia de alta qualidade.
`fb:app_id`	Para usar insights do Facebook, adicione o ID do aplicativo à sua página. Dessa forma, você pode visualizar análises sobre o tráfego do Facebook para o seu site. Localize o ID do aplicativo no Painel de Aplicativos.

Você também pode adicionar mais duas tags para melhorar a distribuição do seu conteúdo e aumentar o engajamento:

Tag	Descrição
`og:type`	O tipo de mídia do seu conteúdo. Esta tag afeta a exibição do conteúdo no Feed. Se um tipo não for especificado, o valor `website` será definido por padrão. Cada URL deve ser um único objeto. Por isso, não são aceitos diversos valores de `og:type`. Encontre a lista completa de tipos de objeto nesta documentação de referência sobre tipos de objeto.
`og:locale`	A localidade do recurso. O padrão é `en_US`. Também será possível usar `og:locale:alternate` caso você tenha traduções para outros idiomas disponíveis. Saiba mais sobre as localidades compatíveis na nossa documentação sobre localização.

Veja a lista completa de propriedades de objetos padrão na nossa referência sobre propriedades de objetos.

Testar a sua marcação

Para ver como a sua marcação aparece para o rastreador do Facebook, digite a URL no Depurador de Compartilhamento. A ferramenta mostrará em quais metatags o rastreador faz a raspagem, assim como quaisquer erros ou alertas.

O depurador também ativa uma raspagem da sua página. Isso significa que, caso haja erros no seu HTML, você poderá usar o depurador para atualizar o conteúdo. Consulte Como atualizar objetos para saber mais.

Testar se o agente de usuário do Facebook é tratado corretamente

Abra o navegador.
Altere o agente de usuário para corresponder ao do Facebook. Para obter mais informações sobre como alterar o agente de usuário, consulte http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/:
- Develop Menu > User-Agent > Other
- Defina o agente de usuário como: facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
Carregue a URL com problemas.
Defina o agente de usuário como um de navegador para celular. Por exemplo, Safari – iPhone:
Develop Menu > User-Agent > Safari — iOS 10 — iPhone
Carregue a URL com problemas.
Se houver um problema com o agente de usuário, a página será carregada corretamente na Etapa 5, mas não na Etapa 3.

Tipos de conteúdo de mídia

Você poderá adicionar outras marcações se o seu conteúdo incluir áudio, vídeo ou informações sobre localização. Veja todas as propriedades de objetos padrão na nossa referência sobre tipos de objeto.

Vídeo

É possível usar og:video para todos os tipos de conteúdo. Esta seção descreve como usar tags adicionais para otimizar a aparência dos vídeos no Facebook. O Facebook é compatível com vídeos nos formatos mp4 e Flash.

Use uma URL segura para as tags og:video:url e og:video:secure_url e qualifique o seu vídeo para reprodução em linha no Feed. Não há garantia de que o seu vídeo será reproduzido em linha. Isso dependerá de uma variedade de fatores.

Metatag	Descrição
`og:video`	A URL do vídeo. Para reproduzir o vídeo em linha no Feed, use a URL https:// se possível.
`og:video:url`	Equivalente a `og:video`.
`og:video:secure_url`	A URL segura do vídeo. Inclua mesmo se você definir a URL segura em `og:video`.
`og:video:type`	Tipo MIME de vídeo. Use `application/x-shockwave-flash` ou `video/mp4`.
`og:video:width`	Largura do vídeo em pixels. Esta propriedade é obrigatória para vídeos.
`og:video:height`	Altura do vídeo em pixels. Esta propriedade é obrigatória para vídeos.
`og:image`	Especifique uma imagem para gerar uma prévia de alta qualidade no Feed.

Imagens

Use este conjunto de propriedades para conteúdo com mais de uma imagem. Consulte Melhores práticas para ver orientações sobre como usar og:image da melhor forma possível.

Metatag	Descrição
`og:image`	A URL da imagem. Para atualizar uma imagem que já foi publicada, use outra URL para a nova imagem. As imagens são armazenadas em cache com base na URL e não serão atualizadas, a menos que a URL seja alterada.
`og:image:url`	Equivalente a `og:image`.
`og:image:secure_url`	URL https:// da imagem.
`og:image:type`	Tipo MIME da imagem. Use `image/jpeg`, `image/gif` ou `image/png`
`og:image:width`	Largura de imagem em pixels. Especifique a altura e a largura da sua imagem para garantir que ela seja carregada de forma apropriada na primeira vez em que for compartilhada.
`og:image:height`	Altura da imagem em pixels. Especifique a altura e a largura da sua imagem para garantir que ela seja carregada de forma apropriada na primeira vez em que for compartilhada.

Ativos 3D

Consulte Open Graph Sharing document.