本記事について

OGPとは

ざっくりいうと、こういうのを各サービス・アプリケーションで表示してもらうための仕組みです。
以下はDiscordの例です。

この記事を書いた背景

OGPについては、意外と日本語での情報が少ないです
特にDiscordはあまり日本の業務シーンでは活躍していないからか、尚更少ないです
今回の要件としては「Discordのサムネイルである程度の情報を伝える」というものがあり、ここがインターネット上にも情報がなく、なかなかうまくいかず苦戦しました

開発

ソースコード(html)

基本的には、HTMLヘッダーにOGP専用のメタ情報を付与することで対応することができます。
サイトやサービスにより、専用のタグがあったりするみたいなので、要件に応じて確認してください。

<meta property="og:site_name" content="サイト名">
<meta property="og:url" content="URL">
<meta property="og:type" content="website">
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページ概要説明">
<meta property="og:image" content="サムネイル画像のURL">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">

用意する画像

色々なサイトを見ると、w1200*h630が推奨サイズのようです。
今回当方はサムネイル画像をページごとに自動で生成するようにしました。

Laravel + InterventionImage を使用して生成していますが、もし需要があるようでした記事にしたいと思います。

Discordにおける仕様について

実はDiscordでのOGPは、画像が大きく表示されるパターンと、小さく表示されるパターンがあります。
先述した 「サムネイルである程度の情報を伝える」 という要件から、どうしても大きい方で表示したかった訳です…。

小さいの

大きいの

Discordで何を基準に、どちらを選択しているのか？という情報が分からず、大きい方のサムネイルが表示されずに苦戦しました。
色々なサイトのURLをDiscordで表示したときにどうなるか確認し、それぞれのサイトのOGPメタ情報がどのように書かれているかなど調査を進めました。

結論

メタ情報に以下を追記することで、大きいサムネイルを表示することができました👏👏
Twitter用のメタ情報なのになぜ??と思いましたが･･･詳しいことは分かりません･･･。

<meta name="twitter:card" content="summary_large_image">

デバッグ

localhostのアドレスをDiscordにテストとして貼り付けても、アクセスできずに画像が表示できないため、開発・テストがうまくいきません。
そんな時は以下を使用させていただきましょう🤗🤗

Localhost Open Graph Debugger

↑ちなみにこれもOGPを使用してサムネイル表示されています。
神GoogleChrome拡張です。

localhostで拡張機能を起動するだけで、localhostのOGP情報（画像含む）のみを一時的にインターネットにUPしてくれて、URLを発行してくれます。

これで各サービスにURLを添付したときに、OGPを生成してくれますね👏👏

Discord Developer Portal Embed

Discordに投稿したときに生成されるOGPを疑似的に作成して確認することができます。
Discordでテスト用のサーバなどを作成して、実際にメッセージを投稿したりしなくても結果が確認できるため非常に便利です。
Discord以外でも同様のサービスが提供されていることが多いみたいなので、要件に応じて探してみてください。
※Localhost Open Graph Debuggerの画面の各サービスのアイコンを押すことでも利用できます

おわり

以上、Discordで大きいサムネイルを表示したい！という方の参考になれば幸いです🙂