wheatandcatの開発ブログ

React Nativeで開発しているペペロミア & memoirの技術系記事を投稿してます

slackにサムネイル画像を表示させる方法

slackにURLを貼ったら↓みたいな感じで寂しかったので、ちょっと調べてみました

f:id:wheatandcat:20190503205125p:plain

OGPを設定する

digitalidentity.co.jp

OGPというやつを設定するとURLが展開されて表示されるらしい

ということで、さっそく↓を追加

https://github.com/wheatandcat/PeperomiaWebSite/blob/master/public/index.html#L33-L44

    <meta property="og:type" content="website" />
    <meta
      property="og:description"
      content="ペペロミアは簡単操作で予定を管理できるアプリ"
    />
    <meta property="og:title" value="ペペロミア" />
    <meta property="og:site_name" content="ペペロミア" />
    <meta
      property="og:image"
      content="https://firebasestorage.googleapis.com/v0/b/peperomia-196da.appspot.com/o/web%2Fthumbnail.png?alt=media&token=c8a2cc87-3818-403d-a0d4-d9e7b777d414"
    />
    <meta property="og:url" content="https://peperomia.app" />

こんな感じになりました f:id:wheatandcat:20190503212209p:plain

基本的には、この3つを設定すれば表示されるみたい

  • og:title
  • og:description
  • og:image