Hugo - Adding Open Graph tags to describe your content

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="..."/>

If you don’t have these tags…

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.

  • Your theme might support extending the header section - if so, you can add the appropriate custom file to your site.
  • If your theme doesn’t support extending via custom resources, you’ll need to modify it directly.

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:

Controlling the meta tags’ content

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
  • Tip: Keep titles under 90 characters.


Again nice and simple, this is just the description parameter of your page.

description: A short description of your page.
  • Tip: Keep descriptions under about 300 characters.


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:

  • If there is an image in the page bundle with “feature”, “cover”, or “thumbnail” in the filename, Hugo will use that;
  • Otherwise, it will use the first image referenced in the page.

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.

  • Tip: The image aspect ratio should be 1.91 : 1, with the usual size being 1200x627 pixels.
  • Tip: Don’t exceed 5Mb in size.
Hacker News

You may be interested in... 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 I may earn a small commission for my endorsement, recommendation, testimonial, and/or link to any products or services from this website.

Comments? Questions?