2023-01-04 22:09:59 +01:00
---
title: "Meta Description in Hugo"
2024-08-29 21:46:33 +02:00
date: 2023-01-04T22:52:24+03:00
2023-01-04 22:09:59 +01:00
draft: false
description: "This step by step guide will show you how to add meta description in your own Hugo site."
tags: ['blog']
---
2023-04-01 14:39:34 +02:00
## Adding meta description in Hugo
2023-01-04 22:09:59 +01:00
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).
2023-04-01 14:39:34 +02:00
### Setting a global meta description
2023-01-04 22:09:59 +01:00
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
```
2023-02-04 21:30:13 +01:00
It won't work just yet because you have to update the ```baseof.html``` file.
2023-01-04 22:09:59 +01:00
2023-04-01 14:39:34 +02:00
### Updating the baseof.html file
2023-01-04 22:09:59 +01:00
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.
2023-04-01 14:39:34 +02:00
### Replacing the global description with a custom one
2023-01-04 22:09:59 +01:00
1. Have a markdown file ready
2. In the preamble, add
```yaml
---
description: "Your custom description for this page"
---
```
2023-04-03 18:48:20 +02:00
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!