53 lines
No EOL
1.6 KiB
Markdown
53 lines
No EOL
1.6 KiB
Markdown
---
|
|
title: "Meta Description in Hugo"
|
|
date: 2023-01-04T22:52:24+03: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! |