[SOLVED] Help with Twitter card image

support
1

I’ve been following https://gohugohq.com/partials/twitter-cards-partials-for-hugo/ and it’s almost working on my site. The problem is that the image doesn’t show up, and I can’t see that the image is attached to the header of my posts:

All of the other items I define in the posts front matter (for twitter) works fine, it’s just the image that is missing.

Example:
card: “summary_large_image”
site: “@vninjanet”
creator: “@h0bbel”
image: “https://vninja.net/img/DesigningRisk.jpeg”

I’m new to Hugo and don’t know anything about Go, so I’m kind of at a loss here as to why the image doesn’t show up in the header and subsequently not when I test it via the Twitter Card Validator.

Any ideas?

2

Example post

3

I am not sure if the following is the source your last post that has generated your example post:

You are passing the parameters independently:

card: "summary_large_image"
site: "@vninjanet"
creator: "@h0bbel"
image: "https://vninja.net/img/DesigningRisk.jpeg"

They should be under Twitter according to the example from gohugohq, Try:

twitter:
- card: "summary_large_image"
- site: "@vninjanet"
- creator: "@h0bbel"
- image: "https://vninja.net/img/DesigningRisk.jpeg"

Alternatively, you can use the internal Twitter_card partial at https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/twitter_cards.html and adapt.

4

Thanks for helping out! You are right, you found my raw post. :slight_smile:

This got me a bit further, but now I get an error when building the site:

ERROR 2018/09/05 08:58:00 Error while rendering "page" in "post/": template: _default/single.html:1:3: executing "_default/single.html" at <partial "head.html" ...>: error calling partial: template: partials/head.html:31:3: executing "partials/head.html" at <partial "twitter-car...>: error calling partial: template: partials/twitter-card.html:2:39: executing "partials/twitter-card.html" at <.card>: can't evaluate field card in type []interface {}

I’ve tried putting the twitter-card.html file in both the themes layouts/partials directory, and /layouts/partials with the same result.

5

This has to be a theme issue, and not a Hugo issue as such. I’ve found direct Twitter meta tags in the theme files — which probably explains why there are problems here — Weird that it only surfaces once I tell ut to add an image though.

I’ll have to investigate this further, thanks so far!

6

Ok, found a workaround (which works for me at least). I added this to the theme header in themes/hugo-bootstrap-premium/layouts/partials/base/metas.html, as it didn’t have a meta tag for twitter:image at all (it had for other things twitter card thing though, content="{{ .Title }} etc.)

<meta name="twitter:image" content="{{ .Params.twImage }}">

and then defined twImage in my posts front matter:

twImage: "https://vninja.net/img/DesigningRisk.jpeg"

And hey, it works. Why it does’t work when use Params.twitter.image or just Params.Image is beyond me, but at least now the Twitter card works as it should, with the image.

7

Hmmm. I also have problems with Twitter cards. Here’s an example post from my Hugo blog and here’s the tweet that features it. It looks like Twitter cards aren’t working at all but in the posts’s HTML source you can find the Twitter card section. What am I missing? :flushed:

And of course: I don’t want to add all the front matter to every post over and over again. I don’t want to add any front matter but instead every post should be Twitter-Cards-friendly. Like: always take the first image from the post as the Twitter Card image. Or: because I already have an image variable in my front matter (it’s used for the blog’s index.html page; one of my own theme modifications) use that for the Twitter Card, too. Is that possible?

I’m using the Hyde-Hyde theme with a few self-made modifications …

Thanks so much for all your help! :blush:

1 Like
8

Okay, I found this in the official Hugo docs about configuring Twitter cards.
Apparently, you don’t have to add any new partials and can use the internal Twitter cards template by defining the appropriate variables in your site’s config file and a post’s front matter.
Works.
HOWEVER … the two meta datas twitter:site and twitter.creator don’t get rendered into the (public) html files. :disappointed:
Is this something that could be added in a future Hugo release, please?

1 Like
10

If you look at the twitter_cards template implementation, you will see that you need to populate some configuration (which isn’t really well documented). In your config.toml (for example), add your Social handles:

[Social]
  facebook = "BlahBlah"
  instagram = "blahblah"
  linkedin = "blah"
  twitter = "BlahBlah"

Now, you should see twitter:site generated.

For twitter:creator, you need to populate an Authors configuration, where each author would have a twitter property. Again, not well documented, but I stumbled across it with Google. Check the forums or github issues – it will pop up.

1 Like