# \[SOLVED\] Help with Twitter card image

**URL:** <https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067>\
**Category:** support\
**Created:** [September 4, 2018, 9:02pm UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067 "2018-09-04T21:02:40Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![h0bbel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/h0bbel/32/22693_2.png) [@h0bbel](https://discourse.gohugo.io/u/h0bbel)\
**Post date:** [September 4, 2018, 9:02pm UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/1 "2018-09-04T21:02:40Z")

</div>

I’ve been following [https://gohugohq.com/partials/twitter-cards-partials-for-hugo/](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](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?

---

<div class="post-metadata">

**Author:** ![h0bbel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/h0bbel/32/22693_2.png) [@h0bbel](https://discourse.gohugo.io/u/h0bbel)\
**Post date:** [September 4, 2018, 9:03pm UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/2 "2018-09-04T21:03:11Z")

</div>

[Example post](https://vninja.net/2018/09/04/designing-risk-in-it-infrastructure/)

---

<div class="post-metadata">

**Author:** ![parsiya](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/parsiya/32/1218_2.png) [@parsiya](https://discourse.gohugo.io/u/parsiya)\
**Post date:** [September 5, 2018, 5:53am UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/3 "2018-09-05T05:53:42Z")

</div>

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

- [https://github.com/h0bbel/vninja/blob/master/content/post/designing-risk-in-it-infrastructure.md](https://github.com/h0bbel/vninja/blob/master/content/post/designing-risk-in-it-infrastructure.md)

You are passing the parameters independently:

```auto
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:

```auto
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](https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/twitter_cards.html) and adapt.

---

<div class="post-metadata">

**Author:** ![h0bbel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/h0bbel/32/22693_2.png) [@h0bbel](https://discourse.gohugo.io/u/h0bbel)\
**Post date:** [September 5, 2018, 7:00am UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/4 "2018-09-05T07:00:37Z")

</div>

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

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.

---

<div class="post-metadata">

**Author:** ![h0bbel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/h0bbel/32/22693_2.png) [@h0bbel](https://discourse.gohugo.io/u/h0bbel)\
**Post date:** [September 5, 2018, 7:41am UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/5 "2018-09-05T07:41:21Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![h0bbel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/h0bbel/32/22693_2.png) [@h0bbel](https://discourse.gohugo.io/u/h0bbel)\
**Post date:** [September 5, 2018, 8:25am UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/6 "2018-09-05T08:25:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![metawops](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/metawops/32/9959_2.png) [@metawops](https://discourse.gohugo.io/u/metawops)\
**Post date:** [December 29, 2019, 11:32am UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/7 "2019-12-29T11:32:03Z")

</div>

Hmmm. I also have problems with Twitter cards. [Here’s an example post](https://modular.metawops.blog/posts/moogfest-2019/) from my Hugo blog and [here’s the tweet](https://twitter.com/modularnotes/status/1211243774321582080) 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? 😳

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! 😊

---

<div class="post-metadata">

**Author:** ![metawops](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/metawops/32/9959_2.png) [@metawops](https://discourse.gohugo.io/u/metawops)\
**Post date:** [December 29, 2019, 12:42pm UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/8 "2019-12-29T12:42:07Z")

</div>

Okay, I found [this](https://gohugo.io/templates/internal/#twitter-cards) 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. 😞  
Is this something that could be added in a future Hugo release, please?

---

<div class="post-metadata">

**Author:** ![awhitford](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/awhitford/32/10375_2.png) [@awhitford](https://discourse.gohugo.io/u/awhitford)\
**Post date:** [January 16, 2020, 1:51am UTC](https://discourse.gohugo.io/t/solved-help-with-twitter-card-image/14067/10 "2020-01-16T01:51:30Z")

</div>

If you look at the [twitter\_cards template implementation](https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/twitter_cards.html#L22-L24), 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_:

```auto
[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.