Meta Description in Hugo

Adding meta description in Hugo #

I assume you are using Luke Smith’s theme - Lugo, if you are not, you’d have to find these files yourself (e.g. search using vscode).

Setting a global meta description #

1. Locate your config.toml or config.yaml file
2. Add the following line inside it

For config.toml

[params]
  description = "The global meta description of your website"

For config.yaml

params:
  description: The global meta description of your website

It won’t work just yet because you have to update the baseof.html file.

Updating the baseof.html file #

1. Locate baseof.html
2. Add or change the meta description line with the following

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

And now if you start your Hugo server locally with hugo serve --noHTTPCache and you right click on your page -> View Page Source -> Search for the meta description tag. It should match what you left in the config file.

Replacing the global description with a custom one #

1. Have a markdown file ready
2. In the preamble, add

---
description: "Your custom description for this page"
---

Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!