Gráfico aberto

Open Graph é uma tecnologia introduzida pela primeira vez pelo Facebook em 2010 que permite a integração entre o Facebook e seus dados de usuário e um site. Ao integrar meta tags Open Graph ao conteúdo de sua página, você pode identificar quais elementos de sua página deseja mostrar quando alguém a compartilha.

Por exemplo, você pode usar a tag og: image para especificar qual imagem deseja que o Facebook use quando sua página for compartilhada. Ao especificar as informações do Open Graph, o Facebook não precisa adivinhar quais informações usar quando sua página for compartilhada.

Exemplo de meta tags Open Graph

Abaixo está um exemplo de como as metatags do Open Graph aparecem nesta página para dar a você uma melhor compreensão de como elas podem ser usadas. Se você estiver familiarizado com as metatags HTML, notará imediatamente que a única diferença real entre as metatags e as tags Open Graph são os atributos de propriedade disponíveis.

<meta property="og:title" content="What is Open Graph?"/>
<meta property="og:description" content="Computer dictionary definition of what Open Graph means, including related links, information, and terms."/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="https://www.computerhope.com/comp/logos/facebook.gif"/>

Como adicionar meta tags Open Graph

Como outras metatags, as tags Open Graph devem estar no cabeçalho de uma página HTML. Se você mesmo alterar o HTML, essas tags podem ser adicionadas usando qualquer editor de HTML. Se você estiver usando um CMS como o WordPress, pode alterar o modelo ou usar um plugin como o Yoast para gerenciar essas tags.

Visão geral das metatags Open Graph

Abaixo está uma lista das principais propriedades da metatag do Open Graph que podem ser usadas com uma breve descrição. Tentamos listar cada um deles por nível de importância. Além disso, deve-se observar que nem todas essas tags são obrigatórias, mas ajudam a identificar partes de sua página de maneira adequada.

og: título

O título da página.

og: imagem

A imagem que você deseja usar quando a página for compartilhada. Usar a propriedade og: image é útil se sua página tiver várias imagens e você quiser que uma imagem específica seja usada.

og: descrição

A descrição da página.

og: tipo

O tipo de objeto ou página que você está descrevendo. Alguns dos tipos que podem ser usados ​​incluem article, music.album, video.movie e website.

og: url

O URL canônico do objeto ou página.

og: locale

A localização das informações. Por padrão, o valor local é en_US e não é necessário, a menos que não seja em inglês ou esteja fora dos Estados Unidos.

• Consulte a página do protocolo Open Graph para obter uma lista completa dos metadados disponíveis.

Como testar a integração Open Graph do seu site

O Facebook oferece um depurador Open Graph que permite que qualquer pessoa teste sua página e veja como ela fica quando compartilhada no Facebook. O uso dessa ferramenta ajuda a verificar se o Open Graph foi detectado e se não há outros erros que você pode não estar ciente na página.

• Facebook Debugger