Hugo で OGP 設定

Hitoshi Arakawa | 2024/05/22 Wed 03:59

Hugo で Hugoplate というテーマを使ったサイトを作った。

Hugo に Hugoplate テーマをインストールする | 荒川仁志 公式サイト
https://hitoshiarakawa.com/blogs/2024/2024-05-09_installing-hugoplate-theme-on-hugo/

このサイトのブログ記事を X で共有すると、自動的に記事タイトルや画像が挿入される。これは OGP(Open Graph Protocol)と呼ばれるもので、SNS でリンクを共有したときにページのタイトルや画像、説明文などが表示される仕組みだ。

Hugoplate テーマではデフォルトで OGP が有効になっている。

OGP で表示される画像は、どのページの URL でも同じだ。その画像を変更することにした。

環境:
・macOS Ventura 13.5(英語環境)
・Hugo v0.119.0
・Hugo テーマ:Hugoplate

Hugoplate テーマでは /{プロジェクト名}/config/_default/params.toml[metadata] という項目で設定する。

そこを見ると、image = "images/og-image.png" が該当の画像だと分かる。

あるいは以下のサイトを利用することで、どの画像が使われているのかを確認できる。

OGP確認:facebook、twitter、LINE、はてなのシェア時の画像・文章を表示
https://rakko.tools/tools/9/

このサイトを利用することで、画像は以下の場所に保存されていると分かった。

/{プロジェクト名}/assets/images/og-image.png

これを差し替えるか、先程の params.toml でファイル名を書き換えるかすることで、OGP の画像を変更することができる。

参考:
Hugo 静的サイトジェネレーターブログを開設してみる⑥twitterカードを作成する #Twitter - Qiita
https://qiita.com/SakagamiKeisuke/items/64b2c5943b04acd0a4a9

HugoでOGPの設定をする · HikaTechBlog
https://miyahara.hikaru.dev/posts/20200319/

HugoテンプレートをOGPやTwitter Cardsに対応する
https://tosi-tech.net/2021/01/support-ogp-and-twitter-cards-on-hugo-template/

HUGOをtwitterCardに対応させる - GammaLab
https://gammalab.net/blog/c3r33mlnapd6q/

バスカヴィル家の犬 【新訳版】 シャーロック・ホームズ・シリーズ (創元推理文庫) | アーサー・コナン・ドイル, 深町 眞理子 | 英米の小説・文芸 | Kindleストア | Amazon
https://amzn.to/4bsGeVU