HUGO

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
Star

What's on this Page

  • Google Analytics
  • Disqus
  • Open Graph
  • Twitter Cards
  • The internal templates
TEMPLATES

Internal templates

Hugo ships with a group of boilerplate templates that cover the most common use cases for static websites.

While the following internal templates are called similar to partials, they do not observe the partial template lookup order.

Google Analytics

Hugo ships with an internal template supporting Google Analytics 4 (GA4).

Note: Universal Analytics are deprecated.

Configure Google Analytics

Provide your tracking ID in your configuration file:

Google Analytics 4 (gtag.js)

hugo.
     
googleAnalytics: G-MEASUREMENT_ID
googleAnalytics = 'G-MEASUREMENT_ID'
{
   "googleAnalytics": "G-MEASUREMENT_ID"
}

Use the Google Analytics template

Include the Google Analytics internal template in your templates where you want the code to appear:

{{ template "_internal/google_analytics.html" . }}

To create your own template, access the configured ID with {{ site.Config.Services.GoogleAnalytics.ID }}.

Disqus

Hugo also ships with an internal template for Disqus comments, a popular commenting system for both static and dynamic websites. To effectively use Disqus, secure a Disqus “shortname” by signing up for the free service.

Configure Disqus

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

hugo.
     
disqusShortname: your-disqus-shortname
disqusShortname = 'your-disqus-shortname'
{
   "disqusShortname": "your-disqus-shortname"
}

You can also set the following in the front matter for a given piece of content:

  • disqus_identifier
  • disqus_title
  • disqus_url

Use the Disqus template

To add Disqus, include the following line in the templates where you want your comments to appear:

{{ template "_internal/disqus.html" . }}

A .Site.DisqusShortname variable is also exposed from the configuration.

Conditional loading of Disqus comments

Users have noticed that enabling Disqus comments when running the Hugo web server on localhost (i.e. via hugo server) causes the creation of unwanted discussions on the associated Disqus account.

You can create the following layouts/partials/disqus.html:

layouts/partials/disqus.html
<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ .Site.DisqusShortname }}';
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

The if statement skips the initialization of the Disqus comment injection when you are running on localhost.

You can then render your custom Disqus partial template as follows:

{{ partial "disqus.html" . }}

Open Graph

An internal template for the Open Graph protocol, metadata that enables a page to become a rich object in a social graph. This format is used for Facebook and some other sites.

Configure Open Graph

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

hugo.
     
params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg
  title: My cool site
taxonomies:
  series: series
[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']
  title = 'My cool site'
[taxonomies]
  series = 'series'
{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ],
      "title": "My cool site"
   },
   "taxonomies": {
      "series": "series"
   }
}
content/blog/my-post.
     
audio: []
date: "2006-01-02"
description: Text about this post
images:
- post-cover.png
series: []
tags: []
title: Post title
videos: []
audio = []
date = '2006-01-02'
description = 'Text about this post'
images = ['post-cover.png']
series = []
tags = []
title = 'Post title'
videos = []
{
   "audio": [],
   "date": "2006-01-02",
   "description": "Text about this post",
   "images": [
      "post-cover.png"
   ],
   "series": [],
   "tags": [],
   "title": "Post title",
   "videos": []
}

Hugo uses the page title and description for the title and description metadata. The first 6 URLs from the images array are used for image metadata. If page bundles are used and the images array is empty or undefined, images with file names matching *feature* or *cover*,*thumbnail* are used for image metadata.

Various optional metadata can also be set:

  • Date, published date, and last modified data are used to set the published time metadata if specified.
  • audio and videos are URL arrays like images for the audio and video metadata tags, respectively.
  • The first 6 tags on the page are used for the tags metadata.
  • The series taxonomy is used to specify related “see also” pages by placing them in the same series.

If using YouTube this will produce a og:video tag like <meta property="og:video" content="url">. Use the https://youtu.be/<id> format with YouTube videos (example: https://youtu.be/qtIqKaDlqXo).

Use the Open Graph template

To add Open Graph metadata, include the following line between the <head> tags in your templates:

{{ template "_internal/opengraph.html" . }}

Twitter Cards

An internal template for Twitter Cards, metadata used to attach rich media to Tweets linking to your site.

Configure Twitter Cards

Hugo’s Twitter Card template is configured using a mix of configuration variables and front-matter on individual pages.

hugo.
     
params:
  description: Text about my cool site
  images:
  - site-feature-image.jpg
[params]
  description = 'Text about my cool site'
  images = ['site-feature-image.jpg']
{
   "params": {
      "description": "Text about my cool site",
      "images": [
         "site-feature-image.jpg"
      ]
   }
}
content/blog/my-post.
     
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"
}

If images aren’t specified in the page front-matter, then hugo searches for image page resources with feature, cover, or thumbnail in their name. If no image resources with those names are found, the images defined in the site config are used instead. If no images are found at all, then an image-less Twitter summary card is used instead of summary_large_image.

Hugo uses the page title and description for the card’s title and description fields. The page summary is used if no description is given.

The .Site.Social.twitter variable is exposed from the configuration as the value for twitter:site.

hugo.
     
social:
  twitter: GoHugoIO
[social]
  twitter = 'GoHugoIO'
{
   "social": {
      "twitter": "GoHugoIO"
   }
}

NOTE: The @ will be added for you

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

Use the Twitter Cards template

To add Twitter card metadata, include the following line immediately after the <head> element in your templates:

{{ template "_internal/twitter_cards.html" . }}

The internal templates

The code for these templates is located here.

  • _internal/disqus.html
  • _internal/google_analytics.html
  • _internal/opengraph.html
  • _internal/pagination.html
  • _internal/schema.html
  • _internal/twitter_cards.html

See Also

  • Comments
  • About Hugo
    • Overview
    • What is Hugo
    • Hugo features
    • Static site generators
    • Hugo's security model
    • Hugo and the GDPR
    • License
  • Installation
    • Overview
    • macOS
    • Linux
    • Windows
    • BSD
  • Getting started
    • Overview
    • Quick start
    • Basic usage
    • Directory structure
    • Configuration
    • Configure markup
    • Glossary of terms
    • External learning resources
  • Hugo Modules
    • Overview
    • Configure Hugo modules
    • Use Hugo Modules
    • Theme components
  • Content management
    • Overview
    • Organization
    • Page bundles
    • Content formats
    • Diagrams
    • Front matter
    • Build options
    • Page resources
    • Image processing
    • Shortcodes
    • Related content
    • Sections
    • Content types
    • Archetypes
    • Taxonomies
    • Summaries
    • Links and cross references
    • URL management
    • Menus
    • Static files
    • Table of contents
    • Comments
    • Multilingual
    • Syntax highlighting
  • Templates
    • Overview
    • Templating
    • Template lookup order
    • Base templates and blocks
    • Single page templates
    • List templates
    • Homepage template
    • Section templates
    • Taxonomy templates
    • Pagination
    • Content view templates
    • Partial templates
    • Shortcode templates
    • Menu templates
    • Data templates
    • RSS templates
    • Sitemap templates
    • Local file templates
    • Internal templates
    • Render hooks
    • Custom output formats
    • 404 page
    • Robots.txt
    • Template debugging
  • Functions
    • Overview
    • .AddDate
    • .Format
    • .Get
    • .GetPage
    • .HasMenuCurrent
    • .IsMenuCurrent
    • .Param
    • .Render
    • .RenderString
    • .Scratch
    • .Store
    • .Unix
    • absLangURL
    • absURL
    • after
    • anchorize
    • append
    • apply
    • base64
    • chomp
    • complement
    • cond
    • countrunes
    • countwords
    • crypto.FNV32a
    • default
    • delimit
    • dict
    • duration
    • echoParam
    • emojify
    • eq
    • errorf and warnf
    • fileExists
    • findRE
    • findRESubmatch
    • first
    • float
    • ge
    • getenv
    • group
    • gt
    • highlight
    • hmac
    • htmlEscape
    • htmlUnescape
    • hugo
    • humanize
    • i18n
    • Image filters
    • in
    • index
    • int
    • intersect
    • isset
    • jsonify
    • lang
    • lang.Merge
    • last
    • le
    • len
    • lower
    • lt
    • markdownify
    • Math
    • md5
    • merge
    • ne
    • now
    • os.Stat
    • partialCached
    • path.Base
    • path.BaseName
    • path.Clean
    • path.Dir
    • path.Ext
    • path.Join
    • path.Split
    • plainify
    • pluralize
    • print
    • printf
    • println
    • querify
    • range
    • readDir
    • readFile
    • ref
    • reflect.IsMap
    • reflect.IsSlice
    • relLangURL
    • relref
    • relURL
    • replace
    • replaceRE
    • safeCSS
    • safeHTML
    • safeHTMLAttr
    • safeJS
    • safeURL
    • seq
    • sha
    • shuffle
    • singularize
    • site
    • slice
    • slicestr
    • sort
    • split
    • string
    • strings.Contains
    • strings.ContainsAny
    • strings.ContainsNonSpace
    • strings.Count
    • strings.FirstUpper
    • strings.HasPrefix
    • strings.HasSuffix
    • strings.Repeat
    • strings.RuneCount
    • strings.TrimLeft
    • strings.TrimPrefix
    • strings.TrimRight
    • strings.TrimSuffix
    • substr
    • symdiff
    • templates.Exists
    • time
    • time.Format
    • time.ParseDuration
    • title
    • transform.Remarshal
    • transform.Unmarshal
    • trim
    • truncate
    • union
    • uniq
    • upper
    • urlize
    • urlquery
    • urls.JoinPath
    • urls.Parse
    • where
    • with
  • Variables
    • Overview
    • Site variables
    • Page variables
    • Shortcode variables
    • Pages methods
    • Taxonomy variables
    • File variables
    • Menu variables
    • Git variables
    • Sitemap variables
  • Hugo Pipes
    • Overview
    • Introduction
    • Transpile Sass to CSS
    • PostCSS
    • PostProcess
    • JavaScript building
    • Babel
    • Asset minification
    • Concatenating assets
    • Fingerprinting and SRI hashing
    • Resource from string
    • Resource from template
  • CLI
  • Troubleshooting
    • Overview
    • Frequently asked questions
    • Build performance
  • Developer tools
    • Overview
    • Editor plugins
    • Frontends
    • Search
    • Migrations
    • Other projects
  • Hosting and deployment
    • Overview
    • Hugo Deploy
    • Deploy with Rclone
    • Deploy with Rsync
    • Host on 21YunBox
    • Host on AWS Amplify
    • Host on Azure Static Web Apps
    • Host on Cloudflare Pages
    • Host on Firebase
    • Host on GitHub Pages
    • Host on GitLab Pages
    • Host on KeyCDN
    • Host on Netlify
    • Host on Render
  • Contribute
    • Overview
    • Development
    • Documentation
    • Themes
  • Maintenance
Last updated: August 3, 2023: Remove references to Google's Universal Analytics and the async template (01b37872)
Improve this page
By the Hugo Authors
Hugo Logo
  • File an Issue
  • Get Help
  • @GoHugoIO
  • @spf13
  • @bepsays

Netlify badge

 

Hugo Sponsors

 

The Hugo logos are copyright © Steve Francia 2013–2023.

The Hugo Gopher is based on an original work by Renée French.

  • News
  • Docs
  • Themes
  • Showcase
  • Community
  • GitHub
  • About Hugo
  • Installation
  • Getting started
  • Hugo Modules
  • Content management
  • Templates
  • Functions
  • Variables
  • Hugo Pipes
  • CLI
  • Troubleshooting
  • Developer tools
  • Hosting and deployment
  • Contribute
  • Maintenance