動的なOGPを設定しよう

今年も早いものでもう11月に入ってしまいました。
去年のアドベントカレンダーで一つ後悔している部分があります。それはOGP画像を設定していなかったことです。
Adventarで記事のURLを貼ったときに何も表示されなくて悲しかった思い出があります。今年のアドベントカレンダーが来る前にOGP画像を設定していきます

What is OGP

リンクを貼ったときに、リンク先のページのタイトルや説明文、画像を表示するアレです。 TwitterやFacebookなどのSNSでリンクを貼るときや、Slackに共有するときにに表示される情報です。

OGPの設定

HugoでOGP用の画像を生成する手段としては調べたところ色々あったんですが、今回はHugoだけでやりたかったので実際にその方法を取られている方の記事を参考にしました。参考元

OGP画像の作成

今回の画像は、元の画像にタイトル/サイト名 をあわせて描画するという手段で作成されます。 そのため、元の画像をガッとGIMPで作りました。

関連ファイルの作成

今回は以下のファイルを作成しました。

  • layouts/_default/baseof.html
    • opengraph.html を書き換えたので変更を読み込むために元themeからコピーしてきた
  • layouts/partials/opengraph.html

確認

ローカルで確認するときはDevToolsのheadタグを探して設定されてる画像を確認するといい。 公開後に確認するときは、Facebook シェアデバッガー でURLを入力してスクレイピングされた情報を確認するといい。

閑話

HugoのバージョンあげたらテーマのAuthorBoxが死んだりしてちょっと困っていた。 Deprecatedになった機能と、移行先も書いてくれていたので割とすぐ移行できました。
閑話休題

おわり

やっぱり共有時に画像がつくと、しっかりしたサイトって感じがして良い。 今年のアドベントカレンダーの記事はどうしようかなぁ