Embedded partial templates

Hugo provides embedded partial templates for common use cases.

Disqus

To override Hugo’s embedded Disqus template, copy the source code to a file with the same name in the layouts/_partials directory, then call it from your templates using the partial function:

{{ partial "disqus.html" . }}

Hugo includes an embedded template for Disqus, a commenting system for both static and dynamic websites. To use this template, you must first obtain a Disqus shortname by signing up for the free service.

To include the embedded template:

{{ partial "disqus.html" . }}

Configuration

To use Hugo’s Disqus template, first set up a single configuration value:

services:
  disqus:
    shortname: your-disqus-shortname

[services]
  [services.disqus]
    shortname = 'your-disqus-shortname'

{
   "services": {
      "disqus": {
         "shortname": "your-disqus-shortname"
      }
   }
}

You can also set the following in the front matter for a given page:

disqus_identifier: (string) A unique identifier for the page’s discussion thread. Set this to preserve comment threads across URL changes.
disqus_title: (string) The title of the discussion thread.
disqus_url: (string) The canonical URL for the discussion thread. Use this to override the URL Disqus uses to identify the thread, for example when the same content is served at multiple URLs.

---
params:
  disqus_identifier: unique-identifier
  disqus_title: Post title
  disqus_url: https://example.org/blog/my-post/
---

+++
[params]
  disqus_identifier = 'unique-identifier'
  disqus_title = 'Post title'
  disqus_url = 'https://example.org/blog/my-post/'
+++

{
   "params": {
      "disqus_identifier": "unique-identifier",
      "disqus_title": "Post title",
      "disqus_url": "https://example.org/blog/my-post/"
   }
}

When previewing your site locally, Hugo replaces the Disqus widget with the message “Disqus comments not available by default when the website is previewed locally.”

Privacy

Adjust the relevant privacy settings in your project configuration.

privacy:
  disqus:
    disable: false

[privacy]
  [privacy.disqus]
    disable = false

{
   "privacy": {
      "disqus": {
         "disable": false
      }
   }
}

disable: (bool) Whether to disable the template. Default is false.

Google Analytics

To override Hugo’s embedded Google Analytics template, copy the source code to a file with the same name in the layouts/_partials directory, then call it from your templates using the partial function:

{{ partial "google_analytics.html" . }}

Hugo includes an embedded template for Google Analytics 4.

To include the embedded template:

{{ partial "google_analytics.html" . }}

Configuration

Provide your tracking ID in your configuration file:

services:
  googleAnalytics:
    id: G-MEASUREMENT_ID

[services]
  [services.googleAnalytics]
    id = 'G-MEASUREMENT_ID'

{
   "services": {
      "googleAnalytics": {
         "id": "G-MEASUREMENT_ID"
      }
   }
}

If the configured ID begins with ua- (case-insensitive), Hugo logs a warning and renders nothing. Google Universal Analytics (UA) was replaced by Google Analytics 4 (GA4) effective 1 July 2023. Create a GA4 property and data stream, then update your project configuration with the new measurement ID.

Privacy

Adjust the relevant privacy settings in your project configuration.

privacy:
  googleAnalytics:
    disable: false
    respectDoNotTrack: true

[privacy]
  [privacy.googleAnalytics]
    disable = false
    respectDoNotTrack = true

{
   "privacy": {
      "googleAnalytics": {
         "disable": false,
         "respectDoNotTrack": true
      }
   }
}

disable: (bool) Whether to disable the template. Default is false.
respectDoNotTrack: (bool) Whether to respect the browser’s “do not track” setting. Default is true.

Open Graph

To override Hugo’s embedded Open Graph template, copy the source code to a file with the same name in the layouts/_partials directory, then call it from your templates using the partial function:

{{ partial "opengraph.html" . }}

Hugo includes an embedded template for the Open Graph protocol. This metadata transforms your pages into rich objects when shared across major social media and messaging platforms.

To include the embedded template:

{{ partial "opengraph.html" . }}

Configuration

Hugo’s Open Graph template is configured using a mix of configuration settings and front matter values on individual pages.

params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg
  social:
    facebook_app_id: '12345678'
taxonomies:
  series: series
title: My cool site

title = 'My cool site'
[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']
  [params.social]
    facebook_app_id = '12345678'
[taxonomies]
  series = 'series'

{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ],
      "social": {
         "facebook_app_id": "12345678"
      }
   },
   "taxonomies": {
      "series": "series"
   },
   "title": "My cool site"
}

---
audio: []
date: 2024-03-08T08:18:11-08:00
description: Text about this post
images:
- post-cover.png
locale: en-US
series: []
tags: []
title: Post title
videos: []
---

+++
audio = []
date = 2024-03-08T08:18:11-08:00
description = 'Text about this post'
images = ['post-cover.png']
locale = 'en-US'
series = []
tags = []
title = 'Post title'
videos = []
+++

{
   "audio": [],
   "date": "2024-03-08T08:18:11-08:00",
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "locale": "en-US",
   "series": [],
   "tags": [],
   "title": "Post title",
   "videos": []
}

Metadata

Hugo emits the following metadata:

og:url: The page permalink.
og:site_name: The site title, falling back to the site configuration’s params.title value.
og:title: The page title, falling back to the site title, then the site configuration’s params.title value.
og:description: The page description, falling back to the page summary, then the site configuration’s params.description value.
og:locale: The locale front matter value, falling back to the site language’s locale; hyphens are replaced with underscores (e.g. en-US → en_US).
og:type: The value is article for pages and website for list and home pages.

For article pages, Hugo also emits:

article:section: The page’s top-level section.
article:published_time: The page’s publish date.
article:modified_time: The page’s last modified date.
article:tag: The first 6 tags.

For image metadata, Hugo emits up to 6 og:image tags.

When the images front matter parameter is set, Hugo processes each value. For internal paths, it searches page resources then global resources, using the resource permalink if found or converting the path to an absolute URL if not. External URLs are used as-is.

When images is not set, Hugo searches page resources for a name matching *feature*, falling back to *cover* or *thumbnail* if none is found. If still no image is found, Hugo uses the first entry in the site configuration’s params.images array, if present, and processes it as described above.

audio and videos are []string front matter parameters. Hugo emits up to 6 og:audio and og:video tags, passing each value through absURL, which converts relative paths to absolute URLs. Unlike images, Hugo does not search page resources or global resources for these values.

The series taxonomy is used to populate og:see_also metadata. Hugo emits up to 7 og:see_also tags using the first 7 pages in the same series as the current page, excluding the current page itself.

For Facebook metadata, if the site configuration’s params.social.facebook_app_id value is set, Hugo emits fb:app_id. Otherwise, if the site configuration’s params.social.facebook_admin value is set, Hugo emits fb:admins.

Pagination

To override Hugo’s embedded pagination template, copy the source code to a file with the same name in the layouts/_partials directory, then call it from your templates using the partial function:

{{ partial "pagination.html" . }}

Hugo includes an embedded template for rendering navigation links between pagers. To include the embedded template:

{{ partial "pagination.html" . }}

The embedded pagination template has two formats: default and terse. The terse format has fewer controls and page slots, consuming less space when styled as a horizontal list. See pagination for details.

Schema

To override Hugo’s embedded Schema template, copy the source code to a file with the same name in the layouts/_partials directory, then call it from your templates using the partial function:

{{ partial "schema.html" . }}

Hugo includes an embedded template to render microdata meta elements within the head element of your templates.

To include the embedded template:

{{ partial "schema.html" . }}

Configuration

Hugo’s Schema template uses a mix of page data and front matter values on individual pages.

params:
  description: Text about my cool site
title: My cool site

title = 'My cool site'
[params]
  description = 'Text about my cool site'

{
   "params": {
      "description": "Text about my cool site"
   },
   "title": "My cool site"
}

---
date: 2024-03-08T08:18:11-08:00
description: Text about this post
images:
- post-cover.png
keywords:
- ssg
- hugo
lastmod: 2024-03-09T12:00:00-08:00
title: Post title
---

+++
date = 2024-03-08T08:18:11-08:00
description = 'Text about this post'
images = ['post-cover.png']
keywords = ['ssg', 'hugo']
lastmod = 2024-03-09T12:00:00-08:00
title = 'Post title'
+++

{
   "date": "2024-03-08T08:18:11-08:00",
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "keywords": [
      "ssg",
      "hugo"
   ],
   "lastmod": "2024-03-09T12:00:00-08:00",
   "title": "Post title"
}

Metadata

Hugo emits the following microdata:

name: The page title, falling back to the site title.
description: The page description, falling back to the page summary, then the site configuration’s params.description value.
datePublished: The page’s publish date.
dateModified: The page’s last modified date.
wordCount: The page’s word count.

For image metadata, Hugo emits up to 6 image tags.

For keyword metadata, Hugo uses the following order of precedence:

Titles of keywords taxonomy terms, if keywords is defined as a taxonomy
The keywords front matter value, if keywords is not a taxonomy
Titles of tags taxonomy terms
Titles of all taxonomy terms

X (Twitter) Cards

To override Hugo’s embedded Twitter Cards template, copy the source code to a file with the same name in the layouts/_partials directory, then call it from your templates using the partial function:

{{ partial "twitter_cards.html" . }}

Hugo includes an embedded template for X (Twitter) Cards, metadata used to attach rich media to Tweets linking to your site.

To include the embedded template:

{{ partial "twitter_cards.html" . }}

Configuration

Hugo’s X (Twitter) Card template is configured using a mix of configuration settings and front matter values on individual pages.

params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg
  social:
    twitter: GoHugoIO

[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']
  [params.social]
    twitter = 'GoHugoIO'

{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ],
      "social": {
         "twitter": "GoHugoIO"
      }
   }
}

---
description: Text about this post
images:
- post-cover.png
title: Post title
---

+++
description = 'Text about this post'
images = ['post-cover.png']
title = 'Post title'
+++

{
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "title": "Post title"
}

Metadata

If an image is found, Hugo sets twitter:card to summary_large_image and emits a twitter:image tag using the first image found. If no image is found, Hugo sets twitter:card to summary and omits the image tag.

Hugo also emits the following metadata:

twitter:title

The page title, falling back to the site title, then the site configuration’s params.title value.

twitter:description

The page description, falling back to the page summary, then the site configuration’s params.description value.

twitter:site

The site configuration’s params.social.twitter value. The @ prefix is added automatically if not already present. For example, with twitter = 'GoHugoIO' in your configuration, Hugo renders:

<meta name="twitter:site" content="@GoHugoIO"/>

Last updated: May 24, 2026 : content: Updates for v0.162.0 (6c4bd3a09)

Improve this page