优化 Hugo 模板里的 og:image meta 标签

其实我用这个标签，主要是给分享到 twitter 的时候能够让 twitter 自动抓取时生成的 card 带有缩略图。

bookmarklet 也一并分享一下吧：

javascript:(function(){var D=640,A=480,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,url,text; if(C>A){G=Math.round((C/2)-(A/2))}; url=encodeURIComponent(window.location); text=encodeURIComponent(window.getSelection?window.getSelection().toString():(document.selection?document.selection.createRange().text:'')); if(text==''){ window.alert('Please, select text on the page first');}else{ window.open('http://twitter.com/share?url='+url+'&text='+text,'','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');}}());

模板

关键的 meta 标签主要是 <meta name="twitter:card" content="summary" />， twitter 官网有提供文档： https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#started

og: 开头的几个 meta 是 Open Graph protocol 要求的东西，twitter 能理解它。然后 twitter 会根据 og:image 来自动抓取图片用于 card 显示。

其实也没啥好说的，我写这个文章的原因在于，原来我这个模板的 og:image 一直是不工作的。因为我其实主要是在用 Hugo 的 Page bunlde 来写东西，我认为这是最理想的写作方式，主要是你的文章图片会在文章自己的子目录，不会乱。

原来的模板代码是这样的：

<meta property="og:image" content="{{ .Param "cover" | absURL }}">

我改进之后，一个是修复了对于 Page bundle 的兼容性问题，另一个是，如果没有取到 cover 图，就自动取文章里的第一张图片。相关代码如下：


<!-- Twitter Card -->
<meta name="twitter:card" content="summary" />
{{ with $.Site.Params.Twitter.site }}
  <meta name="twitter:site" content="{{ $.Site.Params.Twitter.site }}" />
{{ end }}
{{ with $.Site.Params.Twitter.creator }}
  <meta name="twitter:creator" content="{{ if .IsHome }}{{ $.Site.Params.Twitter.creator }}{{ else if isset .Params "authortwitter" }}{{ .Params.authorTwitter }}{{ else }}{{ .Params.Author }}{{ end }}" />
{{ end }}
<!-- OG data -->
<!-- <meta property="og:locale" content="{{ $.Site.Language.Lang }}" /> -->
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
<meta property="og:title" content="{{ if .IsHome }}{{ $.Site.Title }}{{ else }}{{ .Title }} :: {{ $.Site.Title }}{{ end }}">
<meta property="og:description" content="{{ if .IsHome }}{{ $.Site.Params.Subtitle }}{{ else if .Description}}{{ .Description | plainify }}{{ else }}{{ .Summary | plainify }}{{ end }}" />
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:site_name" content="{{ $.Site.Title }}" />
{{ if not .IsHome }}

  {{ if isset .Params "cover" }}
      <!-- be aware that in this context, .RelPermalink is $.Page.RelPermalink -->
      {{ printf "<!-- .ResourceType=%#v .File.LogicalName=%#v .RelPermalink=%#v .Permalink=%#v .Params.cover=%#v -->" .ResourceType $.Page.File.LogicalName .RelPermalink .Permalink .Params.cover | safeHTML }}
      {{ if eq "index.md" $.Page.File.LogicalName }}
        <meta property="og:image" content="{{ printf "%s%s" .Permalink .Params.cover }}">
      {{ else }}
        <meta property="og:image" content="{{ .Param "cover" | absURL }}">
      {{ end }}
  {{ else }}
      <!-- get first image as featured image in post if no cover is set -->
      {{ with (index (.Resources.ByType "image") 0) }}
        <!-- be aware that in this context, .RelPermalink is resource.RelPermalink -->
        {{ printf "<!-- .ResourceType=%#v .File.LogicalName=%#v .Resources.ByType image .RelPermalink=%#v .Permalink=%#v -->" .ResourceType $.Page.File.LogicalName  .RelPermalink .Permalink | safeHTML }}
        <meta property="og:image" content="{{ .Permalink }}">
      {{ end }}
  {{ end }} 

{{ else }}

  {{ if isset $.Site.Params "favicon" }}
    <meta property="og:image" content="{{ $.Site.Params.favicon | absURL }}">
  {{ else }}
    <meta property="og:image" content="{{ printf "img/favicon/%s.png" $.Site.Params.ThemeColor | absURL }}">
  {{ end }}

{{ end }}
<meta property="og:image:width" content="2048">
<meta property="og:image:height" content="1024">

Refs

https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#started

https://ogp.me/#metadata

https://blog.hubspot.com/marketing/open-graph-tags-facebook-twitter-linkedin

https://neilpatel.com/blog/open-graph-meta-tags/