HugoのOGP対応コードの修正

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

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

<meta charset="utf-8">index, followwidth=device-width,initial-scale=1,maximum-scale=5Hugo 0.101.0Hugo 標準テンプレートで OGP・TwitterCard・Google Analytics を設定するHugoが標準で用意している Internal Template を利用して Google Analytics と OGP & Twitter Card の設定をします。articlehttps://fand.jp/hugo-internal-templates-ogp-and-twitter-card/technologies2019-05-07T04:06:00+09:002021-11-14T00:00:00+09:00Fand.jp Blogsummary_large_imagehttps://fand.jp/tcard/b12ac6db-856f-49a7-bbe9-3651346d0e59/2019-05-07-b12ac6db-856f-49a7-bbe9-3651346d0e59.webp?211114000000https://fand.jp/tcard/b12ac6db-856f-49a7-bbe9-3651346d0e59/2019-05-07-b12ac6db-856f-49a7-bbe9-3651346d0e59.webp?211114000000Hugo 標準テンプレートで OGP・TwitterCard・Google Analytics を設定するHugoが標準で用意している Internal Template を利用して Google Analytics と OGP & Twitter Card の設定をします。Hugo 標準テンプレートで OGP・TwitterCard・Google Analytics を設定するHugoが標準で用意している Internal Template を利用して Google Analytics と OGP & Twitter Card の設定をします。2019-05-07T04:06:00+09:002021-11-14T00:00:00+09:002638https://fand.jp/tcard/b12ac6db-856f-49a7-bbe9-3651346d0e59/2019-05-07-b12ac6db-856f-49a7-bbe9-3651346d0e59.webpHugo, text/html; charset=utf-8width=device-width,minimum-scale=1,maximum-scale=1Hugo,SEO,OGP,FacebookHugo 0.108.0https://budougumi0617.github.io/logos/ogp.pngsummary_large_imagehttps://budougumi0617.github.io/logos/ogp.pnghttps://budougumi0617.github.io/2019/01/05/set-ogp-in-hugo-blog/articleHugoでOGP(Facebook用のアイキャッチ画像)を設定する #hugo - My External Storage<meta property="og:description" content="Hugoで各記事にThe Open Graph protocol(OGP)を設定したときのメモ。 The Open Graph protocol http://ogp.me/ "/>HugoでOGP(Facebook用のアイキャッチ画像)を設定する #hugo - My External Storage<meta name="twitter:description" content="Hugoで各記事にThe Open Graph protocol(OGP)を設定したときのメモ。 The Open Graph protocol http://ogp.me/ "/>@budougumi0617budougumi0617.github.io@budougumi0617

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を使うコードを作成するときに画像も出るようになったはず。サンプルを以下に示してみる。

<meta charset="UTF-8">width=device-width, initial-scale=1IE=edge多摩川サイクリングロード 100kmチャレンジ<meta property="og:description" content="　2019年は体力の低下を払拭するために多摩川サイクリングロードを100km走るという目標を立てていた。ただし，結局昨年は走らずじまいだったが，年末年始のライドでやっと乗る感覚が分かってきた。そのため，本日100km走るのにチャレンジしてみることにした。" />articlehttps://shiden.jp/blog/20200116_tamagawa/https://shiden.jp/blog/20200116_tamagawa/thumbnail.jpg2020-01-16T17:00:00+09:002020-01-16T17:00:00+09:00summaryhttps://shiden.jp/blog/20200116_tamagawa/thumbnail.jpg多摩川サイクリングロード 100kmチャレンジ<meta name="twitter:description" content="　2019年は体力の低下を払拭するために多摩川サイクリングロードを100km走るという目標を立てていた。ただし，結局昨年は走らずじまいだったが，年末年始のライドでやっと乗る感覚が分かってきた。そのため，本日100km走るのにチャレンジしてみることにした。"/>