ごちゃごちゃいじって、og:imageを設定した。Xだとこんな感じ(link)。
図1: Xでの表示例
ローカル環境でのOGPのテストはMSの開発者向けページが参考になった。
- Localhost Open Graph Debugger: ngrokのような使い勝手でmeta tagを一時的にホストするChrome Extension。ホストされたページは15分後に自動で削除される。上のMSのページで紹介されているのとは違うが、こっちの方が安定していた。
- Open Graph Debugger/ Simulator: XやFBにログインせずに、各ページでのカードの表示を確認できるサイト。1.で発行されたURLを貼り付けると閲覧できる。
この対応をしようと思ったのは、Feedly(RSSリーダー)でこのサイトを見た時、特に何も対応していないのにサムネイルが表示されていたのを目にしたから。どうやら<img>やYouTubeのサムネイルから自動で引っ張ってきているらしい。
図2: FeedlyのMagazine View
同じことをこのサイトのPostsでもやってみた。
で、同じロジックを使ってog:imageを設定するようにした、という経緯。ちなみに、このサイトで使用しているテンプレート(PaperMod)だと、front matterにcoverとかimagesとかを設定すればog:imageは挿入されるようになっている(該当のコード)。自分はいちいちこの手のパラメータを設定したくなかったってだけ。