Editorial

Open Graph Protocol: O que é?

Toda vez que um link é compartilhado nas redes sociais, informações como o título, resumo e uma imagem são exibidos. Mas você sabe quem é o responsável por coletar estas informações? Conheça o Open Graph Protocol.

O que é o Open Graph Protocol?

Desenvolvido pelo Facebook desde 2010, o Open Graph é um protocolo de código aberto que visa deixar o conteúdo nas redes sociais mais ricos. Através da adição de tags no código do site, é possível indicar uma série de dados sobre o conteúdo para serem exibidos nas redes sociais. 

Apesar de ser desenvolvido pelo Facebook, ele também é utilizado por outros serviços, como Pinterest, Discord, LinkedIn e até o Twitter. No caso do Twitter, ele possui sua própria ferramenta, mas caso não seja encontrado nenhuma tag no site, ele conta com suporte para o Open Graph como backup.

Open Graph no Facebook
O Open Graph deixa os links mais apresentáveis e com mais informações. Inclusive, dê uma olhada neste artigo sobre o GS Connect.

O Open Graph permite muito mais do que simplesmente um título, descrição e imagem. Através dele, é possível apontar as dimensões exatas da imagem, se existem outros tipos de conteúdo como vídeos, áudios e até detalhes sobre um álbum.

No caso de artigos, é possível informar quando ele foi publicado, quem é o autor do post, a categoria e muito mais. É possível encontrar todas as opções no site oficial do Open Graph.

Como utilizar o Open Graph

A utilização do Open Graph depende da plataforma que você estiver utilizando. Serviços como o Ghost ou Medium já possuem suporte por padrão, enquanto outras como o WordPress precisam de uma configuração por parte do usuário.

No WordPress, os principais plugins de SEO como Yoast SEO e Rank Math SEO já contam com suporte para o Open Graph. Nas configurações inclusive é possível ajustar detalhes como quais informações serão utilizadas nos títulos, descrições e até uma imagem de backup para ser utilizada no caso de não ser encontrada nenhuma no post.

Já em outras plataformas, ou no caso de fazer um site do zero, será necessário adicionar o código manualmente.

Quais tags serão utilizadas e a sintaxe depende de cada plataforma utilizada e do conteúdo do seu site. 

Exemplos de tags

As principais tags são og:title, og:description, og:url e og:image, com o resto sendo opcional, dependendo da sua necessidade.

og:title

Uma das principais tags, indica qual é o título da página que vai ser exibido na rede social. Em blogs, o comportamento mais comum é indicar o título da postagem, seguido do nome do blog.

og:description

Nesta tag é informada uma descrição curta da página, que será exibida geralmente logo abaixo do título da página.

og:image

Uma tag muito importante, indica qual é a imagem que será exibida no link colado na rede social. Ocupa a maior parte do link, então deve ser pensada com muita cautela.

Como verificar se está funcionando

Para verificar se as tags estão funcionando corretamente no seu site, o Facebook possui uma ferramenta chamada Depurador de Compartilhamento. Através dele é possível verificar quais são os dados capturados pela rede social, além de verificar se existe algum problema, e ainda conta com uma prévia do link.

Já conhecia o Open Graph? Utiliza no seu site ou blog? Deixe nos comentários!

Até a próxima!

Diolinux Ofertas - Aproveite os melhores descontos em diversos produtos!