My Hugo Adventure continues! I’ve been quite happily transitioning an existing server-side-generated website into static HTML using Hugo. I’ve got the knack of using fragments, etc. and have built a reasonable and mobile-responsive site. I was about to upload to production when I realized I wanted to control the titles and description for each page.
I looked at the Hugo site and took a clue from the Front Matter example, which included lines for title and description. I went through all of the content files and added page-specific information into the front matter (an example is below). Hugo runs without complaint, but I’m not getting the page-specific content added to the individual pages.
+++
title = "My Nutty Website - About This Site"
description = "This page gives basic information about My Nutty Website and the reasons it was created."
date = "2016-02-18T10:59:28-07:00"
draft = false
+++
Below is the code that I have at the beginning of my head fragment (invoked for every page). It appears to properly pull in the site title (from the configuration file). I have tried many different options to get it to populate the various pages with the information I added into their respective front matter sections. I have failed. I’m not including the variations I’ve tried because they are too numerous and add nothing to this conversation. (gt and lt symbols removed so it will display)
title {{ .Site.Title }} /title
meta name=“author” content=“Some Nutty Dude"
meta name=“description” content=”{{ with .Site.Params.description }}{{ . }}{{ end }}"
meta name=“viewport” content=“width=device-width, initial-scale=1”
Please advise on how I can get Hugo to use the title and description I’ve added to each page’s front matter as the title and description for that individual page.
Here is my layouts/partials/site_header/metadata.html. Hopefully this helps. Feel free to copy/delete as needed.
<!--...<head>...-->
<!-- Standard Metadata -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ if .Title }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.SiteDescription }}{{ end }}">
<!-- Responsive meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Open Graph Protocol http://ogp.me/ -->
<meta property="og:locale" content="en_US">
<meta property="og:title" content="{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}">
<meta property="og:image" content="{{ if .Params.image }}{{.Site.BaseURL}}/images/{{.Params.image}}{{ else }}{{.Site.BaseURL}}/images/site-logo.png{{ end }}">
<meta property="og:description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.SiteDescription }}{{ end }}">
<meta property="og:site_name" content="{{ .Site.Title }}">
<!-- Generator w/Version Number. Let's give some love to Hugo. -->
{{.Hugo.Generator}}
If this site is more bloggish (ie, with sections full of content ordered by publishdate, you can also get a small performance boost with ultra-modern browsers using the following:
<!--layouts/partials/site_header/prefetch.html-->
<!-- Preconnect API. For browser compatibility, check http://caniuse.com/#feat=link-rel-preconnect -->
<link rel="preconnect" href="{{ .Site.BaseURL }}">
<link rel="canonical" href="{{ .Permalink }}">
<link href="{{ .RSSlink }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" />
<!-- Add prefetch and prerender on section pages. Works especially well for articles or blog posts in a series -->
{{ if .IsPage }}
{{if .NextInSection }}
<link rel="prefetch" href="{{.NextInSection.Permalink}}">
<link rel="prerender" href="{{.NextInSection.Permalink}}">
{{ end }}
{{if .PrevInSection }}
<link rel="prefetch" href="{{.PrevInSection.Permalink}}">
<link rel="prerender" href="{{.PrevInSection.Permalink}}">
{{ end }}
{{ end }}
Support for prefetch and prerender is really limited, but it’s not going to hurt you. Hope that helps.
Ala-kazam, PRESTO! It works! Many thanks! I really only implemented the most basic parts, repeated here for any who, like me, are only looking for the most basic functionality:
<title>{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}</title> <meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.SiteDescription }}{{ end }}">
Basically, it’s great, concise logic that looks for the existence of title and description in the front matter of every page and uses it if it is present. If one or both are not present in the front matter, it defaults to the title and/or description designated in the configuration file. Very nice!
All the below replies are great, I prefer to use the ‘default’ function as its a bit more terse. Basically, if title is omitted from the page then it will fall back on the site default in your config.