Organizing Hugo Content With Tags and Categories

Tags become useful when clicking one reveals a sensible collection of related articles. If every post creates five new terms that never appear again, the taxonomy is technically working and practically empty.

Hugo can generate taxonomy and term pages automatically. The harder decision is choosing a content model readers can actually browse.

A tag in front matter becomes a page

A post can define several tags:

tags:
  - css
  - html
  - accessibility

Hugo can then create pages such as:

/tags/css/
/tags/html/
/tags/accessibility/

Each term page lists matching content. The official Hugo taxonomy documentation covers the configuration and template lookup details.

Under an article, .GetTerms can link each tag to its generated page:

{{ with .GetTerms "tags" }}
  <ul>
    {{ range . }}
      <li>
        <a href="{{ .RelPermalink }}">
          {{ .LinkTitle }}
        </a>
      </li>
    {{ end }}
  </ul>
{{ end }}

Categories only help when they mean something different

Categories are often broader than tags:

categories:
  - web-development

A site might use CSS, Hugo, SEO, and Photography as categories, then reserve tags for narrower subjects. That distinction is a convention, not a Hugo requirement.

There is no prize for using both. On a focused blog, one considered tag system can be clearer than two overlapping ways to describe the same articles.

Custom taxonomies should answer a browsing question

A photography site might let visitors browse by location. Configure the singular and plural names:

[taxonomies]
  tag = "tags"
  category = "categories"
  location = "locations"

Then add terms in front matter:

locations:
  - Riga
  - Jurmala

Hugo can generate:

/locations/riga/
/locations/jurmala/

Gear could be another useful axis on the same kind of site:

[taxonomies]
  camera = "cameras"
  lens = "lenses"

cameras:
  - Sony A7 V

lenses:
  - Sigma 70-200mm F2.8

I would add these only if visitors genuinely want to browse that way and enough content exists to make the result useful.

Term pages need a useful destination

/tags/ is a taxonomy list; /tags/css/ is a term page. A basic term template can be very small:

<h1>{{ .Title }}</h1>

<ul>
  {{ range .Pages }}
    <li>
      <a href="{{ .RelPermalink }}">
        {{ .LinkTitle }}
      </a>
    </li>
  {{ end }}
</ul>

Important categories may deserve a short introduction explaining what the collection covers. That helps a person decide whether the archive matches what they were looking for; any search benefit is secondary.

My rule is simple: a taxonomy term should lead somewhere worth visiting. Start with the smallest set that connects related content, reuse its vocabulary consistently, and add another taxonomy only when it creates a genuinely different route through the site.

← Back to all articles