Show related content in Hugo

Hugo can find related pages without a plugin or a hand-maintained list. For a blog, a short list based on shared tags is usually enough.

Create layouts/partials/related.html:

{{ $related := .Site.RegularPages.Related . | first 3 }}
{{ with $related }}
<h3>See also</h3>
<ul>
	{{ range . }}
	<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
	{{ end }}
</ul>
{{ end }}

Include the partial from the template where the list should appear. Adding it to _default/single.html, for example, shows related content on every blog post that uses that template.

The with block matters: when Hugo finds no matches, it avoids rendering an empty heading and list.

How Hugo decides what is related

Hugo’s default related-content configuration looks like this in config.yaml:

related:
  includeNewer: false
  indices:
  - name: keywords
    weight: 100
  - name: date
    weight: 10
  threshold: 80
  toLower: false

In practice, tags or keywords do most of the useful work. If the results feel unrelated, tune the indices and threshold rather than adding more items to the list. Three good links are more useful than a long list of weak matches.

← Back to all articles