How to Add a Html Meta Description tag to a Hugo Post

HTML meta descriptions in Hugo sites - a short guide

Defining the description of the html document is useful for several reasons. Firstly, it is still used by search engines for them to gain an understanding of what the webpage is about. It can also directly appear to users in their search engine results pages.

A HTML meta description tag looks like this:

   <meta name="description" content="A blog about building websites with Hugo and everything in between" />

If you want this to be dynamic then here is a simple way to achieve this. Firstly, in your site’s config.toml file, define a top level description param like this:

[params]
  description = 'A blog about building websites with Hugo and everything in between'

In the layout file or partial that is responsible for handling the <head> content - add this:

<meta name="description" content="{{- if .Description -}}{{- .Description -}}{{- else -}}{{- .Site.Params.Description -}}{{- end -}}" />

take note of the - charachter at the end of the opnening and closing logic to check for the description param. This will keep the whitespace tidy in your document when it does get output.

So what we’re doing here is setting a site level param called description and then in the template we’re saying IF there is a description param used at the Page-level use that, ELSE, use the default site level description for every page or post.

With this setup, you could define a description in the front-matter of each Hugo post or page to be used, or fallback to the default description defined at the site level.

Generally even today search engines may give your webpages a negative checkmark if ti sees duplicate meta-descriptions.