1. TOP
  2. コムセント 技術情報
  3. Discordでリンク共有した際に出る『OGPの左側のライン』について調べてみた

Discordでリンク共有した際に出る『OGPの左側のライン』について調べてみた

先日友達とDiscordで通話で雑談していた際、リンクが飛び交う場面がありまして、ふと埋め込みOGPエリアが気になったんです。

O.H

この左側のラインって何が基準で色付いてんのかなぁ

普通グレーっぽいラインが入るのですが、気になった時は白だったり青だったりが飛び交っていたので、珍しいな〜と思い調査してみました。

日本経済新聞のHPとCNNのHPのリンク共有時の参考画像

主要SNSはDiscord側が独自でつけている?

X(旧Twitter)、Youtube、Instagramなど一部主要SNSに関しては独自の埋め込みが使われている場合があります。
例えばX(旧Twitter)であれば、共有したポストのユーザーアイコンだったり、ポスト内に画像があればそれの1枚目を表示させたりしてくれますし、Youtubeであれば、投稿者のアイコンはもちろん、動画を埋め込んで表示してくれます。
こちらに関しては確認した限りOGP内容とはかなり違うため、左側のラインに関してはDiscord側が独自で設定している可能性がありそうです。

O.H

TwitterからXに変わって、一時期埋め込まれないバグがあったことがありましたが、直された際左側のラインのカラーが水色のままでfixされましたしね

どうやらmetaタグのtheme-colorが関係している?

自分一人のサーバーを立てて、様々なサイトのリンクをペタペタと貼っていく地道な作業を繰り返し、左側のラインに色がついたサイトのheadタグ内をくまなく探して見つけた共通点、それが「metaタグのtheme-color」でした。

O.H

metaタグのtheme-colorって昔に記事にした気が…!?

過去の記事はこちら

サイトのテーマカラーを設定することでノッチやアドレスバーのカラーを変更できるものです。
Discordではこのカラーを取得し、左側のラインカラーを変更しているようで、設定してないサイトではグレーになるということがわかりました。
さらに調査したところ、全サイトで必ず反映するわけではなく、Discord 側のキャッシュやユーザーのテーマ設定によって、無視されるパターンも観察されたようです。

ちなみに弊社コムセントのHPはtheme-colorに#ffffffが設定されているため白色でした。

さいごに

いかがでしたか?
サイトの雰囲気がリンクを共有した時点で伝わる仕組みは嬉しいですよね。
みなさんもサイト設定を見直してみてはいかがでしょうか。

※この記事は筆者の観察と公開情報ベースで整理したものです。Discordの仕様は将来的に変わる可能性があります、ご了承ください。

エンジニア / O.H

主にHTML、CSS、JavaScriptを使用してフロントエンドのコーディングを担当。プロジェクトによってはGoogle Apps Scriptを用いた開発や、CodeIgniterやVue.jsのフレームワークを使用したバックエンドも請け負う。

このメンバーの記事一覧へ