本記事の概要
Hugo+BlowfishテーマでOGP画像を設定する方法を説明した初心者向け記事です。
前提
Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)
結論
基本的には各ページにfearture*.jpgといったようにサムネイルの画像を設定すると、OGP画像も反映していくれます。
(pngも可。以下同様)
TOPページ等でサムネを使わない場合は、params.toml内でdefaultSocialImageの設定を行えばよいです。
(サムネを付けない場合のデフォルトになる)
サムネイルとOGP
下記のBlowfish公式サイトでのサムネイルの記載が参考になります。
記事のサムネイル用のfeature～.jpgなどをOGPの画像として設定してくれます。
ページリソースを使う形なので、contentフォルダ内の対応するフォルダに配置すればよいです。
フォールバック用の画像について
もしも、ページによってサムネイルを付けない場合などは、デフォルトのOGP画像を設定しておくと良いでしょう。
config/_deafault/params.tomlで設定できます。
ビルドした後のサイト内のパスを記載する形になります。
defaultSocialImage = "img/featured_default.png" # used as default for social media sharing (Open Graph and Twitter)
上記の例では、サムネイルが無い場合のデフォルト用の画像として、
サイトのimg/featured_deafault.pngを指定しています。
間違えて/から始めないようにしましょう。
その場合うまく認識しない可能性があります。
さて、上記の場合、ビルド環境内のassets/img/featured_default.pngに画像を置いておく必要があります。
assetsフォルダは、Hugoから見た時のリソースファイル(Hugoの画僧縮小機能などを適用させたいファイル)を配置する箇所になります。
assetsフォルダに配置した内容は、ビルド時にサイト内の対応されたパスに配置されます。
また、フォールバックという性質上、対象のサイト全体を表すような内容にしておくと良いでしょう。、
OGP画像の確認方法
OGPが正しく表示されるか確認するためには、外部からそのサイトに自由にアクセスできる状態である必要があります。
つまり、hugo serverコマンドでローカルサーバーを叩ている状態で確認するのは難しいです。
(HTMLのビューアーで対応するタグがあることは確認できますが、視覚的にその見た目を確認することは困難です)
例えば、ブランチデプロイの際に、URLさえ知っていればどこからでもアクセスできるようにしておいて、以下サイトから「URLから確認」を利用すると視覚的に確認できます。
また、画像作成時に、作った画像がどのようにOGPで表示されるかについては「画像をアップして確認」を使うと良いです。
参考に、今回作ったサイトでの表示例を掲載します。
OGP画像の運用として
Blowfishテーマの場合は、各ページ内のリソースとしてfeature*.jpgという形で配置することで、OGP画像として認識されます。
そのため、ページによってfeature*.jpgを配置したりしなかったりすると、
- 配置している場合はその画像
- 配置していない場合はdefaultSocialImageの内容
となります。
そのため、可能な限りOGP画像を設定したいという場合は、全ページにfeeture*.jpgを置いておくと良いでしょう。
反対に、サイトを新規作成する際は、早い段階でdefaultSocialImageを設定しておき、必要に応じて各ページでサムネイルを設定することで、SNSにシェアした場合も見栄え良くすることが出来ます。
まとめ
- Blowfishテーマはfeature*.jpgを配置することで、OGPの対応も自動的に行ってくれます
- また、フォールバック用にdefaultSocialImageの設定もあります
- こちらを早めに設定しておくと、SNS共有時の見栄えが良くなります
- 各ページにサムネイルを設定する場合は、ページバンドルを使用するためcontentフォルダ内の対応するページのフォルダに画像を置けば良いです
- また、defaultSocialImage用の画像はassetsフォルダ内に配置すれば良いです