---
title: "Meta Description in Hugo"
date: 2023-01-04T22:52:24+02:00
draft: false
description:  "This step by step guide will show you how to add meta description in your own Hugo site."
tags: ['blog']
---

## 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
```toml
[params]
  description = "The global meta description of your website"
```

For config.yaml
```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
```html
<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 
```yaml
---
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!