OpenGraph no Hugo

Um recurso bem desejado quando se tem um site na web, é que ao compartilhar links em outros sites ou redes sociais, seja exibida uma miniatura do conteúdo com título, imagem e possivelmente um resumo do texto. Com esse objetivo, criou-se o protocolo OpenGraph. Este padrão foi popularizado principalmente pelo Facebook.

Se você tem um site gerado com Hugo, basta inserir a linha abaixo dentro do <head> do seu tema para ativar o recurso:

{{ template "_internal/opengraph.html" . }}

O que este template faz é inserir metatags indicando as informações necessários para o OpenGraph. Por convenção, o template tentará pegar os valores de cada conteúdo (title, date, images, description…) e quando não encontrar algum destes, tentará usar um valor padrão definido para o site todo no seu arquivo de configuração (normalmente um config.yaml). Detalharei mais nos parágrafos seguintes.

Título

Pode-se dizer que é a informação mais importante pois nem sempre o link é um mnemônico. Será usado apenas o campo title da seção de metadados de cada conteúdo para extraí-lo.

Descrição

Para o campo de descrição será usado o parâmetro description dos metadados de cada conteúdo. Quando este valor não estiver preenchido será usado o valor de .Summary que normalmente trás o primeiro parágrafo do conteúdo e caso ainda este estiver vazio, será usado o description do site.

Imagens

Você pode especificar uma ou várias imagens para representar graficamente cada conteúdo com a propriedade images nos metadados. A propriedade images deve ser uma lista de URLs de imagens e o hugo só usará as 6 primeiras. Caso não sejam definidas imagens, o hugo tentará encontrar arquivos cujos nomes comecem com a palavra “feature” ou terminem com “cover” ou “thumbnail” e estejam na mesma pasta do conteúdo em questão. Novamente, caso nenhuma das condições seja atendida, será usado o valor padrão definido na configuração do site.

Artigos relacionados

É possível fazer com que o Hugo inclua uma lista de outros artigos relacionados (que façam parte de uma série, por exemplo). Para tanto, é necessário incluir uma taxonomia series na lista de taxonomias do site e informar um valor comum para ela nos artigos que façam parte da mesma série.

Outros

Além dos atributos citados anteriormente, ainda serão gerados automaticamente, sempre que possível, as seguintes informações:

Conclusão

Para testar como ficará o resultado, sugiro este site: opengraph.xyz. Para mais informações sobre o OpenGraph, consulte a documentação do OpenGraph. Caso se interessem em ver o código que a equipe do hugo fez para tentar customizar ou sugerir melhorias, segue o link para o código-fonte do template.