Add and use an image sitemap with Hugo

tips & tricks
1

As part of “Give back to the community” I created a post about adding and using an additional image sitemap with Hugo. I hope you will find it helpful.

1 Like
2

Thanks for the tip. Seems like the template goes through the HTML page to figure out which images are linked, but I don’t think this is necessary and it partially defeats the purpose of image sitemaps:

Image sitemaps are a way of telling Google about other images on your site, especially those that we might not otherwise find (such as images your site reaches with JavaScript code).

The following template goes through each page bundle and extracts all image files, and works better for me:

{{- $imageRegex := `.(avif|bmp|gif|jpeg|jpg|png|svg|svgz|webp)$` -}}

{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\"?>" | safeHTML }}
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">

  {{ range where .Site.Pages "Sitemap.Disable" "ne" true }}
    {{ $pagePermalink := .Permalink }}
    {{ $containsImage := false }}
    {{ range .Resources }}
      {{ if findRE $imageRegex .Permalink }}
        {{ if eq $containsImage false }}
          <url>
            <loc>{{ $pagePermalink }}</loc>
            {{ $containsImage = true }}
        {{ end }}
        <image:image>
          <image:loc>{{ .Permalink }}</image:loc>
        </image:image>
      {{ end }}
    {{ end }}
    {{ if eq $containsImage true }}
          </url>
    {{ end }}
  {{ end }}

</urlset>