Three different versions of site in three different environments

support
1

I’m struggling with the meta tags in my site. I’m getting three different versions, depending on how I build/access the site.

hugo version
Hugo Static Site Generator v0.60.1/extended darwin/amd64 BuildDate: unknown

With hugo server -D, this is what index.html has as meta:

<meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">


    
    <link rel="shortcut icon" href="//localhost:1313/images/favicon.ico" />
  

  <meta property="og:title" content="Kimiko Ishizakas Aufnahme kann künstlerisch mit den besten Einspielungen auf modernem Konzertflügel mithalten" />
<meta property="og:description" content="Reviewed by Sal Pichireddu on July 23, 2012 for www.about-music.de
Im Falle der vorliegenden Einspielung von Kimiko Ishizaka handelt es sich aber nicht nur um eine kostenlose, sondern auch um eine künstlerisch äußerst gelungene Einspielung." />
<meta property="og:type" content="article" />
<meta property="og:url" content="//localhost:1313/review/kimiko-ishizakas-aufnahme-kann-k-nstlerisch-mit-den-besten-einspielungen-auf-modernem-konzertfl-gel/" />
<meta property="og:image" content="//localhost:1313/images/open-goldberg-variations.png"/>
<meta property="article:published_time" content="2012-07-23T00:00:00+00:00" />
<meta property="article:modified_time" content="2012-07-23T00:00:00+00:00" />

  <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="//localhost:1313/images/open-goldberg-variations.png"/>

<meta name="twitter:title" content="Kimiko Ishizakas Aufnahme kann künstlerisch mit den besten Einspielungen auf modernem Konzertflügel mithalten"/>
<meta name="twitter:description" content="Reviewed by Sal Pichireddu on July 23, 2012 for www.about-music.de
Im Falle der vorliegenden Einspielung von Kimiko Ishizaka handelt es sich aber nicht nur um eine kostenlose, sondern auch um eine künstlerisch äußerst gelungene Einspielung."/>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />

If I build locally, this is what public/index.html has:

<meta name="theme-color" content="#ffffff">


  <meta property="og:title" content="Download" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/categories/download/" />
<meta property="og:updated_time" content="2019-12-10T13:07:02+01:00" />

  <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Download"/>
<meta name="twitter:description" content=""/>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />

And if I build this on my Ubuntu container in the cloud with the same Hugo version and command, I get this:

<meta name="theme-color" content="#ffffff">
    

  <meta property="og:title" content="Listens" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/listen/" />
<meta property="og:updated_time" content="2019-12-10T13:24:31+01:00" />

  <meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Listens"/>
<meta name="twitter:description" content=""/>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />

Here’s the config.toml (partial) that is generating that.


title = "The Open Goldberg Variations"
url = "https://opengoldbergvariations.org"
tagline = "Bach's Goldberg Variations, performed by Kimiko Ishizaka"
description = "The Open Goldberg Variations (Johann Sebastian Bach, BWV 988), played by Kimiko Ishizaka on a Bösendorfer 290 Imperial piano, are free to download and share. They are governed by the Creative Commons Zero license, which means that they are a part of the public domain, and every use of them is allowed."
site_type = "Organization"
org_name = "Open Goldberg Variations"
email = "kimiko@kimiko-piano.com"

images = ["https://opengoldbergvariations.org/images/open-goldberg-variations.png"] #This is used for opengraph/twitter cards.
favicon = "https://opengoldbergvariations.org/favicon/favicon.ico"

baseurl = "/"
canonifyurls = true
theme = "kiera"
paginate = 20
summaryLength = 30
enableEmoji = false
pygmentsCodeFences = true

[markup.goldmark.renderer]
    unsafe= true


[menu]

  [[menu.main]]
    name = "Free Download"
    weight = -1000
    identifier = "Free Download"
    url = "https://music.kimiko-piano.com/album/j-s-bach-open-goldberg-variations-bwv-988-piano"

  [[menu.main]]
    identifier = "Listen"
    name = "Listen"
    url = "/listen/"
    weight = -120
...

Can anyone explain why I’m getting such different results from the same code and same hugo?

2

Could you share a link to see your full code?

I wonder if the issue could be due to caching (i.e. calls to partialCached in the theme).

Which version of the kiera theme are you using?

3

Actually…if you’re using my fork of the kiera theme the issue is almost definitely due to a mistake with caching.

I’ve just pushed a fix. Can you test it and let me know if it works.

1 Like
4

Hi @funkydan2 - thanks so much for looking at my issue, fixing a bug in Kiera, and also for Kiera theme itself.

I’ve put the source code for my site online: https://github.com/robertDouglass/opengoldbergvariations.org/tree/master

5

How do I tell Hugo which file it should grab the data from on the homepage?

Right now it grabs… any random file at all.

For example, on the deployed version, https://opengoldbergvariations.org, the homepage is grabbing <meta property="og:url" content="/listen/download-the-goldberg-variations-free/" />from content/listen.

I would expect it to all come from either config.toml or content/_index.md.

6

The issue now is that you need to apply the changes I made to the them to your overridden layouts—have a look at the commit to the Hugo Kiera theme where I fixed the caching issue for metadata.

What you need to do is make the same changes in the files where you’ve overriding the theme.

  1. remove these two lines from your header_overrides partial
    https://github.com/robertDouglass/opengoldbergvariations.org/blob/0219c3183cdfd238261204d6f8c207e04469960a/layouts/partials/header_includes.html#L5-L6

  2. And put them in your meta partial
    https://github.com/robertDouglass/opengoldbergvariations.org/blob/master/layouts/partials/meta.html

Or, you could probably delete your version of the header_includes partial (since I don’t think it’s any different than the theme), and just update the meta partial.

7

That’s looking better! Thank you!

The only thing I’m missing now is the twitter card image:

images = [“https://opengoldbergvariations.org/images/open-goldberg-variations.png”] #This is used for opengraph/twitter cards.

Is that meant to be supported by the Kiera template?

8

You need to change your config.toml

These key/value pairs need to be elements of the [params] table.

See the example: https://github.com/funkydan2/hugo-kiera/blob/master/exampleSite/config.toml

9

Woohoo! It all works =)

Thanks so much. This is my first Hugo site, and overall it went very well, and I was able to self serve answers from the docs and the internet. But these last details I would have never solved without your help.

-Robert

1 Like
10

Glad to help.

(BTW, I noticed there was also a problem with icons missing from the block quotes. I’ve just pushed a fix for that.)