如何让 Page/Post 精选图片显示在 Twitter 卡片上？雨果（学术主题）

Question

我一直难以让 Twitter 卡片用于我的 post 精选图片。 post url 的特色图片出现在 Facebook 和 Linkedin 上，但我无法使用 Twitter 卡片。

我已经尝试在学术 header 中查看 Twitter 卡片代码，并且还遵循了 Hugo 文档。我不确定它是否缺少或忽略了什么？任何帮助或建议将不胜感激。

我在 学术 header.html 部分 中找到了这段代码，但我仍然不确定为什么它不起作用：


  {{ $featured_image := (.Resources.ByType "image").GetMatch "*featured*" }}
  {{ $og_image := "" }}
  {{ $twitter_card := "summary_large_image" }}
  {{ if $featured_image }}
    {{ $og_image = $featured_image.Permalink }}
  {{ else if .Params.header.image }}
    {{ $og_image = printf "img/%s" .Params.header.image | absURL }}
  {{ else if .Site.Params.sharing_image }}
    {{ $og_image = printf "img/%s" .Site.Params.sharing_image | absURL }}
  {{ else if .Site.Params.avatar }}
    {{ $og_image = (printf "img/%s" site.Params.avatar) | absURL }}
    {{ $twitter_card = "summary" }}
  {{ else }}
    {{ $og_image = "img/icon-192.png" | absURL }}
    {{ $twitter_card = "summary" }}
  {{ end }}
  <meta property="twitter:card" content="{{ $twitter_card }}">
  {{ with .Site.Params.twitter }}
  <meta property="twitter:site" content="@{{ . }}">
  <meta property="twitter:creator" content="@{{ . }}">
  {{ end }}
  <meta property="og:site_name" content="{{ .Site.Title }}">
  <meta property="og:url" content="{{ .Permalink }}">
  <meta property="og:title" content="{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}">
  <meta property="og:description" content="{{ $desc }}">
  {{- with $og_image }}<meta property="og:image" content="{{ . }}">{{end}}
  <meta property="og:locale" content="{{ .Site.LanguageCode | default "en-us" }}">
  {{ if .IsPage }}
  {{ if not .PublishDate.IsZero }}<meta property="article:published_time" content="{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">
  {{ else if not .Date.IsZero }}<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
  {{ if not .Lastmod.IsZero }}<meta property="article:modified_time" content="{{ .Lastmod.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
  {{ else }}
  {{ if not .Date.IsZero }}<meta property="og:updated_time" content="{{ .Date.Format "2006-01-02T15:04:05-07:00" | safeHTML }}">{{ end }}
  {{ end }}

推特卡验证程序日志如下：

INFO:  Page fetched successfully
INFO:  18 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

然而，没有图像出现。非常感谢有关解决此问题的任何帮助或提示？

Answer 1

碰巧我遇到的问题是由于 Hugo 的 config.toml 文件中的 baseURL 不正确。有一次，我更正了这个错误，推特摘要卡开始正常出现了。

如何让 Page/Post 精选图片显示在 Twitter 卡片上？雨果（学术主题）

How to get Page/Post Featured Images to show on Twitter Card? Hugo (Academic Theme)

html

twitter

markdown

github

hugo