Artigo original: What is Open Graph and how can I use it for my website?

Pode levar muito tempo para criar o conteúdo e manter um site da web. Como podemos garantir que o nosso conteúdo se destaque ao ser compartilhado em feeds sociais por toda a internet?

O que é Open Graph?

O Open Graph é um protocolo de internet que foi originalmente criado pelo Facebook para padronizar o uso de metadados dentro de uma página da web para representar o conteúdo de uma página.

Dentro dele, você pode fornecer detalhes tão simples quanto o título de uma página ou tão específicos quanto a duração de um vídeo. Todas essas peças se encaixam para formar uma representação de cada página individual da internet.

Por que eu preciso dele?

O conteúdo na internet é tipicamente criado com pelo menos um objetivo em mente – compartilhá-lo com outros. Isso pode não necessariamente importar se você estiver enviando o conteúdo apenas para um amigo, mas, se você quiser compartilhá-lo ou se quiser que ele seja compartilhado em qualquer rede social ou aplicação que utilize visualizações ricas, você vai querer que essa visualização seja a mais eficaz possível.

Isso ajudará a encorajar as pessoas a verificar o seu conteúdo e, inevitavelmente, a clicar nele.

O que acontece se eu não o tiver?

A maioria das redes sociais, por padrão, tentará se esforçar ao máximo para criar uma prévia do seu conteúdo. Isso, na maioria das vezes, não resulta bem.

Veja, por exemplo, meu site na web, colbyfayock.com.

simple-twitter-card

Ele pega corretamente o título da minha página e a descrição, mas não é o tweet mais atraente em um feed.

Contrastando com a visualização de um único post, vemos uma história diferente.

large-image-twitter-card
Exemplo de um cartão do Twitter com uma imagem grande

Então, o que acontece se você não tiver as tags open graph? Nada de ruim acontecerá, mas você não estará aproveitando algumas das funcionalidades que ajudam a destacar o seu conteúdo ao lado da carga de outros conteúdos que são publicados na internet.

Começando pelo básico de open graph

As quatro tags open graph que são necessárias para cada página são og:title, og:type, og:image e og:url. Essas tags devem ser únicas para cada página que você serve, ou seja, as tags de sua página inicial devem ser todas diferentes da página do seu blog de publicação de artigos.

open-graph-twitter-card
Anatomia de um cartão do Twitter usando tags Open Graph

Embora deva ser bastante direto, aqui está uma descrição do significado de cada uma das tags:

  • og:title: o título da sua página. Esse é tipicamente o mesmo que está na tag <title> de sua página web, a menos que você queira apresentá-lo de forma diferente.
  • og:type: o "tipo" de site da web que você tem. Explicarei mais na próxima seção, embora um "tipo" genérico seja "website".
  • og:image: este deve ser um link para uma imagem que você gostaria de ver representando o seu conteúdo. Deve ser uma imagem de alta resolução que as redes sociais utilizarão em seus feeds.
  • og:url: este deve ser o URL da página atual.

Ao colocar uma tag em seu site, você deve colocá-la na <head>, junto de quaisquer outros metadados. A tag usada será uma tag <meta> e deve ser semelhante a este padrão:

<meta property="[NOME]" content="[VALOR]" />

Portanto, se eu fosse criar um conjunto de quatro tags open graph para o meu site, colbyfayock.com, poderia ser assim:

<meta property="og:title" content="Colby Fayock - A UX Designer &amp; Front-end Developer Blog" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" />
<meta property="og:url" content="https://www.colbyfayock.com" />

Site da web com open graph

O protocolo open graph tem algumas variações quanto ao "tipo" de site da web que ele suporta. Isto inclui tipos como 'website', 'article' ou 'video'.

Ao configurar as suas tags open graph, você vai querer ter uma ideia de qual tipo fará mais sentido para o seu site. Se sua página estiver focada em um único vídeo, provavelmente faz sentido usar o tipo "video". Se for um site geral sem finalidade específica, você provavelmente vai querer usar apenas o tipo "website".

Semelhante às outras, isso é único para cada página. Portanto, se a sua página inicial for "website", você sempre poderá ter outra página do tipo "video".

Portanto, se eu fosse criar um tipo de open graph para o meu site, ele poderia ter a seguinte aparência na minha página inicial:

<!-- colbyfayock.com -->
<meta property="og:type" content="profile" />

Quando se navega para uma publicação em um blog, você teria algo como:

<!-- https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/ -->
<meta property="og:type" content="article" />

Você pode encontrar os tipos mais comuns de sites da web open graph na página da web do open graph: https://ogp.me/#types

Algumas outras tags open graph que valem a pena adicionar

Embora você geralmente esteja de acordo com o básico, aqui estão mais algumas tags que valeriam a pena acrescentar:

  • og:description: uma descrição da sua página. Similar a og:title, essa pode ser a mesma que a tag <meta type="description">, a menos que você queira apresentá-la de forma diferente.
  • og:locale: se você quiser localizar as suas tags, provavelmente faria sentido incluir o locale (localização). O formato é idioma_PAÍS, onde o padrão é en_US (english_UnitedStates – no Brasil, teríamos pt_BR, ou portuguese_Brazil).
  • og:site_name: o nome de todo o site da web em que seu conteúdo está. Se você estiver em uma página de publicações em blog, você pode ter um título usando o título dessa publicação no blog, onde o nome_do_site seria o nome de seu blog.
  • og:video: tem um vídeo que dá suporte ao seu conteúdo? Aqui está uma chance de incluí-lo. Adicione um link ao seu vídeo usando esta tag.

Essas tags serão adicionadas no mesmo padrão de antes:

<meta property="[NOME]" content="[VALOR]" />

Twitter e outras redes de mídia social usando open graph

A maioria das redes sociais adere aos princípios básicos dos padrões open graph, mas algumas delas também incluem a sua própria extensão para ajudar a personalizar o visual e a sensação dentro de seu ecossistema.

Twitter, por exemplo, permite que você especifique twitter:card, que é o tipo de "cartão" que você pode usar quando eles mostram seu site da web. Neste momento, os tipos de cartão deles incluem:

  • summary (resumo)
  • summary_large_image (resumo com imagem grande)
  • app (aplicação)
  • player (reprodutor de mídia)

Isso ajudará você a escolher como seus links são usados na feed deles. Se você escolher summary_large_image, por exemplo, o Twitter mostrará os seus links com grandes imagens em alta resolução, desde que você forneça o link na tag og:image.

Aqui estão algumas referências rápidas para a documentação de como usar tags open graph com alguns dos sites de mídia social (textos em inglês):

Imagens em open graph

Enquanto acrescentar sua imagem como og:image deva ser frequentemente o suficiente, às vezes, pode ser um desafio conseguir que a sua imagem apareça corretamente. Se você parece estar tendo problemas, o padrão open graph inclui algumas tags de imagem como og:image:url x og:image:secure_url, assim como og:image:width e og:image:height.

Tente ter certeza de estar seguindo todas as notas e exemplos na documentação do open graph (em inglês). Além disso, algumas das redes sociais têm requisitos de imagem. O Twitter, por exemplo, requer (texto em inglês) uma proporção de 2:1 com um tamanho mínimo de 300x157 e um tamanho máximo de 4096x4096, inferior a 5MB e no formato JPG, PNG, WEBP ou GIF.

Se você não souber o que fazer, teste as suas tags usando as ferramentas de rede de mídia social para ver se consegue encontrar o problema.

Testando as suas tags open graph

Felizmente, as nossas redes sociais favoritas também fornecem ferramentas para nos ajudar a testar as nossas tags. Uma vez que você tenha certeza de que suas tags estão realmente aparecendo no código-fonte do seu site, você poderá visualizar como ele ficará no feed.

Indo mais fundo em tags open graph

Enquanto a maioria das tags deva cobrir um site básico, há mais algumas tags que podem ajudar você e a sua empresa a serem descobertos nas redes sociais.

Se você estiver interessado em mergulhar em mais, a documentação (em inglês) faz um ótimo trabalho ao fornecer uma lista de todas as tags disponíveis para você usar.

Que tal um exemplo?

Se você está simplesmente procurando um exemplo para começar, aqui está o que você deve fazer ao criar as suas tags para um post de blog:

<meta property="og:site_name" content="Colby Fayock" />
<meta property=“og:title” content=“Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" />
<meta property="og:description" content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…" />
<meta property="og:url" content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" />
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta property="og:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="twitter:site" content="@colbyfayock" />

Procurando outras maneiras de otimizar e analisar o seu conteúdo? (textos do autor ainda em inglês no freeCodeCamp)

Follow me for more Javascript, UX, and other interesting things!

Siga o autor no Twitter
Inscreva-se no canal do autor no YouTube
Assine a newsletter do autor