og:imageをつけるのやった

昨日ブログをシュッと作ったけどtheme以外のデコレーション以外は何もやってなかったので試しにTwitterでシェアした時に良い感じになるようにog:imageを付けようとしてみた。Twtiter Cardsはthemeがデフォで対応していなかったのでいったん見送りで。

og:image自体はHugoの持っているテンプレートで簡単に対応出来るようになっているらしく自分が使っているPaperというthemeも既に対応済みだった。あとは各記事のFront matterでimagesでファイル名を指定してあげるだけっぽい。

画像を置くディレクトリもassets, data, staticとそれっぽい名前のやつが何個かあるけど、Pipelineで処理するならassetsでそうじゃなければstaticに置くべきっぽい。

assets Stores all the files which need be processed by Hugo Pipes. Only the files whose .Permalink or .RelPermalink are used will be published to the public directory. Note: assets directory is not created by default.
static Stores all the static content: images, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. A good example of using the static folder is for verifying site ownership on Google Search Console, where you want Hugo to copy over a complete HTML file without modifying its content.

https://gohugo.io/getting-started/directory-structure/

と、ここまで調べたところで外部サービスに雑に画像おいとけば良いじゃんという気持ちになった。というのもiPhoneから適当な画像を引っ張ってこようとした時に単にAirDropをしただけだとHEIC形式になってしまって自分でjpegに変換してから・・・みたいなのを考えるのが面倒になった。

画像をホストする先として、@r7kamuraのこの記事を参考に自分もしばらくImgurを使ってみることにした。 https://r7kamura.com/articles/2020-11-09-imgur

og:imageでは無理だけど、記事内の画像に関してはモダンなブラウザだと最近はCSSだけで画像のクロップ処理が出来るみたい（すごい）なので、著しくスケールが合わない限りは事前のリサイズ処理もいらない気がする。

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

こんな感じでiPhoneで縦向きに撮影した画像を400x400で表示できる。

<figure>
    <img src="https://i.imgur.com/Zmlozmn.jpg"
         alt="A nearby grafitti"
         width="400px"
         height="400px"
         style="object-fit: cover" />
    <figcaption> 近所の壁に生えてるBanksyの絵</figcaption>
</figure>

ただしhtmlタグをHugo(v0.80)でmarkdown内で使うためにはunsafeな状態になるのを許可する必要があった。

[markup]
    [markup.goldmark.renderer]
      unsafe = true

Hugoもそうだけど現代社会は本当に色々と敷居が低くなっていてすごい。