O protocolo Open Graph

Mais informações >

O protocolo Open Graph

Previous pageReturn to chapter overviewNext page
Exibir/Ocultar o texto oculto

O protocolo Open Graph foi apresentado pelo Facebook em 2010 com o propósito de adicionar dados estruturados a páginas na web para oferecer um maior controle sobre como o conteúdo aparece ao ser compartilhado.

Quando você compartilha uma postagem no Facebook, você pode alterar a imagem, título e descrição manualmente. Esta personalização, no entanto, só funciona para compartilhamentos únicos, porque o link não é alterado. Assim, se outros usuários por sua vez alterarem a mesma postagem (copiando e colando a URL ou usando os botões curtir/compartilhar), o título, descrição e imagens de pré-visualização que são carregados automaticamente pelo Facebook continuarão a ser exibidos. O protocolo Open Graph torna possível personalizar uma URL para que você possa controlar como será apresentada ao ser compartilhada.

Qualquer página web pode, portanto, fazer parte do Gráfico Social com o protocolo Open Graph ou, em outras palavras, tornar-se um objeto que possa interagir com as redes sociais.

O protocolo Open Graph é reconhecido por outras plataformas sociais, como Twitter, Google+ e Linkedin.

Para maiores informações sober o protocolo Open Graph, visite o website oficial ogp.me/.

Clique para expandir/recolherImplementando o Open Graph

O Open Graph é baseado em uma série de tags que podem ser personalizadas para definir como e quais partes de uma página web serão exibidas quando são compartilhadas no Facebook. Esta informação é adicionada às tags <head> da página e assim o usuário não pode vêr até que decida compartilhar aquela página .

As tags básicas do Open Graph são:

og:title – o título que você deseja dar ao conteúdo.
og:description – a descrição do conteúdo.
og:type – o tipo de conteúdo, por exemplo, um artigo ou um vídeo.
og:image – a URL da imagem a ser usada no compartilhamento.
og:url – a URL canônica (isto é, a URL absoluta, sem parâmetros, variáveis ou contadores) a ser usada como ID associada à página web para a qual todos seus compartilhamentos serão direcionados.

Também há algumas tags opcionais que você pode usar para definir as propriedades do conteúdo, por exemplo:

og:audio – a URL de um arquivo de som associado ao objeto (página).
og:locale – o idioma do conteúdo, por exemplo it_IT.
og:site_name – o nome do website, sem www ou TLD (top level domain, domínio de topo em inglês).
og:video – uma URL de um arquivo de vídeo associado à página.

Há muitas outras tags que você pode usar, dependendo do tipo de conteúdo que deseja compartilhar.

Você pode usar o Facebook Debugger para conferir a implementação correta das tags do Open Graph.

Você também pode usar esta ferramente para atualizar as informações nas tags que tiverem sido modificadas.

Clique para expandir/recolherNo WebSite X5

WebSite X5 usa o protocolo Open Graph para criar o código da página web. Por favor, observe que:

O valor dado à tag og:image é a URL da imagem do website, especificada na opção Imagem do WebSite em Configurações do website | Geral.
A imagem especificada na opçãoImagem do WebSite será usada para compartilhar todas as páginas do website, com excessão das páginas do blog se as postagens que forem compartilhadas contiverem uma apresentação de slides: neste caso, a imagem do website será substituída pela primeira imagem na apresentação de slides.
Os valores das outras tags são inseridos automaticamente pelo programa.