外部リンクのOGPをカード表示

NotionやSNSだとデフォルトで対応している、外部リンクのOGP情報を読んでカードとして表示するのを、このサイトでも対応してみた。

1. Hugoのresources.GetRemoteを使い、OGPのメタタグ取得する
2. 取得したOGP情報を、Xのカードのような見た目で並べるHTML/CSSを書く
3. {{< embed url="link to extenal site" >}}というshortcodeで呼び出せるようにする

見た目は、例えば先日のポスト、トランプ錯乱症候群参照。

というか、こういうHugo pluginを既に誰か書いてそうなんだけど、テキトーに検索した感じ見つからなかった。OpenGraph.ioというサービスを使え、というフォーラムでのコメントは見かけた。

表示させること自体は簡単だけど、実際に動かすと色々とめんどくさい。デバッグがやや人力。

• 動的生成のサイト: MediumやNotionなどいわゆるSSR系¹は一度レンダリングさせたものを取得する必要があるため、resource.GetRemoteでは取得できない。直接OPGを取得するスニペットを書いて回避
• 認証が必要なサイト: OGP自体は公開されているが、resource.GetRemoteのような手段でソースアクセス時に認証エラーを返すサイト。どのサイトもTerm of useを見る限り非商用であればOGPの取得自体は問題なさそうなので、上で作ったスニペットで回避²。

Gistにあげておいた。

文が長い場合に"…“で省略するのは、イマドキはCSSで行数指定できるのを全く知らなかった。

• text-overflow: overflow, white-spaceと組み合わせて、ボックスをはみ出した時の表示を指定する。Chrome1(2008)、Safari1.3(2005)からサポートされている古株。
• line-clamp: 何行まで表示するかを指定する。Webkit系が先行して実装。-webkit-line-clampであればSafari5(2010)、Chrome6(2010)からサポートされている。