HugoのOGP対応コードの修正

 Hugoにおいて各ページがOGPに対応した出力をするよう設定を変更したが画像イメージ設定がいまいち気にいらないので設定がやりやすくなるよう改造した。通常の設定だとページヘッダ images: [ "/絶対パス.jpg"] のように記載するが,これを image: "相対パス" となるよう変更する。

参考にしたのはこのあたり。

Hugoの標準テンプレートでOGPとTwitterCardを設定する(ほか) | exlair.net

Hugoが標準で用意している Internal Template を利用して Google Analytics と OGP & Twitter Card の設定をします。

HugoでOGP(Facebook用のアイキャッチ画像)を設定する #hugo - My External Storage

Hugoで各記事にThe Open Graph protocol(OGP)を設定したときのメモ。 The Open Graph protocol http://ogp.me/

OpenGraphを処理するカスタムコードの作成

 OpenGraphを処理するカスタムコードを作成する。とはいえ,基本は標準のままなので,hugoの内部で定義されているOpenGraphの処理コードのコピーを明示的に配置する。

mkdir layout/partials
vi opengraph.html

opengraph.htmlは https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/opengraph.html の内容をコピー。その上で,コードを以下のように書き換える。

編集前:

{{ with $.Params.images }}{{ range first 6 . -}}
<meta property="og:image" content="{{ . | absURL }}" />
{{ end }}{{ else -}}

編集後:

{{ with $.Params.image -}}
<meta property="og:image" content="{{ $.Permalink | absURL }}{{ . }}" />
{{ else -}}

カスタムコードを参照するように変更する。

 次に作成したカスタムコードを参照するように各ページのヘッダの処理コードを変更する。

vi layouts/_default/baseof.html
vi layout/page/baseof.html

いずれもヘッダ処理部分を書き換える。

編集前:

{{ if .Site.Params.opengraph }}{{ template "_internal/opengraph.html" . }}{{ end }}

編集後:

{{ if .Site.Params.opengraph }}{{ partial "opengraph.html" . }}{{ end }}

確認

 これで自サイトでOGPを使うコードを作成するときに画像も出るようになったはず。サンプルを以下に示してみる。

多摩川サイクリングロード 100kmチャレンジ - shiden.JP

 2019年は体力の低下を払拭するために多摩川サイクリングロードを100km走るという目標を立てていた。ただし,結局昨年は走らずじまいだったが,年末年始のライドでやっと乗る感覚が分かってきた。そのため,本日100km走るのにチャレンジしてみることにした。