9

I'm trying to set up a template for generating Twitter Cards in blogdown. It put the following in layouts/partials/twitter-card.html:

<meta name="twitter:site" content="@myname">
<meta name="twitter:creator" content="@myname">
{{ if .IsPage }}
<meta name="twitter:description" content="{{ .Summary }}" />
<meta name="twitter:title" content="{{ .Title }}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="{{ .Params.image }}" /> {{ else }}
<meta name="twitter:title" content="{{ .Site.Title }}" />
<meta name="twitter:description" content="{{ .Description }}" /> {{ end }}

And the following in layouts/partials/head.html:

{{ partial "twitter-card" . }}

In a given blogpost -- foo.Rmd -- I then put this in the YAML:

image: "static/post/foo/figure-html/some_image.png"

When I let hugo generate a post everything works fine and I get:

<meta name="twitter:image" content="static/post/fixed-points_files/figure-html/some_image.png" />

However, when I preview my Twitter card the picture doesn't show up. I presume I would have to set a different path in the YAML front matter, but I can't find any documentation on what the path format should be, and all tutorials use absolute urls in their examples.

user2987808
  • 1,387
  • 1
  • 12
  • 28

2 Answers2

16

Twitter cards do not support relative paths, and you have to use a fully-qualified HTTP(S) URL in the image tag. This is described in the troubleshooting post.

Andy Piper
  • 11,422
  • 2
  • 26
  • 49
0

I recommend you to use an absolute URL in this case:

image: "/post/foo/figure-html/some_image.png"

Note you should remove the directory name static (Why?).

Yihui Xie
  • 28,913
  • 23
  • 193
  • 419
  • with Hugo Academic `serve_site()` converts a `baseurl` like `"https://strimas.com/"` to just `"/"`, which breaks the Twitter card. Given this, how do you suggest we get absolute paths to images in our Twitter cards using `blogdown`? – Matt SM Mar 22 '20 at 14:02
  • worth noting that `build_site()` uses the correct `baseurl` and the Twitter cards work, until you use `serve_site()`, which breaks them again – Matt SM Mar 22 '20 at 14:03
  • made a question for this here: https://stackoverflow.com/questions/60807293/blogdown-serve-site-removes-absolute-image-paths-for-twitter-cards – Matt SM Mar 23 '20 at 02:40