O Open Graph Protocol é um protocolo criado pelo Facebook em 2010 que define um padrão de metadados que devemos seguir e preencher para integrar um site com as mídias sociais, por exemplo, isso é utilizado para que ao compartilhar o link de um site, seja exibido o título, imagem e descrição do conteúdo.
Inicialmente o Open Graph Protocol foi pensado e desenvolvido para uso no Facebook, mas atualmente, por exemplo, outras plataformas como LinkedIn e Discord realizam o uso das OG Tags.
Como adicionar OG Tags em um site?
Para adicionar as OG Tags será necessário realizar a inclusão de novas meta tags no cabeçalho da página web, onde o atributo property é o nome da OG Tag e o atributo content define o valor, como o exemplo abaixo de um artigo no Código ao Ponto:
<head>
<meta
property="og:title"
content="Como recuperar arquivos perdidos no Git pelo VSCode - Código ao Ponto"
/>
<meta
property="og:description"
content="Aprenda a recuperar alterações de código perdidas utilizando uma funcionalidade do Vscode chamada Local History que salva diferentes versões do seu código."
/>
<meta
property="og:image"
content="/images/blog/como-recuperar-arquivos-perdido-no-git-pelo-vscode.png"
/>
<meta property="og:type" content="article" />
<meta
property="og:url"
content="https://codigoaoponto.com/blog/como-recuperar-arquivos-perdidos-no-git-pelo-vscode"
/>
</head>
Os diferentes tipos de OG Tags
Existe uma grande variedade de OG Tags, algumas que são fundamentais de se utilizar e outras que são complementares. Abaixo segue as essenciais:
-
og:title- define o título da página -
og:type- define o tipo de conteúdo da página. Exemplos: artigo, site, vídeo, etc. -
og:image- define a imagem exibida, talvez a tag mais importante, que captura a atenção do usuário. -
og:url- define a URL canônica da página -
og:description- define o texto de descrição que normalmente é exibido abaixo da imagem.
E agora algumas das OG Tags complementares, que são úteis em casos específicos:
-
og:audio- define a URL de um arquivo de aúdio presente na página -
og:video- define a URL de um arquivo de vídeo presente na página.
Como testar as OG Tags de um site?
Vou te recomendar o site Open Graph, nele basta você colocar a URL do site que você quer validar o correto funcionamento das OG tags e fazer essa verificação sem precisar compartilhar o link do seu site em cada uma das mídias sociais que você quer testar. O site traz previews das OG Tags para Facebook, Twitter, LinkedIn e Discord.
Conclusão
As OG Tags realizam um papel essencial na integração do seu site com mídias sociais como Twitter, Tiktok e LinkedIn, melhorando a apresentação do conteúdo do site e aumentando a chance de usuários clicarem no link compartilhado e acessarem o seu site.
Top comments (2)
Uma ótima forma de fazer com que a engine do google recomende o seu site é escrevendo html semântico. O bot de buscas do google acha mais fácil o seu site assim!
SEO é algo bem complexo e demanda de muitas coisas, a sua dica se encaixa perfeitamente, ter HTML semântico também é importante pro SEO