You may have noticed that many articles that are linked from social media sites are attractively displayed with a banner image and styled title and description text. You might also have noticed that links to your articles don’t display in the same way. If you’re using Hugo, here’s how to fix that.
Social media sites will attempt to pull information about a web page in a variety of ways, but if you want control over that process, once of the best ways to go about it is to tag your page with Open Graph meta tags.
Hugo comes with built-in support for Open Graph, however your chosen theme may or may not support them.
There are various tools to show the content of the tags for a given web page, for example the following browser extensions:
Alternatively, you can simply view source for a webpage (Ctrl+U) and look for the following <meta> tags:
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:type" content="..." />
<meta property="og:url" content="..." />
<meta property="og:image" content="..."/>
You’ll need to either modify or extend your theme to add them. Search through your theme files for <meta> tags. They will likely be in the “header” part of your theme.
Either way, you’ll need to add the following:
{{ template "_internal/opengraph.html" . }}
You should now start to see the <meta> tags appear in your site’s HTML output.
(If you want complete control over the tags, the source for the above internal template may be found here: https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/opengraph.html)
With the tags in place, you’ll want to start controlling exactly what appears in each one.
This is simply the title parameter of your page.
---
title: Put your page title here
---
Again nice and simple, this is just the description parameter of your page.
---
description: A short description of your page.
---
Hugo will select this automatically, as article for pages or website for your front page. So nothing to do here.
Again, Hugo will supply the canonical URL for the page. Again, nothing to do.
The logic for images is a bit more in-depth, and you can look at the source if you want precise control, but for simplicity’s sake, I can summarize the important bits of the logic as follows:
Personally, I think the choice of image for Open Graph is sufficiently important that you should always make a deliberate choice: include an image called featured.png in your page bundle, and be done with it.
Hackification.io is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com. I may earn a small commission for my endorsement, recommendation, testimonial, and/or link to any products or services from this website.