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