Hugo SEO Modules

March 28, 2023 2 min read SEO Module Docs Twitter Cards Favicons Open Graph Alternatives Schema Translations

On this page

Please check out the tutorial to start using Hugo modules.

This module ships with some sub modules to helps you generate SEO stuff, such as favicons, twitter cards, open graph, schema, alternatives and translations meta tags.

Installation

1. Import the Module

hugo.yaml

1module:
2  imports:
3    path: MODULE_PATH

hugo.toml

1[module]
2  [module.imports]
3    path = 'MODULE_PATH'

hugo.json

1{
2   "module": {
3      "imports": {
4         "path": "MODULE_PATH"
5      }
6   }
7}

2. Include the Partial

Skip this section if your theme supports HugoPress, all partials will be included automatically.

1{{ partial "MODULE_PARTIAL" . }}

Modules

Base Module

Module
`github.com/hugomods/seo/modules/base`

Set the lang and dir attributes on <html> (HugoPress only).
Generate the description meta tag.
Generate the noindex meta tag if the noindex parameter is enabled.

Partial
`seo/modules/base/index`

Alternatives Module

Module
`github.com/hugomods/seo/modules/alternatives`

Generates alternative pages meta tags.

Partial
`seo/modules/favicons/index`

Favicons Module

Module
`github.com/hugomods/seo/modules/favicons`

Generates favicons in multiple sizes base on the assets/favicon.png.

Partial
`seo/modules/favicons/index`

The assets/favicon.png for generating icons in multiple sizes by default.
The assets/favicon.ico or static/favicon.ico for classic browsers.
The assets/mask-icon.svg for Safari pinned tab by default.

The following params begin with params.seo.favicons.

Params	Type	Default	Description
`icon`	String	`favicon.png`	Only raster images are supported, vector images are invalid (i.e. SVG).
`svg_icon`	string	`favicon.svg`
`mask_icon`	String	`mask-icon.svg`
`mask_icon_color`	String	`#000000`
`sizes`	Array	-
`sizes.size`	String	-	For example, `32x32`.
`sizes.rel`	String	`icon`

hugo.yaml

 1params:
 2  seo:
 3    favicons:
 4      sizes:
 5      - size: 16x16
 6      - size: 32x32
 7      - size: 150x150
 8      - rel: apple-touch-icon
 9        size: 180x180
10      - size: 192x192

hugo.toml

 1[params]
 2  [params.seo]
 3    [params.seo.favicons]
 4[[params.seo.favicons.sizes]]
 5        size = '16x16'
 6[[params.seo.favicons.sizes]]
 7        size = '32x32'
 8[[params.seo.favicons.sizes]]
 9        size = '150x150'
10[[params.seo.favicons.sizes]]
11        rel = 'apple-touch-icon'
12        size = '180x180'
13[[params.seo.favicons.sizes]]
14        size = '192x192'

hugo.json

 1{
 2   "params": {
 3      "seo": {
 4         "favicons": {
 5            "sizes": [
 6               {
 7                  "size": "16x16"
 8               },
 9               {
10                  "size": "32x32"
11               },
12               {
13                  "size": "150x150"
14               },
15               {
16                  "rel": "apple-touch-icon",
17                  "size": "180x180"
18               },
19               {
20                  "size": "192x192"
21               }
22            ]
23         }
24      }
25   }
26}

Open Graph Module

Module
`github.com/hugomods/seo/modules/open-graph`

Generate meta tags for Open Graph.

Partial
`seo/modules/open-graph/index`

Schema Module

Module
`github.com/hugomods/seo/modules/schema`

Generate meta tags for Schema.

Partial
`seo/modules/schema/index`

Translations Module

Module
`github.com/hugomods/seo/modules/translations`

Generate meta tags for localized pages, see tell Google about localized versions of your page.

Partial
`seo/modules/translations/index`

Twitter Cards Module

Module
`github.com/hugomods/seo/modules/twitter-cards`

Generate meta tags for Twitter Card.

Partial
`seo/modules/twitter-cards/index`

Browser docs