Use .Summary in Hugo with the Stack theme

I decided to update my site to make it more ‘search engine-friendly’ by making better use of the meta description field. My particular theme, Stack, does pull the .Description field from Front Matter, BUT it also uses the .Description field to populate a brief summary of the article on the home page. I don’t want SEO-friendly content displaying as a summary on my home page, so I decided to use another Front Matter field and update the theme to use that for the meta description.

First, I edited the default markdown archetype (/archetypes/default.md) in Hugo to include the .summary field:

---
title: {{ replace .Name "-" " " | title }}
date: {{ .Date }}
description:
summary:
draft: true
tags:
---

With that done, I needed to tell Hugo that when it generates the web content, it should populate the meta description field with .summary. This way the .description Front Matter can still be used by the theme to populate the subtitles on my home page, while using the .summary field to generate text for SEO:

Here’s the original layouts\partials\head\head.html contents:

<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>

{{- $description := partialCached "data/description" . .RelPermalink -}}
<meta name='description' content='{{ .description }}'>

{{- $title := partialCached "data/title" . .RelPermalink -}}
<title>{{ $title }}</title>

<link rel='canonical' href='{{ .Permalink }}'>

{{- partial "head/style.html" . -}}
{{- partial "head/script.html" . -}}
{{- partial "head/opengraph/include.html" . -}}

{{- range .AlternativeOutputFormats -}}
    <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{- end -}}

{{ with .Site.Params.favicon }}
    <link rel="shortcut icon" href="{{ . }}" />
{{ end }}

{{- template "_internal/google_analytics.html" . -}}
{{- partial "head/custom.html" . -}}

I replaced the line <meta name='description' content='{{ .description }}'> with <meta name='description' content='{{ .summary | truncate 130 }}'>

This tells Hugo to refer to the .Summary Front Matter field, and not the .Description, when generating the meta description. I also capped the meta description at 130 characters, just in case I write more than that. Search Engines typically consider somewhere between 25-160 characters, but check with your specific search engine for the exact values.

This is my final layouts\partials\head\head.html file:

<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>

{{- $description := partialCached "data/description" . .RelPermalink -}}
<meta name='description' content='{{ .summary | truncate 130 }}'>

{{- $title := partialCached "data/title" . .RelPermalink -}}
<title>{{ $title }}</title>

<link rel='canonical' href='{{ .Permalink }}'>

{{- partial "head/style.html" . -}}
{{- partial "head/script.html" . -}}
{{- partial "head/opengraph/include.html" . -}}

{{- range .AlternativeOutputFormats -}}
    <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{- end -}}

{{ with .Site.Params.favicon }}
    <link rel="shortcut icon" href="{{ . }}" />
{{ end }}

{{- template "_internal/google_analytics.html" . -}}
{{- partial "head/custom.html" . -}}