Frontend

Open Graph Protocol na prática

O Open Graph Protocol é uma especificação de meta tags que pode ser adicionada ao código HTML de um website para fornecer informações específicas sobre a página aos mecanismos de busca e redes sociais. O que é Open Graph Protocol? Com tanta redes sociais, tantos formatos de compartilhamento de conteúdo e com tantas pessoas consumindo […]

Background Image

O Open Graph Protocol é uma especificação de meta tags que pode ser adicionada ao código HTML de um website para fornecer informações específicas sobre a página aos mecanismos de busca e redes sociais.

O que é Open Graph Protocol?

Com tanta redes sociais, tantos formatos de compartilhamento de conteúdo e com tantas pessoas consumindo shares e likes da vida, alguém decidiu tentar por ordem na bagunça e criar um formato mínimo para compartilhamento de conteúdo, sendo criado assim o open graph protocol.

Facebook criou o protocolo em 2010 com o objetivo de tornar mais fácil para as pessoas compartilhar conteúdo na plataforma.

As meta tags Open Graph permitem que os desenvolvedores forneçam informações sobre a página, como título, descrição, imagem e tipo de conteúdo, para que as redes sociais possam exibir uma prévia mais atraente e informativa ao compartilhado.

Mecanismos de busca também usam essas meta tags para entender melhor o conteúdo da página.

Open Graph na prática

Tudo isto ocorre através de algumas meta tags inseridas no header da sua página, que especificam o tipo do seu conteúdo, além de uma descrição e mais algumas propriedades que irão variar de acordo com o que você pretende compartilhar.

Um exemplo disto é o que fiz em um projeto pessoal.

Primeiro eu criei as seguintes meta tags descrevendo o conteúdo:

<meta property="og:title" content="Geopromo"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.geopromo.com.br"/>
<meta property="og:image" content="http://www.geopromo.com.br/images/icons/opengraph.jpg?1312037161"/>
<meta property="og:site_name" content="Geopromo"/>
<meta property="og:description"
content="Encontre e organize as melhores ofertas da internet baseado na sua localizacao"/>

Basicamente o que defini foram:

  • Title
  • Type
  • Url
  • Image
  • Nome do site de origem
  • Description

Com isso, quando alguém da um like na página, ela aparece no Facebook personalizada a partir das tags usadas. Por exemplo, olha como fica o share deste post no Facebook:

Visualização do share desta página no Facebook usando o Open Graph Protocol
Visualização do share desta página no Facebook.

Problema encontrado

Um problema que enfrentei quando estava montando o OpenGraph deste site foi um cache absurdo que o Facebook possui.

Só pude ver algumas alterações quando esperei um tempo e acessei com um browser diferente. Uma ferramenta interessante para validar se seu OpenGraph esta correto é o Facebook Debugger . Assim você não precisa fica dando like na sua página saber como o Facebook vai interpretá-la.

Adoção

A adoção do Open Graph Protocol tem sido ampla entre desenvolvedores de sites, visto que ele permite que o conteúdo seja compartilhado de forma mais atraente nas redes sociais e ajuda a melhorar o SEO.

Isso porque, ele ajuda a identificar o conteúdo de sua página e mostrar de forma mais precisa e rica nas redes sociais, além de facilitar na indexação do seu site pelos buscadores.

Principais tags do Open Graph Protocol

As principais meta tags do Open Graph Protocol incluem:

  1. og:title: Especifica o título da página.
  2. og:type: Especifica o tipo de conteúdo da página. Pode ser algo como “website”, “article”, “book”, entre outros.
  3. og:image: Especifica a imagem exibida quando o conteúdo for compartilhado nas redes sociais.
  4. og:url: Especifica a URL da página.
  5. og:description: Especifica a descrição da página exibida so compartilhar o conteúdo nas redes sociais.
  6. og:site_name: Especifica o nome do site onde a página está localizada.
  7. og:locale: Usado para informar o idioma usado na página e outros parâmetros relacionados com a língua.

Essas são algumas das principais meta tags do Open Graph Protocol, mas existem outras como og:audio, og:video, og:article:published_time, entre outras.

É importante lembrar que essas metatags devem ser adicionadas no head do HTML da sua página para que sejam reconhecidas pelos buscadores e redes sociais.