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:
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:
- og:title: Especifica o título da página.
- og:type: Especifica o tipo de conteúdo da página. Pode ser algo como “website”, “article”, “book”, entre outros.
- og:image: Especifica a imagem exibida quando o conteúdo for compartilhado nas redes sociais.
- og:url: Especifica a URL da página.
- og:description: Especifica a descrição da página exibida so compartilhar o conteúdo nas redes sociais.
- og:site_name: Especifica o nome do site onde a página está localizada.
- 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.