Fortes

Debugging Hugo via meta tags

Start using your <head> when working

Chicken feet

Chicken feet Lijiang, Yunnan

If you don’t use Hugo to build a website, then you’re gonna be real bored here. Go ahead and skip this page, take advantage of your time savings and do a quick stretch or maybe a few push-ups.

It can be tricky to understand Hugo’s template lookup order, as well as the properties available on the Page object. After a bunch of frustration and semi-permanent hair loss, I came up with the following helper partial:

{{/*
  Output a bunch of `<meta>` tags for the given page

  Expects a Page object
*/}}
{{ define "partials/debug_meta_tags.html" -}}
  <meta name="hugo-bundle-type" content="{{ .BundleType }}" />
  <meta name="hugo-categories" content="{{ .Params.categories }}" />
  <meta name="hugo-fuzzy-word-count" content="{{ .FuzzyWordCount }}" />
  <meta name="hugo-is-home" content="{{ .IsHome }}" />
  <meta name="hugo-is-node" content="{{ .IsNode }}" />
  <meta name="hugo-is-page" content="{{ .IsPage }}" />
  <meta name="hugo-keywords" content="{{ .Keywords }}" />
  <meta name="hugo-kind" content="{{ .Kind }}" />
  <meta name="hugo-lastmod" content="{{ .Lastmod }}" />
  {{ with .PrevInSection -}}
    <meta name="hugo-prev-in-section" content="{{ .RelPermalink }}" />
  {{ end -}}
  {{ with .NextInSection -}}
    <meta name="hugo-next-in-section" content="{{ .RelPermalink }}" />
  {{ end -}}

  {{ with .File -}}
    <meta name="hugo-file-path" content="{{ .Path }}" />
  {{ end -}}

  {{ range .Aliases -}}
    <meta name="hugo-alias" content="{{ . }}" />
  {{ end }}

  <meta name="hugo-section" content="{{ .Section }}" />
  <meta name="hugo-type" content="{{ .Type }}" />

  {{ range .Params.tags -}}
    <meta name="hugo-tag" content="{{ . }}" />
  {{ end }}

  {{ range .Ancestors -}}
    <meta name="hugo-ancestor" content="{{ .RelPermalink }}" />
  {{ end }}

  {{ if .Parent -}}
    <meta name="hugo-parent" content="{{ .Parent.RelPermalink }}" />
    <meta name="hugo-parent-kind" content="{{ .Parent.Kind }}" />
    <meta name="hugo-parent-type" content="{{ .Parent.Type }}" />
  {{- end }}

  {{ range .Pages -}}
    <meta name="hugo-child-page-path" content="{{ .RelPermalink }}" />
  {{ end }}
{{- end }}

Take that code and put it in a file called debug_meta_tags.tmpl in your layouts/partials directory. Now in your baseof.html layout (or wherever you’re defining your <head>) add the following within the <head>:

{{ if site.IsServer -}}
  {{ print "<!-- Debug info only available when running a local server -->" | safeHTML }}
  {{ partial "debug_meta_tags" .Page }}
  {{ print "<!-- End debug info -->" | safeHTML -}}
{{- end }}

The nice thing about using <meta> tags is that they’re not displayed in the browser, so it doesn’t effect the design of your site. Also, the site.IsServer conditional means these tags will only be output when you’re running your local development server (i.e. hugo server), so they won’t be part of your deployed site. Here’s an example of what the output looks like for this post:

<!-- Debug info only available when running a local server -->
<meta name="hugo-bundle-type" content="leaf" />
<meta name="hugo-categories" content="" />
<meta name="hugo-fuzzy-word-count" content="400" />
<meta name="hugo-is-home" content="false" />
<meta name="hugo-is-node" content="false" />
<meta name="hugo-is-page" content="true" />
<meta name="hugo-keywords" content="[]" />
<meta name="hugo-kind" content="page" />
<meta name="hugo-lastmod" content="2023-01-10 00:00:00 &#43;0000 UTC" />
<meta name="hugo-prev-in-section" content="/2022/make-git-better-with-fzf/" />
<meta name="hugo-file-path" content="posts/2023-hugo-debug-meta-tags/index.md" />
<meta name="hugo-section" content="posts" />
<meta name="hugo-type" content="posts" />
<meta name="hugo-ancestor" content="/posts/" />
<meta name="hugo-ancestor" content="/" />
<meta name="hugo-parent" content="/posts/" />
<meta name="hugo-parent-kind" content="section" />
<meta name="hugo-parent-type" content="posts" />
<!-- End debug info -->

These are also easily viewed from the browser’s developer tools in the element inspector, so you don’t even need to view source.

Of course, for this stupid site over half these fields are not of much interest. But maybe it’s useful for your erotic, yet tasteful, Paw Patrol fanfic site!

Related Posts