Content summaries

Create and render content summaries.

You can define a summary manually, in front matter, or automatically. A manual summary takes precedence over a front matter summary, and a front matter summary takes precedence over an automatic summary.

Review the comparison table below to understand the characteristics of each summary type.

Manual summary

Use a  divider to indicate the end of the summary. Hugo will not render the summary divider itself.

content/example.md

+++
title: 'Example'
date: 2024-05-26T09:10:33-07:00
+++

This is the first paragraph.

<!--more-->

This is the second paragraph.

When using the Emacs Org Mode content format, use a # more divider to indicate the end of the summary.

Front matter summary

Use front matter to define a summary independent of content.

content/example.md

+++
title: 'Example'
date: 2024-05-26T09:10:33-07:00
summary: 'This summary is independent of the content.'
+++

This is the first paragraph.

This is the second paragraph.

Automatic summary

If you do not define the summary manually or in front matter, Hugo automatically defines the summary based on the summaryLength in your site configuration.

content/example.md

+++
title: 'Example'
date: 2024-05-26T09:10:33-07:00
+++

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

For example, with a summaryLength of 7, the automatic summary will be:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

Automatic .Summary may cut block tags (e.g., blockquote) in the middle when summaryLength is reached, causing the browser to recover the end tag (the end tag will be inserted before the parent’s end tag), resulting in unexpected rendering behavior. To avoid this, wrap .Summary in a <div>; alternatively, wrap it together with the heading tag using <section>. You can avoid this entirely by using a manual summary. See issue #14044 for details.

Comparison

Each summary type has different characteristics:

Type	Precedence	Renders markdown	Renders shortcodes	Wraps single lines with `<p>`
Manual	1	✔️	✔️	✔️
Front matter	2	✔️	❌	❌
Automatic	3	✔️	✔️	✔️

Rendering

Render the summary in a template by calling the Summary method on a Page object.

{{ range site.RegularPages }}
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  <div class="summary">
    {{ .Summary }}
    {{ if .Truncated }}
      <a href="{{ .RelPermalink }}">More ...</a>
    {{ end }}
  </div>
{{ end }}

Alternative

Instead of calling the Summary method on a Page object, use the strings.Truncate function for granular control of the summary length. For example:

{{ range site.RegularPages }}
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
  <div class="summary">
    {{ .Content | strings.Truncate 42 }}
  </div>
{{ end }}

Last updated: October 13, 2025 : content: Add warning about automatic summaries (ca21f5fbd)

Improve this page