Display Post Preview on Facebook by Hugo

Created on: 24 Jul 21 23:14 +0700 by Son Nguyen Hoang in English

A Short tutorial to display preview for a Hugo page on Facebook using Open Graph

Hugo

I launched my own personal website since this month, in August or late June, 2021. Although the platform support a lot of default template with easy installing and samples, I prefer creating my own and the experience appears to me quite confusing at the beginning but more relieved as the project went on.

However, one thing troubles me lot is that when I shared my post to Facebook, which is the only social platform that I use, is that the post when I shared display incorrectly. It shows my avatar, followed by the title but incorrect description of the post. Hence, I spent 2 days reseaching about this problem. So, how to fix? It turns out that the Facebook implements a protocol to make shared links to be more organized and interesting when they be posted to their media. You can find the link Here to read more about this.

In short, all you need to do is add more metadata to the heading of the page. The list of tag you need to add are:

og:audio - A URL to an audio file to accompany this object.
og:description - A one to two sentence description of your object.
og:determiner - The word that appears before this object's title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).
og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
og:locale:alternate - An array of other locales this page is available in.
og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".
og:video - A URL to a video file that complements this object.

Here is one example that i taken from the link above:

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

So how can i implement it to my website, which is powered by HUGO? Let’s summarize what I want first:

  • I implemented page bundle to the post, so each post’s thumpnail should stay in the post’s folder, not in static file.
  • I want to choose which image to be the post’s thumbnail.
  • Also, I want to set the post default’s thumbnail if none is detected.

HUGO Solution

Yes, the framework provides some shortcode, but they cannot fullfil my scenarios. However, I attached it here in case someone need it.

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

Add the above piece of code in tag head like this

<head>
...
{{ template "_internal/opengraph.html" . }}
...
</head>

My Solution

I discarded the built-in shortcode and create my own instead

<head>
...
<meta property="og:title" content="{{ $.Page.Params.Title }} - Sonnguyen9800" />
<meta property="og:description" content="{{ $.Page.Summary }}" />

{{ if $.Params.thumbnail }}
    <meta property="og:image" content="{{.Site.BaseURL}}{{ $.Page.RelPermalink }}{{ $.Page.Params.thumbnail }}">
{{ else }}
    <meta property="og:image" content="{{.Site.BaseURL}}/thumbnail.jpg">
{{ end }}
...
</head>

This piece of code provide a condition case to check and find a thumbnail param, if none detected then it use a default thumbnail in static folder (thumbnail.jpg)

For a post named Test, The dictionary tree for the page is:

content/test/
content/test/index.md
content/test/hanoi.jpeg

In the index.md , I added param:

---
(other param)
title: "Test Folder"
thumbnail: "hanoi.jpeg"

(other param)
---

Content ...

Finally, don’t forget to put the default thumbnail inside static folder

Demo

Here is the post preview when I shared to Facebook:

Extra

Back To Top